Tokens

every value in Lucent, read from the stylesheet this site ships. primitives hold raw values; semantic roles point at primitives and change per theme; components read semantic and control tokens only.

Colour ramps

authored in OKLCH. every ramp has the same luminance at each step, so a pair of steps has the same contrast on any ramp. under each step: the hex equivalent, then OKLCH lightness, chroma and hue.

pine
10
#121E19
0.222 0.020 165.3
20
#1F352B
0.306 0.032 165.3
30
#304D40
0.391 0.041 165.3
40
#416656
0.476 0.050 165.3
50
#53806D
0.562 0.059 165.3
60
#669C84
0.647 0.068 165.3
70
#84B69F
0.734 0.061 165.3
80
#A9CFBD
0.822 0.047 165.3
90
#CAE2D7
0.893 0.030 165.3
95
#E3F1EA
0.946 0.018 165.3
100
#EFF9F4
0.973 0.012 165.3
slate
10
#171C21
0.224 0.012 248.4
20
#29313A
0.310 0.020 248.4
30
#3C4854
0.396 0.025 248.4
40
#51606F
0.482 0.031 248.4
50
#66798C
0.568 0.036 248.4
60
#7D93A9
0.654 0.042 248.4
70
#9CADBF
0.740 0.032 248.4
80
#BDC8D3
0.827 0.019 248.4
90
#D7DEE4
0.896 0.011 248.4
95
#EBEEF1
0.948 0.005 248.4
100
#F5F7F8
0.974 0.003 248.4
sage
10
#181C1C
0.223 0.006 196.6
20
#2A3232
0.309 0.011 196.6
30
#3E4949
0.395 0.013 196.6
40
#546161
0.481 0.016 196.6
50
#6A7A7A
0.567 0.019 196.6
60
#819494
0.653 0.022 196.6
70
#99B0B0
0.738 0.025 196.6
80
#B1CCCC
0.824 0.028 196.6
90
#C6E2E2
0.893 0.030 196.6
95
#E2F1F1
0.946 0.016 196.6
100
#F1F8F8
0.973 0.008 196.6
neutral
10
#1B1C1C
0.224 0.002 250.0
20
#2F3032
0.310 0.003 250.0
30
#454748
0.396 0.003 250.0
40
#5D5E61
0.483 0.004 250.0
50
#75777A
0.569 0.005 250.0
60
#8E9194
0.655 0.006 250.0
70
#A9ABAE
0.741 0.004 250.0
80
#C5C6C8
0.828 0.002 250.0
90
#DCDDDE
0.896 0.001 250.0
95
#F4F5F6
0.970 0.002 250.0
100
#FDFDFE
0.995 0.002 250.0
success
10
#09200B
0.219 0.050 145.0
20
#0C3811
0.302 0.081 145.0
30
#16521D
0.386 0.103 145.0
40
#206C29
0.470 0.126 145.0
50
#2B8835
0.554 0.148 145.0
60
#36A542
0.638 0.171 145.0
70
#64BF69
0.726 0.149 145.0
80
#98D599
0.817 0.104 145.0
90
#CAE4C9
0.892 0.045 145.0
95
#E1F3E1
0.945 0.030 145.0
100
#EDFAED
0.972 0.022 145.0
warning
10
#241A05
0.225 0.038 85.0
20
#3F2E03
0.311 0.061 85.0
30
#5A4307
0.398 0.078 85.0
40
#775A0D
0.485 0.095 85.0
50
#967113
0.571 0.111 85.0
60
#B58A1A
0.658 0.128 85.0
70
#CEA64A
0.743 0.119 85.0
80
#E4C27D
0.829 0.096 85.0
90
#EADBBC
0.897 0.044 85.0
95
#F6EDDB
0.948 0.026 85.0
100
#FCF6EA
0.974 0.017 85.0
error
10
#34100E
0.231 0.058 26.0
20
#5A1A18
0.322 0.094 26.0
30
#7F2925
0.411 0.120 26.0
40
#A73834
0.500 0.146 26.0
50
#D04843
0.589 0.173 26.0
60
#E66B62
0.673 0.154 26.0
70
#EB948C
0.753 0.106 26.0
80
#F1B9B3
0.835 0.066 26.0
90
#F6D5D1
0.901 0.037 26.0
95
#FAEAE8
0.950 0.018 26.0
100
#FDF5F4
0.975 0.009 26.0
info
10
#0C1D2C
0.224 0.038 248.4
20
#14324D
0.310 0.061 248.4
30
#21496E
0.396 0.078 248.4
40
#2E6291
0.481 0.094 248.4
50
#3B7BB5
0.568 0.111 248.4
60
#4995DA
0.653 0.128 248.4
70
#7BB0E3
0.739 0.093 248.4
80
#ABCAE8
0.826 0.054 248.4
90
#CFDFEF
0.896 0.028 248.4
95
#E6EFF7
0.948 0.015 248.4
100
#F2F7FC
0.974 0.008 248.4

