Auf dieser Seite
How It Works
tokens.ts ──→ tokens.css ─────────┐ ({{ TOKENS_CSS }})
├──→ injected into ──→ templates/*.html ──→ pdf.ts/image.ts ──→ PDFs / PNGs
css/components.css ───────────────┘ ({{ COMPONENTS_CSS }}) ▲
(catalogued in components.meta.ts) │ compose from shared classes,
│ │ not re-implemented inline
▼
site/*.njk ──→ 11ty ──→ brand/dist/site/ ──→ website /brand/ (via git submodule)
Two layers are the single source of truth, and both feed every output. tokens.ts → tokens.css defines colors, type, and spacing; css/components.css defines the reusable components (steps, stat rows, testimonials, buttons, cards — catalogued in components.meta.ts and shown in the Library). Templates, documents, and social assets source both at render time — {{ TOKENS_CSS }} and {{ COMPONENTS_CSS }} — so a LinkedIn card composes from the same component vocabulary the website uses, instead of forking a second copy. Components sit above tokens (their classes reference var(--…)), so tokens inject first. This is the composition discipline applied across formats: design a component once, use it everywhere.
Build Scripts
| Script | Command | Purpose |
|---|---|---|
build:tokens | tsx scripts/build-tokens.ts | Regenerate tokens.css + tokens.json from tokens.ts |
build:assets | tsx scripts/export-assets.ts | Regenerate all raster assets + document previews (Playwright, slow) |
build:site | bash scripts/build-site.sh | Render Brand Site → dist/site/ |
build:kit | tsx scripts/build-kit.ts | Assemble dist/brand-kit/ + dist/brand-kit.zip |
build:dist | bash scripts/build-dist.sh | Meta: tokens → assets → site → kit |
build:skill | bash scripts/build-skill.sh | Package dist/escape-velocity-brand.skill |
dev | 11ty --serve | Serve Brand Site at localhost:3000/brand/ with live reload |
pdf | tsx generators/pdf.ts | Markdown → branded A4 PDF |
image | tsx generators/image.ts | HTML/SVG → PNG (banners, social) |
pres | tsx generators/presentation.ts | Markdown → slide deck (HTML viewer + PDF + PNGs) |
Updating Tokens
Edit brand/tokens.ts — Change colors, fonts, or spacing values
Run npm run dev in brand/ — Brand Site at localhost:3000/brand/ updates live as you tweak tokens
Commit and push the brand repo — that becomes the new "release" the website can consume
In the website repo: git submodule update --remote _brand → commit the new pin → deploy. The live /brand/ page now reflects the new tokens.
Source Reference
- tokens.ts — Token source of truth (colors, fonts, spacing)
- tokens.css — Generated CSS custom properties
- css/components.css — Reusable component classes (injected into templates as
{{ COMPONENTS_CSS }}) - components.meta.ts — Component registry (drives the Library + skill catalog)
- BRAND_SPEC.md — Canonical brand specification
- BRAND_SKILL.md — Agent cheatsheet (token table + CSS vars + layout patterns)
- docs/architecture.md — System diagram + layer model