Youtap Tech Indonesia
Youtap Tech Indonesia
Breadcrumbs

Colour styles

Version History

Version

Date

Comment

Current Version (v. 1)

Oct 03, 2023 01:34

@Unknown user

Introduction of the area WORK IN PROGRESS

Colour is used to express style and communicate meaning. This page includes the main colours, their specifications and application throughout the app.

The colours here are all customisable and defined by the client.

This page serves as a reference point on how to use the different colour types and when to use them.

The following is a table of the elements included on this page:

 

Relevant Figma

YouTap - Colour Scheme - Light Customisable

https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?node-id=71%3A13752&t=9iJWk1QINAQaSjYK-1

YouTap - Colour Scheme - Light Customisable

https://www.figma.com/file/F1fNT99VGTJHJ1jAnjFTn6/Youtap-Style-guide-V1.0.2023?node-id=71%3A14140&t=9iJWk1QINAQaSjYK-1

01. Primary colours CUSTOMISABLE

A primary color is the color displayed most frequently across your app's screens and components.

Specifications

Label

Visual reference only

(YouTap colours)

Hex-Code

Opacity %

primary
Screenshot 2023-04-06 at 3.01.49 PM.png


#000F55

100%

primary-80
Screenshot 2023-04-06 at 3.04.25 PM.png

#333F77

100%

primary-60
Screenshot 2023-04-06 at 3.07.56 PM.png


#666F99

100%

primary-40
Screenshot 2023-04-06 at 3.08.17 PM.png

#999FBB

100%

primary-20
Screenshot 2023-04-06 at 3.08.48 PM.png

#CCCFDD

100%

primary-80T
Screenshot 2023-04-06 at 3.04.25 PM.png

#000F55

80%

primary-60T
Screenshot 2023-04-06 at 3.07.56 PM.png

#000F55

60%

primary-40T
Screenshot 2023-04-06 at 3.08.17 PM.png

#000F55

40%

primary-20T
Screenshot 2023-04-06 at 3.08.48 PM.png

#000F55

20%

Application and Usage

PRIMARY
Fixed

  • CTA

  • Subheadings

  • Intractable Icons

  • Notifications

PRIMARY - Tones
Customisable

  • 80

  • 60

  • 40

  • 20

To be used for:

  • Information hierarchy

  • To meet accessibility compliance readability of AA standard of WCGA.2

Universal (do not apply to Icons)

PRIMARY - Opacity

  • 20T customisable

  • 40T fixed

  • 60T customisable

  • 80T customisable

  • 20% Button, and other intractable UI highlighting

  • 40% Component + Dedicated opacity for dual tone icons

  • 60% Universal (do not apply to Icons)

  • 80% Special case of copy content TBC (do not apply to Icons)

02. Secondary colours CUSTOMISABLE

A secondary colour provides more ways to accent and distinguish your product. Having a secondary colour is optional, and should be applied sparingly to accent select parts of your UI.

If you don’t have a secondary colour, your primary colour can also be used to accent elements.

Specifications

Label

Visual reference only (YouTap colours)

Hex-Code

Opacity %

secondary1
Screenshot 2023-04-06 at 3.37.21 PM.png

#6D4DC9

100%

secondary1-80
Screenshot 2023-04-06 at 3.39.38 PM.png

#A8A2F3

100%

secondary1-60
Screenshot 2023-04-06 at 3.40.00 PM.png

#BEB9F6

100%

secondary1-40
Screenshot 2023-04-06 at 3.40.22 PM.png

#D3D1F9

100%

secondary1-20
Screenshot 2023-04-06 at 3.40.45 PM.png

#E9E8FC

100%


secondary2
Screenshot 2023-04-06 at 3.43.34 PM.png

#E9844C

100%

secondary2-80
Screenshot 2023-04-06 at 3.44.05 PM.png

#ED9D70

100%

secondary2-60
Screenshot 2023-04-06 at 3.44.29 PM.png

#F2B594

100%

secondary2-40
Screenshot 2023-04-06 at 3.44.57 PM.png

#F6CEB7

100%

secondary2-20
Screenshot 2023-04-06 at 3.45.17 PM.png

#FBE6DB

100%


secondary3
Screenshot 2023-04-06 at 3.48.36 PM.png

#BFCFF2

100%

secondary3-80
Screenshot 2023-04-06 at 3.48.55 PM.png

#CCD9F5

100%

secondary3-60
Screenshot 2023-04-06 at 3.49.11 PM.png

#D8E2F7

100%

secondary3-40
Screenshot 2023-04-06 at 3.49.26 PM.png

#E5ECFA

100%

secondary3-20
Screenshot 2023-04-06 at 3.49.40 PM.png

#F2F5FC

100%

Application and Usage

Secondary colours are utilised to:

