---
version: alpha
name: Foundation Projects
description: >-
  Visual design system for Foundation Projects — a roofer-built investment
  platform. Grounded, considered, warm. Anchor blues, systems teal, growth
  green, warm sand, and value gold. Newsreader for headlines, Inter for body.
colors:
  # Brand primaries (semantic) — stitch-theme production values
  primary: "#103740"           # Anchor 900 — trust, authority, ink
  secondary: "#1b6969"          # Systems Teal — process, engineering, the machine
  tertiary: "#d79344"           # Value Gold — craft, spark, the second mile
  neutral: "#fef9f0"            # Foundation warm sand — clarity canvas
  # Surfaces
  surface-base: "#fef9f0"       # Page background (warm cream)
  surface-card: "#ffffff"       # Card / panel
  surface-card-hover: "#f8f3ea"
  surface-raised: "#f8f3ea"     # Slightly elevated panels
  # Text
  text-primary: "#103740"       # Headlines, core text
  text-secondary: "#1a4e58"     # Anchor 700 — supporting copy
  text-tertiary: "#3e7a88"      # Anchor 300 — captions, metadata
  text-muted: "#4a4a4a"
  text-subtle: "#8a8a8a"
  text-inverse: "#fdfcfa"       # Text on dark surfaces
  # Brand palette (raw)
  anchor-900: "#103740"
  anchor-700: "#1a4e58"
  anchor-500: "#2a6470"
  anchor-300: "#3e7a88"
  teal-700: "#004f50"
  teal-500: "#1b6969"
  teal-300: "#8cd3d2"
  green-700: "#2e6b42"
  green-500: "#3e8c59"          # Growth — results, dividends
  green-300: "#5ba374"
  gold-700: "#b87a2e"
  gold-500: "#d79344"
  gold-300: "#ffb86a"
  sand-300: "#ddd5c8"
  sand-200: "#e8e1d6"
  sand-100: "#f2ede4"
  sand-50: "#f8f3ea"
  sand-25: "#ffffff"
  sand-warm: "#fef9f0"
  # Borders
  border-default: "#ddd5c8"
  border-subtle: "#e8e1d6"
  border-focus: "#1b6969"
  # Status
  status-success: "#3e8c59"
  status-warning: "#d79344"
  status-error: "#c25450"
  status-info: "#1b6969"
  # Dark section tokens (used in CTA blocks, footer, dark hero)
  dark-bg: "#103740"
  dark-text: "#ffffff"
  dark-text-muted: "#a7cdd8"
  dark-accent: "#ffb86a"
# NOTE: fontSize values represent the upper bound of a fluid clamp() in CSS.
# See typography section in prose for the fluid range each token spans.
typography:
  display:
    fontFamily: Newsreader
    fontSize: 2.25rem
    fontWeight: 400
    lineHeight: 1.05
  h1:
    fontFamily: Newsreader
    fontSize: 3.25rem
    fontWeight: 400
    lineHeight: 1.1
  h2:
    fontFamily: Newsreader
    fontSize: 2.5rem
    fontWeight: 400
    lineHeight: 1.15
  h3:
    fontFamily: Newsreader
    fontSize: 2rem
    fontWeight: 400
    lineHeight: 1.2
  h4:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Inter
    fontSize: 1.25rem
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Inter
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.5
  caption:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 500
    lineHeight: 1.4
  overline:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.1em
  label-caps:
    fontFamily: Inter
    fontSize: 0.625rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.15em
  button:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 600
    lineHeight: 1
rounded:
  none: 0
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  "2xl": 24px
  button: 10px
  full: 9999px
# NOTE: spacing values are the upper bound of fluid clamp() ranges in CSS.
spacing:
  xs: 6px
  sm: 12px
  md: 20px
  lg: 32px
  xl: 48px
  "2xl": 72px
  "3xl": 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-inverse}"
    rounded: "{rounded.button}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.teal-700}"
    textColor: "{colors.text-inverse}"
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.button}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-card-hover}"
    textColor: "{colors.primary}"
  button-accent:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.anchor-900}"
    rounded: "{rounded.button}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-raised:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.lg}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.anchor-900}"
    rounded: "{rounded.full}"
    padding: 4px 12px
  section-dark:
    backgroundColor: "{colors.dark-bg}"
    textColor: "{colors.dark-text}"
    padding: 96px 0
---

## Overview

Foundation Projects is a roofer-built investment platform. The visual language
must signal **trust without aggression**, **craft without nostalgia**, and
**clarity without minimalism for its own sake**. We are not a tech startup
performing roofing. We are roofers performing capital allocation.

The aesthetic sits at the intersection of three references:

- **Editorial broadsheets** (The Atlantic, The Economist) — serif headlines,
  long-form prose, generous whitespace, real typographic hierarchy.
- **Premium architectural finishes** — warm matte materials, deep teals,
  brass-warmth accents. Nothing chrome. Nothing neon.
- **Mid-century industrial documents** — the confidence of a balance sheet
  printed on heavy paper.

