Design System
Style Guide
The complete visual system for TUB framework pages.
This page is the canonical reference for colors, typography, icons, and design rules. It is both human-readable and machine-readable — any Claude session can fetch this URL to understand the full design system without needing additional context.
01 — Colors
Brand Palette
All framework pages use these exact hex values. Never substitute or approximate.
Evergreen
#1C382C
Primary — backgrounds, headings, primary ink
Highlight
#ECFC80
Accent — electric lime, CTAs, emphasis, Level 4 payoff
Stone
#FCFCF0
Light backgrounds — page bg, print paper
Sage
#98B09C
Secondary green — softer elements
Text Soft
#4A6252
Secondary text on Stone backgrounds
Text Faint
#8AA494
Meta, labels, captions
Rule
#D8E4DC
Dividers, borders, subtle lines
Capability colors — AI Employee Evolution
Skill
#1C382C — Evergreen
Level 1 — AI Contractor
Brain
#2C5040 — Forest mid
Level 2 — Trained AI Employee
Connector
#3D6854 — Forest light
Level 3 — Connected AI Employee
Schedule
#ECFC80 — Highlight
Level 4 — Autonomous AI Employee
02 — Typography
Fonts & Type Scale
Fonts are self-hosted TTF files in docs/fonts/. Never use Google Fonts or system fonts as substitutes.
The AI Contractor
AI Employee Evolution
Great at the job. Doesn't know you.
Think of this like a really good contractor. They're excellent at what they do — they show up, they do the job, they leave.
Level 01 — Skill Only
03 — Icons
Capability Icons
Four custom SVG icons, one per capability layer. Must be fully inlined in print pages — never use the SVG symbol/use pattern in pages that use html2canvas for PDF export.
Skill
Three horizontal bars — instructions, tasks
Brain
Brain outline — knowledge base, business context
Connector
Two interlocking circles — app connections
Schedule
Clock face — automated, scheduled work
04 — Design Rules
Rules Enforced
These decisions were made through iteration and must not be relitigated. Follow them exactly.
1
Employee name is the headline — tagline is the descriptor
The level name ("The AI Contractor") gets
font-weight: 700 and the largest size. The one-liner tagline is smaller, italic, softer. Never make the tagline bigger than the name.2
No visual hierarchy between levels — all carry equal weight
Same card size, same number weight, same opacity at all levels. No progressive sizing or fading to imply one level is superior. Each level is a different tool, not a rank.
3
Size for screenshare — not for laptop reading
Level names in the interactive view:
clamp(3rem, 6.5vw, 6.5rem). Story text: clamp(1rem, 1.5vw, 1.375rem). Text must read on a Zoom screenshare at 50% zoom.4
Clean over ornate — no decorative complexity
Rejected: scroll-snap, grain overlays, background watermarks, persistent HUD, annotation arrows, drop-caps, entrance animations. Start from the simplest layout and only add if essential to the teaching moment.
5
Levels stack vertically, 1 at top → 4 at bottom
Not a 2×2 grid. Not horizontal panels. Vertical stack, top to bottom, in order.
6
SVG icons must be fully inlined in print pages
html2canvas cannot resolve
<use href="#symbol"> references. In print/index.html, every icon must have its full SVG path code written inline — no symbol/use pattern.7
Every framework ships all three views
One-page interactive, present mode, and print/download. All three, every time. Use AI Employee Evolution as the template.
05 — Three-View Pattern
Framework Views
Every framework page ships in three views. URL structure is always /frameworks/<slug>/, /present/, and /print/.
One-Page Interactive
//
Vertical accordion panels. Click to expand each level. Default view. Arrow key navigation. "When to use" callout at bottom.
Present Mode
//present/
Full-screen slides. Click or Space/arrows to advance. Evergreen bg with Highlight one-liners. Built for Zoom screenshare and keynotes.
Print / Download
//print/
Stone paper card. Download JPEG + PDF via html2canvas + jsPDF. Print button for physical printing. All SVG icons must be fully inlined.
06 — Machine Readable
Design Tokens
CSS custom properties used across all framework pages. Copy this block into any new framework page.
/* TUB FRAMEWORK DESIGN TOKENS — theuncommonbusiness.github.io/frameworks/style/ */
:root {
/* Core palette */
--evergreen: #1C382C;
--highlight: #ECFC80;
--stone: #FCFCF0;
--sage: #98B09C;
--text-soft: #4A6252;
--text-faint: #8AA494;
--rule: #D8E4DC;
/* Capability colors */
--c-skill: #1C382C;
--c-brain: #2C5040;
--c-connector: #3D6854;
--c-schedule: #ECFC80;
/* Typography */
--font-display: 'Season Mix', Georgia, serif;
--font-body: 'Inter', -apple-system, system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
/* Font files (self-hosted in docs/fonts/) */
/* Season Mix Bold 700 normal/italic */
/* Season Mix Medium 500 normal/italic */
/* Inter Variable 100-900 normal/italic */
}