The full library
39 chapters. 431 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.
- 39 Chapters
- 431 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 03-icons
open →MagicBlocks component library · Foundations. 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 04-buttons-and-controls
open →MagicBlocks component library · Buttons & Controls. On-brand HTML + CSS examples, copy-ready.
- 4.1 Primary button
- 4.2 Secondary button
- 4.3 Ghost / tertiary button
- 4.4 Danger button
- 4.5 Sizes
- 4.6 Icon button
- 4.7 Link button
- 4.8 Button groups & split
- 4.9 Loading state
- 4.10 Toggle (switch)
- 4.11 Checkbox · radio
- 4.12 Segmented control
- 4.13 Close & dismiss
- 4.14 Anatomy of the primary button
- 4.15 Split button
-
05 05-forms-and-inputs
open →MagicBlocks component library · Forms & Inputs. On-brand HTML + CSS examples, copy-ready.
- 5.1 Text input
- 5.2 Icons, prefixes, suffixes
- 5.3 States
- 5.4 Textarea
- 5.5 Select
- 5.6 Search field
- 5.7 File upload & dropzone
- 5.8 Fieldset & legend
- 5.9 Combobox
- 5.10 Date picker
- 5.11 Range sliders
- 5.12 Form layout
- 5.13 Anatomy of a field
- 5.14 Slider
- 5.15 DurationField
- 5.16 TimePicker
- 5.17 DatePicker
- 5.18 DateRangePicker
- 5.19 Combobox (kit)
- 5.20 MultiSelect
- 5.21 MentionInput
- 5.22 MergeTagInput
- 5.23 SnippetTextarea
- 5.24 RichTextEditor
- 5.25 ConsentToggle
- 5.26 FileUpload
- 5.27 InlineDateField
- 5.28 SortableList & SortableHandle
- 5.29 KeyValueRepeater
- 5.30 MultiBindingList
- 5.31 VariantsRepeater
- 5.32 RadioCardList
- 5.33 DomainList
- 5.34 CategoryGroupList
- 5.35 ExpandableEditRow
- 5.36 RichTextContent
- 5.37 RichTextEditorPro
-
06 06-cards-and-surfaces
open →MagicBlocks component library · Cards & Surfaces. On-brand HTML + CSS examples, copy-ready.
-
07 07-navigation
open →MagicBlocks component library · Navigation. On-brand HTML + CSS examples, copy-ready.
- 7.1 Top nav
- 7.2 Side nav
- 7.3 Tabs
- 7.4 Breadcrumbs
- 7.5 Pagination
- 7.6 Menu · dropdown
- 7.7 Stepper
- 7.8 Skip-to-content link
- 7.9 Command-K bar
- 7.10 Industry bar
- 7.11 Site nav · mega menu
- 7.12 Site nav · landing variants
- 7.13 Anatomy of the top nav
- 7.14 Dropdown menu
- 7.15 Link tabs (cross-route)
- 7.16 Room tabs (top-of-page)
-
08 08-data-display
open →MagicBlocks component library · Data display. On-brand HTML + CSS examples, copy-ready.
- 8.1 Data table
- 8.2 Table variants
- 8.3 Chips & tags
- 8.4 Badges & status dots
- 8.5 Avatars
- 8.6 Data lists & key-value
- 8.7 Progress
- 8.8 Timeline / activity feed
- 8.9 Code block
- 8.10 Stat grid
- 8.11 Chart
- 8.12 Tree
- 8.13 Empty state
- 8.14 Anatomy — table row
- 8.15 Score ring
- 8.16 SLA countdown ring
- 8.17 Health sparkline + risk badge
- 8.18 Stat tile — moment + sparkline-behind
- 8.19 DataTable
- 8.20 FilterChipGroup
- 8.21 AvatarGroup
- 8.22 LifecyclePill
- 8.23 TicketStatusPill
- 8.24 DealStagePill
- 8.25 RiskPill
- 8.26 SyncStatus
- 8.27 KpiDeltaTile
- 8.28 TimeSeriesChart
- 8.29 PayloadPreview
- 8.30 Icon chip
- 8.31 Rate card
- 8.32 Source row
-
17 17-app-ai
open →MagicBlocks component library · Operator · AI surfaces. Sage drawer, compose drawer, AI suggestion card, KB suggestion card, confetti win moment, score card, narration log, evidence quote, paste-and-recheck area.
- 17.1 Sage AI drawer
- 17.2 Compose drawer
- 17.3 AI suggestion card
- 17.4 KB suggestion card
- 17.5 Confetti win moment
- 17.6 ScoreCard
- 17.7 NarrationLog
- 17.8 EvidenceQuote
- 17.9 PasteAndRecheckArea
- 17.10 Evaluations
- 17.11 Missing knowledge queue
- 17.12 Connections & tools — Tools & MCP
- 17.13 Knowledge item row
- 17.14 Knowledge lane
- 17.15 Add knowledge menu
- 17.16 Attach lane picker
- 17.17 Proposal card
- 17.18 Sage dock
-
18 18-agent-builder
open →MagicBlocks component library · Operator. 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.
- 18.1 QueryBuilder
- 18.2 ConditionRow
- 18.3 FieldMapper
- 18.4 TestConnectionButton
- 18.5 VersionSwitcher
- 18.6 StructuredDocEditor
- 18.7 Agent builder shell
- 18.8 Agents list composition
- 18.9 Agent overview
- 18.10 Persona
- 18.11 Key Facts
- 18.12 Actions
- 18.13 Guardrails
- 18.14 Knowledge
- 18.15 Contact Transfer
- 18.16 Channels
- 18.17 Design & Go Live
- 18.18 Agent frame — header + tabs
- 18.19 Agents HQ — shared shelves
- 18.20 Journey studio
- 18.21 Templates
- 18.22 Channels tab
- 18.23 Settings tab
-
19 19-conversation
open →MagicBlocks component library · Operator. 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 20-explainability
open →MagicBlocks component library · Operator. 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 21-designer-toolkit
open →MagicBlocks component library · Operator. 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 22-billing
open →MagicBlocks component library · Operator. 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 23-workspace
open →MagicBlocks component library · Operator. 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 24-integrations
open →MagicBlocks component library · Operator. 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 25-widget
open →MagicBlocks component library · Embed. The full end-user-facing chat widget — launcher, proactive bubble, expanded shell, messages, composer, buttons, feedback, disclaimers, branding marker, and brand-theme presets.
-
26 26-embed-extras
open →MagicBlocks component library · Embed. Three components for embed-side surfaces — ChannelSandbox (multi-channel widget preview), VoicePlayer (audio playback chrome for voice agents), and WidgetPersonaSwitcher (in-conversation persona selection). All three ship as live demos with their React snippets.
Website
The big marketing surfaces — hero scenes, narrative-systems visualisations, content blocks, page templates, platform-narrative comparisons.
-
09 09-feedback-and-overlays
open →MagicBlocks component library · Feedback & overlays. On-brand HTML + CSS examples, copy-ready.
- 9.1 Toasts
- 9.2 Inline alerts
- 9.3 Top-of-page banners
- 9.4 Tooltips
- 9.5 Popover
- 9.6 Modal dialog
- 9.7 Slide-over drawer
- 9.8 Skeleton loaders
- 9.9 Spinner & inline loader
- 9.10 Inline message
- 9.11 Confirmation dialog
- 9.12 Snackbar
- 9.13 Anatomy — toast
- 9.14 Bulk action bar
- 9.15 DialogHost
- 9.16 Accordion
- 9.17 FilterPopover
- 9.18 TwoPathChooserDialog
- 9.19 SourceFreshnessBanner
-
10 10-content-blocks
open →MagicBlocks component library · Content blocks. On-brand HTML + CSS examples, copy-ready.
- 10.1 Hero section
- 10.2 Feature grid
- 10.3 Logo wall
- 10.4 Testimonial strip
- 10.5 CTA block
- 10.6 Stats strip
- 10.7 FAQ accordion
- 10.8 Comparison table
- 10.9 Team grid
- 10.10 Pull quote
- 10.11 Footer
- 10.12 Customer logo grid
- 10.13 Press strip
- 10.14 Integration grid
- 10.15 Founder cards
- 10.16 Anatomy — hero section
-
11 11-patterns-and-specials
open →MagicBlocks component library · Page templates. Full-page layouts for auth, dashboards, conversations, settings, onboarding, and 404s.
-
12 12-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.
- 12.0 In action
- 12.1 Decay curve
- 12.2 Scoreboard
- 12.3 Race timeline
- 12.4 Engine block
- 12.5 Triptych
- 12.6 Handoff card
- 12.7 Profile card
- 12.8 Integration hub
- 12.9 HAPPA arc
- 12.10 Guardian shield
- 12.11 Journey map
- 12.12 Closest edge wins
- 12.13 Ecosystem rings
- 12.14 Revenue calculator
- 12.15 Brand timeline
- 12.16 Hero bloom canvas
- 12.17 Hero live demo
- 12.18 Leak cards
- 12.19 Chat comparison
- 12.20 Mini-atoms
- 12.22 Inline illustrations
- 12.21 Anatomy & motion
- 12.23 Scroll cue
- 12.24 Dialogue contrast
- 12.25 Dialogue column
- 12.26 Dialogue message
- 12.27 Dialogue ellipsis
- 12.28 Dot matrix
-
16 16-app-pipeline
open →MagicBlocks component library · Operator · Pipeline & CRM patterns. Kanban, pipeline bar, activity timeline, inbox row, onboarding checklist, MRR chart.
- 16.1 Kanban column & draggable card
- 16.2 Pipeline stage segmented bar
- 16.3 Activity timeline
- 16.4 Inbox row
- 16.5 Onboarding checklist
- 16.6 MRR composition chart
- 16.7 EmailThread
- 16.8 EmailThreadRow
- 16.9 AgendaList family
- 16.10 DateBand
- 16.11 DashboardNavGroup
- 16.12 MiniCardLink family
- 16.13 Deal-detail composition
- 16.14 Reviewer inbox
- 16.15 Contacts list composition
- 16.16 Contact detail composition
- 16.17 Campaigns list composition
- 16.18 Lifecycle bar
- 16.19 Quiet-hours indicator
- 16.20 Memory list
- 16.21 Key-fact grid
- 16.22 Engagement score
- 16.23 Session card
- 16.24 Trigger-agent dialog
- 16.25 Handover & outcome
- 16.26 Memories dialog
- 16.27 Session summary band
- 16.28 Session page
- 16.29 Sessions overview
App
Product surfaces — the shell, the pipeline view, the AI workspace.
-
13 13-media-and-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.
-
14 14-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.
-
15 15-app-shell
open →MagicBlocks component library · App shell & overlays. Detail-page 3-column shell, command palette, density mode, empty states.
- 15.1 Detail page 3-column shell
- 15.2 Command palette
- 15.3 Density mode
- 15.4 Empty states
- 15.5 AppShell
- 15.6 PageHeader
- 15.7 SettingsShell
- 15.8 SavedViewsRail
- 15.9 HelpBubble
- 15.10 Settings nav rail
- 15.11 Settings header block
- 15.12 Preference toggle row
- 15.13 API key card
- 15.14 Session list
- 15.15 Danger zone block
- 15.16 Unsaved changes bar
- 15.17 Settings account page
- 15.18 Route progress
- 15.19 Dashboard composition
- 15.20 RoomHeader
- 15.21 SidebarHead
- 15.22 WorkspaceSwitcher
- 15.23 WorkspaceNav
- 15.24 WorkspaceUser
- 15.25 WorkspaceThemeToggle
- 15.26 WorkspaceBar
- 15.27 WorkspaceShell
- 15.28 SectionHeader
- 15.29 SectionView
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 Media templates
open →36 ready-made canvases — video stills, deck slides, square posts, 4:5 carousel slides, 9:16 stories. Drop into a video editor, a deck, or a social post.
-
25 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.
-
26 Design tokens
open →Colours, type, spacing, motion, shadows. 47 CSS variables — every value the kit ships.
-
27 Voice & tone
open →How the brand sounds — vibe, principles, banned words, words we love, tone-by-context, on-brand vs off-brand examples.
-
28 Content library
open →Approved copy you can drop in. Taglines, value props, CTA phrases, one-liners, About-copy variants. Click any block to copy.
-
29 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
- 1.10 Foundations Brand mark
- 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
- 2.12 Typography Inline headline
- 3.1 03-icons CRM monoline icons
- 3.2 03-icons File-type icons
- 3.3 03-icons Misc
- 4.1 04-buttons-and-controls Primary button
- 4.2 04-buttons-and-controls Secondary button
- 4.3 04-buttons-and-controls Ghost / tertiary button
- 4.4 04-buttons-and-controls Danger button
- 4.5 04-buttons-and-controls Sizes
- 4.6 04-buttons-and-controls Icon button
- 4.7 04-buttons-and-controls Link button
- 4.8 04-buttons-and-controls Button groups & split
- 4.9 04-buttons-and-controls Loading state
- 4.10 04-buttons-and-controls Toggle (switch)
- 4.11 04-buttons-and-controls Checkbox · radio
- 4.12 04-buttons-and-controls Segmented control
- 4.13 04-buttons-and-controls Close & dismiss
- 4.14 04-buttons-and-controls Anatomy of the primary button
- 4.15 04-buttons-and-controls Split button
- 5.1 05-forms-and-inputs Text input
- 5.2 05-forms-and-inputs Icons, prefixes, suffixes
- 5.3 05-forms-and-inputs States
- 5.4 05-forms-and-inputs Textarea
- 5.5 05-forms-and-inputs Select
- 5.6 05-forms-and-inputs Search field
- 5.7 05-forms-and-inputs File upload & dropzone
- 5.8 05-forms-and-inputs Fieldset & legend
- 5.9 05-forms-and-inputs Combobox
- 5.10 05-forms-and-inputs Date picker
- 5.11 05-forms-and-inputs Range sliders
- 5.12 05-forms-and-inputs Form layout
- 5.13 05-forms-and-inputs Anatomy of a field
- 5.14 05-forms-and-inputs Slider
- 5.15 05-forms-and-inputs DurationField
- 5.16 05-forms-and-inputs TimePicker
- 5.17 05-forms-and-inputs DatePicker
- 5.18 05-forms-and-inputs DateRangePicker
- 5.19 05-forms-and-inputs Combobox (kit)
- 5.20 05-forms-and-inputs MultiSelect
- 5.21 05-forms-and-inputs MentionInput
- 5.22 05-forms-and-inputs MergeTagInput
- 5.23 05-forms-and-inputs SnippetTextarea
- 5.24 05-forms-and-inputs RichTextEditor
- 5.25 05-forms-and-inputs ConsentToggle
- 5.26 05-forms-and-inputs FileUpload
- 5.27 05-forms-and-inputs InlineDateField
- 5.28 05-forms-and-inputs SortableList & SortableHandle
- 5.29 05-forms-and-inputs KeyValueRepeater
- 5.30 05-forms-and-inputs MultiBindingList
- 5.31 05-forms-and-inputs VariantsRepeater
- 5.32 05-forms-and-inputs RadioCardList
- 5.33 05-forms-and-inputs DomainList
- 5.34 05-forms-and-inputs CategoryGroupList
- 5.35 05-forms-and-inputs ExpandableEditRow
- 5.36 05-forms-and-inputs RichTextContent
- 5.37 05-forms-and-inputs RichTextEditorPro
- 6.1 06-cards-and-surfaces Base card
- 6.2 06-cards-and-surfaces Feature card
- 6.3 06-cards-and-surfaces Pricing card
- 6.4 06-cards-and-surfaces Testimonial card
- 6.5 06-cards-and-surfaces Stat / metric card
- 6.6 06-cards-and-surfaces Media / blog card
- 6.7 06-cards-and-surfaces Callout surface
- 6.8 06-cards-and-surfaces Panel
- 6.9 06-cards-and-surfaces Dashboard tile
- 6.10 06-cards-and-surfaces KPI tile
- 6.11 06-cards-and-surfaces Divider
- 6.12 06-cards-and-surfaces Anatomy of a feature card
- 6.13 06-cards-and-surfaces Section card
- 6.14 06-cards-and-surfaces Masked image
- 6.15 06-cards-and-surfaces Industry strip
- 6.16 06-cards-and-surfaces Cost compare
- 7.1 07-navigation Top nav
- 7.2 07-navigation Side nav
- 7.3 07-navigation Tabs
- 7.4 07-navigation Breadcrumbs
- 7.5 07-navigation Pagination
- 7.6 07-navigation Menu · dropdown
- 7.7 07-navigation Stepper
- 7.8 07-navigation Skip-to-content link
- 7.9 07-navigation Command-K bar
- 7.10 07-navigation Industry bar
- 7.11 07-navigation Site nav · mega menu
- 7.12 07-navigation Site nav · landing variants
- 7.13 07-navigation Anatomy of the top nav
- 7.14 07-navigation Dropdown menu
- 7.15 07-navigation Link tabs (cross-route)
- 7.16 07-navigation Room tabs (top-of-page)
- 8.1 08-data-display Data table
- 8.2 08-data-display Table variants
- 8.3 08-data-display Chips & tags
- 8.4 08-data-display Badges & status dots
- 8.5 08-data-display Avatars
- 8.6 08-data-display Data lists & key-value
- 8.7 08-data-display Progress
- 8.8 08-data-display Timeline / activity feed
- 8.9 08-data-display Code block
- 8.10 08-data-display Stat grid
- 8.11 08-data-display Chart
- 8.12 08-data-display Tree
- 8.13 08-data-display Empty state
- 8.14 08-data-display Anatomy — table row
- 8.15 08-data-display Score ring
- 8.16 08-data-display SLA countdown ring
- 8.17 08-data-display Health sparkline + risk badge
- 8.18 08-data-display Stat tile — moment + sparkline-behind
- 8.19 08-data-display DataTable
- 8.20 08-data-display FilterChipGroup
- 8.21 08-data-display AvatarGroup
- 8.22 08-data-display LifecyclePill
- 8.23 08-data-display TicketStatusPill
- 8.24 08-data-display DealStagePill
- 8.25 08-data-display RiskPill
- 8.26 08-data-display SyncStatus
- 8.27 08-data-display KpiDeltaTile
- 8.28 08-data-display TimeSeriesChart
- 8.29 08-data-display PayloadPreview
- 8.30 08-data-display Icon chip
- 8.31 08-data-display Rate card
- 8.32 08-data-display Source row
- 9.1 09-feedback-and-overlays Toasts
- 9.2 09-feedback-and-overlays Inline alerts
- 9.3 09-feedback-and-overlays Top-of-page banners
- 9.4 09-feedback-and-overlays Tooltips
- 9.5 09-feedback-and-overlays Popover
- 9.6 09-feedback-and-overlays Modal dialog
- 9.7 09-feedback-and-overlays Slide-over drawer
- 9.8 09-feedback-and-overlays Skeleton loaders
- 9.9 09-feedback-and-overlays Spinner & inline loader
- 9.10 09-feedback-and-overlays Inline message
- 9.11 09-feedback-and-overlays Confirmation dialog
- 9.12 09-feedback-and-overlays Snackbar
- 9.13 09-feedback-and-overlays Anatomy — toast
- 9.14 09-feedback-and-overlays Bulk action bar
- 9.15 09-feedback-and-overlays DialogHost
- 9.16 09-feedback-and-overlays Accordion
- 9.17 09-feedback-and-overlays FilterPopover
- 9.18 09-feedback-and-overlays TwoPathChooserDialog
- 9.19 09-feedback-and-overlays SourceFreshnessBanner
- 10.1 10-content-blocks Hero section
- 10.2 10-content-blocks Feature grid
- 10.3 10-content-blocks Logo wall
- 10.4 10-content-blocks Testimonial strip
- 10.5 10-content-blocks CTA block
- 10.6 10-content-blocks Stats strip
- 10.7 10-content-blocks FAQ accordion
- 10.8 10-content-blocks Comparison table
- 10.9 10-content-blocks Team grid
- 10.10 10-content-blocks Pull quote
- 10.11 10-content-blocks Footer
- 10.12 10-content-blocks Customer logo grid
- 10.13 10-content-blocks Press strip
- 10.14 10-content-blocks Integration grid
- 10.15 10-content-blocks Founder cards
- 10.16 10-content-blocks Anatomy — hero section
- 11.1 11-patterns-and-specials Pricing page
- 11.2 11-patterns-and-specials Auth — sign in
- 11.3 11-patterns-and-specials 404 / not found
- 11.4 11-patterns-and-specials Conversation preview
- 11.5 11-patterns-and-specials Dashboard shell
- 11.6 11-patterns-and-specials Empty-state pages
- 11.7 11-patterns-and-specials Settings page
- 11.8 11-patterns-and-specials Onboarding
- 11.9 11-patterns-and-specials Anatomy — pricing hero tier
- 12.0 12-narrative-systems In action
- 12.1 12-narrative-systems Decay curve
- 12.2 12-narrative-systems Scoreboard
- 12.3 12-narrative-systems Race timeline
- 12.4 12-narrative-systems Engine block
- 12.5 12-narrative-systems Triptych
- 12.6 12-narrative-systems Handoff card
- 12.7 12-narrative-systems Profile card
- 12.8 12-narrative-systems Integration hub
- 12.9 12-narrative-systems HAPPA arc
- 12.10 12-narrative-systems Guardian shield
- 12.11 12-narrative-systems Journey map
- 12.12 12-narrative-systems Closest edge wins
- 12.13 12-narrative-systems Ecosystem rings
- 12.14 12-narrative-systems Revenue calculator
- 12.15 12-narrative-systems Brand timeline
- 12.16 12-narrative-systems Hero bloom canvas
- 12.17 12-narrative-systems Hero live demo
- 12.18 12-narrative-systems Leak cards
- 12.19 12-narrative-systems Chat comparison
- 12.20 12-narrative-systems Mini-atoms
- 12.22 12-narrative-systems Inline illustrations
- 12.21 12-narrative-systems Anatomy & motion
- 12.23 12-narrative-systems Scroll cue
- 12.24 12-narrative-systems Dialogue contrast
- 12.25 12-narrative-systems Dialogue column
- 12.26 12-narrative-systems Dialogue message
- 12.27 12-narrative-systems Dialogue ellipsis
- 12.28 12-narrative-systems Dot matrix
- 13.1 13-media-and-presentation Video player
- 13.2 13-media-and-presentation Carousel
- 13.3 13-media-and-presentation Browser frame
- 13.4 13-media-and-presentation Laptop frame
- 13.5 13-media-and-presentation Phone frame
- 13.6 13-media-and-presentation Deck device
- 13.7 13-media-and-presentation Stage-progress chat
- 13.8 13-media-and-presentation Product dashboard
- 13.9 13-media-and-presentation Anatomy & notes
- 14.1 14-platform-narrative Feature cluster
- 14.2 14-platform-narrative Contrast pair
- 14.3 14-platform-narrative Feature table
- 14.4 14-platform-narrative Cluster map
- 14.5 14-platform-narrative Counter rail
- 15.1 15-app-shell Detail page 3-column shell
- 15.2 15-app-shell Command palette
- 15.3 15-app-shell Density mode
- 15.4 15-app-shell Empty states
- 15.5 15-app-shell AppShell
- 15.6 15-app-shell PageHeader
- 15.7 15-app-shell SettingsShell
- 15.8 15-app-shell SavedViewsRail
- 15.9 15-app-shell HelpBubble
- 15.10 15-app-shell Settings nav rail
- 15.11 15-app-shell Settings header block
- 15.12 15-app-shell Preference toggle row
- 15.13 15-app-shell API key card
- 15.14 15-app-shell Session list
- 15.15 15-app-shell Danger zone block
- 15.16 15-app-shell Unsaved changes bar
- 15.17 15-app-shell Settings account page
- 15.18 15-app-shell Route progress
- 15.19 15-app-shell Dashboard composition
- 15.20 15-app-shell RoomHeader
- 15.21 15-app-shell SidebarHead
- 15.22 15-app-shell WorkspaceSwitcher
- 15.23 15-app-shell WorkspaceNav
- 15.24 15-app-shell WorkspaceUser
- 15.25 15-app-shell WorkspaceThemeToggle
- 15.26 15-app-shell WorkspaceBar
- 15.27 15-app-shell WorkspaceShell
- 15.28 15-app-shell SectionHeader
- 15.29 15-app-shell SectionView
- 16.1 16-app-pipeline Kanban column & draggable card
- 16.2 16-app-pipeline Pipeline stage segmented bar
- 16.3 16-app-pipeline Activity timeline
- 16.4 16-app-pipeline Inbox row
- 16.5 16-app-pipeline Onboarding checklist
- 16.6 16-app-pipeline MRR composition chart
- 16.7 16-app-pipeline EmailThread
- 16.8 16-app-pipeline EmailThreadRow
- 16.9 16-app-pipeline AgendaList family
- 16.10 16-app-pipeline DateBand
- 16.11 16-app-pipeline DashboardNavGroup
- 16.12 16-app-pipeline MiniCardLink family
- 16.13 16-app-pipeline Deal-detail composition
- 16.14 16-app-pipeline Reviewer inbox
- 16.15 16-app-pipeline Contacts list composition
- 16.16 16-app-pipeline Contact detail composition
- 16.17 16-app-pipeline Campaigns list composition
- 16.18 16-app-pipeline Lifecycle bar
- 16.19 16-app-pipeline Quiet-hours indicator
- 16.20 16-app-pipeline Memory list
- 16.21 16-app-pipeline Key-fact grid
- 16.22 16-app-pipeline Engagement score
- 16.23 16-app-pipeline Session card
- 16.24 16-app-pipeline Trigger-agent dialog
- 16.25 16-app-pipeline Handover & outcome
- 16.26 16-app-pipeline Memories dialog
- 16.27 16-app-pipeline Session summary band
- 16.28 16-app-pipeline Session page
- 16.29 16-app-pipeline Sessions overview
- 17.1 17-app-ai Sage AI drawer
- 17.2 17-app-ai Compose drawer
- 17.3 17-app-ai AI suggestion card
- 17.4 17-app-ai KB suggestion card
- 17.5 17-app-ai Confetti win moment
- 17.6 17-app-ai ScoreCard
- 17.7 17-app-ai NarrationLog
- 17.8 17-app-ai EvidenceQuote
- 17.9 17-app-ai PasteAndRecheckArea
- 17.10 17-app-ai Evaluations
- 17.11 17-app-ai Missing knowledge queue
- 17.12 17-app-ai Connections & tools — Tools & MCP
- 17.13 17-app-ai Knowledge item row
- 17.14 17-app-ai Knowledge lane
- 17.15 17-app-ai Add knowledge menu
- 17.16 17-app-ai Attach lane picker
- 17.17 17-app-ai Proposal card
- 17.18 17-app-ai Sage dock
- 18.1 18-agent-builder QueryBuilder
- 18.2 18-agent-builder ConditionRow
- 18.3 18-agent-builder FieldMapper
- 18.4 18-agent-builder TestConnectionButton
- 18.5 18-agent-builder VersionSwitcher
- 18.6 18-agent-builder StructuredDocEditor
- 18.7 18-agent-builder Agent builder shell
- 18.8 18-agent-builder Agents list composition
- 18.9 18-agent-builder Agent overview
- 18.10 18-agent-builder Persona
- 18.11 18-agent-builder Key Facts
- 18.12 18-agent-builder Actions
- 18.13 18-agent-builder Guardrails
- 18.14 18-agent-builder Knowledge
- 18.15 18-agent-builder Contact Transfer
- 18.16 18-agent-builder Channels
- 18.17 18-agent-builder Design & Go Live
- 18.18 18-agent-builder Agent frame — header + tabs
- 18.19 18-agent-builder Agents HQ — shared shelves
- 18.20 18-agent-builder Journey studio
- 18.21 18-agent-builder Templates
- 18.22 18-agent-builder Channels tab
- 18.23 18-agent-builder Settings tab
- 19.1 19-conversation ChatMessage
- 19.2 19-conversation ChatTranscript
- 19.3 19-conversation ChatComposer
- 19.4 19-conversation MessageTraceButton
- 19.5 19-conversation SummaryBanner
- 19.6 19-conversation LiveChatTester
- 19.7 19-conversation Sessions list
- 19.8 19-conversation Session detail
- 19.9 19-conversation Live takeover console
- 20.1 20-explainability The robot head
- 20.2 20-explainability Event card anatomy
- 20.3 20-explainability Section auto-grouping
- 20.4 20-explainability Streaming & dedup timestamps
- 20.5 20-explainability Calm, at two densities
- 20.6 20-explainability Journey graph
- 20.7 20-explainability Compact trace
- 20.8 20-explainability Source passage
- 20.9 20-explainability Source card
- 21.1 21-designer-toolkit ColorField
- 21.2 21-designer-toolkit ColorSwatchPicker
- 21.3 21-designer-toolkit WidgetStyleSection
- 21.4 21-designer-toolkit WidgetStyleEditor
- 21.5 21-designer-toolkit WidgetEmbedSnippet
- 22.1 22-billing Plan card
- 22.2 22-billing Usage meter
- 22.3 22-billing Invoice row
- 22.4 22-billing Payment method card
- 22.5 22-billing Billing history table
- 22.6 22-billing Billing page
- 23.1 23-workspace Role badge
- 23.2 23-workspace Member row
- 23.3 23-workspace Invite row
- 23.4 23-workspace Audit log entry
- 23.5 23-workspace Team header block
- 23.6 23-workspace Workspace members page
- 23.7 23-workspace Settings — Credits
- 24.1 24-integrations Integration card
- 24.2 24-integrations Integrations grid
- 24.3 24-integrations Webhook console
- 24.4 24-integrations OAuth callback banner
- 24.5 24-integrations Integrations page
- 25.1 25-widget Theme provider
- 25.2 25-widget Launcher
- 25.3 25-widget Proactive message
- 25.4 25-widget Full shell
- 25.5 25-widget Messages
- 25.6 25-widget Composer
- 25.7 25-widget Buttons
- 25.8 25-widget Feedback
- 25.9 25-widget Disclaimers
- 25.10 25-widget Branding marker
- 25.11 25-widget Brand themes
- 25.12 25-widget Channels — Chat Appearances
- 26.1 26-embed-extras ChannelSandbox
- 26.2 26-embed-extras VoicePlayer
- 26.3 26-embed-extras WidgetPersonaSwitcher
- 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 Media templates Video stills
- 24.02 Media templates Presentation slides
- 24.03 Media templates Square posts
- 24.04 Media templates Carousel slides
- 24.05 Media templates Stories & reels
- 25.01 Favicons Head snippet
- 25.02 Favicons Files
- 26.01 Design tokens Colours
- 26.02 Design tokens Typography
- 26.03 Design tokens Spacing
- 26.04 Design tokens Radius
- 26.05 Design tokens Motion
- 26.06 Design tokens Shadows
- 26.07 Design tokens Minimum sizes
- 26.08 Design tokens CSS variables
- 27.01 Voice & tone The vibe
- 27.02 Voice & tone Principles
- 27.03 Voice & tone Banned words
- 27.04 Voice & tone Words we love
- 27.05 Voice & tone Tone by context
- 27.06 Voice & tone Examples
- 28.01 Content library Taglines
- 28.02 Content library Value props
- 28.03 Content library CTA phrases
- 28.04 Content library One-liners
- 28.05 Content library About copy
- 29.01 HTML templates Closing CTA block
- 29.02 HTML templates Transactional email shell
- 29.03 HTML templates Feature grid (3-up)
- 29.04 HTML templates Marketing footer (warm)
- 29.05 HTML templates Marketing hero
- 29.06 HTML templates Presentation slide (16:9)
- 29.07 HTML templates Social meta card (1200x630)
- 29.08 HTML templates Stats strip (4-up)
- 29.09 HTML templates Featured testimonial strip
Want this as JSON? /api/components.json
· /api/assets.json
· /api/brand.json