Direct Group — Colour Tokens

5 brand schemes · 4 status schemes · primitives · gradients

Brand Schemes

Barevná schémata pro brandové plochy a komponenty.

Light
Brand
Background
#C4E9DC
Background light
#FFFFFF
Content primary
#004033
Content secondary
#006B55
Heading
#C4DE00
Helper
#668C85
Forms hover / btn hover
#D1F3E7
Forms outline
#006B55
Primary
Secondary
Tertiary
Green Light
Brand
Background
#EAF3A3
Background light 2
#F9FCE2
Bg multiply
#D4E48E
Content primary
#004033
Content secondary
#417523
Heading / Outline dark
#C4DE00
PDF background
#F3F9C5
Primary
Secondary
Tertiary
Green Default
Brand
Background / Outline
#C4DE00
Outline light
#EAF3A3
Outline dark
#006B55
Content primary
#004033
Content secondary
#215A2B
Heading
#C4DE00
Helper
#668C85
Primary
Secondary
Tertiary
Green Dark
Brand — primary
Background / Outline
#004033
Content primary
#F9FCE2
Content secondary
#EAF3A3
Heading / Outline light
#C4DE00
On light — content primary
#004033
On light — content secondary
#417523
Primary
Secondary
Tertiary
Highlight
Brand — promo / upsell
Background / Outline / Heading
#8645FF
Background light 2
#F6EFFB
Bg light 2 multiply
#CDC59A
Content
#F9FCE2
On light — content
#5E0E82
Stepper past
#DECCFF
Primary
Secondary
Tertiary

Status Schemes

Stavová schémata — použití napříč všemi brand schématy.

Success
Status
Background / Outline / Heading
#6AE851
Outline dark
#34A415
Content primary
#165315
Content secondary / Helper
#257C15
Forms bg / Btn tertiary focus
#D3FFC5
Forms hover
#BDFFA8
Primary
Secondary
Tertiary
Warning
Status
Background / Outline / Heading
#FFB956
Background light 2
#FFCB80
Content primary / Helper
#6D1F00
Content secondary
#9E4600
Forms bg / Btn secondary bg
#FFEED5
Forms outline / Btn sec outline
#CE6E00
Primary
Secondary
Tertiary
Error
Status
Background / Outline / Heading
#D02B1D
Content
#F9FCE2
Helper / On light primary
#A11D14
On light secondary
#D02B1D
Forms bg / Btn tertiary focus
#FFF3F1
Forms hover / Stepper past
#FFDCD9
Primary
Secondary
Tertiary
Disabled
Status — universal override
Content / Helper
#668C85
Background
#CCD9D6
Outline / Btn content
#809F99
Btn background
#CCD9D6
Btn background secondary
#F2F5F5
Primary
Secondary
Tertiary

Specific & Cross-scheme

Focus
#006B55
dark-green/700
Grey
#B2C6C2
greyscale/200
Grey dark
#809F99
greyscale/400

Gradients

Fill pro primární tlačítka a active states.

Light
linear-gradient(63deg, #A7DECB, #C4E9DC)
Green Light
linear-gradient(63deg, #E1ED80, #EAF3A3)
Green Default
linear-gradient(63deg, #C4DE00, #E1FF00)
Green Dark
linear-gradient(227deg, #005544, #004033)
Highlight
linear-gradient(56deg, #8645FF, #9D68FF)
Error
linear-gradient(63deg, #D02B1D, #FF3927)
Warning
linear-gradient(63deg, #FFB956, #FFCB80)
Success
linear-gradient(56deg, #57DA33, #6AE851)

Colour Primitives

Referenční paleta — základ pro všechny sémantické tokeny. Hover = token name.

Green

50
#F9FCE2
100
#F3F9C5
200
#EAF3A3
300
#E1ED80
400
#D3E642
500
#C4DE00
550
#A3C40B
600
#83A913
650
#628F1B
700
#417523
800
#215A2B
900
#004033
Sp1
#D4E48E
Sp2
#E1FF00

Dark Green

25
#D1F3E7
50
#C4E9DC
100
#A7DECB
200
#86CBB7
300
#64B8A3
400
#43A68E
500
#21937A
600
#008066
700
#006B55
800
#005544
900
#004033
950
#00201A

Greyscale (brand-tinted)

25
#F2F5F5
50
#E5ECEB
100
#CCD9D6
200
#B2C6C2
300
#99B3AD
400
#809F99
500
#668C85
600
#4D7970
700
#33665C
800
#1A5347
900
#004033
950
#002D24

Highlight

50
#F6EFFB
100
#DECCFF
200
#BB95FF
300
#9D68FF
400
#8645FF
500
#7C37E0
600
#7229C1
700
#681CA1
800
#5E0E82
900
#540063
Sp
#CDC59A

Error

50
#FFF3F1
100
#FFDCD9
200
#FEB9B3
300
#FF968D
400
#FF7366
500
#FF3927
600
#D02B1D
700
#A11D14
800
#710E0A
900
#420000

Warning

100
#FFEED5
200
#FFDDAB
300
#FFCB80
400
#FFB956
500
#FFA72B
600
#FF9500
700
#CE6E00
800
#9E4600
900
#6D1F00

Success

50
#D3FFC5
100
#BDFFA8
200
#94F37D
300
#6AE851
400
#57DA33
500
#43CC15
600
#34A415
700
#257C15
800
#165315
900
#072B15

Other

Tech Blue
#1A00FF
Special Pink
#B2028C
Special Pink Light
#E901BB