Typeface
--font-sans — Helvetica Neue, with Arial and system fonts as fallbacks.
--font-weight-normalNormal · 400--font-weight-mediumMedium · 500--font-weight-boldBold · 700Font sizes
Semantic tokens components consume directly.
| Sample | Token | Primitive | Usage |
|---|---|---|---|
| Ag | --font-size-display-lg | --font-size-3xl3.052rem | Largest display text |
| Ag | --font-size-display | --font-size-xl1.953rem | Page heroes, project headers |
| Ag | --font-size-title | --font-size-xl1.953rem | Article / post titles |
| Ag | --font-size-subheading | --font-size-md1.25rem | Subsection headings |
| Ag | --font-size-lead | --font-size-lg1.563rem | Intro / lead paragraphs, blockquotes |
| Ag | --font-size-case-study-title | --font-size-md1.25rem | Case study section titles |
| Ag | --font-size-body | --font-size-base1rem→ --font-size-md at ≥1920px | Body copy, nav, buttons, cards |
| Ag | --font-size-section-label | --font-size-base1remvia --font-size-body; → --font-size-md at ≥1920px | Left-column section labels |
| Ag | --font-size-meta | --font-size-sm0.8rem | Dates, captions, attributions |
| Ag | --font-size-code | --font-size-sm0.8rem | Inline code, pre blocks |
| Ag | --font-size-chip | --font-size-xs0.64rem | Tags, pills, smallest labels |
Primitive scale
Major Third (1.25) ratio. Reference only — consume via semantic tokens above.
| Sample | Token | Value |
|---|---|---|
| Ag | --font-size-4xl | 3.815rem |
| Ag | --font-size-3xl | 3.052rem |
| Ag | --font-size-2xl | 2.441rem |
| Ag | --font-size-xl | 1.953rem |
| Ag | --font-size-lg | 1.563rem |
| Ag | --font-size-md | 1.25rem |
| Ag | --font-size-base | 1rem |
| Ag | --font-size-sm | 0.8rem |
| Ag | --font-size-xs | 0.64rem |
Color
Radix-style 12-step scales plus the semantic tokens mapped from them.
Semantic tokens
--color-bg--color-bg-white--color-text--color-text-muted--color-text-secondary--color-accent--color-accent-soft--color-link--color-border--color-border-emphasis--color-selection-bgSpacing
Radix-style spacing scale. Aliased to --spacing-* for component use.
--space-00.125rem--space-10.25rem--space-20.5rem--space-30.75rem--space-41rem--space-52rem--space-63rem--space-74rem--space-85rem--space-96remComponents
Atomic UI components from src/components/. Each entry shows the live component, its variants, and how to use it.
Button
Link-styled button. Renders an <a> with shared.btn base styles. Pass style for the variant (defaults to primary).
Main calls to action — project links, primary navigation.
style="primary"btn btn--primarySupporting actions with a visible border, less emphasis than primary.
style="secondary"btn btn--secondaryLow-emphasis actions — text-link feel without an underline.
style="tertiary"btn btn--tertiary---
import Button from '../components/Button.astro';
---
<Button href="/work/example" style="primary">View project</Button>
<Button href="/about" style="secondary">Learn more</Button>
<Button href="#details" style="tertiary">See details</Button>Callout
Tinted aside for highlighted copy in prose. Pass variant for the background scale and an optional icon (info,sparkle). Slot content supports headings, links, and emphasis.
Default — informational asides in writing and case studies.
variant="blue"callout callout--blueSuccess, positive, or “go” messaging.
variant="jade" icon="info"callout callout--jadeWarnings, errors, or cautionary notes.
variant="tomato"callout callout--tomatoNeutral secondary content blocks.
variant="gray" icon="sparkle"callout callout--gray---
import Callout from '../components/Callout.astro';
---
<Callout variant="blue" icon="info">
<p>Highlighted note with an optional icon.</p>
</Callout>Tag
Compact pill for labels and filters. Requires a label string; pass color to show a leading status dot.
Plain pill label — archive tags, filters, metadata.
label="Design".tagOptional 6×6 status dot for category or timeline filters.
label="Work" color="var(--color-accent)".tag---
import Tag from '../components/Tag.astro';
---
<Tag label="Design" />
<Tag label="Work" color="var(--color-accent)" />Separator
Horizontal divider between content blocks. Pass type for the visual style (defaults to dashes).
Default — repeating monospace hyphen pattern.
type="dashes"separator separator--dashesSimple 1px horizontal rule between sections.
type="line"separator separator--line---
import Separator from '../components/Separator.astro';
---
<Separator type="dashes" />
<Separator type="line" />HTML elements
Core semantic elements rendered with their global base styles.
This is a standard paragraph of body text. It uses--font-size-body with a comfortable line height for reading. Paragraphs are capped at a readable measure so long-form copy stays legible across wide viewports.
A second paragraph shows the default spacing between blocks of text, along with a sample inline link and some bold emphasis for good measure.
- First item in an unordered list
- Second item, with a slightly longer line of text to show wrapping
- Third item in the list
- First ordered step
- Second ordered step
- Third ordered step
Reference tokens inline like --color-accent or a function such as color-mix() within a sentence.
.button {
background: var(--color-accent);
color: var(--color-accent-contrast);
padding: var(--space-2) var(--space-4);
}Design is not just what it looks like and feels like. Design is how it works.