The full library
39 chapters. 453 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.
- 39Chapters
- 453Sections
- 5Buckets
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.
05 05-forms-and-inputs
open →MagicBlocks component library · Forms & Inputs. On-brand HTML + CSS examples, copy-ready.
- 5.1Text input
- 5.2Icons, prefixes, suffixes
- 5.3States
- 5.4Textarea
- 5.5Select
- 5.6Search field
- 5.7File upload & dropzone
- 5.8Fieldset & legend
- 5.9Combobox
- 5.10Date picker
- 5.11Range sliders
- 5.12Form layout
- 5.13Anatomy of a field
- 5.14Slider
- 5.15DurationField
- 5.16TimePicker
- 5.17DatePicker
- 5.18DateRangePicker
- 5.19Combobox (kit)
- 5.20MultiSelect
- 5.21MentionInput
- 5.22MergeTagInput
- 5.23SnippetTextarea
- 5.24RichTextEditor
- 5.25ConsentToggle
- 5.26FileUpload
- 5.27InlineDateField
- 5.28SortableList & SortableHandle
- 5.29KeyValueRepeater
- 5.30MultiBindingList
- 5.31VariantsRepeater
- 5.32RadioCardList
- 5.33DomainList
- 5.34CategoryGroupList
- 5.35ExpandableEditRow
- 5.36RichTextContent
- 5.37RichTextEditorPro
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.
08 08-data-display
open →MagicBlocks component library · Data display. On-brand HTML + CSS examples, copy-ready.
- 8.1Data table
- 8.2Table variants
- 8.3Chips & tags
- 8.4Badges & status dots
- 8.5Avatars
- 8.6Data lists & key-value
- 8.7Progress
- 8.8Timeline / activity feed
- 8.9Code block
- 8.10Stat grid
- 8.11Chart
- 8.12Tree
- 8.13Empty state
- 8.14Anatomy — table row
- 8.15Score ring
- 8.16SLA countdown ring
- 8.17Health sparkline + risk badge
- 8.18Stat tile — moment + sparkline-behind
- 8.19DataTable
- 8.20FilterChipGroup
- 8.21AvatarGroup
- 8.22LifecyclePill
- 8.23TicketStatusPill
- 8.24DealStagePill
- 8.25RiskPill
- 8.26SyncStatus
- 8.27KpiDeltaTile
- 8.28TimeSeriesChart
- 8.29PayloadPreview
- 8.30Icon chip
- 8.31Rate card
- 8.32Source 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.1Sage AI drawer
- 17.2Compose drawer
- 17.3AI suggestion card
- 17.4KB suggestion card
- 17.5Confetti win moment
- 17.6ScoreCard
- 17.7NarrationLog
- 17.8EvidenceQuote
- 17.9PasteAndRecheckArea
- 17.10Evaluations
- 17.11Missing knowledge queue
- 17.12Connections & tools — Tools & MCP
- 17.13Knowledge item row
- 17.14Knowledge lane
- 17.15Add knowledge menu
- 17.16Attach lane picker
- 17.17Proposal card
- 17.18Sage 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.1QueryBuilder
- 18.2ConditionRow
- 18.3FieldMapper
- 18.4TestConnectionButton
- 18.5VersionSwitcher
- 18.6StructuredDocEditor
- 18.7Agent builder shell
- 18.8Agents list composition
- 18.9Agent overview
- 18.10Persona
- 18.11Key Facts
- 18.12Actions
- 18.13Guardrails
- 18.14Knowledge
- 18.15Contact Transfer
- 18.16Channels
- 18.17Design & Go Live
- 18.18Agent frame — header + tabs
- 18.19Agents HQ — shared shelves
- 18.20Journey studio
- 18.21Templates
- 18.22Channels tab
- 18.23Settings 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, typing indicator, quote cards, facts drawer, composer, buttons, feedback, disclaimers, branding marker, brand-theme presets, and the named motion system.
26 26-embed-extras
open →MagicBlocks component library · Embed. 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.
- 26.1ChannelSandbox
- 26.2VoicePlayer
- 26.3WidgetPersonaSwitcher
- 26.4Mortgage POS
- 26.5POS theme provider
- 26.6POS shell
- 26.7POS messages
- 26.8POS chips
- 26.9POS input card
- 26.10POS contact card
- 26.11POS verification
- 26.12POS documents
- 26.13POS declarations
- 26.14POS government monitoring
- 26.15POS quotes
- 26.16POS submit + consents
- 26.17POS help
- 26.18POS submitted
- 26.19POS application card
- 26.20POS mobile bar
- 26.21POS sheet
- 26.22POS save dialog
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.1Toasts
- 9.2Inline alerts
- 9.3Top-of-page banners
- 9.4Tooltips
- 9.5Popover
- 9.6Modal dialog
- 9.7Slide-over drawer
- 9.8Skeleton loaders
- 9.9Spinner & inline loader
- 9.10Inline message
- 9.11Confirmation dialog
- 9.12Snackbar
- 9.13Anatomy — toast
- 9.14Bulk action bar
- 9.15DialogHost
- 9.16Accordion
- 9.17FilterPopover
- 9.18TwoPathChooserDialog
- 9.19SourceFreshnessBanner
10 10-content-blocks
open →MagicBlocks component library · Content blocks. On-brand HTML + CSS examples, copy-ready.
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.0In action
- 12.1Decay curve
- 12.2Scoreboard
- 12.3Race timeline
- 12.4Engine block
- 12.5Triptych
- 12.6Handoff card
- 12.7Profile card
- 12.8Integration hub
- 12.9HAPPA arc
- 12.10Guardian shield
- 12.11Journey map
- 12.12Closest edge wins
- 12.13Ecosystem rings
- 12.14Revenue calculator
- 12.15Brand timeline
- 12.16Hero bloom canvas
- 12.17Hero live demo
- 12.18Leak cards
- 12.19Chat comparison
- 12.20Mini-atoms
- 12.22Inline illustrations
- 12.21Anatomy & motion
- 12.23Scroll cue
- 12.24Dialogue contrast
- 12.25Dialogue column
- 12.26Dialogue message
- 12.27Dialogue ellipsis
- 12.28Dot 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.1Kanban column & draggable card
- 16.2Pipeline stage segmented bar
- 16.3Activity timeline
- 16.4Inbox row
- 16.5Onboarding checklist
- 16.6MRR composition chart
- 16.7EmailThread
- 16.8EmailThreadRow
- 16.9AgendaList family
- 16.10DateBand
- 16.11DashboardNavGroup
- 16.12MiniCardLink family
- 16.13Deal-detail composition
- 16.14Reviewer inbox
- 16.15Contacts list composition
- 16.16Contact detail composition
- 16.17Campaigns list composition
- 16.18Lifecycle bar
- 16.19Quiet-hours indicator
- 16.20Memory list
- 16.21Key-fact grid
- 16.22Engagement score
- 16.23Session card
- 16.24Trigger-agent dialog
- 16.25Handover & outcome
- 16.26Memories dialog
- 16.27Session summary band
- 16.28Session page
- 16.29Sessions 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.1Detail page 3-column shell
- 15.2Command palette
- 15.3Density mode
- 15.4Empty states
- 15.5AppShell
- 15.6PageHeader
- 15.7SettingsShell
- 15.8SavedViewsRail
- 15.9HelpBubble
- 15.10Settings nav rail
- 15.11Settings header block
- 15.12Preference toggle row
- 15.13API key card
- 15.14Session list
- 15.15Danger zone block
- 15.16Unsaved changes bar
- 15.17Settings account page
- 15.18Route progress
- 15.19Dashboard composition
- 15.20RoomHeader
- 15.21SidebarHead
- 15.22WorkspaceSwitcher
- 15.23WorkspaceNav
- 15.24WorkspaceUser
- 15.25WorkspaceThemeToggle
- 15.26WorkspaceBar
- 15.27WorkspaceShell
- 15.28SectionHeader
- 15.29SectionView
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.1FoundationsColour
- 1.2FoundationsSpacing scale
- 1.3FoundationsRadii
- 1.4FoundationsShadow & elevation
- 1.5FoundationsMotion
- 1.6FoundationsBorders
- 1.7FoundationsOpacity & emphasis
- 1.8FoundationsZ-index
- 1.9FoundationsHow a token flows into a component
- 1.10FoundationsBrand mark
- 2.1TypographyType families
- 2.2TypographyType scale
- 2.3TypographyHeadings
- 2.4TypographyBody text
- 2.5TypographyEyebrow · lede · caption
- 2.6TypographyLists
- 2.7TypographyBlockquote
- 2.8TypographyInline code · kbd · mark
- 2.9TypographyCode block
- 2.10TypographyText utilities
- 2.11TypographyAnatomy
- 2.12TypographyInline headline
- 3.103-iconsCRM monoline icons
- 3.203-iconsFile-type icons
- 3.303-iconsMisc
- 4.104-buttons-and-controlsPrimary button
- 4.204-buttons-and-controlsSecondary button
- 4.304-buttons-and-controlsGhost / tertiary button
- 4.404-buttons-and-controlsDanger button
- 4.504-buttons-and-controlsSizes
- 4.604-buttons-and-controlsIcon button
- 4.704-buttons-and-controlsLink button
- 4.804-buttons-and-controlsButton groups & split
- 4.904-buttons-and-controlsLoading state
- 4.1004-buttons-and-controlsToggle (switch)
- 4.1104-buttons-and-controlsCheckbox · radio
- 4.1204-buttons-and-controlsSegmented control
- 4.1304-buttons-and-controlsClose & dismiss
- 4.1404-buttons-and-controlsAnatomy of the primary button
- 4.1504-buttons-and-controlsSplit button
- 5.105-forms-and-inputsText input
- 5.205-forms-and-inputsIcons, prefixes, suffixes
- 5.305-forms-and-inputsStates
- 5.405-forms-and-inputsTextarea
- 5.505-forms-and-inputsSelect
- 5.605-forms-and-inputsSearch field
- 5.705-forms-and-inputsFile upload & dropzone
- 5.805-forms-and-inputsFieldset & legend
- 5.905-forms-and-inputsCombobox
- 5.1005-forms-and-inputsDate picker
- 5.1105-forms-and-inputsRange sliders
- 5.1205-forms-and-inputsForm layout
- 5.1305-forms-and-inputsAnatomy of a field
- 5.1405-forms-and-inputsSlider
- 5.1505-forms-and-inputsDurationField
- 5.1605-forms-and-inputsTimePicker
- 5.1705-forms-and-inputsDatePicker
- 5.1805-forms-and-inputsDateRangePicker
- 5.1905-forms-and-inputsCombobox (kit)
- 5.2005-forms-and-inputsMultiSelect
- 5.2105-forms-and-inputsMentionInput
- 5.2205-forms-and-inputsMergeTagInput
- 5.2305-forms-and-inputsSnippetTextarea
- 5.2405-forms-and-inputsRichTextEditor
- 5.2505-forms-and-inputsConsentToggle
- 5.2605-forms-and-inputsFileUpload
- 5.2705-forms-and-inputsInlineDateField
- 5.2805-forms-and-inputsSortableList & SortableHandle
- 5.2905-forms-and-inputsKeyValueRepeater
- 5.3005-forms-and-inputsMultiBindingList
- 5.3105-forms-and-inputsVariantsRepeater
- 5.3205-forms-and-inputsRadioCardList
- 5.3305-forms-and-inputsDomainList
- 5.3405-forms-and-inputsCategoryGroupList
- 5.3505-forms-and-inputsExpandableEditRow
- 5.3605-forms-and-inputsRichTextContent
- 5.3705-forms-and-inputsRichTextEditorPro
- 6.106-cards-and-surfacesBase card
- 6.206-cards-and-surfacesFeature card
- 6.306-cards-and-surfacesPricing card
- 6.406-cards-and-surfacesTestimonial card
- 6.506-cards-and-surfacesStat / metric card
- 6.606-cards-and-surfacesMedia / blog card
- 6.706-cards-and-surfacesCallout surface
- 6.806-cards-and-surfacesPanel
- 6.906-cards-and-surfacesDashboard tile
- 6.1006-cards-and-surfacesKPI tile
- 6.1106-cards-and-surfacesDivider
- 6.1206-cards-and-surfacesAnatomy of a feature card
- 6.1306-cards-and-surfacesSection card
- 6.1406-cards-and-surfacesMasked image
- 6.1506-cards-and-surfacesIndustry strip
- 6.1606-cards-and-surfacesCost compare
- 7.107-navigationTop nav
- 7.207-navigationSide nav
- 7.307-navigationTabs
- 7.407-navigationBreadcrumbs
- 7.507-navigationPagination
- 7.607-navigationMenu · dropdown
- 7.707-navigationStepper
- 7.807-navigationSkip-to-content link
- 7.907-navigationCommand-K bar
- 7.1007-navigationIndustry bar
- 7.1107-navigationSite nav · mega menu
- 7.1207-navigationSite nav · landing variants
- 7.1307-navigationAnatomy of the top nav
- 7.1407-navigationDropdown menu
- 7.1507-navigationLink tabs (cross-route)
- 7.1607-navigationRoom tabs (top-of-page)
- 8.108-data-displayData table
- 8.208-data-displayTable variants
- 8.308-data-displayChips & tags
- 8.408-data-displayBadges & status dots
- 8.508-data-displayAvatars
- 8.608-data-displayData lists & key-value
- 8.708-data-displayProgress
- 8.808-data-displayTimeline / activity feed
- 8.908-data-displayCode block
- 8.1008-data-displayStat grid
- 8.1108-data-displayChart
- 8.1208-data-displayTree
- 8.1308-data-displayEmpty state
- 8.1408-data-displayAnatomy — table row
- 8.1508-data-displayScore ring
- 8.1608-data-displaySLA countdown ring
- 8.1708-data-displayHealth sparkline + risk badge
- 8.1808-data-displayStat tile — moment + sparkline-behind
- 8.1908-data-displayDataTable
- 8.2008-data-displayFilterChipGroup
- 8.2108-data-displayAvatarGroup
- 8.2208-data-displayLifecyclePill
- 8.2308-data-displayTicketStatusPill
- 8.2408-data-displayDealStagePill
- 8.2508-data-displayRiskPill
- 8.2608-data-displaySyncStatus
- 8.2708-data-displayKpiDeltaTile
- 8.2808-data-displayTimeSeriesChart
- 8.2908-data-displayPayloadPreview
- 8.3008-data-displayIcon chip
- 8.3108-data-displayRate card
- 8.3208-data-displaySource row
- 9.109-feedback-and-overlaysToasts
- 9.209-feedback-and-overlaysInline alerts
- 9.309-feedback-and-overlaysTop-of-page banners
- 9.409-feedback-and-overlaysTooltips
- 9.509-feedback-and-overlaysPopover
- 9.609-feedback-and-overlaysModal dialog
- 9.709-feedback-and-overlaysSlide-over drawer
- 9.809-feedback-and-overlaysSkeleton loaders
- 9.909-feedback-and-overlaysSpinner & inline loader
- 9.1009-feedback-and-overlaysInline message
- 9.1109-feedback-and-overlaysConfirmation dialog
- 9.1209-feedback-and-overlaysSnackbar
- 9.1309-feedback-and-overlaysAnatomy — toast
- 9.1409-feedback-and-overlaysBulk action bar
- 9.1509-feedback-and-overlaysDialogHost
- 9.1609-feedback-and-overlaysAccordion
- 9.1709-feedback-and-overlaysFilterPopover
- 9.1809-feedback-and-overlaysTwoPathChooserDialog
- 9.1909-feedback-and-overlaysSourceFreshnessBanner
- 10.110-content-blocksHero section
- 10.210-content-blocksFeature grid
- 10.310-content-blocksLogo wall
- 10.410-content-blocksTestimonial strip
- 10.510-content-blocksCTA block
- 10.610-content-blocksStats strip
- 10.710-content-blocksFAQ accordion
- 10.810-content-blocksComparison table
- 10.910-content-blocksTeam grid
- 10.1010-content-blocksPull quote
- 10.1110-content-blocksFooter
- 10.1210-content-blocksCustomer logo grid
- 10.1310-content-blocksPress strip
- 10.1410-content-blocksIntegration grid
- 10.1510-content-blocksFounder cards
- 10.1610-content-blocksAnatomy — hero section
- 11.111-patterns-and-specialsPricing page
- 11.211-patterns-and-specialsAuth — sign in
- 11.311-patterns-and-specials404 / not found
- 11.411-patterns-and-specialsConversation preview
- 11.511-patterns-and-specialsDashboard shell
- 11.611-patterns-and-specialsEmpty-state pages
- 11.711-patterns-and-specialsSettings page
- 11.811-patterns-and-specialsOnboarding
- 11.911-patterns-and-specialsAnatomy — pricing hero tier
- 12.012-narrative-systemsIn action
- 12.112-narrative-systemsDecay curve
- 12.212-narrative-systemsScoreboard
- 12.312-narrative-systemsRace timeline
- 12.412-narrative-systemsEngine block
- 12.512-narrative-systemsTriptych
- 12.612-narrative-systemsHandoff card
- 12.712-narrative-systemsProfile card
- 12.812-narrative-systemsIntegration hub
- 12.912-narrative-systemsHAPPA arc
- 12.1012-narrative-systemsGuardian shield
- 12.1112-narrative-systemsJourney map
- 12.1212-narrative-systemsClosest edge wins
- 12.1312-narrative-systemsEcosystem rings
- 12.1412-narrative-systemsRevenue calculator
- 12.1512-narrative-systemsBrand timeline
- 12.1612-narrative-systemsHero bloom canvas
- 12.1712-narrative-systemsHero live demo
- 12.1812-narrative-systemsLeak cards
- 12.1912-narrative-systemsChat comparison
- 12.2012-narrative-systemsMini-atoms
- 12.2212-narrative-systemsInline illustrations
- 12.2112-narrative-systemsAnatomy & motion
- 12.2312-narrative-systemsScroll cue
- 12.2412-narrative-systemsDialogue contrast
- 12.2512-narrative-systemsDialogue column
- 12.2612-narrative-systemsDialogue message
- 12.2712-narrative-systemsDialogue ellipsis
- 12.2812-narrative-systemsDot matrix
- 13.113-media-and-presentationVideo player
- 13.213-media-and-presentationCarousel
- 13.313-media-and-presentationBrowser frame
- 13.413-media-and-presentationLaptop frame
- 13.513-media-and-presentationPhone frame
- 13.613-media-and-presentationDeck device
- 13.713-media-and-presentationStage-progress chat
- 13.813-media-and-presentationProduct dashboard
- 13.913-media-and-presentationAnatomy & notes
- 14.114-platform-narrativeFeature cluster
- 14.214-platform-narrativeContrast pair
- 14.314-platform-narrativeFeature table
- 14.414-platform-narrativeCluster map
- 14.514-platform-narrativeCounter rail
- 15.115-app-shellDetail page 3-column shell
- 15.215-app-shellCommand palette
- 15.315-app-shellDensity mode
- 15.415-app-shellEmpty states
- 15.515-app-shellAppShell
- 15.615-app-shellPageHeader
- 15.715-app-shellSettingsShell
- 15.815-app-shellSavedViewsRail
- 15.915-app-shellHelpBubble
- 15.1015-app-shellSettings nav rail
- 15.1115-app-shellSettings header block
- 15.1215-app-shellPreference toggle row
- 15.1315-app-shellAPI key card
- 15.1415-app-shellSession list
- 15.1515-app-shellDanger zone block
- 15.1615-app-shellUnsaved changes bar
- 15.1715-app-shellSettings account page
- 15.1815-app-shellRoute progress
- 15.1915-app-shellDashboard composition
- 15.2015-app-shellRoomHeader
- 15.2115-app-shellSidebarHead
- 15.2215-app-shellWorkspaceSwitcher
- 15.2315-app-shellWorkspaceNav
- 15.2415-app-shellWorkspaceUser
- 15.2515-app-shellWorkspaceThemeToggle
- 15.2615-app-shellWorkspaceBar
- 15.2715-app-shellWorkspaceShell
- 15.2815-app-shellSectionHeader
- 15.2915-app-shellSectionView
- 16.116-app-pipelineKanban column & draggable card
- 16.216-app-pipelinePipeline stage segmented bar
- 16.316-app-pipelineActivity timeline
- 16.416-app-pipelineInbox row
- 16.516-app-pipelineOnboarding checklist
- 16.616-app-pipelineMRR composition chart
- 16.716-app-pipelineEmailThread
- 16.816-app-pipelineEmailThreadRow
- 16.916-app-pipelineAgendaList family
- 16.1016-app-pipelineDateBand
- 16.1116-app-pipelineDashboardNavGroup
- 16.1216-app-pipelineMiniCardLink family
- 16.1316-app-pipelineDeal-detail composition
- 16.1416-app-pipelineReviewer inbox
- 16.1516-app-pipelineContacts list composition
- 16.1616-app-pipelineContact detail composition
- 16.1716-app-pipelineCampaigns list composition
- 16.1816-app-pipelineLifecycle bar
- 16.1916-app-pipelineQuiet-hours indicator
- 16.2016-app-pipelineMemory list
- 16.2116-app-pipelineKey-fact grid
- 16.2216-app-pipelineEngagement score
- 16.2316-app-pipelineSession card
- 16.2416-app-pipelineTrigger-agent dialog
- 16.2516-app-pipelineHandover & outcome
- 16.2616-app-pipelineMemories dialog
- 16.2716-app-pipelineSession summary band
- 16.2816-app-pipelineSession page
- 16.2916-app-pipelineSessions overview
- 17.117-app-aiSage AI drawer
- 17.217-app-aiCompose drawer
- 17.317-app-aiAI suggestion card
- 17.417-app-aiKB suggestion card
- 17.517-app-aiConfetti win moment
- 17.617-app-aiScoreCard
- 17.717-app-aiNarrationLog
- 17.817-app-aiEvidenceQuote
- 17.917-app-aiPasteAndRecheckArea
- 17.1017-app-aiEvaluations
- 17.1117-app-aiMissing knowledge queue
- 17.1217-app-aiConnections & tools — Tools & MCP
- 17.1317-app-aiKnowledge item row
- 17.1417-app-aiKnowledge lane
- 17.1517-app-aiAdd knowledge menu
- 17.1617-app-aiAttach lane picker
- 17.1717-app-aiProposal card
- 17.1817-app-aiSage dock
- 18.118-agent-builderQueryBuilder
- 18.218-agent-builderConditionRow
- 18.318-agent-builderFieldMapper
- 18.418-agent-builderTestConnectionButton
- 18.518-agent-builderVersionSwitcher
- 18.618-agent-builderStructuredDocEditor
- 18.718-agent-builderAgent builder shell
- 18.818-agent-builderAgents list composition
- 18.918-agent-builderAgent overview
- 18.1018-agent-builderPersona
- 18.1118-agent-builderKey Facts
- 18.1218-agent-builderActions
- 18.1318-agent-builderGuardrails
- 18.1418-agent-builderKnowledge
- 18.1518-agent-builderContact Transfer
- 18.1618-agent-builderChannels
- 18.1718-agent-builderDesign & Go Live
- 18.1818-agent-builderAgent frame — header + tabs
- 18.1918-agent-builderAgents HQ — shared shelves
- 18.2018-agent-builderJourney studio
- 18.2118-agent-builderTemplates
- 18.2218-agent-builderChannels tab
- 18.2318-agent-builderSettings tab
- 19.119-conversationChatMessage
- 19.219-conversationChatTranscript
- 19.319-conversationChatComposer
- 19.419-conversationMessageTraceButton
- 19.519-conversationSummaryBanner
- 19.619-conversationLiveChatTester
- 19.719-conversationSessions list
- 19.819-conversationSession detail
- 19.919-conversationLive takeover console
- 20.120-explainabilityThe robot head
- 20.220-explainabilityEvent card anatomy
- 20.320-explainabilitySection auto-grouping
- 20.420-explainabilityStreaming & dedup timestamps
- 20.520-explainabilityCalm, at two densities
- 20.620-explainabilityJourney graph
- 20.720-explainabilityCompact trace
- 20.820-explainabilitySource passage
- 20.920-explainabilitySource card
- 21.121-designer-toolkitColorField
- 21.221-designer-toolkitColorSwatchPicker
- 21.321-designer-toolkitWidgetStyleSection
- 21.421-designer-toolkitWidgetStyleEditor
- 21.521-designer-toolkitWidgetEmbedSnippet
- 22.122-billingPlan card
- 22.222-billingUsage meter
- 22.322-billingInvoice row
- 22.422-billingPayment method card
- 22.522-billingBilling history table
- 22.622-billingBilling page
- 23.123-workspaceRole badge
- 23.223-workspaceMember row
- 23.323-workspaceInvite row
- 23.423-workspaceAudit log entry
- 23.523-workspaceTeam header block
- 23.623-workspaceWorkspace members page
- 23.723-workspaceSettings — Credits
- 24.124-integrationsIntegration card
- 24.224-integrationsIntegrations grid
- 24.324-integrationsWebhook console
- 24.424-integrationsOAuth callback banner
- 24.524-integrationsIntegrations page
- 25.125-widgetTheme provider
- 25.225-widgetLauncher
- 25.325-widgetProactive message
- 25.425-widgetFull shell
- 25.525-widgetMessages
- 25.625-widgetComposer
- 25.725-widgetButtons
- 25.825-widgetFeedback
- 25.925-widgetDisclaimers
- 25.1025-widgetBranding marker
- 25.1125-widgetBrand themes
- 25.1225-widgetChannels — Chat Appearances
- 25.1325-widgetTyping indicator
- 25.1425-widgetQuote cards
- 25.1525-widgetFacts drawer
- 26.126-embed-extrasChannelSandbox
- 26.226-embed-extrasVoicePlayer
- 26.326-embed-extrasWidgetPersonaSwitcher
- 26.426-embed-extrasMortgage POS
- 26.526-embed-extrasPOS theme provider
- 26.626-embed-extrasPOS shell
- 26.726-embed-extrasPOS messages
- 26.826-embed-extrasPOS chips
- 26.926-embed-extrasPOS input card
- 26.1026-embed-extrasPOS contact card
- 26.1126-embed-extrasPOS verification
- 26.1226-embed-extrasPOS documents
- 26.1326-embed-extrasPOS declarations
- 26.1426-embed-extrasPOS government monitoring
- 26.1526-embed-extrasPOS quotes
- 26.1626-embed-extrasPOS submit + consents
- 26.1726-embed-extrasPOS help
- 26.1826-embed-extrasPOS submitted
- 26.1926-embed-extrasPOS application card
- 26.2026-embed-extrasPOS mobile bar
- 26.2126-embed-extrasPOS sheet
- 26.2226-embed-extrasPOS save dialog
- 17.01LogosFull lockup
- 17.02LogosIcon
- 17.03LogosWordmark
- 17.04LogosMisuse — don't
- 18.01IconsAll icons
- 19.01Customer logosCustomer wall
- 20.01FoundersPortrait set
- 21.01IntegrationsIntegration directory
- 22.01PatternsAll patterns
- 23.01MarketingCampaign
- 23.02MarketingStationery
- 23.03MarketingSocial
- 23.04MarketingReference
- 24.01Media templatesVideo stills
- 24.02Media templatesPresentation slides
- 24.03Media templatesSquare posts
- 24.04Media templatesCarousel slides
- 24.05Media templatesStories & reels
- 25.01FaviconsHead snippet
- 25.02FaviconsFiles
- 26.01Design tokensColours
- 26.02Design tokensTypography
- 26.03Design tokensSpacing
- 26.04Design tokensRadius
- 26.05Design tokensMotion
- 26.06Design tokensShadows
- 26.07Design tokensMinimum sizes
- 26.08Design tokensCSS variables
- 27.01Voice & toneThe vibe
- 27.02Voice & tonePrinciples
- 27.03Voice & toneBanned words
- 27.04Voice & toneWords we love
- 27.05Voice & toneTone by context
- 27.06Voice & toneExamples
- 28.01Content libraryTaglines
- 28.02Content libraryValue props
- 28.03Content libraryCTA phrases
- 28.04Content libraryOne-liners
- 28.05Content libraryAbout copy
- 29.01HTML templatesClosing CTA block
- 29.02HTML templatesTransactional email shell
- 29.03HTML templatesFeature grid (3-up)
- 29.04HTML templatesMarketing footer (warm)
- 29.05HTML templatesMarketing hero
- 29.06HTML templatesPresentation slide (16:9)
- 29.07HTML templatesSocial meta card (1200x630)
- 29.08HTML templatesStats strip (4-up)
- 29.09HTML templatesFeatured testimonial strip
Want this as JSON? /api/components.json· /api/assets.json· /api/brand.json