Guide
Design tokens
The raw material of the system, rendered from the same stylesheet you install. The reference below is generated from the library's tokens.css at build time, so it cannot drift.
01 · Light
Giấy & Mực
Colour
bg
surface
tint
ink
ink-muted
line
accent
accent-2
danger
success
Type scale
xs · Làm tay, phơi nắng
sm · Làm tay, phơi nắng
md · Làm tay, phơi nắng
lg · Làm tay, phơi nắng
xl · Làm tay, phơi nắng
2xl · Làm tay, phơi nắng
3xl · Làm tay, phơi nắng
4xl · Làm tay, phơi nắng
Print shadows
Radius
02 · Dark
Giấy & Mực
Colour
bg
surface
tint
ink
ink-muted
line
accent
accent-2
danger
success
Type scale
xs · Làm tay, phơi nắng
sm · Làm tay, phơi nắng
md · Làm tay, phơi nắng
lg · Làm tay, phơi nắng
xl · Làm tay, phơi nắng
2xl · Làm tay, phơi nắng
3xl · Làm tay, phơi nắng
4xl · Làm tay, phơi nắng
Print shadows
Radius
Colour
| Token | Light | Dark |
|---|---|---|
| --gu-bg | #f3eee3 | #14110c |
| --gu-surface | #fbf8f1 | #1e1a13 |
| --gu-tint | #e9e1cf | #2a251b |
| --gu-ink | #18150f | #f1ebdc |
| --gu-ink-muted | #625c4f | #a59d8a |
| --gu-line | #d8cfbb | #3c3628 |
| --gu-accent | #2b3f8f | #8c9eea |
| --gu-accent-ink | #fbf8f1 | #14110c |
| --gu-accent-2 | #c98a1b | #e0a53a |
| --gu-accent-2-ink | #18150f | #14110c |
| --gu-danger | #a8321f | #f08a74 |
| --gu-success | #2f6b3a | #7fc08a |
| --gu-scrim | rgb(24 21 15 / 0.55) | rgb(0 0 0 / 0.65) |
| --gu-border | var(--gu-ink) | same |
| --gu-focus-ring | var(--gu-accent) | same |
Typography
| Token | Value |
|---|---|
| --gu-font-display | "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --gu-font-body | "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --gu-font-mono | "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace |
| --gu-text-xs | 0.75rem |
| --gu-text-sm | 0.875rem |
| --gu-text-md | 1rem |
| --gu-text-lg | 1.25rem |
| --gu-text-xl | 1.5625rem |
| --gu-text-2xl | 1.9375rem |
| --gu-text-3xl | 2.4375rem |
| --gu-text-4xl | 3.0625rem |
| --gu-leading-tight | 1.05 |
| --gu-leading-snug | 1.3 |
| --gu-leading-normal | 1.6 |
| --gu-weight-regular | 400 |
| --gu-weight-medium | 500 |
| --gu-weight-bold | 700 |
| --gu-tracking-display | -0.03em |
| --gu-tracking-label | 0.2em |
Space
| Token | Value |
|---|---|
| --gu-space-1 | 0.25rem |
| --gu-space-2 | 0.5rem |
| --gu-space-3 | 0.75rem |
| --gu-space-4 | 1rem |
| --gu-space-5 | 1.5rem |
| --gu-space-6 | 2rem |
| --gu-space-7 | 3rem |
| --gu-space-8 | 4rem |
Shape
| Token | Value |
|---|---|
| --gu-radius-sm | 2px |
| --gu-radius-md | 4px |
| --gu-radius-lg | 8px |
| --gu-radius-full | 999px |
| --gu-border-width | 1.5px |
| --gu-line-width | 1px |
Shadow
| Token | Value |
|---|---|
| --gu-shadow-color | var(--gu-ink) |
| --gu-shadow-sm | 2px 2px 0 var(--gu-shadow-color) |
| --gu-shadow-md | 3px 3px 0 var(--gu-shadow-color) |
| --gu-shadow-lg | 5px 5px 0 var(--gu-shadow-color) |
| --gu-shadow-pressed | 1px 1px 0 var(--gu-shadow-color) |
Layers
| Token | Value |
|---|---|
| --gu-z-overlay | 50 |
| --gu-z-popup | 60 |
Motion
| Token | Value |
|---|---|
| --gu-duration-fast | 120ms |
| --gu-duration-base | 200ms |
| --gu-duration-slow | 360ms |
| --gu-ease-standard | cubic-bezier(0.2, 0, 0, 1) |
| --gu-ease-stamp | cubic-bezier(0.3, 1.4, 0.5, 1) |
| --gu-focus-width | 2px |
| --gu-focus-offset | 2px |