Colours

Every semantic token used by this site, including its live value, relationship, source, and useful contrast pairing.

Hosted site palette · light

Surfaces

8 tokens

Background

surface/default

--cc-background

Light (active): #F8FAFC
Dark: #020C18

Surface

surface/default

--cc-surface

Light (active): #F8FAFC
Dark: #020C18

Surface Muted

surface/variant

--cc-surface-muted

Light (active): #EDF0F4
Dark: #09182B

Surface Elevated

surface/container

--cc-surface-elevated

Light (active): #F8FAFC
Dark: #020C18

Surface Glass

No semantic role

--cc-surface-glass

Alias: surfaceElevated

Light (active): rgba(248, 250, 252, 0.9)
Dark: rgba(2, 12, 24, 0.9)

Surface Inverse

surface/inverse

--cc-surface-inverse

Light (active): #020C18
Dark: #F8FAFC

Surface Inverse Hover

surface/inverse-hover

--cc-surface-inverse-hover

Light (active): #102138
Dark: #EDF0F4

Backdrop

No semantic role

--cc-backdrop

Alias: surfaceInverse

Light (active): rgba(2, 12, 24, 0.4)
Dark: rgba(248, 250, 252, 0.5)

Content

4 tokens

Foreground

on/surface/default

--cc-foreground

18.79:1 with background

Light (active): #020C18
Dark: #F8FAFC

Muted Foreground

on/surface/variant

--cc-muted-foreground

5.36:1 with background

Light (active): #59697E
Dark: #919EAF

Subtle Foreground

on/surface/disabled

--cc-subtle-foreground

3.27:1 with background

Light (active): #7E8C9F
Dark: #7E8C9F

Foreground Inverse

on/surface/inverse/default

--cc-foreground-inverse

18.79:1 with surfaceInverse

Light (active): #F8FAFC
Dark: #020C18

Borders

3 tokens

Border

border/default

--cc-border

Light (active): #D6DCE4
Dark: #172942

Border Strong

border/strong

--cc-border-strong

Light (active): #BBC5D1
Dark: #2F435D

Border Inverse

border/inverse

--cc-border-inverse

Light (active): #3E516A
Dark: #A8B4C2

Actions

21 tokens

Primary

primary/default

--cc-primary

Light (active): #155DFC
Dark: #467CFF

Primary Hover

primary/hovered

--cc-primary-hover

Light (active): #104DDC
Dark: #6690FF

Primary Foreground

on/primary/default

--cc-primary-foreground

5.01:1 with primary

Light (active): #F8FAFC
Dark: #020C18

Primary Soft

primary/container

--cc-primary-soft

Light (active): #EFF6FF
Dark: #163156

Primary Soft Hover

primary/container-hovered

--cc-primary-soft-hover

Light (active): #D8E8FF
Dark: #193E75

Primary Soft Foreground

on/primary/container

--cc-primary-soft-foreground

7.83:1 with primarySoft

Light (active): #1541B6
Dark: #8CAAFF

Primary Soft Border

primary/container-border

--cc-primary-soft-border

Light (active): #BDD8FF
Dark: #18499A

Secondary

secondary/default

--cc-secondary

Light (active): #7C3AED
Dark: #A78BFA

Secondary Hover

No semantic role

--cc-secondary-hover

Light (active): #6D28D9
Dark: #C4B5FD

Secondary Foreground

on/secondary/default

--cc-secondary-foreground

5.70:1 with secondary

Light (active): #FFFFFF
Dark: #020C18

Secondary Soft

secondary/container

--cc-secondary-soft

Light (active): #F3E8FF
Dark: #2E1065

Secondary Soft Hover

No semantic role

--cc-secondary-soft-hover

Light (active): #E9D5FF
Dark: #4C1D95

Secondary Soft Foreground

on/secondary/container

--cc-secondary-soft-foreground

7.61:1 with secondarySoft

Light (active): #5B21B6
Dark: #DDD6FE

Secondary Soft Border

No semantic role

--cc-secondary-soft-border

Light (active): #D8B4FE
Dark: #6D28D9

Tertiary

tertiary/default

--cc-tertiary

Light (active): #0891B2
Dark: #22D3EE

Tertiary Hover

No semantic role

--cc-tertiary-hover

Light (active): #0E7490
Dark: #67E8F9

Tertiary Foreground

on/tertiary/default

--cc-tertiary-foreground

3.68:1 with tertiary

Light (active): #FFFFFF
Dark: #020C18

Tertiary Soft

tertiary/container

--cc-tertiary-soft

Light (active): #ECFEFF
Dark: #083344

