brand.magicblocks.ai · chapters

The visual library

26 chapters. 405 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.

26Chapters
405Demo sections
3Buckets

General

18 chapters · 260 sections

Foundations 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
icons
open →
The kit's icon family — forty-plus monoline glyphs across three sub-families. CRM icons, file-type icons with a smart dispatcher, and miscellaneous task-type / source-control / utility glyphs. All themable via currentColor.
04
Buttons & controls
open →
On-brand HTML + CSS examples, copy-ready.
05
Forms & inputs
open →
On-brand HTML + CSS examples, copy-ready.
06
Cards & surfaces
open →
On-brand HTML + CSS examples, copy-ready.
07
Navigation
open →
On-brand HTML + CSS examples, copy-ready.
08
Data display
open →
On-brand HTML + CSS examples, copy-ready.
17
App AI
open →
Sage drawer, compose drawer, AI suggestion card, KB suggestion card, confetti win moment, score card, narration log, evidence quote, paste-and-recheck area.
18
agent builder
open →
The operator-facing surface used to configure an agent — declarative query / condition rules, source-to-target field mapping, connection test affordances, version switching, and the structured document editor. Six components compose the configuration vocabulary.
19
conversation
open →
The operator-facing chat surface — message bubble, transcript shell, composer, per-message trace button, summary banner, and the live agent-tester. Six components compose the transcript end-to-end.
20
explainability
open →
The AI reasoning flow — a vertical timeline of tool-calls, agent messages, citations, decisions, and errors. Two components compose the operator-facing ‘show me the thinking’ surface.
21
designer toolkit
open →
The designer-side toolkit operators use to brand the chat widget before deploying. Five components — color field, swatch picker, style section, style editor, embed snippet — compose the kit's brand-my-widget workflow.
22
billing
open →
The operator-side surface for plans, usage, invoices, and payment methods. Six components — plan tier cards, usage meters, invoice rows, payment method displays, the billing history table, and a drop-in page wrapper.
23
workspace
open →
The operator-side surface for team administration — members, pending invites, and the audit log. Six components compose the workspace-admin workflow: role badges, member rows, invite rows, audit-log entries, a team page header, and a drop-in members page wrapper.
24
integrations
open →
The operator-side surface for third-party integrations and webhook plumbing. Five components compose the integrations workflow: integration cards, a filterable grid, a webhook delivery console, OAuth-callback banners, and a drop-in integrations page wrapper.
25
widget
open →
The full end-user-facing chat widget — launcher, proactive bubble, expanded shell, messages, typing indicator, quote cards, facts drawer, composer, buttons, feedback, disclaimers, branding marker, brand-theme presets, and the named motion system.
26
embed extras
open →
Embed-side surfaces beyond the chat panel — ChannelSandbox, VoicePlayer, WidgetPersonaSwitcher, and the Mortgage POS: a conversational point-of-sale with a live application card, branching question script, lender pricing and submission, shipped wired end to end and as nineteen composable components.

Website

5 chapters · 102 sections

The big marketing surfaces — hero scenes, narrative-systems visualisations, content blocks, page templates, platform-narrative comparisons. This is where chapter 11 lives.

09
Feedback & overlays
open →
On-brand HTML + CSS examples, copy-ready.
10
Content blocks
open →
On-brand HTML + CSS examples, copy-ready.
11
Patterns & specials
open →
Full-page layouts for auth, dashboards, conversations, settings, onboarding, and 404s.
12
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.
16
App pipeline
open →
Kanban, pipeline bar, activity timeline, inbox row, onboarding checklist, MRR chart.

App

3 chapters · 43 sections

Product UI — the shell, the pipeline view, the AI workspace. Densest chapters; most stateful components.

13
Media & presentation
open →
Video player, carousel, device frames (browser / laptop / phone), and the presentation deck device — all vanilla HTML/CSS/JS, Cloudflare-Pages-ready.
14
Platform narrative
open →
Feature cluster, contrast pair, feature table, cluster map, counter rail — the strategic-narrative components for /platform and /why-magicblocks.
15
App shell
open →
Detail-page 3-column shell, command palette, density mode, empty states.

Chapter HTMLs serve as Markdown via Cloudflare's auto-transform — append .md to any URL above for the AI-agent view.