Building AI magic, one block at a time.
The canonical brand reference for MagicBlocks — logo, colour, type, voice, icons, media, and applications. Eight chapters. Every asset editable, every snippet copyable, every page dark-mode aware. Humans or AI agents can pick up any piece and ship something that looks and feels like us.
How to use this
Each chapter is its own page, with its own table of contents. Shared design tokens live in _shared.css, so every sub-page inherits the same colour, type, and spacing system — and flips dark via a single data-theme attribute on <body>. Click any chapter to dive in.
Every SVG is live-editable, every logo variant ships in SVG + PNG, and the full file tree is machine-readable via manifest.json. For a full, copy-paste web component library, jump to the component library.
manifest.json is the source of truth. It lists every file path, every brand colour, every typography family, plus voice principles, banned words, and words we love. Paths are relative, so the kit works wherever this folder is served. The brand palette and type system are canonical — don't introduce new colours or fonts.
Logo system
Full lockup, icon-only, wordmark, clear space, minimum sizes, and the “don’ts” — every rule that keeps the mark on the rails.
→Palette & atmosphere
The canonical pink, the supporting quad, the warms, the atmosphere glow, accessibility ratios, and every hex and token name used anywhere.
→Families & scale
Bricolage Grotesque, DM Sans, Fraunces italic, JetBrains Mono. The full type scale, the signature italic treatment, and the drop-in font stack.
→Voice, messaging & words
The vibe, the do/don't, five messaging principles, the banned words list, and the words we reach for whenever we can.
→Icon system & patterns
140+ duotone icons in three variants (ink, pink, mono), a searchable gallery, and the block-cube pattern system for heroes and cards.
→Video, decks & social
Presentation-scale templates for every channel — 16:9 slide decks, 1:1 social tiles, 9:16 stories. Pinned so designs render as they'd export.
→Banner, cards & signature
Pre-built templates — hero banner, social avatar, business cards, colour chart, email signature, website <head> snippet.
Every file, every format
The full file index — logo variants, favicons, brand assets, icon library, pattern sources. Rendered live from manifest.json.
The component library
Sixteen chapters of copy-paste HTML + CSS covering every element we use — foundations, typography, buttons, forms, cards, navigation, data display, feedback & overlays, content blocks, page templates, narrative systems, media & presentation, the app shell, CRM pipeline patterns, app AI surfaces, and the platform/narrative system. Every block has anatomy callouts and one-click copy.
Everything, machine-readable.
manifest.json lists every file, every brand colour, every typography family, and the voice principles / banned words / words-we-love. Paths are all relative, so the kit resolves wherever it's served.
GET https://brand.magicblocks.ai/manifest.json
→ { name, version, brand_colors, typography, voice, groups[...], ... }