# scale.com — Design System ## 1. Visual Theme & Atmosphere Scale.com is enterprise AI infrastructure, and its design language communicates exactly that: controlled power. The aesthetic is dark, geometric, and slightly futuristic — a site that would feel at home in a Bloomberg terminal crossed with a high-end data center. Deep navy and near-black surfaces create a sense of weight and seriousness befitting a company that processes AI training data at industrial scale. What distinguishes Scale from generic dark enterprise design is its typographic ambition. The pairing of **Aeonik** (custom geometric display) with **Inter** (functional body) and **Geist Mono** (code/data) creates three clearly differentiated registers. Headings use Aeonik at weights as light as 300 — a counterintuitive choice that reads as confident restraint rather than weakness. When you are Scale, you don't need to shout. --- ## 2. Color Palette & Roles **Surfaces** - `#000000` / `rgb(2, 2, 2)` — Primary dark canvas and body background - `rgb(2, 26, 51)` — Deep navy; dark section panels (near-black with blue cast) - `rgb(31, 78, 152)` — Mid-blue; secondary section backgrounds and accents - `rgb(9, 9, 11)` — Near-black surface variant **Text** - `#FFFFFF` — Primary text on dark surfaces - `rgb(163, 163, 163)` — Muted body copy, secondary content - `rgb(115, 115, 115)` — Tertiary metadata and captions **Brand Accents** - `rgb(254, 131, 0)` — Scale orange; primary CTA color, logo accent — a high-energy signal on dark surfaces - `rgb(0, 112, 243)` — Interactive blue; links and interactive states - `rgb(17, 24, 39)` — Near-black with slight warm cast; card surfaces **Borders / Dividers** - `rgb(38, 38, 38)` — Subtle dark border (near-invisible on black, visible on slightly lighter surfaces) - `rgba(255, 255, 255, 0.1)` — Translucent white borders for glass-effect dividers --- ## 3. Typography Rules Scale uses a deliberate three-tier typeface system, each with a distinct job: **Aeonik** (display) — A custom geometric sans used for all major headings. At 72px/weight 300 for h1, it achieves a rare quality: monumental scale without aggression. Large headlines carry `-1%` letter-spacing (negative, tightening at display sizes). Used up to 89px for the largest display variants. **Inter** (functional) — The workhorse for body copy, navigation, small headings, and UI labels. At 16px/400 for body, 18px/500 for h4 — Inter handles everything that needs to be reliably read quickly. **Geist Mono** (data/code) — Referenced in CSS custom properties as a monospace option. Used for code samples, metrics, and any quantitative display where tabular alignment matters. - **h1**: Aeonik / 72px / weight 300 / `letter-spacing: -1%` - **h3**: Aeonik / 89px / weight 300 / `letter-spacing: -0.89px` (hero variant) - **h2**: Inter / 16px / weight 400 (section labels, not visual headings) - **h4**: Inter / 18px / weight 500 - **body**: Inter / 16px / weight 400 / `line-height: 24px` The use of light (300) weight for massive display text is a signature choice — it signals mathematical precision over blunt force. --- ## 4. Component Stylings **Primary CTA buttons**: The Scale orange (`rgb(254, 131, 0)`) appears as the dominant CTA color — maximum energy against dark backgrounds. Pill-shaped (`border-radius: 9999px`). **Navigation**: Fixed header at 67px height (`--zeitgeist-header-height`). Dark surface, transparent or dark background, keeping the view consistent. **Cards**: Dark surfaces (`rgb(17, 24, 39)`) with barely-visible borders (`rgb(38, 38, 38)`). Subtle translucent white borders create glass-like panel divisions. No heavy drop shadows — depth through color stratification. **Data displays**: Geist Mono for metrics and code. Monospace elements are likely tabular and precisely spaced. **Border radii**: Minimal — primarily `9999px` for pill elements. The majority of layout elements appear to use sharp or barely-rounded corners, reinforcing the precise/technical aesthetic. --- ## 5. Layout Principles Scale.com operates at enterprise content density — a long-scrolling page with full-bleed section backgrounds that each tell a chapter of the story. Sections shift from deep navy to near-black to mid-blue, creating visual chapters without navigation. The layout is wide-canvas: content likely spans to large viewport widths given the enterprise audience (primarily desktop). The `--zeitgeist-header-height: 67px` is a small, efficient navigation bar — the product sells itself, not the navigation. Breakpoints detected at 600, 700, 768, 900, 1000, 1280, 1300px — a thorough ladder suggesting the site adapts carefully across device classes, though the primary experience is clearly optimized for large displays. --- ## 6. Depth & Elevation Scale achieves depth through chromatic layering on a dark foundation. Pure black gives way to near-black (`rgb(9,9,11)`), then deep navy (`rgb(2,26,51)`), then mid-blue (`rgb(31,78,152)`) — a Z-axis of increasing luminance that reads as background receding to foreground. Translucent white borders (`rgba(255,255,255,0.1)`) suggest frosted glass card dividers. Box shadows, if present, would be dark-on-dark — subtle glows or inset shadows rather than the drop-shadow patterns common on light-mode sites. --- ## 7. Do's and Don'ts **Do** - Layer dark surfaces: pure black → near-black → deep navy → mid-blue - Use Aeonik at light weights for display — weight 300 is a feature, not a mistake - Reserve orange exclusively for primary CTAs and the logo mark - Use Inter for all functional UI text; never use Aeonik at small sizes - Apply tight negative letter-spacing only at display sizes (72px+) **Don't** - Use heavy font weights (600+) for display text — the design relies on light/thin elegance - Add warm or colorful backgrounds — every surface should read as dark and focused - Mix Geist Mono into prose contexts — keep it for data, code, and metrics only - Use rounded corners beyond pill-shaped CTAs — most surfaces are sharp --- ## 8. Responsive Behavior The seven-breakpoint scale (600 → 1300px) shows intentional adaptation at each tier. The site likely collapses its multi-column feature grid to a stacked layout at 768px and below. The header height is defined via CSS custom property, suggesting it may adjust or collapse to a hamburger menu at mobile. At 1280–1300px+, full multi-column layouts with large Aeonik display text are the intended experience. The design degrades gracefully but is fundamentally a large-screen product. --- ## 9. Agent Prompt Guide > "Design in the style of scale.com: dark enterprise aesthetic — pure black canvas, deep navy `rgb(2,26,51)` and mid-blue `rgb(31,78,152)` section layers. Scale orange `rgb(254,131,0)` for primary CTAs only. Aeonik at weight 300 for massive display text (72–89px), Inter for all body. Geist Mono for data. Translucent white borders for glass-panel effects. No warm tones, no illustrations — precision, scale, and restrained power." --- *Generated by Sparkbites — extracted from live CSS analysis*