InfoDiagram · Design system

Phase 0 — Tokens, components, and rules of the road

Single source of truth for color, type, spacing, radius, and shadow. Defined in app/assets/css/tokens.css, exposed via Tailwind utilities (bg-id-orange-500, text-id-text-primary, rounded-id-lg…) and via raw CSS vars (var(--id-color-orange-500)).

New code must use --id-* tokens. Legacy --c-*, --home-* and --pdp-* vars are aliased so existing screens keep rendering during Phase 1 migration.

Preview palette

01 — Color

Brand orange, turquoise, deep navy, cool ink

One token. One purpose. Don't pick a hex by eye.

Primary (brand CTA)--id-color-orange-*
50
100
200
300
400
500
600
700
800
900
Secondary (links)--id-color-turquoise-*
50
100
200
300
400
500
600
700
800
900
Blue (deep accents, headings)--id-color-blue-*
50
100
200
300
400
500
600
700
800
900
Ink (text + borders)--id-color-ink-*
50
100
200
300
400
500
600
700
800
900

Semantic roles (use these in components)

Page bg--id-bg-page
Raised surface--id-bg-raised
Strong surface--id-bg-strong
Deep surface--id-bg-deep
Tinted orange--id-bg-tinted-orange
Tinted teal--id-bg-tinted-teal
CTA bg--id-cta-bg
CTA hover--id-cta-bg-hover
Link--id-text-link
Accent navy--id-accent-navy
Success--id-color-success-500
Error--id-color-error-500

02 — Typography

Montserrat for display, system stack for body

Twelve sizes from xs to 6xl. Tracking-kicker for uppercase labels.

--id-text-xs12px The quick brown fox visualizes complex KPIs.
--id-text-sm13px The quick brown fox visualizes complex KPIs.
--id-text-md14px The quick brown fox visualizes complex KPIs.
--id-text-base16px The quick brown fox visualizes complex KPIs.
--id-text-lg18px The quick brown fox visualizes complex KPIs.
--id-text-xl20px The quick brown fox visualizes complex KPIs.
--id-text-2xl24px The quick brown fox visualizes complex KPIs.
--id-text-3xl28px The quick brown fox visualizes complex KPIs.
--id-text-4xl32px The quick brown fox visualizes complex KPIs.
--id-text-5xl40px The quick brown fox visualizes complex KPIs.
--id-text-6xl48px The quick brown fox visualizes complex KPIs.

03 — Spacing, radius, elevation

One scale, no half-measures

Spacing

--id-space-14px
--id-space-28px
--id-space-312px
--id-space-416px
--id-space-520px
--id-space-624px
--id-space-832px
--id-space-1040px
--id-space-1248px
--id-space-1664px

Radius

xs
sm
md
lg
xl
2xl
pill

Elevation

elev-1
elev-2
elev-3
elev-4

04 — Buttons

One CTA per screen. The orange one means business.

`<id-button>` API unchanged — now token-backed.

05 — Components

Pulled from the redesigned PDP. Ready to compose.

Kicker · <id-ui-kicker>

Brand kicker

Accent kicker

Muted kicker

SectionHead · <id-ui-section-head>

What you get

A boardroom-ready deck without rebuilding it from scratch

14 editable PowerPoint slides. Strategy frameworks consultants actually use. Plug your data in and present.

ProofBadge · <id-ui-proof-badge>

Fully editable in PowerPointInstant download14 slides includedSingle-user license

SummaryCard · <id-ui-summary-card>

What you get

14 slides · executive deck

Editable in PowerPoint, KeyNote, or Google Slides. Drop in your numbers and present.

TrustStrip · <id-ui-trust-strip>

Secure paymentBraintree checkout with encrypted card handling
Money-back guaranteeRefund available if the deck misses the mark
Expert-designedBuilt for real strategy and board decks
Instant downloadBuy once, open the files right away

ReviewHighlight · <id-ui-review-highlight>

Used these as a starting point for our quarterly board update. Cut the design time from a day to an hour.

— Strategy Director, Fortune 500

CraftedCard · <id-ui-crafted-card>

06 — Rules of the road

What to do, what not to do

Do

  • Use var(--id-*) or Tailwind id-* utilities for every color, spacing, radius, and shadow.
  • Compose page sections with <id-ui-section-head> + body, in that order.
  • Reach for the existing <id-button> with btn-primary, btn-secondary, or btn-outline.
  • One primary CTA per visible screen.

Don't

  • Hardcode #FFAA00, #f2a51c, or any other brand color in markup or styles.
  • Add new --c-*, --home-*, or --pdp-* variables. They are now aliases only.
  • Invent a new shade when an existing token is within 10%. Use the closest scale step.
  • Stack two primary CTAs side by side. Pick the more important one.

Source: app/assets/css/tokens.css · app/components/ui/* · tailwind.config.js