Skip to main content
Branden Garrett

System

The building blocks of this site. Tokens, primitives, and patterns. If something here looks wrong, the primitive is wrong — fix the primitive, not the page.

Tokens

Color tokens defined in globals.css. Toggle theme with the circles in the footer to see dark mode.

  • --background
  • --foreground
  • --card
  • --muted
  • --muted-foreground
  • --border
  • --primary
  • --secondary
  • --accent
  • --destructive
  • --success
  • --warning
  • --error
  • --ring

Typography

Body is font-mono (Fira Code) sitewide. All headings render UPPERCASE + font-normal. .prose applies the canonical heading scale to richtext.

Inside .prose

Prose heading 1

Prose heading 2

Prose heading 3

Prose heading 4

A body paragraph for context. Inline links use underline underline-offset-2. Strong uses font-bold— the only place bold is allowed.

Outside .prose (page chrome)

Page title (h1)

Section (h2, anchored)

Section (h2, no underline)

Subsection (h3)

Caption / helper text uses text-sm muted-foreground.

Hierarchy

Pick a heading by role, not by personal preference. Page title is bigger and underlined; everything else uses text-lg or text-base uppercase.

  1. Page titletext-2xl + underline
  2. Major sectiontext-xl + underline
  3. Sectiontext-lg
  4. Subsectiontext-base
  5. Eyebrow / labeltext-xs

Inputs

All inputs are square-edged. Labels are uppercase, font-normal, full-strength. Helper / error text sits below.

This field is required.

Buttons

Every button is uppercase. Variants for level (default / outline / secondary / destructive / ghost / link / nav), sizes for density.

Variants

Sizes

Disabled

Surfaces

Card, banner styles. All square-edged, hard borders.

Card title
Optional description, text-sm muted-foreground.

Card body content sits here.

Banner styles

Info banner — default style.

Success banner.

Warning banner.

Error banner.

Heros

Three impact levels. All fit inside the max-w-2xl column. Text wrapper is px-4 pt-4 pb-4.

High impact

Image background with centered overlay text. aspect-[4/5].

Headline goes here

Subhead supporting text.

Medium impact

Text first, then image with border-y border-foreground.

Headline goes here

Supporting paragraph copy.

Low impact

Just text. No media.

Headline goes here

Supporting paragraph copy.

Blocks

CMS blocks are placed by editors via the page layout. Vertical spacing between blocks is owned by RenderBlocks (my-8). Horizontal padding lives on each block (px-4).

Call to action

Ready to start?

Content (1 column)

A full-width content column. Renders editor richtext via the .prose styles.

Content (2 columns)

Half column on the left.

Half column on the right.

Media block

Optional caption text.

Form block

Spacing & layout

The site is capped at max-w-2xl (672px). Inside it, page sections use p-4 pb-8 and section spacing follows pb-12 last-of-type:pb-6. Block separation is my-8.

  • Page wrapperp-4 pb-8
  • Section rhythmpb-12 last-of-type:pb-6
  • Block separationmy-8
  • Block horizontal paddingpx-4
  • Form field gapgap-2 (FormItem)
  • Form fields gapgap-6 (form-level)