Gradients

--gradient-breath
--gradient-breath-soft

Semantic colours

what components actually read. the dark column is the value under data-theme="dark" and the system dark preference.

TokenLightDark
--color--semantic--text-strong slate-10#171C21oklch(0.224 0.012 248.4) slate-100#F5F7F8oklch(0.974 0.003 248.4)
--color--semantic--text-default slate-20#29313Aoklch(0.310 0.020 248.4) slate-90#D7DEE4oklch(0.896 0.011 248.4)
--color--semantic--text-muted slate-40#51606Foklch(0.482 0.031 248.4) slate-70#9CADBFoklch(0.740 0.032 248.4)
--color--semantic--text-subtle slate-50#66798Coklch(0.568 0.036 248.4) slate-60#7D93A9oklch(0.654 0.042 248.4)
--color--semantic--text-inverse slate-95#EBEEF1oklch(0.948 0.005 248.4) slate-10#171C21oklch(0.224 0.012 248.4)
--color--semantic--text-onaccent pine-95#E3F1EAoklch(0.946 0.018 165.3) pine-10#121E19oklch(0.222 0.020 165.3)
--color--semantic--accent-default pine-50#53806Doklch(0.562 0.059 165.3) pine-60#669C84oklch(0.647 0.068 165.3)
--color--semantic--accent-strong pine-30#304D40oklch(0.391 0.041 165.3) pine-70#84B69Foklch(0.734 0.061 165.3)
--color--semantic--accent-subtle pine-80#A9CFBDoklch(0.822 0.047 165.3) pine-20#1F352Boklch(0.306 0.032 165.3)
--color--semantic--success success-50#2B8835oklch(0.554 0.148 145.0) success-60#36A542oklch(0.638 0.171 145.0)
--color--semantic--success-subtle success-90#CAE4C9oklch(0.892 0.045 145.0) success-20#0C3811oklch(0.302 0.081 145.0)
--color--semantic--warning warning-50#967113oklch(0.571 0.111 85.0) warning-60#B58A1Aoklch(0.658 0.128 85.0)
--color--semantic--warning-subtle warning-90#EADBBCoklch(0.897 0.044 85.0) warning-20#3F2E03oklch(0.311 0.061 85.0)
--color--semantic--error error-50#D04843oklch(0.589 0.173 26.0) error-60#E66B62oklch(0.673 0.154 26.0)
--color--semantic--error-subtle error-90#F6D5D1oklch(0.901 0.037 26.0) error-20#5A1A18oklch(0.322 0.094 26.0)
--color--semantic--info info-50#3B7BB5oklch(0.568 0.111 248.4) info-60#4995DAoklch(0.653 0.128 248.4)
--color--semantic--info-subtle info-90#CFDFEFoklch(0.896 0.028 248.4) info-20#14324Doklch(0.310 0.061 248.4)
--color--semantic--success-on-subtle success-30#16521Doklch(0.386 0.103 145.0) success-95#E1F3E1oklch(0.945 0.030 145.0)
--color--semantic--warning-on-subtle warning-30#5A4307oklch(0.398 0.078 85.0) warning-95#F6EDDBoklch(0.948 0.026 85.0)
--color--semantic--error-on-subtle error-30#7F2925oklch(0.411 0.120 26.0) error-95#FAEAE8oklch(0.950 0.018 26.0)
--color--semantic--info-on-subtle info-30#21496Eoklch(0.396 0.078 248.4) info-95#E6EFF7oklch(0.948 0.015 248.4)
--color--semantic--accent-text #416656oklch(from oklch(0.476 0.050 165.3) l calc(c * 1.8) h) #84B69Foklch(from oklch(0.734 0.061 165.3) l calc(c * 1.8) h)
--color--semantic--disabled-fg color-mix(in oklab, oklch(0.568 0.036 248.4) 55%, oklch(0.995 0.002 250.0))color-mix(in oklab, oklch(0.568 0.036 248.4) 55%, oklch(0.995 0.002 250.0)) color-mix(in oklab, oklch(0.654 0.042 248.4) 55%, oklch(0.310 0.003 250.0))color-mix(in oklab, oklch(0.654 0.042 248.4) 55%, oklch(0.310 0.003 250.0))
--color--semantic--scrim black / 50%#00000080oklch(0.000 0.000 0.0 / 0.5) black / 60%#00000099oklch(0.000 0.000 0.0 / 0.6)
--color--semantic--surface-base neutral-95#F4F5F6oklch(0.970 0.002 250.0) neutral-10#1B1C1Coklch(0.224 0.002 250.0)
--color--semantic--surface-default neutral-100#FDFDFEoklch(0.995 0.002 250.0) neutral-20#2F3032oklch(0.310 0.003 250.0)
--color--semantic--surface-raised neutral-100#FDFDFEoklch(0.995 0.002 250.0) neutral-20#2F3032oklch(0.310 0.003 250.0)
--color--semantic--surface-overlay neutral-100#FDFDFEoklch(0.995 0.002 250.0) neutral-30#454748oklch(0.396 0.003 250.0)
--color--semantic--surface-tint sage-100#F1F8F8oklch(0.973 0.008 196.6) sage-10#181C1Coklch(0.223 0.006 196.6)
--color--semantic--surface-glass neutral-100 / 50%#FDFDFEoklch(0.995 0.002 250.0 / 0.5) neutral-20 / 50%#2F303280oklch(0.310 0.003 250.0 / 0.5)
--color--semantic--surface-glass-strong neutral-100 / 70%#FDFDFEoklch(0.995 0.002 250.0 / 0.7) neutral-30 / 70%#454748B3oklch(0.396 0.003 250.0 / 0.7)
--color--semantic--surface-glass-subtle neutral-100 / 10%#FDFDFEoklch(0.995 0.002 250.0 / 0.1) neutral-20 / 10%#2F30321Aoklch(0.310 0.003 250.0 / 0.1)
--color--semantic--scrollbar-thumb slate-90#D7DEE4oklch(0.896 0.011 248.4) slate-30#3C4854oklch(0.396 0.025 248.4)
--color--semantic--scrollbar-thumb-hover slate-70#9CADBFoklch(0.740 0.032 248.4) slate-50#66798Coklch(0.568 0.036 248.4)
--color--semantic--scrollbar-track transparenttransparent transparenttransparent
--color--semantic--border-subtle slate-80 / 40%#BDC8D3oklch(0.827 0.019 248.4 / 0.4) neutral-100 / 10%#FDFDFE1Aoklch(0.995 0.002 250.0 / 0.1)
--color--semantic--border-default slate-80#BDC8D3oklch(0.827 0.019 248.4) neutral-100 / 20%#FDFDFE33oklch(0.995 0.002 250.0 / 0.2)
--color--semantic--border-strong slate-50#66798Coklch(0.568 0.036 248.4) neutral-100 / 30%#FDFDFE4Doklch(0.995 0.002 250.0 / 0.3)
--color--semantic--border-focus pine-50#53806Doklch(0.562 0.059 165.3) pine-60#669C84oklch(0.647 0.068 165.3)
--color--semantic--border-glass neutral-100 / 60%#FDFDFEoklch(0.995 0.002 250.0 / 0.6) neutral-100 / 15%#FDFDFE26oklch(0.995 0.002 250.0 / 0.15)
--color--semantic--shadow-default black#000000oklch(0.000 0.000 0.0) black#000000oklch(0.000 0.000 0.0)
--color--semantic--event-work-surface pine-90#CAE2D7oklch(0.893 0.030 165.3) pine-90#CAE2D7oklch(0.893 0.030 165.3)
--color--semantic--event-work-text pine-20#1F352Boklch(0.306 0.032 165.3) pine-20#1F352Boklch(0.306 0.032 165.3)
--color--semantic--event-meeting-surface slate-90#D7DEE4oklch(0.896 0.011 248.4) slate-90#D7DEE4oklch(0.896 0.011 248.4)
--color--semantic--event-meeting-text slate-20#29313Aoklch(0.310 0.020 248.4) slate-20#29313Aoklch(0.310 0.020 248.4)
--color--semantic--event-personal-surface warning-90#EADBBCoklch(0.897 0.044 85.0) warning-90#EADBBCoklch(0.897 0.044 85.0)
--color--semantic--event-personal-text warning-20#3F2E03oklch(0.311 0.061 85.0) warning-20#3F2E03oklch(0.311 0.061 85.0)
--color--semantic--event-deadline-surface error-90#F6D5D1oklch(0.901 0.037 26.0) error-90#F6D5D1oklch(0.901 0.037 26.0)
--color--semantic--event-deadline-text error-20#5A1A18oklch(0.322 0.094 26.0) error-20#5A1A18oklch(0.322 0.094 26.0)
--color--semantic--event-work-surface pine-90#CAE2D7oklch(0.893 0.030 165.3) pine-90#CAE2D7oklch(0.893 0.030 165.3)
--color--semantic--event-work-text pine-20#1F352Boklch(0.306 0.032 165.3) pine-20#1F352Boklch(0.306 0.032 165.3)
--color--semantic--event-meeting-surface slate-90#D7DEE4oklch(0.896 0.011 248.4) slate-90#D7DEE4oklch(0.896 0.011 248.4)
--color--semantic--event-meeting-text slate-20#29313Aoklch(0.310 0.020 248.4) slate-20#29313Aoklch(0.310 0.020 248.4)
--color--semantic--event-personal-surface warning-90#EADBBCoklch(0.897 0.044 85.0) warning-90#EADBBCoklch(0.897 0.044 85.0)
--color--semantic--event-personal-text warning-20#3F2E03oklch(0.311 0.061 85.0) warning-20#3F2E03oklch(0.311 0.061 85.0)
--color--semantic--event-deadline-surface error-90#F6D5D1oklch(0.901 0.037 26.0) error-90#F6D5D1oklch(0.901 0.037 26.0)
--color--semantic--event-deadline-text error-20#5A1A18oklch(0.322 0.094 26.0) error-20#5A1A18oklch(0.322 0.094 26.0)