Enhance the primary colour palette and provide visual interest.

  1. Establish a visual hierarchy and guide users' attention.

  2. Maintain brand consistency and align with the brand's visual identity.

  3. Convey meaning and indicate different states or functional elements.

  4. Add variety and delight to the design, making it more engaging.

Secondary colours contribute to a visually pleasing and intuitive user experience by complementing the primary colours, creating hierarchy, reinforcing branding, providing functional indicators, and adding visual appeal.

SECONDARY ONE

  • Highlighting important information relevant to the experience. Such as:

    • Selected controls

    • Sliders

    • Switches

  • Reminding information to the users such as:

    • Summary of your inputs

    • Changes/Actions taken as notification

    • Active links

    • Progress bars

SECONDARY TWO

  • Alerting colour to differentiate with app’s tonality. Such as

    • Error message

    • Error notification

SECONDARY THREE

  • Subtle highlighting to enhance the presence of information. Such as

    • Highlight icons

    • Highlighting supporting icons.

Do not use as main colour to present information e.g.
Main colour for icons or text content.

03. Tertiary colours CUSTOMISABLE

Tertiary colours are used to add more variety to the amount of colours that can be used. These are used for adding depth and should be only used as an emphasis to primary or secondary colours.

Specifications WORK IN PROGRESS

Label

Visual reference only

(YouTap colours)

Hex-Code

Opacity %

tertiary-black
Screenshot 2023-04-06 at 4.01.47 PM.png

#000000

100%

tertiary-black-80
Screenshot 2023-04-06 at 4.02.04 PM.png

#333333

100%

tertiary-black-60
Screenshot 2023-04-06 at 4.02.17 PM.png

#666666

100%

tertiary-black-40
Screenshot 2023-04-06 at 4.02.38 PM.png

#999999

100%

tertiary-black-20
Screenshot 2023-04-06 at 4.03.10 PM.png

#CCCCCC

100%


tertiary-white
Screenshot 2023-04-18 at 10.53.44 AM.png

#FFFFFF

100%


tertiary-neutral
Screenshot 2023-04-18 at 10.55.25 AM.png

#F2F4F5

100%


tertiary-grad -rad
Colour.png


Opacity of the primary or secondary:
40%
100%

100%

tertiary-grad -lin
Colour.png


Opacity of the primary or secondary:
20%
100%

100%

tertiary-error
Screenshot 2023-04-17 at 2.13.18 PM.png

#CC142B

100%

Application and Usage

Tertiary colours are best for:

TERTIARY BLACK

  • Page heading

  • Body copy contents

  • Back navigation

  • Subheading

  • Input/selection field boarders (UI boarder)

TERTIARY BLACK

  • 80

  • 60

  • 40

  • 20

  • Inactive states

  • Supplementing copy content

TERTIARY Gradient

Radius

  • Universal visual background for UI and page

  • Must comply AA contrast ratio when used with Icon or text.

  • DO NOT USE IN THE CASE OF DISRUPTING DESIGN EXPERIENCE

TERTIARY Gradient

Linear

  • Universal visual background for UI and page

  • Must comply AA contrast ratio when used with Icon or text.

  • DO NOT USE IN THE CASE OF DISRUPTING DESIGN EXPERIENCE

Overarching considerations

Accessibility considerations TO DO

WCAG2.0 - AA Standard for Accessibility

Overall all colours should follow the WCAG2.0 guidelines to meet AA standard.

WCAG2.0 Guidelines here

For colours specifically, follow the guidelines below:

1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (Level AA)

The following shows some examples on what colours are accessible and which ones are not


Customisation options

The colours are fully customisable. Here are some guidelines that can be shared with the client to support them in ensuring that the colour contrast is sufficient and accessible for their customers.

  1. Clients are to provide following categories of colours as minimum materials for reskin:

    • Primary colour:
      Main colour for hand CTAs

    • Secondary 1:
      Supplementing primary colour that will be used for important indication or interactions which support the main experience users are currently going through.

    • Secondary 2:
      Contrasting colour to the primary colour which can be used for conflicting informations

    • Secondary 3:
      Lighter colour scheme in relation to Primary which is not same colour but within similar spectrum of colours

    • Neutral: Optional override which is supporting white pallets - Purpose is to differentiate frame or UI to background colour with subtle difference to not obstruct information.


Notes:

  1. Introduction overview:

  2. Specs: Details of the UI value

    1. Hex values -

    2. Types -

    3. Graphical Collection of the colour schemes - Attach as images -

  3. Application and usage

    1. Table format defining standard application for each of colours

    2. Figma links/thumbnails for example of the screens

  4. Accessibility

    1. Colour combinations -design it

  5. Customisation

    1. Template example of screens + components to test contrast ratio

    2. Customisation to meet AA standard for any customisation

    3. Statement overviewing method of colour customisation via developer