Tokens

Color scales

Step 0 is the page and step 13 the strongest text; dark mode swaps the values and keeps the step numbers. Neutral and accent follow --accent-hue. Brand secondary ships as variables only, with no bg-* classes.

Open in all tokens

Color scales by step
Scale	0	1	2	3	4	5	6	7	8	9	10	11	12	13
Neutral
Brand
Brand secondary
Accent
Danger
Success
Warning
Info

Neutral

+3 more
Light
var(--color-neutral-light-0) → oklch(1 0 0)
Dark
oklch(0.13 0.011 var(--accent-hue))
+3 more
Light
oklch(0.991 0.004 var(--accent-hue))
Dark
oklch(0.178 0.011 var(--accent-hue))
+3 more
Light
oklch(0.982 0.007 var(--accent-hue))
Dark
oklch(0.214 0.01 var(--accent-hue))
+3 more
Light
oklch(0.955 0.011 var(--accent-hue))
Dark
oklch(0.252 0.016 var(--accent-hue))
+3 more
Light
oklch(0.931 0.014 var(--accent-hue))
Dark
oklch(0.284 0.018 var(--accent-hue))
+3 more
Light
var(--color-neutral-light-5) → oklch(0.909 0.019 var(--accent-hue))
Dark
oklch(0.312 0.022 var(--accent-hue))
+3 more
Light
oklch(0.888 0.022 var(--accent-hue))
Dark
oklch(0.347 0.025 var(--accent-hue))
+3 more
Light
oklch(0.853 0.028 var(--accent-hue))
Dark
oklch(0.398 0.031 var(--accent-hue))
+3 more
Light
oklch(0.794 0.038 var(--accent-hue))
Dark
oklch(0.489 0.041 var(--accent-hue))
+3 more
Light
oklch(0.645 0.039 var(--accent-hue))
Dark
oklch(0.538 0.04 var(--accent-hue))
+3 more
Light
oklch(0.609 0.037 var(--accent-hue))
Dark
oklch(0.582 0.038 var(--accent-hue))
+3 more
Light
oklch(0.503 0.032 var(--accent-hue))
Dark
oklch(0.769 0.028 var(--accent-hue))
+3 more
Light
var(--color-neutral-light-12) → oklch(0.24 0.024 var(--accent-hue))
Dark
oklch(0.949 0.007 var(--accent-hue))
+3 more
Light
var(--color-neutral-light-13) → oklch(0.182 0.015 var(--accent-hue))
Dark
oklch(0.991 0.004 var(--accent-hue))

Brand

+3 more
Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
+3 more
Light
oklch(0.984 0.003 247)
Dark
oklch(0.178 0.023 247)
+3 more
Light
oklch(0.971 0.009 247)
Dark
oklch(0.212 0.025 247)
+3 more
Light
oklch(0.949 0.02 247)
Dark
oklch(0.273 0.059 247)
+3 more
Light
oklch(0.925 0.035 247)
Dark
oklch(0.317 0.086 247)
+3 more
Light
var(--color-brand-light-5) → oklch(0.891 0.049 247)
Dark
oklch(0.365 0.095 247)
+3 more
Light
oklch(0.849 0.063 247)
Dark
oklch(0.415 0.099 247)
+3 more
Light
oklch(0.794 0.081 247)
Dark
oklch(0.475 0.106 247)
+3 more
Light
oklch(0.718 0.111 247)
Dark
oklch(0.543 0.123 247)
+3 more
Light
oklch(0.639 0.168 247)
Dark
oklch(0.639 0.168 247)
+3 more
Light
oklch(0.598 0.16 247)
Dark
oklch(0.601 0.165 247)
+3 more
Light
oklch(0.547 0.159 247)
Dark
oklch(0.771 0.122 247)
+3 more
Light
var(--color-brand-light-12) → oklch(0.324 0.082 247)
Dark
oklch(0.906 0.048 247)
+3 more
Light
var(--color-brand-light-13) → oklch(0.2 0.055 247)
Dark
oklch(0.96 0.02 247)

Brand secondary

Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
Light
oklch(0.984 0.003 42)
Dark
oklch(0.178 0.01 42)
Light
oklch(0.969 0.014 42)
Dark
oklch(0.206 0.016 42)
Light
oklch(0.942 0.031 42)
Dark
oklch(0.255 0.048 42)
Light
oklch(0.899 0.058 42)
Dark
oklch(0.29 0.078 42)
Light
var(--color-brand-secondary-light-5) → oklch(0.865 0.078 42)
Dark
oklch(0.331 0.087 42)
Light
oklch(0.829 0.102 42)
Dark
oklch(0.382 0.089 42)
Light
oklch(0.79 0.127 42)
Dark
oklch(0.449 0.097 42)
Light
oklch(0.729 0.155 42)
Dark
oklch(0.538 0.119 42)
Light
oklch(0.753 0.155 42)
Dark
oklch(0.753 0.155 42)
Light
oklch(0.719 0.155 42)
Dark
oklch(0.719 0.155 42)
Light
oklch(0.569 0.155 42)
Dark
oklch(0.774 0.14 42)
Light
var(--color-brand-secondary-light-12) → oklch(0.349 0.089 42)
Dark
oklch(0.906 0.044 42)
Light
var(--color-brand-secondary-light-13) → oklch(0.2 0.06 42)
Dark
oklch(0.96 0.02 42)

