BELA65 — Design System (FROZEN)
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
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:
- Single Source of Truth — Markdown (
NN_PHASE/*.md) — the authored content and messaging, inheriting from the frozen Foundation. - Production-ready HTML landing page (
site/*.html) — the primary deliverable, generated from the Markdown bysite/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, respectsprefers-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. |
More in this section
Turn a business need into software.
This document is part of the BELA65 Launch Studio.