Sakani

Tokens

Every token in the system, with the value it resolves to in each theme. Generated from the stylesheet, so it cannot drift from what the components actually use.

182 tokens across 18 groups. 34 of them resolve to a different value in dark mode; the rest hold across both, either because they are primitives or because they are meant to stay fixed, which is why the brand orange and the chart colours look the same either way.

A split swatch means the token resolves differently per theme: left half is light, right half is dark. A solid swatch is a single fixed value. A → line means the token is an alias, and points at what it resolves through. Everything here is a plain CSS custom property, so you can read or override any of it without a build step.

Breakpoints

3 tokens

--bp-sm
640px
--bp-md
768px
--bp-lg
1024px

Typography

2 tokens

Ag
--font-sans
"Geist Variable", "Geist", system-ui, -apple-system, sans-serif
Ag
--font-mono
"Geist Mono Variable", "Geist Mono", ui-monospace, monospace

Color primitives

68 tokens

--color-neutral-50
#FAFAF9
--color-neutral-100
#F5F4F2
--color-neutral-200
#E7E5E1
--color-neutral-300
#DBDAD7
--color-neutral-400
#A8A29B
--color-neutral-500
#78716A
--color-neutral-600
#57534E
--color-neutral-700
#3A3837
--color-neutral-800
#1F1F1F
--color-neutral-900
#141414
--color-neutral-950
#0F0E0C
--color-primary-50
#FFF3ED
--color-primary-100
#FFE4D4
--color-primary-200
#FFC7A8
--color-primary-300
#FFA170
--color-primary-400
#FF7538
--color-primary-500
#FF4700
--color-primary-600
#E63D00
--color-primary-700
#BF3200
--color-primary-800
#99290A
--color-primary-900
#7D250D
--color-primary-950
#431004
--color-success-50
#F1FEF6
--color-success-100
#D1FADF
--color-success-200
#A6F4C5
--color-success-300
#6CE9A6
--color-success-400
#32D583
--color-success-500
#12B76A
--color-success-600
#039855
--color-success-700
#027A48
--color-success-800
#05603A
--color-success-900
#054F31
--color-success-950
#033524
--color-warning-50
#FFFBF0
--color-warning-100
#FEF0C7
--color-warning-200
#FEDF89
--color-warning-300
#FEC84B
--color-warning-400
#FDB022
--color-warning-500
#F79009
--color-warning-600
#DC6803
--color-warning-700
#B54708
--color-warning-800
#93370D
--color-warning-900
#7A2E0E
--color-warning-950
#4E1D09
--color-danger-50
#FEF3F2
--color-danger-100
#FEE4E2
--color-danger-200
#FECDCA
--color-danger-300
#FDA29B
--color-danger-400
#F97066
--color-danger-500
#F04438
--color-danger-600
#D92D20
--color-danger-700
#B42318
--color-danger-800
#912018
--color-danger-900
#7A271A
--color-danger-950
#55160C
--color-info-50
#EFF8FF
--color-info-100
#D1E9FF
--color-info-200
#B2DDFF
--color-info-300
#84CAFF
--color-info-400
#53B1FD
--color-info-500
#2E90FA
--color-info-600
#1570EF
--color-info-700
#175CD3
--color-info-800
#1849A9
--color-info-900
#194185
--color-info-950
#102A56
--color-base-white
#FFFFFF
--color-base-black
#000000

Chart primitives

6 tokens

--color-chart-orange
#FF4700
--color-chart-blue
#5B92DD
--color-chart-teal
#47A8A2
--color-chart-purple
#9179D6
--color-chart-gold
#DCA84F
--color-chart-green
#12B76A

Code syntax

2 tokens

--color-code-keyword
#7B4BD9
--color-code-string
#16A34A

Semantic · Background

5 tokens

--color-bg-canvas

→ --color-neutral-50

#FAFAF9
dark #0F0E0C
--color-bg-surface

→ --color-base-white

#FFFFFF
dark #141414
--color-bg-subtle

→ --color-neutral-100

#F5F4F2
dark #1F1F1F
--color-bg-muted

→ --color-neutral-200

#E7E5E1
dark #3A3837
--color-bg-inverse

→ --color-neutral-900

#141414
dark #FAFAF9

Semantic · Text

5 tokens

--color-fg-default

→ --color-neutral-900

#141414
dark #FAFAF9
--color-fg-muted

synced from Figma (was neutral-600)

→ --color-neutral-500

#78716A
dark #A8A29B
--color-fg-subtle

synced from Figma; note: 2.53:1 contrast on canvas bg, below WCAG AA's 4.5:1 for text

→ --color-neutral-400

#A8A29B
dark #78716A
--color-fg-on-accent

→ --color-base-white

#FFFFFF
dark #141414
--color-fg-on-inverse

→ --color-neutral-50

#FAFAF9
dark #141414

Semantic · Border

4 tokens

--color-border-subtle

→ --color-neutral-200

#E7E5E1
dark #1F1F1F
--color-border-default

→ --color-neutral-300

#DBDAD7
dark #3A3837
--color-border-strong

→ --color-neutral-400

#A8A29B
dark #57534E
--color-border-focus

→ --color-primary-500

#FF4700
dark #FF7538

Semantic · Chart

6 tokens

--color-chart-1

