--- name: Scale AI tagline: White canvas, Aeonik at a colossal 116px, black 8px CTAs, and a signature deep-to-light purple gradient (#5933b2 → #9068c2). updated_at: 2026-05-30T00:00:00.000Z published_at: 2026-05-29T21:43:52.422Z author: webdesignhot source_url: https://scale.com spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, saas] tags: [light, big-type, sans, enterprise, data, purple-gradient, black-cta] preview_swatch: ['#ffffff', '#5933b2', '#9068c2'] related: [] description: 'Scale AI runs the enterprise-data register at maximum scale: a stark white canvas, Aeonik set to a colossal 116px display headline at weight 400, and a black "Book Demo" CTA with a tight 8px radius. The brand''s one true flourish is a four-stop purple gradient — deep violet #5933b2 lifting to light lavender #9068c2, with a mauve #8a507e and periwinkle #7b8ce7 in the mid-stops — that pours across hero washes, data-visualization fills, and dark feature bands. Where Databricks chose red and Snowflake chose cyan, Scale chose oversized type and a single confident gradient against near-monochrome black-on-white. The system reads as data infrastructure for "the world''s most important decisions": dark hero bands carry white Aeonik headlines, light marketing surfaces stay almost entirely black-and-white, and the purple appears as event color rather than chrome. Nav surfaces sit on a quiet #f5f5f5 panel gray; cards use a translucent near-black #07070799 on dark grounds. Big-type confidence plus restrained color is the whole identity.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent-lavender muted: text-muted border: border ring: brand colors: bg: '#ffffff' # canvas — marketing, product, docs (white-first) bg-dark: '#070707' # near-black — dark hero bands, footer ground bg-deep: '#000000' # pure black — CTA fills, maximal contrast surfaces bg-panel: '#f5f5f5' # nav panel / card / cta surface gray bg-mute: '#eaeaea' # mobile nav close + demo CTA chip gray bg-soft: '#fafafa' # softest light surface for nested content surface: '#f5f5f5' # alias of bg-panel — quiet light card surface surface-dark: '#0707079a' # translucent near-black card on dark grounds (#07070799) text: '#000000' # ink — display + body, pure black on white text-charcoal: '#1a1a1a' # near-black secondary headings text-slate: '#3d3d3d' # slate — sub-titles, secondary body text-steel: '#575757' # steel — body running-text, mobile cta wrapper text-stone: '#767676' # stone — captions, metadata (AA on white) text-muted: '#999999' # muted — disabled, placeholder text-on-brand: '#ffffff' # white text on purple / black surfaces on-brand: '#ffffff' # alias on-dark: '#ffffff' # white text on near-black hero on-dark-muted: '#a8a8a8' # muted on dark canvas brand: '#5933b2' # Scale purple — deep violet, gradient anchor brand-deep: '#4a2a96' # deeper violet — pressed / shadow stop brand-light: '#9068c2' # light lavender — gradient top stop brand-mauve: '#8a507e' # gradient mid-stop — dusty mauve brand-periwinkle: '#7b8ce7' # gradient mid-stop — cool periwinkle blue gradient-hero: 'linear-gradient(135deg, #5933b2 0%, #8a507e 45%, #9068c2 100%)' gradient-cool: 'linear-gradient(135deg, #5933b2 0%, #7b8ce7 100%)' accent-lavender: '#9068c2' # accent — light lavender highlight, links on dark accent-violet: '#5933b2' # accent — deep violet, data-viz fills link: '#000000' # links are black on light (--tw-prose-links: #000) link-on-dark: '#9068c2' # lavender link on dark grounds border: '#e2e2e2' # hairline default on white border-soft: '#eeeeee' # softer hairline border-strong: '#cccccc' # stronger outline — secondary button border-dark: '#2a2a2a' # divider on near-black canvas code-bg: '#0000000a' # prose pre/code wash (--tw-prose-pre-bg) semantic-success: '#1a7f4b' # confirmation green semantic-warning-bg: '#fff6e0' semantic-warning-text: '#6b4e00' semantic-error: '#d12d2d' semantic-info: '#5933b2' # info notices reuse the brand purple typography: display: family: '"Aeonik", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' weights: [400, 500, 600, 700] body: family: '"Aeonik", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace' weights: [400, 500] scale: display-mega: { size: 116, weight: 400, lineHeight: 0.95, tracking: '-0.03em', family: display, notes: 'homepage hero h1 — colossal Aeonik at weight 400' } display-hero: { size: 80, weight: 400, lineHeight: 1.00, tracking: '-0.03em', family: display, notes: 'product-page heroes' } display-lg: { size: 64, weight: 400, lineHeight: 1.05, tracking: '-0.02em', family: display, notes: 'h2-scale section heads — also weight 400' } h1: { size: 48, weight: 500, lineHeight: 1.08, tracking: '-0.018em', family: display } h2: { size: 36, weight: 500, lineHeight: 1.15, tracking: '-0.012em', family: display } h3: { size: 28, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 22, weight: 600, lineHeight: 1.30, tracking: '0', family: body } h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body } subtitle: { size: 20, weight: 400, lineHeight: 1.50, tracking: '0', family: body, notes: 'hero subheads, intro paragraphs' } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-medium: { size: 16, weight: 500, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.50, tracking: '0', family: body } body-sm-medium: { size: 14, weight: 500, lineHeight: 1.50, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.40, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.40, tracking: '0.02em', family: body } eyebrow: { size: 12, weight: 600, lineHeight: 1.40, tracking: '0.08em', family: body, transform: uppercase } button: { size: 15, weight: 500, lineHeight: 1.30, tracking: '0', family: body } code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 xxl: 24 pill: 9999 full: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 120, 160] layout: page-width: 1280 prose-width: 720 header-height: 64 components: button-primary: backgroundColor: bg-deep textColor: on-brand rounded: md padding: '12px 20px' use: 'every primary CTA — Book Demo, Get Started, Contact Sales (BLACK fill, not purple)' button-primary-hover: backgroundColor: text-charcoal textColor: on-brand rounded: md button-primary-disabled: backgroundColor: border textColor: text-muted rounded: md button-secondary: backgroundColor: transparent textColor: text rounded: md padding: '12px 20px' border: '1px solid border-strong' use: 'less-committed pair next to primary on light — Learn more, Read the paper' button-on-dark: backgroundColor: bg textColor: text rounded: md padding: '12px 20px' use: 'inverts to WHITE fill / black text on near-black hero bands' button-secondary-on-dark: backgroundColor: transparent textColor: on-dark rounded: md padding: '12px 20px' border: '1px solid border-dark' use: 'outline button on dark hero — white text, hairline border' button-ghost: backgroundColor: transparent textColor: text rounded: md padding: '8px 12px' use: 'inline ghost — nav menu items, dropdown triggers' nav-cta-chip: backgroundColor: bg-mute textColor: text rounded: md padding: '8px 14px' use: 'mobile nav demo CTA chip (#eaeaea ground)' hero-band-light: backgroundColor: bg textColor: text padding: 120 use: 'light hero — white canvas, black mega-headline, black CTA' hero-band-dark: backgroundColor: bg-dark textColor: on-dark padding: 120 use: 'signature dark hero — near-black ground, WHITE 116px Aeonik headline' hero-band-gradient: backgroundColor: brand textColor: on-dark padding: 120 background: gradient-hero use: 'purple-gradient hero / section wash — #5933b2 → #9068c2' feature-card: backgroundColor: bg textColor: text rounded: lg padding: 32 border: '1px solid border' use: '3-up benefit grid on white surfaces' feature-card-panel: backgroundColor: bg-panel textColor: text rounded: lg padding: 32 use: 'quiet gray surface card (#f5f5f5) — no border needed' feature-card-dark: backgroundColor: surface-dark textColor: on-dark rounded: lg padding: 32 use: 'translucent near-black card (#07070799) over dark / gradient grounds' product-card: backgroundColor: bg-panel textColor: text rounded: lg padding: 32 use: 'product surface card — Scale GenAI / Data Engine / Donovan on homepage' stat-card: backgroundColor: bg textColor: text rounded: lg padding: 32 border: '1px solid border' use: 'data-heavy outcome stat tile — big number in display-lg + label' customer-story-card: backgroundColor: bg textColor: text rounded: lg padding: 32 border: '1px solid border' use: 'customer story tile — logo + outcome stat + quote' logo-tile: backgroundColor: bg textColor: text-stone padding: 24 use: 'monochrome enterprise + government logo wall (OpenAI, Meta, US Army)' badge-pill: backgroundColor: bg-panel textColor: text rounded: pill padding: '4px 12px' use: 'NEW, BETA, GA — quiet gray pill' badge-gradient: backgroundColor: brand textColor: on-dark rounded: pill padding: '4px 12px' background: gradient-hero use: 'rare purple-gradient highlight pill — featured launches only' badge-uppercase: backgroundColor: transparent textColor: text-steel use: 'eyebrow label — uppercase 12px / 600 / 0.08em tracking' text-input: backgroundColor: bg textColor: text rounded: md padding: '10px 14px' height: 44 border: '1px solid border' text-input-focus: border: '2px solid brand' cta-band-dark: backgroundColor: bg-dark textColor: on-dark padding: 96 use: 'pre-footer CTA — near-black ground with white CTA + outline-on-dark pair' cta-band-gradient: backgroundColor: brand textColor: on-dark padding: 96 background: gradient-hero use: 'rare full-gradient CTA band — major launch / summit moments' code-block: backgroundColor: code-bg textColor: text rounded: md padding: 20 use: 'fenced code on docs / blog — light translucent-black wash (#0000000a)' top-nav: backgroundColor: bg textColor: text height: 64 use: 'white sticky nav — Scale wordmark left + black Book Demo CTA right' nav-panel: backgroundColor: bg-panel textColor: text rounded: lg padding: 24 use: 'mega-menu dropdown panel — #f5f5f5 ground' footer: backgroundColor: bg-dark textColor: on-dark-muted padding: 96 motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.16, 1, 0.3, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — transitions reduced to opacity-only at 100ms; gradient drift and section-on-scroll reveals skip translate offset' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: '0 1px 2px rgba(7,7,7,0.04)' standard: '0 4px 12px rgba(7,7,7,0.08)' elevated: '0 12px 32px rgba(7,7,7,0.12)' deep: '0 24px 48px rgba(7,7,7,0.16)' ring: '0 0 0 3px rgba(89,51,178,0.35)' on-dark: 'none — near-black canvases use brightness-step / translucent-card layering rather than shadow' accessibility: contrast-text-on-bg: 21.0 # AAA — #000000 on #ffffff (maximal) contrast-steel-on-bg: 7.0 # AAA — #575757 on #ffffff contrast-stone-on-bg: 4.5 # AA — #767676 on #ffffff at body sizes contrast-on-dark: 20.0 # AAA — #ffffff on #070707 contrast-on-brand: 6.6 # AAA — #ffffff on #5933b2 (purple) contrast-on-cta: 21.0 # AAA — #ffffff on #000000 (Book Demo) contrast-lavender-on-dark: 5.0 # AA — #9068c2 on #070707 (links on dark) focus-ring: '3px solid rgba(89,51,178,0.35) with 2px offset' reduced-motion-honored: true dark-mode: 'dual-mode by section, not global toggle — light marketing surfaces stay white (#ffffff) with pure-black ink; the signature hero bands, the pre-footer CTA, and the global footer ship in near-black #070707 with white Aeonik headlines. A purple-gradient band (#5933b2 → #9068c2) appears as the third register for featured launches and data-visualization sections. The production site carries a `data-theme` attribute (theme-toggle audit score=3) but exposes no user-facing light/dark switch — the rhythm is structural, alternating white → near-black → gradient bands down the page.' --- ## 1. Visual Theme & Atmosphere Scale AI takes the enterprise-data register and pushes its type to a scale almost no peer matches. The homepage hero headline is **Aeonik at 116px set to weight 400** — colossal, near-newspaper-masthead in size, but light in weight, so it reads as confident rather than shouty. The canvas underneath is stark white (`#ffffff`) with pure-black ink (`#000000`); there is no gray haze, no softened off-white. Where Databricks asserts identity through a single red and Snowflake through cyan, Scale asserts it through **sheer typographic size against maximal black-on-white contrast**, then spends its one color flourish on a purple gradient deployed with restraint. The brand's signature dark hero band flips the canvas: a near-black ground (`#070707`) carrying the same enormous Aeonik headline in **white**. This dark-hero-with-white-mega-type is the most recognizable Scale composition — it is what the homepage leads with, and it positions the company as infrastructure for "the world's most important decisions" (the literal hero tagline). The dark band feels weighty and serious; the oversized white headline floating on near-black reads as gravity, not marketing fizz. The one true color is a **four-stop purple gradient**: deep violet `#5933b2` lifting through a dusty mauve `#8a507e` to light lavender `#9068c2`, with a cool periwinkle `#7b8ce7` available in the cool variant. The gradient appears as hero washes, data-visualization fills, and the occasional featured band — never as button chrome, never as body text. This is the discipline that defines the system: the purple is event color. Most of the page is black, white, and a quiet panel gray (`#f5f5f5`), and the gradient lands as a deliberate moment. CTAs are **black, not purple**. The primary "Book Demo" button is a `#000000` fill with white text and a tight **8px radius** — square-but-softened, decisive, engineered. Scale resisted the obvious move of putting the brand purple on the button; instead the button stays monochrome and the purple is reserved for surfaces. The 8px radius runs across buttons and inputs; pill radius is held back for status badges only. The supporting neutrals are honestly neutral — `#f5f5f5` for nav panels and quiet cards, `#eaeaea` for mobile-nav chips, `#575757` steel for secondary body, and a translucent near-black `#07070799` for cards floating on dark or gradient grounds. The credibility lever, as with every enterprise data brand, is the logo wall: Scale leans on a mix of frontier-AI labs, Fortune 500s, and US government / defense customers, run as a monochrome strip below the hero. Big type, near-monochrome palette, one confident gradient — that is the whole identity. **Key Characteristics:** - **Colossal Aeonik headline at 116px / weight 400** — the single loudest signal; size carries the brand, not weight or color. - **Stark white canvas `#ffffff` with pure-black ink `#000000`** — maximal 21:1 contrast, no off-white haze. - **Signature near-black hero `#070707`** — same mega-type in white; "important decisions" gravity. - **Purple gradient `#5933b2` → `#9068c2`** — the one color flourish; washes and data-viz only, never chrome. - **Black `#000000` CTAs at 8px radius** — "Book Demo"; monochrome, not purple, square-but-softened. - **Quiet panel gray `#f5f5f5`** — nav panels, dropdown surfaces, low-key cards; no shouting. - **Aeonik single-family discipline** — display and body share one geometric sans; no serif anywhere. - **Three structural registers** — white marketing / near-black hero / purple-gradient feature, alternated down the page. - **Enterprise + government logo wall** — frontier labs, Fortune 500, US defense; density is the credibility lever. - **Translucent near-black cards `#07070799`** — depth on dark grounds via opacity layering, not heavy shadow. ## 2. Color Palette & Roles ### Primary - **Bg / Canvas** (`#ffffff`): The default white floor for marketing, product, docs, blog, pricing. - **Bg Dark** (`#070707`): Near-black hero bands, pre-footer CTA, footer ground. The signature dark surface. - **Bg Deep** (`#000000`): Pure black — CTA fills ("Book Demo") and maximal-contrast moments. - **Text / Ink** (`#000000`): Display headlines, body emphasis — pure black on white. - **Brand / Primary** (`#5933b2`) [→ `--gradient-color-2`]: Scale purple, deep violet — gradient anchor, focus ring, data-viz fill. ### Brand & Gradient - **Brand Deep** (`#4a2a96`): Deeper violet for pressed states and gradient shadow stops. - **Brand Light** (`#9068c2`) [→ `--gradient-color-1`]: Light lavender — the gradient's top stop, links on dark. - **Brand Mauve** (`#8a507e`) [→ `--gradient-color-3`]: Dusty mauve — gradient mid-stop. - **Brand Periwinkle** (`#7b8ce7`) [→ `--gradient-color-4`]: Cool periwinkle blue — gradient mid-stop for the cool variant. - **Gradient Hero** (`linear-gradient(135deg, #5933b2 0%, #8a507e 45%, #9068c2 100%)`): The signature warm-violet wash for hero bands and feature sections. - **Gradient Cool** (`linear-gradient(135deg, #5933b2 0%, #7b8ce7 100%)`): Cooler violet-to-periwinkle variant for data-visualization fills. ### Accent - **Accent Lavender** (`#9068c2`): Light lavender highlight, links and emphasis on dark grounds. - **Accent Violet** (`#5933b2`): Deep violet for data-viz fills and chart accents. ### Interactive - **Link** (`#000000`) [→ `--tw-prose-links`]: Links are pure black on light surfaces — underline carries the affordance, not color. - **Link on Dark** (`#9068c2`): Lavender link on near-black / gradient grounds. - **Selected**: Selection background uses brand purple at ~18% alpha (`rgba(89,51,178,0.18)`). ### Neutral Scale - **Ink / Text** (`#000000`): Display, body emphasis. - **Charcoal** (`#1a1a1a`): Near-black secondary headings, primary-button hover fill. - **Slate** (`#3d3d3d`): Sub-titles, secondary body. - **Steel** (`#575757`) [→ `--nav-mobile-cta-wrapper-bg`]: Body running-text default, mobile CTA wrapper. - **Stone** (`#767676`): Captions, breadcrumbs, metadata (clears AA on white at body sizes). - **Muted** (`#999999`): Disabled, placeholder text. ### Surface & Borders - **Surface / Bg Panel** (`#f5f5f5`) [→ `--nav-card-background`, `--nav-panel-background`, `--nav-ctas-background`]: Quiet gray for nav panels, dropdown surfaces, low-key cards. - **Bg Mute** (`#eaeaea`) [→ `--nav-mobile-close-background`, `--nav-mobile-demo-cta-bg`]: Mobile-nav close button and demo CTA chip ground. - **Bg Soft** (`#fafafa`): Softest light surface for nested content. - **Surface Dark** (`#07070799` — ~60% near-black) [→ `--card-bg`]: Translucent card over dark / gradient grounds. - **Border** (`#e2e2e2`): Default 1px hairline on white. - **Border Soft** (`#eeeeee`): Lighter hairline. - **Border Strong** (`#cccccc`): Stronger outline — secondary button. - **Border Dark** (`#2a2a2a`): Divider on near-black canvas. ### Shadow Colors - **Ambient** (`rgba(7,7,7,0.04)`): Barely-visible card shadow. - **Standard** (`rgba(7,7,7,0.08)`): Default elevated card. - **Elevated** (`rgba(7,7,7,0.12)`): Floating popovers, dropdowns. - **Deep** (`rgba(7,7,7,0.16)`): Modals, dialogs. - Near-black canvases use **translucent-card layering** (`#07070799`) rather than cast shadow. ### Semantic - **Success** (`#1a7f4b`): Confirmation green — kept neutral so it doesn't compete with the purple. - **Warning Bg** (`#fff6e0`) / **Warning Text** (`#6b4e00`): Caution callouts. - **Error** (`#d12d2d`): Validation errors. - **Info** (`#5933b2`): Info notices reuse the brand purple. ### Code - **Code Bg** (`#0000000a` — ~4% black) [→ `--tw-prose-pre-bg`]: Light translucent-black wash for fenced code and `
` blocks on light surfaces.

## 3. Typography Rules

### Font Family
- **Primary**: `"Aeonik", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. Aeonik (CoType Foundry, a grotesque-geometric hybrid) carries every display and body role — single-family discipline.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace`. System mono for fenced code on docs / blog; Scale ships no custom mono.
- **Substitutes**: Aeonik is a licensed font, not open-source. The closest free pairing is **Inter** (similar x-height and geometric proportions; consider `letter-spacing: -0.01em` at display sizes to approximate Aeonik's tighter set). Both share the neutral grotesque character that keeps the focus on size, not personality.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-mega | Aeonik | 116 | 400 | 0.95 | -0.03em | Homepage hero h1 — colossal, light weight |
| display-hero | Aeonik | 80 | 400 | 1.00 | -0.03em | Product-page heroes |
| display-lg | Aeonik | 64 | 400 | 1.05 | -0.02em | h2-scale section heads — also weight 400 |
| h1 | Aeonik | 48 | 500 | 1.08 | -0.018em | Major section heads |
| h2 | Aeonik | 36 | 500 | 1.15 | -0.012em | Sub-section heads |
| h3 | Aeonik | 28 | 500 | 1.25 | -0.005em | Card titles, product surface heads |
| h4 | Aeonik | 22 | 600 | 1.30 | 0 | Inline emphasis heads |
| h5 | Aeonik | 18 | 600 | 1.35 | 0 | Smallest heading |
| subtitle | Aeonik | 20 | 400 | 1.50 | 0 | Hero subheads, intro paragraphs |
| body-lg | Aeonik | 18 | 400 | 1.55 | 0 | Blog body, long-form |
| body | Aeonik | 16 | 400 | 1.55 | 0 | Default marketing body |
| body-medium | Aeonik | 16 | 500 | 1.55 | 0 | Body emphasis |
| body-sm | Aeonik | 14 | 400 | 1.50 | 0 | Footer body, secondary copy |
| body-sm-medium | Aeonik | 14 | 500 | 1.50 | 0 | Card metadata |
| label | Aeonik | 13 | 500 | 1.40 | 0 | Form labels, inline tags |
| caption | Aeonik | 12 | 500 | 1.40 | 0.02em | Image captions, fine print |
| eyebrow | Aeonik | 12 | 600 | 1.40 | 0.08em | Uppercase section labels |
| button | Aeonik | 15 | 500 | 1.30 | 0 | CTA labels |
| code | mono | 14 | 400 | 1.55 | 0 | Fenced code, docs / blog |

### Principles
- **Display goes huge but light.** The hero headline is the defining choice — 116px at weight 400, not 700. The size carries the impact; the light weight keeps it from feeling aggressive. This is the opposite of Databricks's heavy 700-weight display register.
- **Negative tracking scales with size.** -0.03em at 116px and 80px, easing to -0.018em at 48px and back to 0 below 28px. The tight tracking on the mega-headline is what lets a 116px line hold together as a single confident block.
- **Weight steps up as size steps down.** Display sizes (116/80/64) sit at 400; mid headings (48/36/28) move to 500; small heads (22/18) reach 600. The smaller the text, the more weight it needs to hold presence.
- **Body line-height 1.55** for comfortable long-form reading. Blog and docs run long; the looser leading keeps technical paragraphs readable.
- **Eyebrow labels at 0.08em uppercase** — the only place tracking opens up, used for section labels ("PRODUCT", "CUSTOMERS", "PUBLIC SECTOR").
- **Button labels at weight 500, 15px.** Slightly larger and lighter than typical SaaS buttons (which run 14/600) — the black fill already gives the button weight, so the label stays calm.
- **Single-family discipline.** Aeonik carries display and body alike. No serif, no secondary display face. The restraint is the brand.

## 4. Component Stylings

### Buttons (4 variants)

**`button-primary`** — The "Book Demo" CTA. Background `#000000` (pure black, **not** the brand purple), text `#ffffff`, type Aeonik 15 / 500, padding 12×20px, **8px radius** (square-but-softened, not pill). Used on every primary action: "Book Demo", "Get Started", "Contact Sales", "Talk to an Expert".
- *Hover*: Background lightens to `#1a1a1a` charcoal over 150ms; no transform.
- *Pressed*: Background returns to pure black with a subtle inset over 80ms.
- *Disabled*: Background `#e2e2e2`, text `#999999`.

**`button-secondary`** — Transparent with `#cccccc` border, text `#000000`. Same 8px radius and 12×20px padding. The less-committed pair next to primary on light surfaces — "Learn more", "Read the paper".
- *Hover*: Border darkens `#cccccc` → `#000000` over 150ms.

**`button-on-dark`** — Inverts on near-black hero bands: **white `#ffffff` fill, black `#000000` text**, 8px radius. The primary action flips to white-on-dark rather than holding black (black-on-near-black would vanish).

**`button-secondary-on-dark`** — Transparent with `#2a2a2a` border, text `#ffffff`, 8px radius. The outline pair on near-black / gradient grounds.

**`button-ghost`** — Inline ghost: transparent, text `#000000`, smaller padding (8×12px), 8px radius. Used in nav menu items, dropdown triggers, table-row actions.

### Cards

**`feature-card`** — 3-up benefit grid card on white. Background `#ffffff`, 12px radius, 32px padding, 1px `#e2e2e2` border. Icon glyph (black or gradient-filled), h3 title (28 / 500), body description (16 / 400 `#575757`).

**`feature-card-panel`** — Quiet gray surface card. Background `#f5f5f5`, 12px radius, 32px padding, no border. Used when a card needs separation from white without a hairline.

**`feature-card-dark`** — Translucent near-black card over dark / gradient grounds. Background `#07070799` (~60% near-black), white text, 12px radius, 32px padding. The translucency lets the gradient behind it bleed through subtly.

**`product-card`** — Scale GenAI / Data Engine / Donovan product surface card on homepage. Background `#f5f5f5`, 12px radius, 32px padding, no border. Product name in h3, capability subhead, "Learn more →" link in black.

**`stat-card`** — Data-heavy outcome stat tile. White, 12px radius, 32px padding, 1px `#e2e2e2` border. Big number in display-lg (64 / 400, often gradient-filled), label in body-sm `#767676`.

**`customer-story-card`** — Customer story tile. White, 12px radius, 32px padding, 1px `#e2e2e2` border. Customer logo at top, outcome stat in h2, 1-line quote in body-medium, "Read the story →" link.

**`code-block`** — Fenced code on docs / blog. Background `#0000000a` (~4% black wash), black text in system mono 14 / 400 / 1.55, 8px radius, 20px padding. Light translucent ground keeps code legible without a heavy panel.

### Inputs / Forms

**`text-input`** — White, 8px radius, 10×14px padding, 44px height, 1px `#e2e2e2` border, placeholder `#999999`.

**`text-input-focus`** — Border thickens to 2px solid `#5933b2` (brand purple as the focus color — the one place purple touches a form control), plus a 3px outer ring at `rgba(89,51,178,0.35)`.

### Badges / Tags / Pills

**`badge-pill`** — "NEW", "BETA", "GA". Background `#f5f5f5` (quiet gray), text `#000000`, full pill (9999px), 4×12px padding, type eyebrow (12 / 600 / 0.08em / uppercase).

**`badge-gradient`** — Rare purple-gradient highlight pill for featured launches. Gradient-hero background, white text, full pill. Reserved for "NEW" tentpole moments — most badges stay gray.

**`badge-uppercase`** — Section eyebrow. Transparent, text `#575757`, type eyebrow (12 / 600 / 0.08em).

### Navigation

**`top-nav`** — 64px-tall sticky white bar. Scale wordmark anchors the left; horizontal menu (Products / Solutions / Customers / Company / Resources) center; "Book Demo" black CTA (`#000000`, white text, 8px radius) on the right. Stays white on every page including dark hero pages — the nav is constant.

**`nav-panel`** — Mega-menu dropdown panel on `#f5f5f5` ground, 12px radius, 24px padding. Multi-column product / solution links with capability subheads. The panel gray (`#f5f5f5`) is the same token across desktop dropdowns and mobile drawer.

**`nav-cta-chip`** — Mobile-nav demo CTA chip on `#eaeaea` ground, 8px radius, smaller padding. The mobile CTA wrapper sits on a `#575757` steel band.

**`footer`** — Near-black ground (`#070707`), white headings, `#a8a8a8` link tone. Multi-column — Products / Solutions / Company / Resources / Legal. 96px vertical padding. Enterprise + government logo strip often above the link grid.

### CTA Bands

**`cta-band-dark`** — Pre-footer CTA on near-black (`#070707`), white text, 96px padding. Headline in h1, subhead in subtitle, white primary CTA + outline-on-dark pair.

**`cta-band-gradient`** — Rare full-gradient CTA band (gradient-hero background, white text, 96px padding). Reserved for major launches / summit moments — the gradient is the event signal.

## 5. Layout Principles

### Spacing System
Base unit **4px**. Tokens: `xxs:4 · xs:8 · sm:12 · md:16 · lg:20 · xl:24 · xxl:32 · xxxl:40 · section-sm:48 · section:64 · section-lg:96 · hero:120 · mega:160`. Section padding alternates: 64px between minor bands, 96px between major bands, 120–160px for hero spaces — the oversized hero type needs oversized hero padding to breathe.

### Grid & Container
- **Max content width**: 1280px centered, with 32px horizontal breathing room on desktop, 24px tablet, 16px mobile.
- **Hero**: Full-width band, 120–160px padding, the mega-headline (116px) breaks wide — often spanning most of the container width as 1–2 lines.
- **3-up product card grid**: 3 columns desktop (Scale GenAI / Data Engine / Donovan), 2 tablet, 1 mobile.
- **4-up feature grid**: 4 columns desktop on benefit / capability pages.
- **Stat row**: 3–4 big-number stat cards across, gradient-filled numerals.
- **Customer / government logo wall**: 6-up desktop, 3-up tablet, 2-up mobile; monochrome SVGs at unified height (~32px).
- **Blog / docs**: Single-column prose ~720px wide, full-width code blocks and figures breaking out of the prose column.

### Whitespace Philosophy
The 116px headline only works with generous negative space around it — Scale runs hero padding at 120–160px, larger than peer SaaS brands, so the mega-type lands as a statement rather than crowding the viewport. White space is what lets the oversized type feel confident instead of overwhelming. Tight padding around 116px type would feel claustrophobic; loose padding makes it feel inevitable.

### Section Cadence
Homepage rhythm: near-black mega-hero band → enterprise + government logo wall (white) → 3-up product card grid (light / panel-gray surface) → purple-gradient feature band (data-viz wash) → 3-up benefit feature grid (white) → big-number stat row → customer story strip (white) → near-black pre-footer CTA → near-black footer. The three registers — white, near-black, gradient — alternate so no two heavy bands sit consecutively. The single gradient band mid-page is the color event; everything around it is near-monochrome.

## 6. Shapes & Radius Scale

| Tier | Token | Value | Use |
|---|---|---|---|
| Micro | micro | 2px | Inline tags inside data tables, dense cells |
| Standard | sm | 4px | Compact rows, dense badges |
| Comfortable | md | 8px | **Buttons** (Book Demo, all variants), form inputs, code blocks |
| Large | lg | 12px | Feature cards, product cards, stat cards, customer story cards, nav panels |
| Featured | xl | 16px | Hero illustration containers, large media frames |
| XXL | xxl | 24px | Decorative containers (rare) |
| Pill | pill | 9999px | Badges, status pills, NEW/BETA/GA chips |

The **8px radius on every button** is the signature shape choice — square-but-softened, decisive, engineered. The black "Book Demo" CTA at 8px reads as infrastructure-grade rather than playful. Pill radius is **reserved for badges only**; a pill button would soften the serious register the brand is after. Cards sit at 12px to feel solid and stable. Code blocks share the 8px button radius — code and CTAs speak the same "decisive rectangle" language.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow | Body sections, top nav (until scrolled), near-black hero bands |
| 1 — Ambient | `0 1px 2px rgba(7,7,7,0.04)` | Sticky nav after scroll |
| 2 — Standard | `0 4px 12px rgba(7,7,7,0.08)` | Default elevated cards (feature, product, stat, customer story) |
| 3 — Elevated | `0 12px 32px rgba(7,7,7,0.12)` | Floating popovers, dropdowns, mega-menu panels |
| 4 — Deep | `0 24px 48px rgba(7,7,7,0.16)` | Modals, dialogs, full-screen forms |
| 5 — Translucent layer | `#07070799` card over dark / gradient | Dark-ground elevation — opacity, not shadow |

### Shadow Philosophy
Light surfaces use **near-black shadows at low alpha** (warm-neutral, echoing the `#070707` ground rather than pure black). On near-black and gradient grounds, cast shadows are invisible, so the system layers via **translucent cards** (`#07070799` at ~60% opacity) that let the dark or gradient ground bleed through — depth via opacity, not elevation. Logo-wall tiles sit flat (no shadow); they read as a credibility strip, not interactive surfaces. No glow, no neumorphism, no gradient overlays on cards — the gradient is reserved for full bands, never card decoration.

## 8. Interaction & Motion

### Easing Curves
- **Standard ease**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for color, border, opacity transitions on buttons, links, inputs.
- **Emphasized ease**: `cubic-bezier(0.16, 1, 0.3, 1)` — section-on-scroll reveals, gradient drift, card hover lift, mega-headline entrance.

### Duration Buckets
- **Fast (150ms)**: Color transitions on hover, focus ring expansion, link underline.
- **Standard (240ms)**: Card hover lift, button press feedback, dropdown / mega-menu reveal.
- **Slow (320ms)**: Hero mega-headline reveal, gradient band drift, modal entrance.

### Per-Component Micro-States
- **Button hover (primary)**: Background lightens `#000000` → `#1a1a1a` over 150ms; no transform. The lightening keeps the button feeling like the same black.
- **Button press**: Returns to pure black with a subtle inset over 80ms.
- **Button hover (secondary)**: Border shifts `#cccccc` → `#000000` over 150ms; text stays in place.
- **Card hover (feature / product)**: Card lifts `translateY(-2px)` over 240ms; shadow intensifies standard → elevated.
- **Stat card hover**: The big gradient-filled number subtly scales `scale(1.02)` to draw the eye.
- **Link hover (light)**: Black underline thickens / appears over 150ms (color stays black — the underline is the affordance).
- **Link hover (dark)**: Lavender `#9068c2` brightens over 150ms.
- **Input focus**: Border recolors `#e2e2e2` → 2px `#5933b2` over 150ms; 3px outer ring at `rgba(89,51,178,0.35)`.
- **Gradient band**: Subtle slow hue drift / position shift on the gradient over ~8s loop (decorative, paused under reduced-motion).
- **Mega-menu**: Opens via opacity fade + 8px translateY drop over 240ms emphasized ease.

### Page Transitions
Standard browser navigation. Section-on-scroll reveals are a 320ms fade-in-up (24px offset) gated by `IntersectionObserver`. The hero mega-headline reveals on load with a 320ms emphasized fade-up. Product card grids stagger left-to-right at 80ms increments. Gradient bands carry a slow ambient drift.

### Reduced Motion
`prefers-reduced-motion: reduce` honored: all transforms removed, transitions reduced to opacity-only at 100ms, gradient drift paused, card hover lifts removed (cards stay flat), stat-number scale removed, mega-menu opens instantly, scroll reveals become static.

## 9. Accessibility & A11y

### Contrast Pairs
- **Text on bg**: `#000000` on `#ffffff` = **21.0** — AAA at every size (maximal contrast).
- **Steel on bg**: `#575757` on `#ffffff` = **7.0** — AAA at body sizes.
- **Stone on bg**: `#767676` on `#ffffff` = **4.5** — AA at body sizes; do not use below 14px.
- **On-dark on bg-dark**: `#ffffff` on `#070707` = **20.0** — AAA.
- **On-brand on brand**: `#ffffff` on `#5933b2` = **6.6** — AAA at normal text; the deep violet clears AAA with white.
- **On-CTA**: `#ffffff` on `#000000` = **21.0** — AAA (the Book Demo button is the highest-contrast control on the page).
- **Lavender on dark**: `#9068c2` on `#070707` = **5.0** — AA; used for links / accents on near-black.

### Focus Indicators
Every focusable element shows a **3px ring at `rgba(89,51,178,0.35)`** (brand purple) with 2px offset. The purple ring is the one consistent place the brand color touches interactive controls, making focus instantly recognizable on both white and near-black grounds. On the black "Book Demo" CTA the focus state renders a 2px white inset outline plus the 3px purple outer ring (a purple ring alone could blend into a dark band).

### ARIA Patterns
- **Buttons**: Native `