A system, not a collection of one-offs.

This system replaces the dozens of bespoke styles scattered through page sections with a small set of primitives whose variants are sufficient. If you find yourself reaching for a custom font-size, a raw hex value, or a one-off clamp() — stop. Open this page. Find the variant. Or extend the system here, not in the consuming component.

The rules are blunt. No font-family declarations in components — use var(--font-display), var(--font-body), or var(--font-mono). No raw hex outside global.css. No fresh clamp() values for spacing — pick from the eight scale tokens. Animation timing comes from the three duration tokens and two easing curves, nothing else.

<Heading level={1} size="4xl">Quiet capital</Heading>
<Heading level={2} size="3xl">A founder’s partner</Heading>
<Heading level={3} size="md" family="sans">Utility heading</Heading>

// Props
//   level:   1..6                            (semantic)
//   size:    '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm'
//   family:  'serif' | 'sans'                (default: serif)
//   tone:    'default' | 'muted' | 'accent'
//   balance: boolean                         (default: true)
//
// Headings never render italic. Nested <em> tags are normalized.

<Text size="lg" leading="relaxed" measure>...</Text>
<Text tone="muted">...</Text>
<Text family="serif" italic>...</Text>

// Props
//   as:      'p' | 'span' | 'div'           (default: p)
//   size:    'xs' | 'sm' | 'base' | 'md' | 'lg'
//   tone:    'default' | 'muted' | 'subtle' | 'accent'
//   weight:  'light' | 'regular' | 'medium'
//   family:  'sans' | 'serif' | 'mono'
//   italic:  boolean
//   leading: 'tight' | 'normal' | 'relaxed'
//   measure: boolean                         (caps at 62ch)

<Tag index={5}>Projects</Tag>
<Tag tone="accent">In progress</Tag>
<Tag tone="success">Confirmed</Tag>
<Tag tone="danger">Action required</Tag>

// Props
//   index: string | number | undefined
//   tone:  'default' | 'accent' | 'muted' | 'inverse'
//          | 'success' | 'warning' | 'danger'
//   size:  'sm' | 'md'
//   rule:  boolean                           (default: true)

<Button variant="primary" size="lg" arrow>Continue</Button>
<Button variant="secondary" href="/work">View work</Button>
<Button variant="link" arrow>Read more</Button>
<Button variant="danger">Delete</Button>
<Button variant="primary" loading>Submitting</Button>

// Props
//   variant:   'primary' | 'secondary' | 'ghost' | 'link' | 'danger'
//   size:      'sm' | 'md' | 'lg'
//   href:      string                        (renders as <a>)
//   target:    '_self' | '_blank'
//   type:      'button' | 'submit' | 'reset'
//   disabled:  boolean
//   loading:   boolean
//   arrow:     boolean
//   fullWidth: boolean

<Card padding="md">...</Card>                       <!-- default: flat -->
<Card variant="outlined" padding="md">...</Card>
<Card variant="elevated" padding="lg" href="/journal">...</Card>

<Card variant="elevated" padding="lg">
  {#snippet header()}<Tag>Header</Tag>{/snippet}
  {#snippet footer()}<Button variant="link" arrow>Action</Button>{/snippet}
  <Heading>Body content</Heading>
</Card>

// Props
//   variant: 'flat' | 'outlined' | 'elevated' | 'grain'  (default: flat)
//   padding: 'none' | 'sm' | 'md' | 'lg'
//   href:    string                          (renders as <a>)
//   target:  '_self' | '_blank'
//   header / media / footer:  Snippet

<Field label="Email" name="email" type="email" required />
<Field label="Stage" name="stage" type="select" options={[
  { value: 'seed', label: 'Seed' },
  { value: 'a',    label: 'Series A' },
]} />
<Field label="Notes" name="notes" type="textarea" rows={4} />
<Field label="Email" name="bad" error="Invalid address" />

// Props
//   type:         'text' | 'email' | 'tel' | 'url' | 'password'
//                 | 'search' | 'number' | 'textarea' | 'select'
//   name:         string                     (required for forms)
//   id:           string                     (required for label/control link)
//   label:        string
//   placeholder:  string
//   value:        string                     (bindable)
//   helper:       string
//   error:        string                     (replaces helper, sets aria-invalid)
//   required:     boolean
//   disabled:     boolean
//   size:         'md' | 'lg'
//   rows:         number                     (textarea)
//   options:      { value, label }[]         (select)
//   autocomplete: string

<Stack gap="4">
  <Heading>Title</Heading>
  <Text>Body</Text>
  <Button>Action</Button>
</Stack>

<Stack direction="horizontal" gap="3" align="center">
  <Button>Save</Button>
  <Button variant="ghost">Cancel</Button>
</Stack>

// Props
//   direction: 'vertical' | 'horizontal'
//   gap:       '0'..'6' (4pt scale)
//              | 'element' | 'card' | 'block' | 'block-lg' | 'section' (tokens)
//   align:     'start' | 'center' | 'end' | 'stretch' | 'baseline'
//   justify:   'start' | 'center' | 'end' | 'between' | 'around'
//   wrap:      boolean