The five brand pillars (named in our color palette) are:

1. **Anchor** (`#103740`) — trust, authority, the rock.
2. **Systems** (`#1b6969`) — process, engineering, the machine.
3. **Growth** (`#3e8c59`) — results, dividends, the yield.
4. **Foundation** (`#fef9f0`) — clarity, canvas, no fluff.
5. **Value** (`#d79344`) — craft, spark, the second mile.

When an agent reads this file, it should produce UI with deep-anchor headlines
in Newsreader, warm-cream backgrounds, systems-teal primary buttons, and
value-gold accents reserved for moments of consequence (the active state on a
timeline, the badge on a verified row, the spark on a hero CTA).

## Colors

The palette is rooted in **warm neutrals and a single dominant accent**
(teal), with gold reserved for high-attention moments. Cool blues never appear
in the wild; if you reach for blue, reach for anchor.

### Semantic tokens (use these in components)

- **Primary `#103740`** — "Anchor." Deep ink for headlines, primary buttons,
  the foundation of dark sections. Pairs with `#fef9f0` text in dark blocks.
- **Secondary `#1b6969`** — "Systems Teal." The interactive workhorse. Links,
  primary CTAs in light blocks, focus rings, active states.
- **Tertiary `#d79344`** — "Value Gold." Reserved for accents. Active timeline
  dots, badges, hover-emphasis on the secondary CTA on the brand-kit page.
  Never use as a primary button background — it loses its meaning when overused.
- **Neutral `#fef9f0`** — "Foundation warm sand." The page background. Softer
  than pure white, never gray. Read the room: this is a roofer's house, not a
  designer's portfolio.

### Surface hierarchy

- `surface-base` (`#fef9f0`) — page background.
- `surface-card` (`#ffffff`) — pure white cards on the warm canvas.
- `surface-raised` (`#f8f3ea`) — subtly elevated panels (sticky nav, tooltips).
- `dark-bg` (`#103740`) — full-bleed dark sections (final CTA, footer).

### Status

- Success: `#3e8c59` (growth green).
- Warning: `#d79344` (value gold).
- Error: `#c25450` (warm rust — never pure red).
- Info: `#1b6969` (systems teal).

### Rules

- Never introduce a hex value that is not in the palette. Add a token first.
- The site is light-mode only. Dark sections are blocks within a light page,
  not a dark theme. Do not generate a dark-mode counterpart.
- Anchor on anchor (`#fff` text on `#103740`) is the only inverse pairing.

## Typography

**Fluid sizing.** The `fontSize` values in front-matter are the **desktop
upper bound** of a CSS `clamp()` range. The full ranges (mobile → desktop):

- `display`: 1.5rem → 2.25rem (24 → 36px)
- `h1`: 2.25rem → 3.25rem (36 → 52px)
- `h2`: 1.875rem → 2.5rem (30 → 40px)
- `h3`: 1.5rem → 2rem (24 → 32px)
- `h4`: 1.25rem → 1.5rem (20 → 24px)
- `body-lg`: 1.063rem → 1.25rem (17 → 20px)
- `body-md`: 0.938rem → 1rem (15 → 16px)
- `body-sm`: 0.8rem → 0.875rem (12.8 → 14px)
- `caption`/`overline`: 0.7rem → 0.75rem (11.2 → 12px)

When rendering, scale toward the upper bound on desktop and the lower bound
on mobile. The fluid math is `clamp(min, preferred + vw, max)` — see
`src/styles/tokens/typography.css` for exact values.

Two families, no exceptions:

- **Newsreader** — serif, for all headings (`display`, `h1`–`h3`) and any
  pull-quote or editorial flourish. Italic weight 400 exists for emphasis in
  long-form prose; do not use bold-italic.
- **Inter** — sans, for everything else: body copy, UI, buttons, labels,
  microcopy, captions, overlines.

`h4` is the boundary: serif above, sans at and below. This is deliberate —
h4 is a UI-level heading (a card title, a list section) and should feel
informational, not editorial.

All sizes are **fluid via `clamp()`**. The site adapts from 320px to 1400px
viewport without breakpoints in type. Do not hardcode `font-size` in
components — reach for the token.

Overlines, label-caps, and badges use **wide letter-spacing** (`0.1em`–
`0.15em`) and small caps. They mark meta-information (section label, chapter
number, brand kit annotation). Never use letter-spacing on body or headings.

The `font-weight` ladder is conservative: 400 (regular), 500 (medium),
600 (semibold), 700 (bold), 800 (extrabold). Headings stay at 400. UI
elements (button, h4, overline) carry weight via 600/700.

## Layout

- **Container max-width:** 1400px (1600px on >1600px screens, 1800px on >2000px).
- **Container padding:** fluid `clamp(1rem, 3vw, 3rem)`.
- **Section gap:** fluid `clamp(4rem, 3rem + 5vw, 8rem)` between major sections.
- **Content-narrow max:** 640px (page-header descriptions).
- **Content-text max:** 720px (long-form prose blocks).
- **Form max:** 480px (newsletter, opt-in).
- **Hero text column:** 55% of container; 3D models occupy the remaining 45%
  with a 4% safe gap.