→ --color-chart-orange

#FF4700
--color-chart-2

→ --color-chart-blue

#5B92DD
--color-chart-3

→ --color-chart-teal

#47A8A2
--color-chart-4

→ --color-chart-purple

#9179D6
--color-chart-5

→ --color-chart-gold

#DCA84F
--color-chart-6

→ --color-chart-green

#12B76A

Semantic · Accent

5 tokens

--color-accent-default

→ --color-neutral-900

#141414
dark #FAFAF9
--color-accent-hover

→ --color-neutral-800

#1F1F1F
dark #E7E5E1
--color-accent-active

→ --color-neutral-700

#3A3837
dark #DBDAD7
--color-accent-subtle

→ --color-neutral-100

#F5F4F2
dark #1F1F1F
--color-accent-fg

→ --color-base-white

#FFFFFF
dark #141414

Semantic · Brand

4 tokens

--color-brand-default

→ --color-primary-500

#FF4700
--color-brand-hover

→ --color-primary-600

#E63D00
dark #FF7538
--color-brand-subtle

→ --color-primary-50

#FFF3ED
dark #431004
--color-brand-fg

→ --color-primary-600

#E63D00
dark #FF7538

Semantic · Status

16 tokens

--color-success-fg

→ --color-success-700

#027A48
dark #32D583
--color-success-bg

→ --color-success-50

#F1FEF6
dark #033524
--color-success-border

→ --color-success-200

#A6F4C5
dark #05603A
--color-success-solid

→ --color-success-500

#12B76A
--color-warning-fg

→ --color-warning-700

#B54708
dark #FDB022
--color-warning-bg

→ --color-warning-50

#FFFBF0
dark #4E1D09
--color-warning-border

→ --color-warning-200

#FEDF89
dark #93370D
--color-warning-solid

→ --color-warning-500

#F79009
--color-danger-fg

→ --color-danger-700

#B42318
dark #F97066
--color-danger-bg

→ --color-danger-50

#FEF3F2
dark #55160C
--color-danger-border

→ --color-danger-200

#FECDCA
dark #912018
--color-danger-solid

→ --color-danger-500

#F04438
--color-info-fg

→ --color-info-700

#175CD3
dark #53B1FD
--color-info-bg

→ --color-info-50

#EFF8FF
dark #102A56
--color-info-border

→ --color-info-200

#B2DDFF
dark #1849A9
--color-info-solid

→ --color-info-500

#2E90FA

Spacing

17 tokens

--space-0
0px
--space-2
2px
--space-4
4px
--space-6
6px
--space-8
8px
--space-10
10px
--space-12
12px
--space-14
14px
--space-16
16px
--space-20
20px
--space-24
24px
--space-32
32px
--space-40
40px
--space-48
48px
--space-64
64px
--space-80
80px
--space-96
96px

Radius

10 tokens

--radius-none
0px
--radius-2xs
2px
--radius-xs
4px
--radius-sm
6px
--radius-md
8px
--radius-lg
12px
--radius-xl
16px
--radius-2xl
24px
--radius-3xl
28px
--radius-full
9999px

Border width

6 tokens

--border-width-050
0.5px
--border-width-100
1px
--border-width-150
1.5px
--border-width-200
2px
--border-width-400
4px
--border-width-600
6px

Opacity

5 tokens

--opacity-0
0.0
--opacity-45
0.45
--opacity-60
0.6
--opacity-70
0.7
--opacity-100
1.0

Shadows

9 tokens

--shadow-xs
0 1px 2px 0 rgba(16,15,12,0.05)
--shadow-sm
0 1px 3px 0 rgba(16,15,12,0.10), 0 1px 2px 0 rgba(16,15,12,0.06)
--shadow-md
0 4px 8px -2px rgba(16,15,12,0.10), 0 2px 4px -2px rgba(16,15,12,0.06)
--shadow-lg
0 12px 16px -4px rgba(16,15,12,0.08), 0 4px 6px -2px rgba(16,15,12,0.03)
--shadow-xl
0 20px 24px -4px rgba(16,15,12,0.10), 0 8px 8px -4px rgba(16,15,12,0.03)
--shadow-2xl
0 24px 48px -12px rgba(16,15,12,0.18)
--shadow-left
-12px 0 32px -8px rgba(16,15,12,0.16)
--shadow-right
12px 0 32px -8px rgba(16,15,12,0.16)
--shadow-up
0 -12px 32px -8px rgba(16,15,12,0.16)

Motion

9 tokens

--motion-fast
150ms
--motion-base
220ms
--motion-slow
320ms
--ease-in-out
cubic-bezier(0.65, 0, 0.35, 1)
--ease-out
cubic-bezier(0.33, 1, 0.68, 1)
--transition-base

→ --motion-base) var(--ease-in-out

220ms cubic-bezier(0.65, 0, 0.35, 1)
--transition-fast

→ --motion-fast) var(--ease-in-out

150ms cubic-bezier(0.65, 0, 0.35, 1)
--transition-slow

→ --motion-slow) var(--ease-in-out

320ms cubic-bezier(0.65, 0, 0.35, 1)
--transition-hover

→ --motion-slow) var(--ease-out

320ms cubic-bezier(0.33, 1, 0.68, 1)
PreviousThemingNextButton