The full library
28 chapters. 224 sections. Every visual reference and every download for the brand, on one page. Same data lives at /api/brand.json, /api/assets.json, /api/components.json for AI agents.
- 28 Chapters
- 224 Sections
- 5 Buckets
General
Foundations and atoms. Tokens, type, buttons, inputs, cards, navigation, data display, feedback, overlays.
-
01 Foundations
open →MagicBlocks component library · Foundations. On-brand HTML + CSS examples, copy-ready.
-
02 Typography
open →MagicBlocks component library · Typography. On-brand HTML + CSS examples, copy-ready.
-
03 Buttons & controls
open →MagicBlocks component library · Buttons & Controls. On-brand HTML + CSS examples, copy-ready.
- 3.1 Primary button
- 3.2 Secondary button
- 3.3 Ghost / tertiary button
- 3.4 Danger button
- 3.5 Sizes
- 3.6 Icon button
- 3.7 Link button
- 3.8 Button groups & split
- 3.9 Loading state
- 3.10 Toggle (switch)
- 3.11 Checkbox · radio
- 3.12 Segmented control
- 3.13 Close & dismiss
- 3.14 Anatomy of the primary button
-
04 Forms & inputs
open →MagicBlocks component library · Forms & Inputs. On-brand HTML + CSS examples, copy-ready.
-
05 Cards & surfaces
open →MagicBlocks component library · Cards & Surfaces. On-brand HTML + CSS examples, copy-ready.
-
06 Navigation
open →MagicBlocks component library · Navigation. On-brand HTML + CSS examples, copy-ready.
-
07 Data display
open →MagicBlocks component library · Data display. 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 →MagicBlocks component library · Feedback & overlays. On-brand HTML + CSS examples, copy-ready.
Website
The big marketing surfaces — hero scenes, narrative-systems visualisations, content blocks, page templates, platform-narrative comparisons.
-
09 Content blocks
open →MagicBlocks component library · Content blocks. On-brand HTML + CSS examples, copy-ready.
-
10 Patterns & specials
open →MagicBlocks component library · Page templates. Full-page layouts for auth, dashboards, conversations, settings, onboarding, and 404s.
-
11 Narrative systems
open →MagicBlocks component library · Narrative systems. 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 →MagicBlocks component library · Media & presentation. 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 →MagicBlocks component library · Platform & narrative. Feature cluster, contrast pair, feature table, cluster map, counter rail — the strategic-narrative components for /platform and /why-magicblocks.
App
Product surfaces — the shell, the pipeline view, the AI workspace.
-
13 App shell
open →MagicBlocks component library · App shell & overlays. Detail-page 3-column shell, command palette, density mode, empty states.
-
14 App pipeline
open →MagicBlocks component library · App pipeline. Kanban, pipeline bar, activity timeline, inbox row, onboarding checklist, MRR chart.
-
15 App AI
open →MagicBlocks component library · App AI. Sage drawer, compose drawer, AI suggestion card, KB suggestion card, confetti win moment.
Brand assets
The marks, faces, partner ecosystem, and the patterns + artefacts that ship with the brand. Every asset has download links + copy-URL pills.
-
17 Logos
open →Three lockups × five variants × @1x/@2x/@3x PNG sizes. Every shipped logo, with minimum-size + clear-space rules and misuse don'ts.
-
18 Icons
open →240 stroke icons across the brand. Three tones (ink / duo / pink). Click any tile to open the inspector with copy-URL, <img>, and React snippet.
-
19 Customer logos
open →21 approved customer marks. Two PNG sizes each. Use in proof strips, testimonial blocks, and case-study chrome.
-
20 Founders
open →Editorial portraits of the founding team — bylines, About pages, press kits. Two PNG sizes per face.
-
21 Integrations
open →13 partner platform marks at standard sizes (80 / 160 / 320px PNG).
-
22 Patterns
open →Background SVG patterns at three colourways. Copy-CSS pill drops the rule straight into a stylesheet. 23 patterns.
-
23 Marketing
open →Banners, business cards, social avatars, type specimen, colour chart — grouped by purpose.
-
24 Favicons
open →Multi-size app-icon set + ready-to-paste <link> head snippet for any HTML root.
Editorial
Tokens, voice, copy, templates — the editorial layer.
-
25 Design tokens
open →Colours, type, spacing, motion, shadows. 110 CSS variables — every value the kit ships.
-
26 Voice & tone
open →How the brand sounds — vibe, principles, banned words, words we love, tone-by-context, on-brand vs off-brand examples.
-
27 Content library
open →Approved copy you can drop in. Taglines, value props, CTA phrases, one-liners, About-copy variants. Click any block to copy.
-
28 HTML templates
open →9 drop-in HTML + inline-CSS canvases with slot placeholders. Preview rendered, download raw.
Every section, one list
Use ⌘F / Ctrl-F to find any section across the whole library. Each row jumps directly to the section's anchor on its chapter page.
- 1.1 Foundations Colour
- 1.2 Foundations Spacing scale
- 1.3 Foundations Radii
- 1.4 Foundations Shadow & elevation
- 1.5 Foundations Motion
- 1.6 Foundations Borders
- 1.7 Foundations Opacity & emphasis
- 1.8 Foundations Z-index
- 1.9 Foundations How a token flows into a component
- 2.1 Typography Type families
- 2.2 Typography Type scale
- 2.3 Typography Headings
- 2.4 Typography Body text
- 2.5 Typography Eyebrow · lede · caption
- 2.6 Typography Lists
- 2.7 Typography Blockquote
- 2.8 Typography Inline code · kbd · mark
- 2.9 Typography Code block
- 2.10 Typography Text utilities
- 2.11 Typography Anatomy
- 3.1 Buttons & controls Primary button
- 3.2 Buttons & controls Secondary button
- 3.3 Buttons & controls Ghost / tertiary button
- 3.4 Buttons & controls Danger button
- 3.5 Buttons & controls Sizes
- 3.6 Buttons & controls Icon button
- 3.7 Buttons & controls Link button
- 3.8 Buttons & controls Button groups & split
- 3.9 Buttons & controls Loading state
- 3.10 Buttons & controls Toggle (switch)
- 3.11 Buttons & controls Checkbox · radio
- 3.12 Buttons & controls Segmented control
- 3.13 Buttons & controls Close & dismiss
- 3.14 Buttons & controls Anatomy of the primary button
- 4.1 Forms & inputs Text input
- 4.2 Forms & inputs Icons, prefixes, suffixes
- 4.3 Forms & inputs States
- 4.4 Forms & inputs Textarea
- 4.5 Forms & inputs Select
- 4.6 Forms & inputs Search field
- 4.7 Forms & inputs File upload & dropzone
- 4.8 Forms & inputs Fieldset & legend
- 4.9 Forms & inputs Combobox
- 4.10 Forms & inputs Date picker
- 4.11 Forms & inputs Range sliders
- 4.12 Forms & inputs Form layout
- 4.13 Forms & inputs Anatomy of a field
- 5.1 Cards & surfaces Base card
- 5.2 Cards & surfaces Feature card
- 5.3 Cards & surfaces Pricing card
- 5.4 Cards & surfaces Testimonial card
- 5.5 Cards & surfaces Stat / metric card
- 5.6 Cards & surfaces Media / blog card
- 5.7 Cards & surfaces Callout surface
- 5.8 Cards & surfaces Panel
- 5.9 Cards & surfaces Dashboard tile
- 5.10 Cards & surfaces KPI tile
- 5.11 Cards & surfaces Divider
- 5.12 Cards & surfaces Anatomy of a feature card
- 6.1 Navigation Top nav
- 6.2 Navigation Side nav
- 6.3 Navigation Tabs
- 6.4 Navigation Breadcrumbs
- 6.5 Navigation Pagination
- 6.6 Navigation Menu · dropdown
- 6.7 Navigation Stepper
- 6.8 Navigation Skip-to-content link
- 6.9 Navigation Command-K bar
- 6.10 Navigation Industry bar
- 6.11 Navigation Site nav · mega menu
- 6.12 Navigation Site nav · landing variants
- 6.13 Navigation Anatomy of the top nav
- 7.1 Data display Data table
- 7.2 Data display Table variants
- 7.3 Data display Chips & tags
- 7.4 Data display Badges & status dots
- 7.5 Data display Avatars
- 7.6 Data display Data lists & key-value
- 7.7 Data display Progress
- 7.8 Data display Timeline / activity feed
- 7.9 Data display Code block
- 7.10 Data display Stat grid
- 7.11 Data display Chart
- 7.12 Data display Tree
- 7.13 Data display Empty state
- 7.14 Data display Anatomy — table row
- 7.15 Data display Score ring
- 7.16 Data display SLA countdown ring
- 7.17 Data display Health sparkline + risk badge
- 7.18 Data display Stat tile — moment + sparkline-behind
- 8.1 Feedback & overlays Toasts
- 8.2 Feedback & overlays Inline alerts
- 8.3 Feedback & overlays Top-of-page banners
- 8.4 Feedback & overlays Tooltips
- 8.5 Feedback & overlays Popover
- 8.6 Feedback & overlays Modal dialog
- 8.7 Feedback & overlays Slide-over drawer
- 8.8 Feedback & overlays Skeleton loaders
- 8.9 Feedback & overlays Spinner & inline loader
- 8.10 Feedback & overlays Inline message
- 8.11 Feedback & overlays Confirmation dialog
- 8.12 Feedback & overlays Snackbar
- 8.13 Feedback & overlays Anatomy — toast
- 8.14 Feedback & overlays Bulk action bar
- 9.1 Content blocks Hero section
- 9.2 Content blocks Feature grid
- 9.3 Content blocks Logo wall
- 9.4 Content blocks Testimonial strip
- 9.5 Content blocks CTA block
- 9.6 Content blocks Stats strip
- 9.7 Content blocks FAQ accordion
- 9.8 Content blocks Comparison table
- 9.9 Content blocks Team grid
- 9.10 Content blocks Pull quote
- 9.11 Content blocks Footer
- 9.12 Content blocks Customer logo grid
- 9.13 Content blocks Press strip
- 9.14 Content blocks Integration grid
- 9.15 Content blocks Founder cards
- 9.16 Content blocks Anatomy — hero section
- 10.1 Patterns & specials Pricing page
- 10.2 Patterns & specials Auth — sign in
- 10.3 Patterns & specials 404 / not found
- 10.4 Patterns & specials Conversation preview
- 10.5 Patterns & specials Dashboard shell
- 10.6 Patterns & specials Empty-state pages
- 10.7 Patterns & specials Settings page
- 10.8 Patterns & specials Onboarding
- 10.9 Patterns & specials Anatomy — pricing hero tier
- 11.0 Narrative systems In action
- 11.1 Narrative systems Decay curve
- 11.2 Narrative systems Scoreboard
- 11.3 Narrative systems Race timeline
- 11.4 Narrative systems Engine block
- 11.5 Narrative systems Triptych
- 11.6 Narrative systems Handoff card
- 11.7 Narrative systems Profile card
- 11.8 Narrative systems Integration hub
- 11.9 Narrative systems HAPPA arc
- 11.10 Narrative systems Guardian shield
- 11.11 Narrative systems Journey map
- 11.12 Narrative systems Closest edge wins
- 11.13 Narrative systems Ecosystem rings
- 11.14 Narrative systems Revenue calculator
- 11.15 Narrative systems Brand timeline
- 11.16 Narrative systems Hero bloom canvas
- 11.17 Narrative systems Hero live demo
- 11.18 Narrative systems Leak cards
- 11.19 Narrative systems Chat comparison
- 11.20 Narrative systems Mini-atoms
- 11.22 Narrative systems Inline illustrations
- 11.21 Narrative systems Anatomy & motion
- 12.1 Media & presentation Video player
- 12.2 Media & presentation Carousel
- 12.3 Media & presentation Browser frame
- 12.4 Media & presentation Laptop frame
- 12.5 Media & presentation Phone frame
- 12.6 Media & presentation Deck device
- 12.7 Media & presentation Stage-progress chat
- 12.8 Media & presentation Product dashboard
- 12.9 Media & presentation Anatomy & notes
- 13.1 App shell Detail page 3-column shell
- 13.2 App shell Command palette
- 13.3 App shell Density mode
- 13.4 App shell Empty states
- 14.1 App pipeline Kanban column & draggable card
- 14.2 App pipeline Pipeline stage segmented bar
- 14.3 App pipeline Activity timeline
- 14.4 App pipeline Inbox row
- 14.5 App pipeline Onboarding checklist
- 14.6 App pipeline MRR composition chart
- 15.1 App AI Sage AI drawer
- 15.2 App AI Compose drawer
- 15.3 App AI AI suggestion card
- 15.4 App AI KB suggestion card
- 15.5 App AI Confetti win moment
- 16.1 Platform narrative Feature cluster
- 16.2 Platform narrative Contrast pair
- 16.3 Platform narrative Feature table
- 16.4 Platform narrative Cluster map
- 16.5 Platform narrative Counter rail
- 17.01 Logos Full lockup
- 17.02 Logos Icon
- 17.03 Logos Wordmark
- 17.04 Logos Misuse — don't
- 18.01 Icons All icons
- 19.01 Customer logos Customer wall
- 20.01 Founders Portrait set
- 21.01 Integrations Integration directory
- 22.01 Patterns All patterns
- 23.01 Marketing Campaign
- 23.02 Marketing Stationery
- 23.03 Marketing Social
- 23.04 Marketing Reference
- 24.01 Favicons Head snippet
- 24.02 Favicons Files
- 25.01 Design tokens Colours
- 25.02 Design tokens Typography
- 25.03 Design tokens Spacing
- 25.04 Design tokens Radius
- 25.05 Design tokens Motion
- 25.06 Design tokens Shadows
- 25.07 Design tokens Minimum sizes
- 25.08 Design tokens CSS variables
- 26.01 Voice & tone The vibe
- 26.02 Voice & tone Principles
- 26.03 Voice & tone Banned words
- 26.04 Voice & tone Words we love
- 26.05 Voice & tone Tone by context
- 26.06 Voice & tone Examples
- 27.01 Content library Taglines
- 27.02 Content library Value props
- 27.03 Content library CTA phrases
- 27.04 Content library One-liners
- 27.05 Content library About copy
- 28.01 HTML templates Closing CTA block
- 28.02 HTML templates Transactional email shell
- 28.03 HTML templates Feature grid (3-up)
- 28.04 HTML templates Marketing footer (warm)
- 28.05 HTML templates Marketing hero
- 28.06 HTML templates Presentation slide (16:9)
- 28.07 HTML templates Social meta card (1200x630)
- 28.08 HTML templates Stats strip (4-up)
- 28.09 HTML templates Featured testimonial strip
Want this as JSON? /api/components.json
· /api/assets.json
· /api/brand.json