Every block you need. On brand.
A living reference for the MagicBlocks web & product surface. Sixteen chapters across three buckets — General primitives, Website blocks, App UX — every component with copy-ready HTML and CSS. Designed so a human or an AI agent can reach for any piece and ship something that looks — and feels — like us.
How to use this
Every component on every page has a live render, an HTML snippet, and a CSS snippet — with one-click copy on each. All CSS is scoped and leans on the shared design tokens in _shared.css, so snippets paste cleanly into any page that imports those tokens. Light and dark variants work via a single data-theme attribute on <body>.
Complex components have an "anatomy" diagram that names each part — useful when briefing designers, engineers, or AI agents who need to produce brand-consistent variations.
_shared.css (--ink, --accent, --warm-3, etc.) — you can either include _shared.css, or inline the variables you need. The brand palette and type system are the source of truth; don't introduce new colours or fonts.
Foundations & primitives
Tokens, type, primitive controls — the atomic layer used by every Website and App component below.
Foundations
Colour tokens, spacing scale, radii, shadows, motion, borders, opacity, z-index. The atomic layer every other component depends on.
General →Typography
Full type scale (web + app), heading hierarchy, body, lead, eyebrow, caption, quotes, code, numeric tabular, link states, editorial italic.
General →Buttons & Controls
Primary, secondary, ghost, destructive, icon, loading, disabled. Button groups, segmented controls, pills, chips, tags, badges.
General →Forms & Inputs
Text, textarea, select, checkbox, radio, toggle, search, file upload, combobox, date. Field states, inline validation, form layouts.
General →Cards & Surfaces
Basic, stat, testimonial, feature, pricing, media, dashboard tile, KPI tile, callout, banner — across elevation levels.
General →Navigation
Top nav, sticky nav, sidebar, breadcrumbs, pagination, tabs, stepper, footer, anchor menu, skip-to-content, command-k bar.
Marketing & storytelling
Hero blocks, branded system diagrams, slide-frames — for brand.magicblocks.ai and customer-facing pages.
Content Blocks
Hero, feature row, CTA block, logo wall, testimonial, FAQ, pricing grid, comparison table, stat row, team grid, pull quote.
Website →Narrative systems
Branded system diagrams and wireframe abstractions for the marketing site — decay curves, scoreboards, race timelines, the engine, handoff + profile cards, integration hub, HAPPA arc, Guardian shield, journey maps, infra map, ecosystem rings, ROI calculator, brand timeline, hero bloom canvas, plus mini-atoms. All in code, all animated, all themed.
Website →Media & presentation
Video player, carousel, device frames (browser, laptop, phone), and the deck device — a laptop-framed slide switcher with keyboard + dot nav. All vanilla HTML/CSS/JS, Cloudflare-Pages-ready, zero dependencies.
Website →Platform & narrative
Five components that carry the strategic narrative — feature clusters, contrast pairs, comparison tables, cluster maps, counter rails. Used to build /platform and /why-magicblocks.
Product UX/UI
Dashboards, drawers, lists, AI surfaces — components for the actual product UI. CRM patterns expand here in chapters 13–15.
Data Display
Tables, lists, data lists, stat grids, charts, timelines, trees, empty states, skeleton loaders, progress, score & SLA rings, sparklines, avatar stacks.
App →Feedback & Overlays
Alerts, toasts, inline messages, modals, drawers, popovers, tooltips, progress, spinners, confirmations, snackbars, bulk-action bar.
App →Page templates
Full-page compositions ready to ship: pricing, sign-in, 404, conversation preview, dashboard shell, settings, onboarding, and empty-state pages. Drop whole onto production.
App →App shell & overlays
Detail-page 3-column shell, command palette (⌘K), density-mode demo, and five charming CRM empty states. The structural moves that hold the product together.
App →CRM pipeline patterns
Kanban with draggable cards, pipeline stage bar, activity timeline (six row types), inbox rows you dispatch with one keystroke, onboarding checklist, MRR composition chart. The six big CRM moves.
App →AI surfaces & celebration
The Sage AI drawer with tool-calls + proposal cards, the compose drawer with AI assist, AI & KB suggestion cards, and the confetti win moment. Every place Sage shows up.