# BELA65 — Design System (FROZEN)
### The visual foundation every page inherits from

> **Status: 🧊 FROZEN — 2026-07-02.** The approved Launch Studio homepage is the official BELA Design System. Every Launch Studio page from Phase 3 onward inherits this exact visual language. This document is the contract; `site/css/styles.css` (tokens) + `site/css/product.css` (marketing components) are its implementation.

---

## Execution model (new, from Phase 3 onward)

Every deliverable now produces **two** artifacts:

1. **Single Source of Truth — Markdown** (`NN_PHASE/*.md`) — the authored content and messaging, inheriting from the frozen Foundation.
2. **Production-ready HTML landing page** (`site/*.html`) — the **primary** deliverable, generated from the Markdown by `site/build.mjs`.

The HTML is **not** a documentation page. It is a **premium SaaS product landing page** targeting Apple / Stripe / OpenAI / Vercel / Linear / Notion marketing quality (≥ 9.5/10 bar). Content is authored once in Markdown; the HTML renders it through the design system. No duplicated messaging.

---

## Design tokens (frozen — do not fork)

Defined in `site/css/styles.css :root` and reused by every page.

| Token | Light | Dark | Use |
|-------|-------|------|-----|
| Accent | `#4f46e5` | `#8b93f8` | Primary brand, buttons, links, active states |
| Text | `#191d24` | `#e9ebf0` | Body |
| Text-soft / muted | `#3d4552` / `#6b7480` | `#c3c9d4` / `#8b94a3` | Secondary copy |
| Background | `#ffffff` | `#0b0d12` | Page |
| Subtle / sunken | `#f6f7f9` / `#f0f2f5` | `#12151d` / `#0f1219` | Cards, code, wells |
| Border | `#e7e9ee` | `#222732` | Dividers, card edges |
| Radius | 12px (8px small, 16px large) | — | Cards, buttons, frames |
| Font | system sans (SF/Segoe/Inter) | — | Everything |
| Mono | SF Mono / Menlo | — | Code, technical labels |

**Type scale:** hero 44–64px / h1 34px / h2 23px / h3 18px / body 16–19px, line-height 1.65, letter-spacing tightens as size grows.
**Spacing rhythm:** section vertical padding 88–120px; content max-width 760px (prose) / 1120px (grids); 16–24px gaps.

---

## Frozen chrome (identical on every page)

- **Header:** blurred sticky bar, BELA logo (indigo rounded square + wordmark "BELA65 · Launch Studio"), primary nav, a **primary CTA button**, and the theme toggle. Same height (60px), same blur, same border.
- **Footer:** brand, grouped links, and a closing line — identical across all product pages.
- **Theme toggle:** sun/moon, persists to `localStorage`, respects `prefers-color-scheme`. Never removed.
- **Logo, icon style (1.8px stroke line icons), badges, cards, buttons** — one library, reused.

---

## Component library (marketing — `site/css/product.css`)

Every product landing page is assembled from these frozen components:

| Component | Purpose |
|-----------|---------|
| `.btn` / `.btn-primary` / `.btn-ghost` | Buttons — the only button styles allowed |
| `.mkt-header` / `.mkt-footer` | The frozen chrome |
| `.hero` (marketing) | Full-width hero: eyebrow, headline, subhead, CTAs, visual |
| `.section` + `.section-head` | The section rhythm and titles |
| `.feature-grid` / `.feature` | Cards for features / problems / benefits |
| `.steps` | Numbered "how it works" sequence |
| `.pipeline` | The signature 15-stage Engineering Pipeline visual (grouped Understand → Design → Build → Prove → Ship) |
| `.passport-card` | The Engineering Passport signature object |
| `.beforeafter` | Two-column Before / After compare |
| `.chips` | Industries |
| `.mockup` | Screenshot placeholder frames |
| `.faq` (accordion) | Questions & answers |
| `.cta-band` | Closing call-to-action |
| `.related` | Related BELA products |
| `.reveal` | Scroll-in animation (degrades to visible with no JS) |

---

## Required sections for every product landing page

In order: **Hero → Simple Explanation → Business Problems Solved → Why It Matters → How It Works → Workflow → Features → Benefits → Before vs After → Industries → Screenshots → Engineering Pipeline → Engineering Passport → FAQ → (Pricing, if applicable) → CTA → Related BELA Products.**

## Non-negotiables

- Passes the **5-second test**: What is this? · Why should I care? · What do I do next?
- Understandable by a **school student, a business owner, and a CTO**.
- Every claim within the **Claims Ledger** (`00_FOUNDATION/03_claims-ledger.md`).
- Every page **visually indistinguishable** as belonging to the same website.

---

## Version History

| Version | Date | Change |
|--------|------|--------|
| 1.0 | 2026-07-02 | Homepage frozen as the official BELA Design System. Marketing execution model + component library established. |