tokens.css is read on the server and split into groups. When a value is a var() reference, the resolved value is shown next to it.
| Preview | Name | Value | Resolved | Screens |
|---|---|---|---|---|
--gujo-black |
#141414 |
|||
--gujo-text |
#141414 |
|||
--gujo-navy |
#071d49 |
|||
--gujo-sub |
#6e6e6e |
|||
--gujo-dim |
#a3a3a3 |
|||
--gujo-mute |
#808991 |
|||
--gujo-white |
#ffffff |
53 screens | ||
--gujo-wash |
#ffffff |
53 screens | ||
--gujo-surface2 |
#f5f5f5 |
|||
--gujo-border |
#e5e5e5 |
|||
--gujo-accent |
#020202 |
|||
--gujo-accent-fg |
#ffffff |
53 screens | ||
--gujo-r15 |
#d97706 |
|||
--gujo-danger |
#dc2626 |
|||
--gujo-ok |
#059669 |
|||
--dref-blue |
var(--brand) |
#0a6cff |
||
--dref-blue-dark |
var(--brand-dark) |
#084fbf |
||
--dref-ink |
var(--gujo-text) |
#141414 |
||
--dref-navy |
var(--gujo-text) |
#141414 |
||
--dref-muted |
var(--gujo-sub) |
#6e6e6e |
||
--dref-line |
var(--gujo-border) |
#e5e5e5 |
||
--dref-soft |
var(--gujo-surface2) |
#f5f5f5 |
||
--brand |
#0a6cff |
|||
--brand-dark |
#084fbf |
|||
--brand-soft |
#e6efff |
|||
--brand-soft-2 |
#f0f5ff |
|||
--brand-tint |
#f6f9ff |
| Preview | Name | Value | Resolved | Screens |
|---|---|---|---|---|
--gujo-bar1-h |
64px |
|||
--gujo-bar2-h |
52px |
|||
--gujo-bar3-h |
46px |
|||
--gujo-header-stack-h |
var(--gujo-bar1-h) |
64px |
||
--gujo-mobile-header-h |
var(--gujo-bar1-h) |
64px |
| Preview | Name | Value | Resolved | Screens |
|---|---|---|---|---|
| The quick brown fox 123 | --font-serif |
'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', '바탕', 'Batang', serif |
||
| The quick brown fox 123 | --fw-regular |
400 |
||
| The quick brown fox 123 | --fw-medium |
500 |
||
| The quick brown fox 123 | --fw-semibold |
600 |
||
| The quick brown fox 123 | --fw-bold |
700 |
||
| The quick brown fox 123 | --fw-heavy |
750 |
||
| The quick brown fox 123 | --fw-extrabold |
800 |
||
| The quick brown fox 123 | --fw-black |
900 |
||
| The quick brown fox 123 | --fs-display-xl |
34px |
||
| The quick brown fox 123 | --lh-display-xl |
1.15 |
||
| The quick brown fox 123 | --fs-display |
28px |
||
| The quick brown fox 123 | --lh-display |
1.2 |
||
| The quick brown fox 123 | --fs-subheading |
20px |
||
| The quick brown fox 123 | --lh-subheading |
1.3 |
||
| The quick brown fox 123 | --fs-h1 |
24px |
||
| The quick brown fox 123 | --lh-h1 |
1.3 |
||
| The quick brown fox 123 | --fs-h2 |
20px |
||
| The quick brown fox 123 | --lh-h2 |
1.35 |
||
| The quick brown fox 123 | --fs-h3 |
17px |
||
| The quick brown fox 123 | --lh-h3 |
1.4 |
||
| The quick brown fox 123 | --fs-h4 |
15px |
||
| The quick brown fox 123 | --lh-h4 |
1.4 |
||
| The quick brown fox 123 | --fs-h5 |
14px |
||
| The quick brown fox 123 | --lh-h5 |
1.45 |
||
| The quick brown fox 123 | --fs-h6 |
12px |
||
| The quick brown fox 123 | --lh-h6 |
1.4 |
||
| The quick brown fox 123 | --fs-eyebrow |
11px |
||
| The quick brown fox 123 | --fs-ui-label |
13px |
||
| The quick brown fox 123 | --fs-lead |
16px |
||
| The quick brown fox 123 | --lh-lead |
1.8 |
||
| The quick brown fox 123 | --fs-body |
14px |
||
| The quick brown fox 123 | --lh-body |
1.7 |
||
| The quick brown fox 123 | --fs-body-sm |
13px |
||
| The quick brown fox 123 | --lh-body-sm |
1.65 |
||
| The quick brown fox 123 | --fs-caption |
12px |
||
| The quick brown fox 123 | --lh-caption |
1.5 |
||
| The quick brown fox 123 | --fs-micro |
11px |
||
| The quick brown fox 123 | --lh-micro |
1.4 |
| Preview | Name | Value | Resolved | Screens |
|---|---|---|---|---|
--dref-shadow |
none |
|||
--gujo-ease |
cubic-bezier(.4, 0, .2, 1) |