BELA65 — Style Guide

The frozen design system, in words. Live demo: styleguide.html

Every page inherits these tokens. Do not fork them. Tokens are defined in css/styles.css :root (light) and [data-theme="dark"].

---

Color

Status colors: --ok (green), --warn (amber), --info (blue), each with a soft background variant. Used by .badge and check marks.

Rule: never introduce a new brand color. Compose with the tokens above (and color-mix).

Typography

• Family: system sans (-apple-system, Segoe UI, Inter, …); mono for code/technical labels.
• Scale: Display 38–66px · H1 34px · H2 23–40px · H3 18px · body 16–19px.
• Line-height: 1.65 body; 1.05–1.28 headings. Tracking tightens as size grows (−.02 to −.03em on display).
• Reading level: Grade 8–9 for marketing copy (see the frozen Voice & Tone).

Spacing & layout

• Container: max-width 1120px (grids) / 760px (prose), 28px side padding.
• Section rhythm: 92px vertical (64px .tight, 52px on phones). Alternate .section / .section.alt for cadence.
• Radius: 12px default · 8px small · 18px large. Shadows: --shadow / --shadow-sm.
• Grid: responsive auto-fit minmax() grids; one idea per row on mobile.

Motion

• Reveal-on-scroll (.reveal → .in) via animation.js. Degrades to visible without JS.
• Easing: cubic-bezier(.16,1,.3,1) (--ease). Hover lifts 1–3px.
• Reduced motion: all animation disabled under prefers-reduced-motion.

Buttons

• .btn.btn-primary — gradient, white text, the one primary action per screen.
• .btn.btn-ghost — bordered, secondary.
• .btn-lg — larger hero/CTA size.

Never invent other button styles.

Voice (inherited from the frozen Foundation)

Calm, clear, confident. Understandable by a school student, a business owner, and a CTO. No hype words (revolutionary, game-changing, magical, seamless-as-filler). Every claim within the Claims Ledger. Every technical term paired with its plain-language line on first use.

Dark mode

Toggle persists to localStorage; first visit follows prefers-color-scheme. Every component is designed in both themes — verify both when adding anything.

---

See COMPONENTS.md for the component markup, and styleguide.html for the live rendering.