Skip to main content

Page Frame

ONE consistent page frame for all routes. Every page uses these shared decisions.

Frame Specification​

1. Page Shell​

  • Layout: Section + Container composition
  • Outer container max-width: lg (1024px) — shared by ALL pages for consistent H1 left edge
  • Background: brand-bg (#f8f7f3) as default page background
  • Padding: Responsive page gutters via Container (px-4 sm:px-6 md:px-8)
  • Inner content: May narrow (e.g. prose max-w-prose), but outer frame stays fixed at lg

2. Back Link / Breadcrumb Slot​

  • Position: Top of page, before hero
  • Style: text-body-sm, text-brand-muted, with underline
  • Pattern: ← {Parent} or breadcrumb trail using / separator
  • Minimum touch target: 44px height

3. Optional Eyebrow​

  • Component: Eyebrow atom
  • Style: text-eyebrow (0.75rem, mono, uppercase, tracking 0)
  • Color: text-brand-accent (default) or text-ink-subtle
  • Use: Signals what section or category follows

4. H1 - Page Title​

  • Font: Fraunces (via font-display)
  • Size: text-h1 — fluid clamp(2rem, 1.5rem + 2vw, 3rem)
    • Mobile (320-375px): ~2rem (32px) — clears right gutter with visible margin
    • Desktop (1024px+): 3rem (48px)
  • Weight: 700
  • Line height: 1.08
  • Color: text-brand-text (#161411) - warm neutrals only for light surfaces
  • Layout: Left-aligned, left edge consistent across all pages via shared outer frame

5. Lead / Intro Paragraph​

  • Size: text-lead (1.25rem/20px)
  • Line height: 1.6
  • Color: text-brand-muted (#5c554c) - warm neutrals only
  • Max width: 65ch (reading measure)
  • Spacing: mt-4 below H1

6. H2 - Section Heading​

  • Font: Inter (default sans)
  • Size: text-h2 (2.25rem/36px)
  • Weight: 700
  • Line height: 1.14
  • Color: text-brand-text (#161411) - warm neutrals only for light surfaces
  • Spacing: rhythm-loose (3rem) before, rhythm-tight (0.75rem) after

7. Body Content​

  • Size: text-body (1.125rem/18px)
  • Line height: 1.7
  • Color: text-brand-text (#161411) - warm neutrals only
  • Max width: 65ch
  • Spacing: rhythm-base (1.5rem) between blocks

Section Components​

1. Section Header​

<SectionHeader
  label="Optional eyebrow"
  heading="Main heading"
  description="Optional lead paragraph"
  align="left"
  as="h1" // or h2, h3
/>

2. Door / Card Grid​

  • Layout: Vertical list or grid
  • Card: border-t divider (first:border-t-0)
  • Spacing: py-4 per item
  • Content: Title (font-display or font-semibold) + body + arrow
  • Min height: 44px tap target

3. Prose Block​

  • Component: Use rhythm-base gap for paragraph spacing
  • Style: text-body, max-w-prose
  • Lists: disc bullets, pl-6

4. Primary Action​

<Button
  to="/next/"
  size="lg"
  icon={<span aria-hidden="true">→</span>}
>
  Action Label
</Button>
  • Pattern: Bordered list (border-t)
  • Item: Link with title + description + arrow
  • Spacing: py-3 or py-4
  • Hover: subtle background change

Vertical Section Rhythm​

Use Section component spacing tokens:

  • compact (py-8 md:py-10) - tight index pages
  • md (py-8 md:py-12) - standard sections
  • lg (py-12 md:py-16) - spacious landings
  • xl (py-16 md:py-20) - hero sections

Surface Alternation​

Alternate section backgrounds for visual rhythm:

  1. brand-bg (#f8f7f3) - warm paper, page default
  2. brand-surface (#ffffff) - white cards/sections
  3. brand-surface-muted (#f1eee7) - subtle tint
  4. ink (#111827) - dark sections, use chalk colors

Responsive Breakpoints​

Prove at these widths:

  • 320px - minimum (WCAG reflow)
  • 375px - common mobile
  • 768px - tablet / reading width cap
  • 1440px - desktop

Typography Hierarchy​

  1. Display (rare, editorial only): text-display, font-display
  2. H1: text-h1, font-display (Fraunces)
  3. H2: text-h2, font-sans (Inter)
  4. H3: text-h3, font-sans (Inter)
  5. Lead: text-lead
  6. Body: text-body
  7. Small: text-body-sm
  8. Eyebrow: text-eyebrow, font-mono

Color Usage​

Use warm brand- neutrals only* for light surfaces. Retire cool ink (#111827, #4b5563) from page content.

Light Sections (brand-bg, brand-surface, brand-surface-muted)​

  • Headings: text-brand-text (#161411) - warm neutral
  • Body: text-brand-muted (#5c554c) - warm neutral
  • Links: text-brand-primary (#a4271f)
  • Borders: border-brand-border (#ded8cc)

Dark Sections (bg-brand-text or bg-ink*)​

  • Background: bg-brand-text (#161411) preferred for warm consistency
  • *Exception: bg-ink (#111827) may remain on existing dark sections until unified
  • Headings: text-brand-inverse (#fbf8ef) or text-chalk
  • Body: text-brand-inverse-muted (#d9d0c2) or text-chalk-muted
  • Links: text-brand-on-dark (#f87171)
  • Use chalk-* tokens for text on dark backgrounds

Implementation Rules​

  1. Every page composes Section + Container
  2. Breadcrumbs appear before the hero H1
  3. One H1 per page in font-display (Fraunces)
  4. SectionHeader for all section openers
  5. Button for primary actions (not bare links)
  6. Consistent spacing via Section spacing tokens
  7. Reading width capped at 768px (max-w-screen-md)
  8. Touch targets minimum 44px height

Examples​

See live:

  • / - Homepage with frame applied
  • /process/ - Process hub with frame applied