Typography

Outfit for text, Roboto Mono for code. each role has a -mono twin and a .typography-* utility class.

RoleSampleSizeLine heightWeight
display Design Foundry 96px 1 700
title-lg Design Foundry 60px 1 700
title-md Design Foundry 40px 1.15 600
title-sm Design Foundry 28px 1.15 600
heading-lg Design Foundry 28px 1.15 500
heading-md Design Foundry 20px 1.4 500
heading-sm Design Foundry 16px 1.4 500
body-lg Design Foundry 20px 1.4 400
body-md Design Foundry 16px 1.4 400
body-sm Design Foundry 14px 1.4 400
label-lg Design Foundry 14px 1.15 500
label-md Design Foundry 12px 1.15 500
label-sm Design Foundry 11px 1.15 500
caption Design Foundry 12px 1.6 400
micro Design Foundry 10px 1.6 400

Control density

every control reads these per-size tokens, so controls at the same size line up in a row. md is the default.

xssmmdlg
Height 24px28px32px40px
Text 11px12px14px16px
Icon 14px16px16px24px
Radius 4px4px8px8px
Inline padding 8px10px12px16px
Gap 4px4px6px8px
Switch width 24px28px36px44px
Switch thumb 10px12px16px20px
Line height1.15
xs
Active
sm
Active
md
Active
lg
Active

