Colors#
Brand Colors#
- Name
- Brand lime green
- Identifier
- green-100
- HEX Code
- #C3F500
- Name
- Brand accent green
- Identifier
- green-700
- HEX Code
- #196351
- Name
- Brand dark green
- Identifier
- green-800
- HEX Code
- #0A5041
Semantics#
Each hue is assigned a primary task in Tinka's design system. It is an extension of the categories to help designers picking the right colour to use in the context of consistent user interface design.
- Green
- Brand, Positive
- Blue
- Actionable
- Red
- Critical
- Yellow
- Attention-needed. Highlighted.
- Purple
- Special
- Grey
- Generic, Interactable
- Stone
- Generic, Interactable
All colors and their HEX Codes#
The following table lists out the entire UI color swatches in the design system.
- green
Positive, Tinka brand
- 50
- #F5FDD6
- 75
- #DCF96B
- 100
- Brand lime green#C3F500
- 150
- #B1E70A
- 200
- #9ED813
- 300
- #80BF24
- 400
- #61A734
- 500
- #428F44
- 600
- #227555
- 700
- Brand accent green#196351
- 800
- Brand dark green#0A5041
- 900
- Brand super dark green – business/professional#063128
- grey
Neutral
- 50
- #F5F5F5
- 75
- #E6EBE6
- 100
- #D7E1D7
- 150
- #C6D0C6
- 200
- #B4BEB4
- 300
- #A5B1A5
- 400
- #8C998C
- 500
- #768376
- 600
- #606B60
- 700
- #4D564D
- 800
- #394039
- 900
- Recommended Text Color on Light Surfaces#282C28
- stone
Neutral
- 50
- #FAF8F4
- 75
- #F5F2E9
- 100
- The beige that will go well with the brand green shades#F0EBDE
- 150
- #DDD9CB
- 200
- #C9C6B8
- 300
- #B2AEA0
- 400
- #999688
- 500
- #837F71
- 600
- #6B685B
- 700
- #565349
- 800
- #403E36
- 900
- #2C2B26
- red
Critical
- 50
- #FFF7F1
- 100
- #FFD9B6
- 200
- #FFB777
- 300
- #FF9235
- 400
- The red defined in the brand book#FF730B
- 500
- #E34A00
- 600
- #C52E00
- 700
- Recommended Readable Error Message on Light Surfaces#A51800
- 800
- #800900
- 900
- #5D0300
- yellow
Alert, highlight
- 50
- #FFFEE5
- 100
- #FFFFC7
- 200
- #FDFF8F
- 300
- #FEFF41
- 400
- #FFF40D
- 500
- The yellow that will go well with the brand green shades#FFE600
- 600
- #D1AA00
- 700
- #A67B02
- 800
- #895F0A
- 900
- #744E0F
- blue
Actionable
- 50
- #F4FAFE
- 100
- The pastel blue that will go well with the brand green shades#D7EBFA
- 200
- #9CCCE7
- 300
- #72B6D9
- 400
- #4E9FC6
- 500
- #4186A9
- 600
- #346E8B
- 700
- #285870
- 800
- #1E4254
- 900
- #142E3A
- purple
Special
- 50
- #FEF8FE
- 100
- The pastel purple that will go well with the brand green shades#EAD6EA
- 200
- #D8BED9
- 300
- #C3A4C6
- 400
- #AE8AB3
- 500
- #9A71A0
- 600
- #86578D
- 700
- #72407A
- 800
- #5C2866
- 900
- #461550
Grained Colours#
The brand book also defined colours with grainy effects.
You can use them in the marketing materials. But we are still researching them for UI design.
Current Status: Grained Colors