Dev Tool
Token Usage Map
Auto-generated overview of which components use which semantic color tokens. Parsed from source files at build time.
22 Tokens defined
120 Total usages
5 Unused tokens
Each component rendered as it appears on the website. Select a token to filter and highlight where it's used.
Sidebar
components/Sidebar.astro PageHeader
components/PageHeader.astro Foundations
Page Title Example
This is how the page header looks with a description and a badge label.
StatusBadge
components/StatusBadge.astro Ready In Progress Planned
CodeBlock
components/CodeBlock.astro example.css css
.button {
background: var(--color-fill-element-brand-bold);
color: var(--color-fill-element-on-dark-contrast);
border-radius: 8px;
padding: 12px 24px;
}TokenTable
components/TokenTable.astro Preview Semantic name Primitive reference
--color-fill-element-brand-bold L #60E198
--color-content-primary L #0E1115F0
--color-border-neutral-dark L #1D1F23
ThemeToggle
components/ThemeToggle.astro Global Typography & Elements
styles/global.css Heading 1
Heading 2
Heading 3
Heading 4
This is a paragraph with bold text and a link. Body text uses --color-content-secondary.
pre code block
styled with --color-fill-element-contrast bg
and --color-fill-element-on-dark-contrast text| Token | Value | Usage |
|---|---|---|
| --color-content-primary | #0E1115F0 | Primary text |
| --color-border-neutral-dark | #1D1F23 | Table header border |
Search Modal
layouts/DocsLayout.astro + components/Search.tsx Search documentation... Esc