Scales

Spacing

--dimension--primitive--spacing-0 0px
--dimension--primitive--spacing-0-5 2px
--dimension--primitive--spacing-1 4px
--dimension--primitive--spacing-1-5 6px
--dimension--primitive--spacing-2 8px
--dimension--primitive--spacing-2-5 10px
--dimension--primitive--spacing-3 12px
--dimension--primitive--spacing-4 16px
--dimension--primitive--spacing-5 20px
--dimension--primitive--spacing-6 24px
--dimension--primitive--spacing-7 28px
--dimension--primitive--spacing-8 32px
--dimension--primitive--spacing-9 36px
--dimension--primitive--spacing-10 40px
--dimension--primitive--spacing-11 44px
--dimension--primitive--spacing-12 48px
--dimension--primitive--spacing-14 56px
--dimension--primitive--spacing-16 64px
--dimension--primitive--spacing-20 80px
--dimension--primitive--spacing-24 96px
--dimension--primitive--spacing-32 128px
--dimension--primitive--spacing-40 160px
--dimension--primitive--spacing-48 192px
--dimension--primitive--spacing-56 224px
--dimension--primitive--spacing-64 256px
--dimension--primitive--spacing-72 288px
--dimension--primitive--spacing-80 320px
--dimension--primitive--spacing-96 384px
--dimension--primitive--spacing-128 512px

Sizing

