The visual library
16 chapters. 181 demos. Every section in the kit, grouped into three buckets — General (foundations, atoms, molecules), Website (marketing narrative, content blocks, hero scenes), App (shell, pipeline, AI). Click any section to jump straight to its demo.
- 16 Chapters
- 181 Demo sections
- 3 Buckets
General
8 chapters · 104 sectionsFoundations and atoms — the small things every other chapter is built from. Tokens, type, buttons, inputs, cards, navigation, data display, feedback, overlays.
-
01 Foundations
open →On-brand HTML + CSS examples, copy-ready.
-
02 Typography
open →On-brand HTML + CSS examples, copy-ready.
-
03 Buttons & controls
open →On-brand HTML + CSS examples, copy-ready.
-
04 Forms & inputs
open →On-brand HTML + CSS examples, copy-ready.
-
05 Cards & surfaces
open →On-brand HTML + CSS examples, copy-ready.
-
06 Navigation
open →On-brand HTML + CSS examples, copy-ready.
-
07 Data display
open →On-brand HTML + CSS examples, copy-ready.
- 7.1 Data table
- 7.2 Table variants
- 7.3 Chips & tags
- 7.4 Badges & status dots
- 7.5 Avatars
- 7.6 Data lists & key-value
- 7.7 Progress
- 7.8 Timeline / activity feed
- 7.9 Code block
- 7.10 Stat grid
- 7.11 Chart
- 7.12 Tree
- 7.13 Empty state
- 7.14 Anatomy — table row
- 7.15 Score ring
- 7.16 SLA countdown ring
- 7.17 Health sparkline + risk badge
- 7.18 Stat tile — moment + sparkline-behind
-
08 Feedback & overlays
open →On-brand HTML + CSS examples, copy-ready.
Website
5 chapters · 62 sectionsThe big marketing surfaces — hero scenes, narrative-systems visualisations, content blocks, page templates, platform-narrative comparisons. This is where chapter 11 lives.
-
09 Content blocks
open →On-brand HTML + CSS examples, copy-ready.
-
10 Patterns & specials
open →Full-page layouts for auth, dashboards, conversations, settings, onboarding, and 404s.
-
11 Narrative systems
open →Decay curves, scoreboards, race timelines, engine diagrams, handoff cards, integration hubs, HAPPA arcs, Guardian shields, and the Cost-of-Inaction calculator — every branded system visual the marketing site needs.
- 11.0 In action
- 11.1 Decay curve
- 11.2 Scoreboard
- 11.3 Race timeline
- 11.4 Engine block
- 11.5 Triptych
- 11.6 Handoff card
- 11.7 Profile card
- 11.8 Integration hub
- 11.9 HAPPA arc
- 11.10 Guardian shield
- 11.11 Journey map
- 11.12 Closest edge wins
- 11.13 Ecosystem rings
- 11.14 Revenue calculator
- 11.15 Brand timeline
- 11.16 Hero bloom canvas
- 11.17 Hero live demo
- 11.18 Leak cards
- 11.19 Chat comparison
- 11.20 Mini-atoms
- 11.22 Inline illustrations
- 11.21 Anatomy & motion
-
12 Media & presentation
open →Video player, carousel, device frames (browser / laptop / phone), and the presentation deck device — all vanilla HTML/CSS/JS, Cloudflare-Pages-ready.
-
16 Platform narrative
open →Feature cluster, contrast pair, feature table, cluster map, counter rail — the strategic-narrative components for /platform and /why-magicblocks.
App
3 chapters · 15 sectionsProduct UI — the shell, the pipeline view, the AI workspace. Densest chapters; most stateful components.
-
13 App shell
open →Detail-page 3-column shell, command palette, density mode, empty states.
-
14 App pipeline
open →Kanban, pipeline bar, activity timeline, inbox row, onboarding checklist, MRR chart.
-
15 App AI
open →Sage drawer, compose drawer, AI suggestion card, KB suggestion card, confetti win moment.
Chapter HTMLs serve as Markdown via Cloudflare's auto-transform —
append .md to any URL above for the AI-agent view.