← Back to Overview

Design System & Brand Tokens

Colors, typography, components, and the self-contained principle — the visual DNA of every generated page

On this page
01Three Colors, One System 02Typography Stack 03Self-Contained Principle 04Component Library 05Responsive & Animation
01

Three Colors, One System

The entire visual identity is built on three core colors, complemented by semantic colors for feedback states. Each color has a clear role — no arbitrary usage, but a coherent system throughout.

Core Colors

#000099
Deep Blue
Trust, authority. Navigation, hero sections, module numbers, code backgrounds.
#FE8F11
Impulse Orange
Energy, action. CTAs, links, progress bars, active states, badges.
#E4DAD4
Warm Gray
Warmth, calm. Borders, background alternation, dividers, scrollbar.

Semantic Colors

#84C041
Success
Correct answers, success messages, file tree files
#CC0000
Error
Wrong answers, error messages, blocking notices
#1195EB
Info
Quiz borders, info boxes, neutral notices
02

Typography Stack

Three font families cover all use cases. Each has a clear purpose — no mixing, no overlap. Loaded via Google Fonts, the only external dependency.

Bricolage Grotesque — Display
Headings, Module Numbers, Display Text

Headings, card titles, pyramid labels, flow step labels. Weights: 400, 600, 700, 800.

--font-display
DM Sans — Body
Body text, descriptions, labels, navigation

Paragraphs, card descriptions, breadcrumbs, quiz options, tooltips. Weights: 300–700, including italic.

--font-body
JetBrains Mono — Code
Code blocks, badges, technical labels

File trees, inline code, module numbers in overview, breadcrumb level tags, variable names. Weights: 400, 500, 600.

--font-mono

Size Scale (--text-*)

xs0.75rem — 12px
sm0.875rem — 14px
base1rem — 16px
lg1.125rem — 18px
xl1.25rem — 20px
2xl1.5rem — 24px
3xl1.875rem — 30px
4xl2.25rem — 36px
5xl3rem — 48px
6xl3.75rem — 60px
// Font-Family CSS Variables --font-display: 'Bricolage Grotesque', Georgia, serif; --font-body: 'DM Sans', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; // Usage in components: .module-title { font-family: var(--font-display); } .card-desc { font-family: var(--font-body); } .file-tree { font-family: var(--font-mono); } .card-badge { font-family: var(--font-mono); }

Three font stacks: Bricolage Grotesque for everything that needs attention (headings, titles). DM Sans for everything meant to be read (body text, descriptions). JetBrains Mono for everything technical (code, badges, labels). Fallbacks ensure a clean layout even without Google Fonts.

03

Self-Contained Principle

No external CSS files. Everything is inline in every HTML file. The CSS is defined once in Phase 3 and copied into each individual file. Result: files work offline, no broken links, no CDN dependency (except Google Fonts).

✅
Works Offline
Every HTML file contains its complete styling. No server needed, no build process, no bundler.
🔗
No Broken Links
No <link rel="stylesheet"> pointing to a missing file. The style is always there.
📦
Portable
Individual files can be shared via email, copied to other directories, or opened offline.

~200 CSS variables in these categories

18
--color-*
Core, semantic, and surface colors
3
--font-*
Display, Body, Mono font stacks
10
--text-*
Size scale from xs (0.75rem) to 6xl (3.75rem)
2
--leading-*
Line heights: tight (1.15) and normal (1.6)
12
--space-*
Spacing values from 0.25rem to 5rem
4
--radius-*
Border radii: sm, md, lg, full
3
--shadow-*
Shadows: sm, md, lg
5
--ease-*, --duration-*
Timing: fast, normal, slow + easing + stagger delay
3
--content-width, --nav-height, --radius-full
Layout constants
04

Component Library

All visual building blocks follow the structure .module → .module-content → .module-header → .module-body → .screen. Here are the key components at a glance:

.card + .cards-grid
Card Title
Description text with details.
badge
.quiz + .quiz-option
✏️ Quick Check
Answer A
Answer B ✓
.file-tree
// Comment
directory/
  file.ts
.term + .term-tooltip
A technical term with explanation
Tooltip explaining the term
.deep-dive-link
DEEP DIVE
Explore topic
→
.viz-flow + .viz-flow-step
📦
Step 1
→
✨
Step 2
05

Responsive & Animation

Two breakpoints, scroll-snap with proximity (not mandatory!), and IntersectionObserver-based reveal animations.

Breakpoints

Desktop > 768px Multi-column grids, full flow visualizations
Tablet ≤ 768px Single columns, vertical flows
Mobile ≤ 480px Compact, stacked
📲
Scroll-Snap
scroll-snap-type: y proximity — gentle snapping, no forced jumping. Each .module is a snap point.
proximity
✨
Animate-In
.animate-in + IntersectionObserver. Elements fade in with translateY(20px) → translateY(0).
IntersectionObserver
// Animation Timing --ease-out: cubic-bezier(.16, 1, .3, 1); --duration-fast: 150ms; // Hover, tooltips --duration-normal:300ms; // Transitions, cards --duration-slow: 500ms; // Animate-in, reveals --stagger-delay: 120ms; // Delay between siblings // IntersectionObserver Configuration rootMargin: '0px 0px -10% 0px' threshold: 0.1 // Stagger Formula transition-delay: calc(var(--stagger-index) * var(--stagger-delay)); // --stagger-index is set via JS (0, 1, 2, ...)

Animation system: Three speed tiers (150ms for quick hover effects, 300ms for normal transitions, 500ms for reveal animations). The easing curve cubic-bezier(.16, 1, .3, 1) provides a natural deceleration. Stagger delays make child elements appear sequentially (120ms apart).

✏️ Quick Check

Why is CSS embedded inline instead of using an external stylesheet?

Because external CSS files load more slowly
So files work completely standalone without dependencies
Because the browser prioritizes inline CSS
Deep Dive Color Space & Typography in Detail → Contrast calculations, WCAG compliance, variable font weights, and the complete token list
→
More deep-dive pages for developers
01 Orchestrator 02 Helpfulness Scoring 03 Pipelines 04 Design System 05 Navigation 06 Templates 07 Quality Assurance