--dimension--primitive--sizing-0 0px
--dimension--primitive--sizing-1 4px
--dimension--primitive--sizing-2 8px
--dimension--primitive--sizing-3 12px
--dimension--primitive--sizing-4 16px
--dimension--primitive--sizing-5 20px
--dimension--primitive--sizing-6 24px
--dimension--primitive--sizing-7 28px
--dimension--primitive--sizing-8 32px
--dimension--primitive--sizing-9 36px
--dimension--primitive--sizing-10 40px
--dimension--primitive--sizing-11 44px
--dimension--primitive--sizing-12 48px
--dimension--primitive--sizing-15 60px
--dimension--primitive--sizing-16 64px
--dimension--primitive--sizing-20 80px
--dimension--primitive--sizing-24 96px
--dimension--primitive--sizing-32 128px
--dimension--primitive--sizing-40 160px
--dimension--primitive--sizing-48 192px
--dimension--primitive--sizing-56 224px
--dimension--primitive--sizing-64 256px
--dimension--primitive--sizing-72 288px
--dimension--primitive--sizing-80 320px
--dimension--primitive--sizing-96 384px
--dimension--primitive--sizing-128 512px

Radius

--dimension--primitive--radius-xs 4px
--dimension--primitive--radius-sm 8px
--dimension--primitive--radius-md 16px
--dimension--primitive--radius-lg 24px
--dimension--primitive--radius-xl 32px
--dimension--primitive--radius-full 9999px
--radius-xs 4px
--radius-sm 8px
--radius-md 16px
--radius-lg 24px
--radius-xl 32px
--radius-full 9999px

Font size

--dimension--primitive--fs-4xl 96px
--dimension--primitive--fs-3xl 60px
--dimension--primitive--fs-2xl 40px
--dimension--primitive--fs-xl 28px
--dimension--primitive--fs-lg 20px
--dimension--primitive--fs-md 16px
--dimension--primitive--fs-sm 14px
--dimension--primitive--fs-xs 12px
--dimension--primitive--fs-2xs 11px
--dimension--primitive--fs-3xs 10px

Font weight

--dimension--primitive--fw-light 300
--dimension--primitive--fw-regular 400
--dimension--primitive--fw-medium 500
--dimension--primitive--fw-semibold 600
--dimension--primitive--fw-bold 700

Line height

--dimension--primitive--lh-tight 1
--dimension--primitive--lh-snug 1.15
--dimension--primitive--lh-normal 1.4
--dimension--primitive--lh-relaxed 1.6

Letter spacing

--dimension--primitive--tracking-tight -0.01em
--dimension--primitive--tracking-normal 0em
--dimension--primitive--tracking-wide 0.02em
--dimension--primitive--tracking-wider 0.04em

Icon size

--dimension--primitive--icon-xs 10px
--dimension--primitive--icon-sm 14px
--dimension--primitive--icon-md 16px
--dimension--primitive--icon-lg 24px
--dimension--primitive--icon-xl 32px

Opacity

--opacity--primitive--10 0.1
--opacity--primitive--15 0.15
--opacity--primitive--20 0.2
--opacity--primitive--30 0.3
--opacity--primitive--40 0.4
--opacity--primitive--50 0.5
--opacity--primitive--60 0.6
--opacity--primitive--70 0.7

Breakpoints

--dimension--primitive--screen-sm 640px
--dimension--primitive--screen-md 768px
--dimension--primitive--screen-lg 1024px
--dimension--primitive--screen-xl 1440px
--dimension--primitive--screen-2xl 1920px

Fonts

--font--primitive--sans "Outfit", sans-serif
--font--primitive--mono "Roboto Mono", monospace

Shadows and borders

--shadow-xs
0 1px 2px 0 shadow / 0.04
--shadow-sm
0 2px 4px 0 shadow / 0.08
--shadow-md
0 4px 8px 0 shadow / 0.16
--shadow-lg
0 8px 24px 0 shadow / 0.16
--shadow-xl
0 16px 48px 0 shadow / 0.20
--border-subtle 1px solid var(--color--semantic--border-subtle)
--border-default 1px solid var(--color--semantic--border-default)
--border-strong 1px solid var(--color--semantic--border-strong)
--border-focus 1px solid var(--color--semantic--border-focus)
--border-glass 1px solid var(--color--semantic--border-glass)
--blur-glass 50px
--blur-surface-glass 12px
--blur-surface-glass-strong 20px
--blur-surface-glass-subtle 8px
--layer-sticky 10
--layer-modal 100
--layer-popover 150
--layer-tooltip 180
--layer-toast 200