warm-1warm-2warm-3warm-5warm-7inkaccentsuccesswarninginfoerrorpaper
brand.magicblocks.ai · v1.0
One brand kit. Three ways in.
Design tokens, 134 React components, 241 icons, 836+ brand assets, voice guidance, and HTML templates — published as a website, an npm family, and a JSON API. Pick the path that matches what you're building.
- 16Chapters
- 134Components
- 241Icons
- 836+Brand assets
- 3npm packages
The system, at a glance.
Five warm neutrals, one hero accent, four faces — every component is composed from these atoms.
All tokens →- Display
- Body copy renders here in DM Sans — quiet, readable, generous.
- A felt italic, set in Fraunces.
- --accent: #FF3F7A;
- s-1 · 4
- s-3 · 12
- s-5 · 24
- s-7 · 48
- s-9 · 96
Real components, rendered live.
Every chapter ships an HTML demo, the matching CSS, and a typed React component — drop in @magicblocksai/ui or paste the markup straight from a chapter page.
InfoSuccessWarningDangerAccent
Pipeline value
$2.4M
↑ 18.2% vs last month
Conversations
1,284
↑ 6.4% vs last month
Reply latency
42s
↓ 12s vs last month
Pick an icon. Grab a tagline. Drop in a template.
The full library of brand assets, copy, voice notes, and HTML templates — searchable, click-to-copy, ready to drop into a deck, email, or post.
- 241 icons, 8 logo variants, customer wall
/assets - Taglines, value props, CTAs, about copy
/content - Voice & tone — banned words, examples
/voice - 9 HTML templates with slot placeholders
/templates - 23 narrative scenes — engine blocks, race timelines, journey maps
/components/11-narrative-systems - One-click downloads (PNG, SVG, source)
/downloads
npm install and ship.
Three workspace packages on GitHub Packages. Vanilla CSS for any static site, React + Tailwind for modern apps, brand-data JSON for either.
- Auth setup, .npmrc, install commands
/install - 257 typed React components, live demos
/components - 110+ CSS vars — colour, type, spacing, motion
/tokens - Drop-in CSS for any HTML/Astro/Hugo project
/css/v1/
npm install \
@magicblocksai/ui \
@magicblocksai/css \
@magicblocksai/brandFetch the JSON. Read the markdown. Use the contract.
Every page mirrors a JSON endpoint at /api/; every chapter HTML serves as Markdown via Cloudflare's auto-transform (append .md). Single source, three surfaces.
- Full design-token JSON
/api/brand.json - Component catalogue + per-component specs
/api/components.json - Brand assets, copy, voice, templates
/api/{assets,content,voice,templates}.json - How to consume the kit (5 modes)
/AI-AGENT-GUIDE.md
Browse the visual library
16 chapters · many demos · three buckets — General (foundations, atoms, molecules), Website (marketing narrative — chapter 11 has 23 hero scenes / engine blocks / journey maps / ROI calcs), App (shell, pipeline, AI). Each chapter HTML is the canonical visual reference.
- 01FoundationsTokens, colour, type scale, motion.
- 02TypographyDisplay, body, mono — the four faces in use.
- 03IconsForty-plus monoline glyphs across three sub-families.
- 04Buttons & controlsButtons, toggles, switches, segmented controls.
- 05Forms & inputsInputs, textarea, select, checkbox, radio, file.
- 06Cards & surfacesCards, panels, dividers, dashboard tiles, KPI.
- 07NavigationTop nav, side nav, tabs, breadcrumbs, pagination, menu.
- 08Data displayTable, key-value, avatars, sparkline, score ring.
- 09Feedback & overlaysAlerts, banners, toasts, modals, drawers, tooltips.
- 10Content blocksHero, feature grid, testimonials, CTA, pricing.
- 11Patterns & specialsSign-in, dashboard shell, settings, onboarding, 404.
- 12Narrative systemsHero scenes, decay curve, scoreboard, race timeline, ROI calc.
- 13Media & presentationVideo player, carousel, device frames, stage chat.
- 14Platform narrativeFeature clusters, contrast pairs, comparison tables, cluster map.
- 15App shellDetail shell, command palette, density toggle, empty states.
- 16App pipelineKanban, pipeline bar, activity timeline, inbox, checklist.
- 17App AISage drawer, compose drawer, AI suggestion cards, confetti.
- 18Agent BuilderQuery/condition rows, action wizard, journey graph, builder shell.
- 19ConversationMessage bubble, transcript, composer, trace button, live tester.
- 20ExplainabilityReasoning timeline — tool calls, citations, decisions, sources.
- 21Designer ToolkitBrand the chat widget — style editor, presets, embed snippet.
- 22BillingPlans, usage, invoices, payment methods.
- 23Workspace & settingsMembers, invites, roles, audit log, settings shell.
- 24IntegrationsThird-party connections, webhooks, API keys.
- 25Chat WidgetLauncher, proactive bubble, expanded shell, messages, composer.
- 26Embed ExtrasChannel sandbox, voice player, persona switcher.
How it stays in sync
Every component change updates four surfaces in the same commit so what marketing reads, what your app installs, and what an agent fetches always agree.
- 1Chapter HTML demoVisual reference + the HTML/CSS snippets you can paste anywhere.
- 2_shared.css → @magicblocksai/cssVanilla CSS classes, identical to what the chapter HTML uses.
- 3TSX → @magicblocksai/uiTyped React components with the matching API surface.
- 4React snippet tab on the chapter pageCopy-pasteable TSX showing exactly how to use it.
A regression script (check-coverage.mjs) and a markup-equivalence test gate every PR — drift between the four surfaces fails the build.
Stable resource URLs
/css/v1/magicblocks.cssVersioned vanilla CSS — drop in any HTML/Astro/Hugo project. Pin to a major./css/latest/magicblocks.cssAlways-latest pointer./assets/{category}/{path}Brand assets at canonical paths. Mirrored at top-level (/01-logo-full/...) for legacy chapter HTML./api/components/{Name}.jsonPer-component spec — props, examples, demo URL.