Accent

+3 more
Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
+3 more
Light
oklch( 0.984 calc(0.018 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.178 calc(0.137 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.971 calc(0.054 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.212 calc(0.149 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.949 calc(0.119 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.273 calc(0.351 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.925 calc(0.208 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.317 calc(0.512 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
var(--color-accent-light-5) → oklch( 0.891 calc(0.292 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.365 calc(0.566 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.849 calc(0.375 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.415 calc(0.589 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.794 calc(0.482 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.475 calc(0.631 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.718 calc(0.661 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.543 calc(0.732 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch(0.639 var(--accent-chroma) var(--accent-hue))
Dark
oklch(0.639 var(--accent-chroma) var(--accent-hue))
+3 more
Light
oklch( 0.598 calc(0.952 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.601 calc(0.982 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
oklch( 0.547 calc(0.946 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.771 calc(0.726 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
var(--color-accent-light-12) → oklch( 0.324 calc(0.488 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.906 calc(0.286 * var(--accent-chroma)) var(--accent-hue) )
+3 more
Light
var(--color-accent-light-13) → oklch( 0.2 calc(0.327 * var(--accent-chroma)) var(--accent-hue) )
Dark
oklch( 0.96 calc(0.119 * var(--accent-chroma)) var(--accent-hue) )

Danger

+3 more
Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
+3 more
Light
oklch(0.983 0.003 48.719)
Dark
oklch(0.177 0.012 27.739)
+3 more
Light
oklch(0.969 0.012 23.703)
Dark
oklch(0.205 0.019 30.4)
+3 more
Light
oklch(0.944 0.028 28.516)
Dark
oklch(0.25 0.061 28.297)
+3 more
Light
oklch(0.9 0.052 31.272)
Dark
oklch(0.289 0.094 28.179)
+3 more
Light
var(--color-danger-light-5) → oklch(0.866 0.072 30.236)
Dark
oklch(0.333 0.105 28.758)
+3 more
Light
oklch(0.838 0.09 28.413)
Dark
oklch(0.381 0.108 28.479)
+3 more
Light
oklch(0.791 0.101 28.55)
Dark
oklch(0.449 0.117 28.086)
+3 more
Light
oklch(0.73 0.121 28.471)
Dark
oklch(0.541 0.143 28.04)
+3 more
Light
oklch(0.709 0.184 28.37)
Dark
oklch(0.709 0.184 28.37)
+3 more
Light
oklch(0.673 0.184 28.364)
Dark
oklch(0.673 0.184 28.364)
+3 more
Light
oklch(0.569 0.181 28.264)
Dark
oklch(0.769 0.137 28.725)
+3 more
Light
var(--color-danger-light-12) → oklch(0.349 0.069 28.777)
Dark
oklch(0.9 0.05 27.194)
+3 more
Light
var(--color-danger-light-13) → oklch(0.22 0.045 28)
Dark
oklch(0.96 0.02 28)

Success

+3 more
Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
+3 more
Light
oklch(0.983 0.006 185.277)
Dark
oklch(0.178 0.012 186.566)
+3 more
Light
oklch(0.973 0.013 185.101)
Dark
oklch(0.214 0.018 183.109)
+3 more
Light
oklch(0.947 0.036 185.818)
Dark
oklch(0.272 0.039 186.985)
+3 more
Light
oklch(0.921 0.057 185.27)
Dark
oklch(0.317 0.056 185.561)
+3 more
Light
var(--color-success-light-5) → oklch(0.886 0.074 185.252)
Dark
oklch(0.362 0.063 185.312)
+3 more
Light
oklch(0.842 0.087 185.529)
Dark
oklch(0.413 0.068 185.064)
+3 more
Light
oklch(0.784 0.102 184.951)
Dark
oklch(0.474 0.078 184.218)
+3 more
Light
oklch(0.709 0.125 184.715)
Dark
oklch(0.538 0.091 184.978)
+3 more
Light
oklch(0.732 0.129 185.089)
Dark
oklch(0.732 0.129 185.089)
+3 more
Light
oklch(0.698 0.123 185.178)
Dark
oklch(0.698 0.123 185.178)
+3 more
Light
oklch(0.508 0.09 183.645)
Dark
oklch(0.79 0.129 184.826)
+3 more
Light
var(--color-success-light-12) → oklch(0.351 0.061 185.02)
Dark
oklch(0.906 0.076 184.637)
+3 more
Light
var(--color-success-light-13) → oklch(0.22 0.04 185)
Dark
oklch(0.96 0.03 185)

Warning

+3 more
Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
+3 more
Light
oklch(0.994 0.005 95.098)
Dark
oklch(0.178 0.012 91.807)
+3 more
Light
oklch(0.984 0.027 95.333)
Dark
oklch(0.211 0.018 86.763)
+3 more
Light
oklch(0.962 0.075 98.601)
Dark
oklch(0.257 0.043 87.869)
+3 more
Light
oklch(0.939 0.099 95.312)
Dark
oklch(0.296 0.061 81.523)
+3 more
Light
var(--color-warning-light-5) → oklch(0.912 0.129 93.243)
Dark
oklch(0.338 0.07 82.053)
+3 more
Light
oklch(0.876 0.151 88.465)
Dark
oklch(0.388 0.076 86.634)
+3 more
Light
oklch(0.834 0.139 86.578)
Dark
oklch(0.453 0.079 87.194)
+3 more
Light
oklch(0.765 0.157 86.419)
Dark
oklch(0.535 0.093 86.208)
+3 more
Light
oklch(0.771 0.158 86.663)
Dark
oklch(0.841 0.172 86.226)
+3 more
Light
oklch(0.738 0.151 85.261)
Dark
oklch(0.81 0.166 85.477)
+3 more
Light
oklch(0.576 0.118 82.642)
Dark
oklch(0.864 0.167 88.596)
+3 more
Light
var(--color-warning-light-12) → oklch(0.356 0.052 86.003)
Dark
oklch(0.935 0.069 86.151)
+3 more
Light
var(--color-warning-light-13) → oklch(0.22 0.035 86)
Dark
oklch(0.97 0.03 86)

Info

+3 more
Light
oklch(1 0 0)
Dark
oklch(0.08 0 0)
+3 more
Light
oklch(0.984 0.004 301.426)
Dark
oklch(0.176 0.025 303.009)
+3 more
Light
oklch(0.972 0.011 303.114)
Dark
oklch(0.211 0.036 303.878)
+3 more
Light
oklch(0.946 0.028 303.922)
Dark
oklch(0.264 0.069 303.209)
+3 more
Light
oklch(0.92 0.044 303.104)
Dark
oklch(0.307 0.093 302.094)
+3 more
Light
var(--color-info-light-5) → oklch(0.887 0.059 302.54)
Dark
oklch(0.343 0.103 302.878)
+3 more
Light
oklch(0.846 0.077 302.529)
Dark
oklch(0.387 0.108 302.597)
+3 more
Light
oklch(0.792 0.099 303.066)
Dark
oklch(0.451 0.119 302.796)
+3 more
Light
oklch(0.724 0.129 302.898)
Dark
oklch(0.541 0.149 302.916)
+3 more
Light
oklch(0.652 0.198 302.833)
Dark
oklch(0.652 0.198 302.833)
+3 more
Light
oklch(0.612 0.198 303.02)
Dark
oklch(0.612 0.198 303.02)
+3 more
Light
oklch(0.505 0.185 302.873)
Dark
oklch(0.78 0.143 306.109)
+3 more
Light
var(--color-info-light-12) → oklch(0.33 0.125 302.655)
Dark
oklch(0.909 0.054 303.269)
+3 more
Light
var(--color-info-light-13) → oklch(0.2 0.08 303)
Dark
oklch(0.96 0.025 303)

Pinned light steps

Light values that stay light in dark mode, for marks and illustrations.

oklch(1 0 0)
oklch(0.909 0.019 var(--accent-hue))
oklch(0.24 0.024 var(--accent-hue))
oklch(0.182 0.015 var(--accent-hue))
oklch(0.891 0.049 247)
oklch(0.324 0.082 247)
oklch(0.2 0.055 247)
oklch(0.865 0.078 42)
oklch(0.349 0.089 42)
oklch(0.2 0.06 42)
oklch( 0.891 calc(0.292 * var(--accent-chroma)) var(--accent-hue) )
oklch( 0.324 calc(0.488 * var(--accent-chroma)) var(--accent-hue) )
oklch( 0.2 calc(0.327 * var(--accent-chroma)) var(--accent-hue) )
oklch(0.866 0.072 30.236)
oklch(0.349 0.069 28.777)
oklch(0.22 0.045 28)
oklch(0.886 0.074 185.252)
oklch(0.351 0.061 185.02)
oklch(0.22 0.04 185)
oklch(0.912 0.129 93.243)
oklch(0.356 0.052 86.003)
oklch(0.22 0.035 86)
oklch(0.887 0.059 302.54)
oklch(0.33 0.125 302.655)
oklch(0.2 0.08 303)

Illustration

Fixed spot illustration colours; they ignore dark mode.

+3 more
var(--color-neutral-light-0, #ffffff) → oklch(1 0 0)
+3 more
var(--color-info-light-5, #e1d1fb) → oklch(0.887 0.059 302.54)
+3 more
var(--color-brand-secondary-light-5, #ffc3a8) → oklch(0.865 0.078 42)
+3 more
var(--color-brand-9, #0191eb) → oklch(0.639 0.168 247)
+3 more
var(--color-brand-light-5, #c2dffb) → oklch(0.891 0.049 247)
+3 more
var(--color-neutral-light-12, #16202a) → oklch(0.24 0.024 var(--accent-hue))

Accent parameters

The hue and chroma the accent and neutral scales are built from.

247
0.168

Previous page← All tokens Next pageIntents →