Tertiary Soft Hover

No semantic role

--cc-tertiary-soft-hover

Light (active): #CFFAFE
Dark: #164E63

Tertiary Soft Foreground

on/tertiary/container

--cc-tertiary-soft-foreground

6.99:1 with tertiarySoft

Light (active): #155E75
Dark: #A5F3FC

Tertiary Soft Border

No semantic role

--cc-tertiary-soft-border

Light (active): #A5F3FC
Dark: #0E7490

Feedback

28 tokens

Critical

critical/default

--cc-critical

Light (active): #D2003A
Dark: #F85784

Critical Hover

critical/hovered

--cc-critical-hover

Light (active): #B10132
Dark: #FA81A3

Critical Foreground

on/critical/default

--cc-critical-foreground

5.28:1 with critical

Light (active): #F8FAFC
Dark: #020C18

Critical Soft

critical/container

--cc-critical-soft

Light (active): #FFF1F2
Dark: #4D0208

Critical Soft Hover

critical/container-hovered

--cc-critical-soft-hover

Light (active): #FED7DB
Dark: #8B081C

Critical Soft Foreground

on/critical/container

--cc-critical-soft-foreground

6.55:1 with criticalSoft

Light (active): #B10132
Dark: #FA81A3

Critical Border

border/critical

--cc-critical-border

Light (active): #FDB8C1
Dark: #A60422

Success

success/default

--cc-success

Light (active): #43E8AA
Dark: #027A48

Success Soft

success/container

--cc-success-soft

Light (active): #ECFDF5
Dark: #002C16

Success Soft Foreground

on/success/container

--cc-success-soft-foreground

5.27:1 with successSoft

Light (active): #027758
Dark: #5AEBC2

Success Border

border/success

--cc-success-border

Light (active): #82F1C2
Dark: #04653B

Warning

warning/default

--cc-warning

Light (active): #C65C00
Dark: #FFAB46

Warning Soft

warning/container

--cc-warning-soft

Light (active): #FFFBEB
Dark: #463801

Warning Soft Foreground

on/warning/container

--cc-warning-soft-foreground

5.88:1 with warningSoft

Light (active): #A14803
Dark: #FFB874

Warning Border

border/warning

--cc-warning-border

Light (active): #FFE5A4
Dark: #8F6A06

Success Hover

No semantic role

--cc-success-hover

Light (active): #027A48
Dark: #34D399

Success Foreground

on/success/default

--cc-success-foreground

12.51:1 with success

Light (active): #020C18
Dark: #020C18

Success Soft Hover

No semantic role

--cc-success-soft-hover

Light (active): #D1FAE5
Dark: #064E3B

Warning Hover

No semantic role

--cc-warning-hover

Light (active): #A14703
Dark: #FBBF24

Warning Foreground

on/warning/default

--cc-warning-foreground

4.62:1 with warning

Light (active): #020C18
Dark: #020C18

Warning Soft Hover

No semantic role

--cc-warning-soft-hover

Light (active): #FEF3C7
Dark: #78350F

Info

info/default

--cc-info

Light (active): #2563EB
Dark: #60A5FA

Info Hover

No semantic role

--cc-info-hover

Light (active): #1D4ED8
Dark: #93C5FD

Info Foreground

on/info/default

--cc-info-foreground

5.17:1 with info

Light (active): #FFFFFF
Dark: #020C18

Info Soft

info/container

--cc-info-soft

Light (active): #EFF6FF
Dark: #172554

Info Soft Hover

No semantic role

--cc-info-soft-hover

Light (active): #DBEAFE
Dark: #1E3A8A

Info Soft Foreground

on/info/container

--cc-info-soft-foreground

8.01:1 with infoSoft

Light (active): #1E40AF
Dark: #BFDBFE

Info Border

border/info

--cc-info-border

Light (active): #BFDBFE
Dark: #1D4ED8

Fields

4 tokens

Field Background

field/background

--cc-field-background

Light (active): #F8FAFC
Dark: #020C18

Field Foreground

field/foreground

--cc-field-foreground

18.79:1 with fieldBackground

Light (active): #020C18
Dark: #F8FAFC

Field Border

field/border

--cc-field-border

Light (active): #D6DCE4
Dark: #172942

Field Hover Border

field/hover-border

--cc-field-hover-border

Light (active): #BBC5D1
Dark: #2F435D

Foundation

1 tokens

Focus Ring

No semantic role

--cc-focus-ring

Alias: primary

Light (active): rgba(21, 93, 252, 0.24)
Dark: rgba(70, 124, 255, 0.3)