The grid is implicit, not explicit. There is no 12-column system enforced.
Use flexbox for one-axis composition and CSS grid for two-axis layouts. Center
text columns within their container; do not full-bleed body copy beyond the
content-text max.

## Elevation & Depth

Shadows are **warm and quiet**. The base color is anchor (`#103740`) at low
opacity, not black.

- `shadow-sm` — `0 1px 2px rgba(16, 55, 64, 0.04)` — borders, inputs.
- `shadow-md` — layered, `0.07` and `0.04` — cards at rest.
- `shadow-lg` — layered, `0.07` and `0.03` — cards on hover, raised panels.
- `shadow-xl` — layered, `0.07` and `0.03` — modals, peak elevation.

Glass effects exist (`blur(32px)` + `saturate(180%)`) and use a warm-cream
base at 45–72% opacity. Glass is reserved for the sticky header and a small
number of overlays. Do not glass-ify ordinary cards.

No neon glows. The teal glow tokens (`glow-primary`) exist for the brand
3D hero only and produce a soft 15–30px halo at 10–20% opacity.

## Shapes

- **Default radius:** `12px` (`rounded.lg`) for cards.
- **Buttons:** `10px` (`rounded.button`) — intentionally between `md` and
  `lg`. Do not change without a brand decision.
- **Inputs, badges-rectangular:** `8px` (`rounded.md`).
- **Pills / chips:** `9999px` (`rounded.full`).
- **Decorative dots:** `9999px`.

Sharp 90° corners are forbidden except in dividers, rule lines, and the
photographic edge of a hero image.

## Components

### button-primary

- Background: anchor (`#103740`).
- Text: warm-cream inverse (`#fdfcfa`).
- Radius: `10px`.
- Padding: `12px 24px`.
- Hover: background shifts to `#004f50` (teal-700), translateY(-2px),
  warm-teal shadow `0 12px 40px rgba(16, 55, 64, 0.12)`.
- Active: scale(0.97).

### button-secondary

- Background: white card (`#ffffff`).
- Text: anchor (`#103740`).
- Border: 1px `#ddd5c8` (border-default).
- Same radius, padding, hover-lift as primary.

### button-accent

- Background: gold (`#d79344`).
- Text: anchor-900 (`#103740`) — never white. Gold on dark text only.
- Used sparingly: brand-kit "Download DESIGN.md" CTA, "LOI Signed" badge,
  the value-pillar emphasis.

### card

- Background: white (`#ffffff`).
- Text: anchor-900.
- Radius: `12px`.
- Padding: `24px`.
- Shadow at rest: `shadow-md`.
- Hover lift: `translateY(-4px)`, shadow upgrade to `shadow-lg`.

### badge

- Background: gold (`#d79344`).
- Text: anchor-900.
- Radius: `9999px`.
- Padding: `4px 12px`.
- Use for brand-kit overlines, "Brand Kit · Visual Standards" markers,
  status indicators in cards.

### section-dark

- Background: anchor (`#103740`).
- Text: white.
- Padding-block: `96px`.
- Decorative gold accent appears as small underlines, dot indicators, and
  the active letter in the CTA arrow.

## Do's and Don'ts

### Do

- **Reach for the token first.** If a value is missing, add a token in
  `src/styles/tokens/` and reference it. Components never own raw hex.
- **Earn the gold.** Value-gold should appear at most once per viewport.
  When it's everywhere, it's nowhere.
- **Use serif for ideas, sans for actions.** Headlines explain. Buttons act.
- **Let the warm-cream breathe.** Whitespace is part of the brand. Do not
  fill empty space with decorative gradients.
- **Respect the editorial layout.** When a section has prose, give it a
  720px column and left-align it. Do not center long paragraphs.
- **Anchor on anchor.** Dark sections use `#103740` background with white
  text — never gray on dark, never blue-on-blue.

### Don't

- **Don't introduce a third typeface.** Newsreader + Inter is the entire
  type system. If you need to differentiate, change weight or letter-spacing.
- **Don't use cool blues.** Anchor reads as a deep teal-blue and is the only
  blue in the system. Pure `#0066cc`-style blues will look corporate-generic.
- **Don't neon-glow anything.** No `0 0 20px rgba(0, 255, 255, 0.8)` energy.
  Glows are warm, low-opacity, and used for the 3D hero canvas only.
- **Don't add a dark-mode counterpart.** The site is light-mode by design.
  Dark sections are local blocks, not a global theme.
- **Don't full-bleed body text.** Long-form prose lives at 640–720px.
- **Don't use letter-spacing on body or headings.** Reserve tracking for
  overlines, label-caps, and chapter markers.
- **Don't ship a `#hex` value in a component CSS file.** Tokens only.