name: scale-design
version: alpha
description: >
  Scale is high-contrast Swiss-modernist: a white page punctuated by huge black
  rounded "hero blocks" that hold monumental white type. The type is Aeonik, a clean
  grotesque, set enormous (116px) at regular weight with tight tracking — scale, not
  weight, creates the impact. Color is mostly monochrome (black/white) with two reserved
  accents: a fresh leaf green (#72ce7b) for emphasis words and a muted forest/beige pair
  for editorial panels. Shapes are large rounded rectangles (16–24px) and full pills.
  Signature moves: black rounded hero slabs, two-tone headlines (black + colored second
  clause), AI/brain imagery with bracket markers, and a calm enterprise tone.
colors:
  # Brand
  primary: '#050505'          # near-black — hero blocks, ink
  on-primary: '#ffffff'
  # Accents (reserved)
  green: '#72ce7b'            # leaf green — emphasis words, highlights
  forest: '#1f3d2e'           # deep green editorial panel
  beige: '#b3a18d'            # warm tan — secondary headline clause ("Research")
  # Surface
  surface: '#ffffff'          # page canvas
  surface-secondary: '#ebebeb'# light grey panel (eyebrow blocks)
  surface-card: '#f3f4f6'     # card fill
  # Text
  on-surface: '#000000'       # primary text
  on-surface-secondary: '#6b7280' # muted copy
  # Hairlines
  hairline: '#e5e7eb'
  # Utility (semantic / data, used sparingly)
  blue: '#2563eb'
  blue-soft: '#dbeafe'
  red: '#dc2626'
typography:
  display:
    fontFamily: 'aeonik, "aeonik Fallback", -apple-system, Arial, sans-serif'
    fontSize: 116px           # hero "The world's most…"
    fontWeight: 400
    lineHeight: 116px
    letterSpacing: -1.16px
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 64px            # "Artificial Intelligence", "Systems that never spoke"
    fontWeight: 400
    lineHeight: 67.2px
    letterSpacing: -0.64px
  headline-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 32px            # supporting statement (often green)
    fontWeight: 400
    lineHeight: 38px
    letterSpacing: -0.32px
  title:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 24px
    fontWeight: 500
    lineHeight: 36px
    letterSpacing: -0.24px
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.144px
rounded:
  sm: 8px      # small chips / inputs
  md: 16px     # cards
  lg: 24px     # hero blocks (approx)
  full: 9999px # buttons / pills
spacing:        # base unit 8px; large rem steps for sections
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 96px
  3xl: 128px
components:
  button-primary:              # "Book Demo"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '12px 20px'
  button-outline:              # "Log In"
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.sm}'
  button-light:                # "Get Started" (white on grey panel)
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.sm}'
  hero-block:                  # the big black rounded slab
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.lg}'
    padding: '64px'
  card:
    backgroundColor: '{colors.surface-card}'
    rounded: '{rounded.md}'
    textColor: '{colors.on-surface}'
  industry-carousel-control: 'bordered square button with chevron'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 300ms
icons:
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface}'

Scale

scale-design · alpha

Overview

Scale's design is high-contrast Swiss modernism. The page is white, punctuated by huge black rounded "hero blocks" that hold monumental white type ("The world's most important decisions need reliable AI systems."). The type is Aeonik, a clean neutral grotesque, set enormous (116px) at regular (400) weight with tight negative tracking — the scale of the type does the work, not its weight. Color is largely monochrome black/white, with two reserved accents: a fresh leaf green (#72ce7b) used for emphasis words and supporting statements, and a forest-green + warm-beige pairing for editorial panels (e.g. the two-tone "Artificial Intelligence / Real Research" headline, where the second clause is beige). Shapes are large rounded rectangles (16–24px) and pills. The imagery leans into AI/brain scans with small bracket "annotation" markers — a nod to data labeling. The overall tone is calm, technical, and enterprise-credible.

Colors

Brand — primary #050505 (near-black) is both the ink and the fill of the big hero blocks; text on them is white. The reserved accents are green #72ce7b (emphasis words, "Get Started" contexts, highlight statements) and the editorial pair forest #1f3d2e / beige #b3a18d (the warm second clause of two-tone headlines and dark panels).

Surface — white canvas; surface-secondary #ebebeb for light grey eyebrow blocks; surface-card #f3f4f6 for cards.

Text — on-surface #000000 primary; on-surface-secondary #6b7280 for muted copy.

Utility — token blue #2563eb / soft #dbeafe and red #dc2626 exist for data/semantic use, not as page colors.

Typography

Family: Aeonik (aeonik, fallback Arial/system grotesque). Closest open-source substitutes: Inter, Neue Montreal-like grotesques, or Hanken Grotesk. The strategy is monumental regular weight — 116px and 64px headlines at weight 400 with tight tracking; only small UI titles bump to 500.

Token	Size	Weight	Line-height	Tracking	Usage
display	116px	400	116px	−1.16px	Hero block headline
headline-lg	64px	400	67.2px	−0.64px	Section heads ("Systems that never spoke")
headline-md	32px	400	38px	−0.32px	Supporting statement (often green)
title	24px	500	36px	−0.24px	Card / sub titles
body-lg	18px	400	28px	0	Lead copy
body-md	16px	400	24px	0	Body
label	14px	400	1.0	+0.14px	Buttons, small UI

Layout

Base unit 8px with large rem section steps (rem tokens up to 24rem). The page is a stack of full-width white sections, each anchored by a black rounded hero block that bleeds wide. A "Proven across every industry" carousel uses bordered square chevron controls; logo/industry cards sit on light grey. Whitespace is generous; headlines are left-aligned and oversized.

Elevation & Depth

Largely flat. Depth is communicated by the contrast of black rounded slabs against white, not by shadows. Cards use soft grey fills and large radii rather than elevation. No glows or heavy shadows.

Shapes

Rounded vocabulary: 8px (buttons, small chips), 16px (cards), and ~24px (the big hero blocks), plus full pills for some controls. The large radii on the black slabs are the signature shape gesture — soft but monumental.

Components

• button-primary — near-black "Book Demo" button, ~8px radius.
• button-outline — "Log In" with a 1px hairline outline.
• button-light — white "Get Started" on a grey/black panel.
• hero-block — the oversized black rounded slab holding white display type.
• card — grey-fill 16px-radius card (industry/logo tiles).
• carousel control — bordered square button with a chevron.

Motion

Standard ~300ms ease. Carousels slide; brain/scan imagery may animate subtly with bracket markers. Motion is restrained and serious — no bounce or playful flourish; the gravity comes from the type and contrast.

Iconography

Minimal outline icons at 16/20/24px in on-surface. The Scale wordmark + arrow is the brand mark. Decorative imagery uses AI/medical scan visuals with small square "annotation" brackets referencing data labeling.

Do's and Don'ts

• Do anchor sections with big black rounded hero blocks holding white display type.
• Do set headlines huge in Aeonik at regular (400) weight with tight tracking — never bold.
• Do use the two-tone headline pattern (black clause + green/beige second clause).
• Do reserve green #72ce7b and the forest/beige pair for emphasis and editorial panels only.
• Don't bold the big type or add shadows — keep it flat and contrast-driven.
• Don't introduce extra saturated UI colors; stay monochrome with the reserved accents.
• Don't crowd the hero blocks — they need generous internal padding and whitespace.

Known Gaps

• Scale's tokens are emitted with opaque hashed names (captured/mapped above). Accent hexes (green #72ce7b, beige #b3a18d, forest #1f3d2e) are from computed element styles. Hero block radius is inferred (~24px). "Aeonik" is licensed — substitute a neutral grotesque.