Design system

Semantic · surfaces (theme)

Token name is only on the tile. Caption line under theme-dependent semantic rows switches with the active theme: :root literals in light, html.dark literals in dark (same as globals.css). Second token is a Tailwind step, custom, or var(--…). The swatch fill and token label ink follow the theme. Dark theme background fills (--bg-primary and related) are app canvas neutrals, not one Tailwind step. --bg-card is var(--bg-mid) in both themes. --bg-card-alt is var(--bg-secondary) (stripes, hovers). --contrast is var(--bg-secondary) and --contrast-foreground is var(--text-hero) in both themes.

--bg-primary

#0f0f12 · custom

--bg-secondary

#18181d · custom

--bg-mid

#15151a · custom

--bg-card

#15151a · custom · var(--bg-mid)

--bg-card-alt

#18181d · custom · var(--bg-secondary)

Semantic · text & stroke (theme)

Same rules as surfaces. Shadcn: text-foreground = --text-primary, text-muted-foreground = --text-muted, border-border = --border-color. --border-color is color-mix(in srgb, var(--text-secondary) 20%, transparent) in both themes (stone-800/20 light, zinc-100/20 dark).

--text-primary

#fafaf9 · stone-50

--text-secondary

#f4f4f5 · zinc-100

--text-muted

#d4d4d8 · zinc-300

--text-hero

#fff7ed · orange-50

--border-color

color-mix · zinc-100/20

--accent

#f43f5e · rose-500 · accent

Semantic · shadcn (theme)

Captions switch like the rows above. --card and --muted both use var(--bg-secondary) in globals.css. --popover is var(--bg-primary) in light and var(--bg-secondary) in dark.

--card

#18181d · custom

--popover

#18181d · custom

--contrast

#18181d · custom · var(--bg-secondary)

--destructive

#fb2c36 · red-500

Brand · @theme overrides (src/app/globals.css)

Hex tokens defined in the app @theme block. rose-700, rose-900, and gray-900 are not overridden there; use Tailwind defaults from the build. Other Tailwind steps used in TSX are not listed here unless they appear in a swatch row below.

--color-rose-400

#fb7185 · rose-400

--color-rose-500

#f43f5e · rose-500

--color-pulse-500

#f4396e · pulse-500

--color-cyan-500

#00b8db · cyan-500

--color-red-500

#fb2c36 · red-500

Tailwind defaults · referenced from globals.css

These --color-* steps come from the Tailwind bundle (oklch in tailwindcss/theme.css), not from the brand @theme { } block at the top of src/app/globals.css. The app uses them for light card surfaces (orange-100, purple-100, blue-100), stats, ramps, and for @theme inline chart wiring (--color-chart-2 → emerald-500, --color-chart-5 → blue-500, --color-chart-6 → yellow-500). Shadcn :root tokens and --chart-* in the same file point at these names where needed. Captions use approximate sRGB hex for quick reading.

--color-amber-500

#fd9a00 · amber-500

--color-orange-100

#ffedd5 · orange-100

--color-purple-100

#f3e8ff · purple-100

--color-blue-100

#dbeafe · blue-100

--color-emerald-500

#00bc7d · emerald-500

--color-blue-500

#2b7fff · blue-500

--color-indigo-500

#615fff · indigo-500

McBile ramp · seven chart steps (spectrum)

McBile ramp spectrum on this canvas: chart 1 red through chart 7 violet. Values are Tailwind default --color-* steps (oklch in tailwindcss/theme.css; captions use approximate sRGB hex). Shipped dashboards bind Recharts to semantic CSS variables --chart-1 through --chart-6 in src/app/globals.css and @theme inline (mapping differs from this seven-step ramp).

--color-red-500

#fb2c36 · red-500 · chart 1

--color-orange-500

#f97316 · orange-500 · chart 2

--color-yellow-500

#efb100 · yellow-500 · chart 3

--color-green-500

#22c55e · green-500 · chart 4

--color-blue-500

#2b7fff · blue-500 · chart 5

--color-indigo-500

#615fff · indigo-500 · chart 6

--color-violet-500

#8b5cf6 · violet-500 · chart 7

Gradient ramps · live app (Next.js)

Same stops and angles as production: utilities in src/app/globals.css and Tailwind on route components. Bars are static; some classes animate background-position in the app.

.gradient-pulse-red-br · CTA buttons (404, error, showcase) · showcase brand chip · platform chatbot strip

pulse-500 → red-500 · to bottom right

globals.css · not-found.tsx, error.tsx, [locale]/404/page.tsx, [locale]/not-found.tsx, DemoPageClient.tsx, chatbot-structure.tsx

.gradient-red-rose · Cookie consent · Accept button

red-500 → rose-500 · 135deg

globals.css · .gradient-red-rose · cookie-consent.tsx

404 / not-found · blurred halo behind badge

pulse-500 → red-500 · to outside (radial)

[locale]/404/page.tsx, not-found.tsx · radial-gradient(circle at center, var(--color-pulse-500), var(--color-red-500))

Hero background wash · card → primary

bg-card → bg-primary · to bottom right

globals.css · .hero-bg-wash-card-primary · hero-client.tsx, mission/page.tsx · products/page.tsx, DataDiveClient.tsx, platform-page-shell.tsx, pipeline-page-shell.tsx · bg-gradient-to-br from-[var(--bg-card)] to-[var(--bg-primary)]

Home hero · foot fade to next section

transparent → bg-secondary · to bottom (strip h-24 md:h-32)

hero-client.tsx · HERO_FOOT_GRADIENT_DEFAULT

Home, platform, pipeline, datadive, products, mission · pulse glows

blue-500 + accent (rose-500) · blur-3xl · not a linear ramp; opacity animated

hero-client.tsx, platform-page-shell.tsx, pipeline-page-shell.tsx, DataDiveClient.tsx, products/page.tsx, mission/page.tsx · .hero-pulse · @keyframes hero-pulse-light / hero-pulse-dark in globals.css

Legal and stage heroes · aurora blobs + light band

four radial hex blobs + vertical linear band; drift and band-shift in app

legal-aurora-layout.tsx · .stage-aurora-1, .stage-aurora-2, .stage-aurora-3, .stage-aurora-4, .stage-light-band · globals.css · radial stops #6883da2e, #c24b9d26, #f43f5e1f, #2baad31a · band linear-gradient(180deg, transparent, #6883da0f, #c24b9d14, #6883da0f, transparent)

.principles-carousel-gradient · hero and mission carousel highlights

rose-500 → rose-400 → rose-500 · to right (animated in app)

globals.css · hero-client.tsx, hero-carousel.tsx, mission carousel

.mission-principle-num-gradient · large numerals (mission, tech-stack)

rose-500 → rose-400 → rose-500 · to bottom (animated in app)

globals.css · mission/page.tsx, tech-stack/page.tsx

Typography

Montserrat · body

The quick brown fox jumps over the lazy dog.

JetBrains Mono

const theme = "dark";

Bebas Neue

1 2 3 4 5

Audiowide · Slackey

iPULSY

Brand images

This section shows only product brand raster or SVG marks. The grid below follows the page theme: in light you see wordmark light, MCBILE light, favicon; in dark you see wordmark dark, MCBILE dark, favicon (same order; mirrors dark:hidden / hidden dark:block in the app). Vendor and MCP marks used with logo-bw, and the MCP vendor wall below, are not part of this grid.

Wordmark · light

MCBILE · light

Favicon

Wordmark · dark

MCBILE · dark

Favicon

UI stroke icons · Lucide and custom svg/icons

Non-branded icons from lucide-react in src/ (alphabetical by slug), then file-backed assets under public/svg/icons/ (alphabetical by file name), excluding iPULSY and McBILE marks. Lucide slugs that duplicate a file in this grid (for example pie chart, light bulb, funnel versus Lucide filter, target versus direct-hit.svg) appear only as the file cell where applicable. Lucide uses inline SVG from the same package version as the app; many components use strokeWidth={1.5} instead of 2. Custom file cells use <img> at the same 22px box as Lucide; in dark theme this page applies a monochrome filter so hard-coded fills align with Lucide; in the app, currentColor or masks can still look different. Hover a cell for slug or file name and usage notes.

Inline-only (no separate svg/icons file reference in src)

Same panel as the grid above; these marks are drawn inline in components (see captions).

header.tsx · DiceThreeIcon (closed), DiceFiveIcon (open).

footer.tsx · Facebook, X, LinkedIn (inline paths; repo svg/icons/social-*.svg files are not imported in src/).

DataDiveClient.tsx · AtomIcon is a large inline SVG only (no logoUrl("icons/atom.svg") in app). pipeline-client.tsx · DirectHitIcon duplicates geometry; planned items also use file icons/direct-hit.svg (listed above).

data-flow-diagram.tsx, lifecycle-section.tsx, how-it-works.tsx · small step chips use Unicode dice dots (U+25CF) or DiceDots; isometric dice matches dice.svg in the grid.

Partner marks · MCP & Tech Stack

Theme companions used only inside inline SVG. Each tile shows the mark plus a short compact label.

Affilka

Ahrefs

Auth0

AWS S3

ClickHouse

ClickUp

Customer.io

Docker

ElevenLabs

FastAPI

Fingerprint

Google

Srch-Console

GA4

2FA

BigQuery

Intercom

JavaScript

i18n

Live Chat

Microsoft

MS Clarity

Next.js

Playwright

PostgreSQL

Python

QuickBooks

React

Recharts

Resend

Scaleo

SEMrush

Similarweb

Slack

Snowflake

SoftSwiss

SQLite

Tailwind CSS

Twilio

TypeScript

HTML5

MagicWand

Upstash

Xero

Patterns · chrome parity

Header burger (all breakpoints)

Canvas: dice burger and panel at all widths; shipped header may hide the burger from 768px - see src/components/layout/header.tsx.
Panel under the sticky bar: two columns of six nav tiles, then language, support, book demo, theme. Close: second dice tap, Escape, outside click.

Modals (<dialog>)

Book a Demo and Contact Us mirror site fields; combobox chrome is static; submit buttons stay disabled.
Open via footer; dialog.showModal(); close with header control or Escape. Submit handlers preventDefault on this canvas.

Footer · scroll-to-top (reference product)

Top band --bg-secondary: logo, reference links, book demo, contact, globe, theme; burger repeats the same anchors - see src/components/layout/footer.tsx.

Components

Tag

Link style (decorative)

Standalone link · secondary · muted

Stat tile chrome

Aatile

Bbtile

Cctile

Ddtile

Showcase · metric card + table (excerpt)

Static excerpt (metrics dashboard chrome). Canvas only.

REG

12,450

+15.2%

GGR

€2.4M

+12.5%

FTD

4,230

+8.7%

Avg. LTV

€777

-2.3%

Metric	Value	Change
REG	12,450	+15.2%
GGR	€2.4M	+12.5%
Churn	29.1%	-1.1%