---
title: "Scale AI design system"
variant: extended
source: https://scale.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/scale-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Scale AI · Design System

> Quietly confident AI, built for consequential decisions.

**Theme:** light · **Industry:** ai · **Source:** https://scale.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained, editorial homepage introduces Scale AI through cinematic footage, generous white space, and crisp typography. Dark proof-point sections, soft-gray content bands, and a warm-toned closing CTA create contrast without disrupting the minimal system.

## North star

Let expansive white space and confident typography frame cinematic evidence, using colour only to mark meaningful section changes.

## Overview

The visual strategy is built around a clean white canvas, black typography, and broad, media-led sections rather than decorative UI. The opening places a large centered headline over full-bleed street footage, with a dark overlay that keeps white text readable. Aeonik’s rounded, contemporary sans-serif carries navigation, headings, and body copy; a mono webfont is reserved for uppercase labels and compact utility text. The page alternates expansive white areas with a black proof-point section and a pale-gray content band, then uses muted warm brown for the closing CTA. Cards are spacious and softly rounded, with restrained borders and little visible shadow. Imagery moves between documentary-style video, product and customer cards, and sparse line illustration. The overall rhythm feels measured and enterprise-focused: large areas of calm, clear content groupings, and strong contrast at key moments.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Decision Black | `#000000` | `--color-decision-black` | brand | Primary text, navigation, black proof-point band, footer, and the solid primary CTA. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas, navigation background, white cards, and reverse text on dark sections. |
| Quiet Gray | `#949494` | `--color-quiet-gray` | neutral | Muted text and subdued navigation details; use sparingly for secondary information. |
| Mist Gray | `#eaeaea` | `--color-mist-gray` | surface | Broad light-gray section band, secondary CTA surface, and pale navigation controls. |
| Soft Silver | `#dbdbdb` | `--color-soft-silver` | neutral | Subtle gray sampled in gradients and image treatment, not a defining interface surface. |
| Slate Gray | `#6b6b6b` | `--color-slate-gray` | neutral | Low-contrast gray sampled in gradients and media; avoid treating it as a prominent brand colour. |
| Rule Gray | `#c7c7c7` | `--color-rule-gray` | semantic | Fine navigation borders and quiet separators. |
| Legacy Taupe | `#a8927c` | `--color-legacy-taupe` | accent | Warm closing CTA section, paired with dark copy and a restrained line illustration. |
| Card Haze | `#f2f2f2` | `--color-card-haze` | surface | Very light card surface within the otherwise white content system. |
| Near Ink | `#101010` | `--color-near-ink` | neutral | Occasional near-black text detail, visually close to the primary black. |
| Soft Ink | `#212121` | `--color-soft-ink` | neutral | Secondary dark text and button detail where pure black would feel too stark. |
| Lab Green | `#193a29` | `--color-lab-green` | accent | A distinctive deep-green customer or proof card; treat as a contained card accent, not a page-wide colour. |
| Graphite Gray | `#575757` | `--color-graphite-gray` | neutral | Occasional subdued footer or button detail. |
| Deep Charcoal | `#171717` | `--color-deep-charcoal` | neutral | Dark card or media-region surface, not the primary canvas. |
| Card Silver | `#e5e5e5` | `--color-card-silver` | surface | Subtle light card fill, used as supporting neutral rather than a major section colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#000000` (Decision Black) · `--color-surface-2` → `#eaeaea` (Mist Gray) · `--color-surface-3` → `#a8927c` (Legacy Taupe) · `--color-surface-4` → `#f2f2f2` (Card Haze) · `--color-text` → `#000000` (Decision Black) · `--color-text-muted` → `#ffffff` (Canvas White) · `--color-text-subtle` → `#949494` (Quiet Gray) · `--color-border` → `#c7c7c7` (Rule Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#eaeaea` | 17.46:1 | AAA |
| `#000000` | `#a8927c` | 7.07:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eaeaea` | 1.2:1 | fail |
| `#ffffff` | `#a8927c` | 2.97:1 | fail |
| `#949494` | `#ffffff` | 3.03:1 | AA-large |
| `#949494` | `#000000` | 6.92:1 | AA |
| `#949494` | `#eaeaea` | 2.52:1 | fail |
| `#949494` | `#a8927c` | 1.02:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 40%), linear-gradient(rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.58) 100%)`
- `linear-gradient(lab(0 0 0 / 0.55) 0%, lab(0 0 0 / 0.14) 50%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| aeonik | `--font-body` | webfont | 400, 500, 600 | Primary family for display, headings, body copy, navigation, captions, and interface links. | Inter |
| mono | `--font-mono` | webfont | 400 | Eyebrows, button labels, and compact technical or utility text. | Roboto Mono |

- **aeonik:** Mostly regular weight with measured medium and semibold accents; compact negative tracking, natural case, and large calm headlines.
- **mono:** Regular weight; uppercase treatment and slightly expanded tracking for small labels.

### Type scale — Perfect Fifth (ratio ≈ 1.486, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 116px | 400 | 1 | -0.01em | — | aeonik | Oversized display statements where a section needs an emphatic editorial headline. |
| h1 | 64px | 400 | 1.05 | -0.01em | — | aeonik | Primary page headline, including the centered hero statement. |
| h2 | 40px | 400 | 1.25 | -0.01em | — | aeonik | Major section headings and prominent content introductions. |
| h3 | 36px | 400 | 1.1 | -0.01em | — | aeonik | Feature, application, and editorial card headings. |
| h4 | 32px | 400 | 1.19 | -0.01em | — | aeonik | Smaller subsection and customer-story headings. |
| body | 16px | 400 | 1.3 | -0.01em | — | aeonik | Explanatory copy, customer summaries, and supporting interface text. |
| caption | 14px | 600 | 1.5 | 0 | capitalize | aeonik | Compact card metadata and short supporting labels. |
| button | 13px | 400 | 1.2 | -0.01em | uppercase | mono | Uppercase mono labels for compact calls to action. |
| nav | 14px | 400 | 1 | 0 | — | aeonik | Top-level navigation links and menu items. |
| eyebrow | 11px | 400 | 1 | 0.05em | uppercase | mono | Small uppercase section labels and category markers. |
| code | 13px | 400 | 1.2 | -0.01em | uppercase | mono | Compact uppercase technical or utility-style text. |

OpenType features in use: `"ss02"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 8, 12, 16, 20, 24, 32, 48 px.
- Section rhythm 64px · element gap 16px · card padding 32px · max content width 1159px.

Use a centered content framework with a measured maximum width of 1159px and a comfortable density. The opening has a slim horizontal navigation above an inset, media-led hero; its headline is centered over the footage. Later sections alternate single-column full-width bands with card-led and three-column editorial groupings. Preserve the substantial vertical breathing room between major blocks and the recurring 16px element gap. Keep card interiors generous, align editorial content to the left where shown, and use broad section bands rather than dense borders to establish rhythm.

## Shape & elevation

- Radius: button `6px` · card `16px` · nav `8px` · link `16px` · xs `4px` · sm `5px` · md `6px` · lg `8px` · xl `12px` · 2xl `16px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat: white and gray section bands do most of the grouping, while cards rely on generous padding and rounded corners. Use fine gray borders for quiet navigation separation and avoid prominent shadows. Layer hero text over footage with a dark gradient overlay; reserve stronger contrast for black bands and contained cards.

## Imagery

Lead with documentary-style video or photography, framed wide and darkened enough for white overlay text. Use customer and research stories as image-led cards, with varied crops and occasional partner marks. Supporting visuals can include restrained interface imagery, small floating research thumbnails, or a fine line illustration. Keep image colour natural; green or other saturated tones should remain inside individual media or cards.

## Components

### Top navigation

White horizontal bar with the Scale mark, Aeonik navigation links, a quiet outlined login control, and a black Get Started CTA.

### Video hero

Inset full-width photographic or video frame with a dark overlay and a large centered white headline.

### Proof-point band

Black section with a concise high-impact statistic or trust statement, using white text and sparse composition.

### Story card

White or pale card with a 16px corner radius, spacious 32px padding, customer or research imagery, and concise copy.

### Secondary CTA

Light-gray Learn More button with black text; keep it quieter than the black primary action.

### Legacy CTA panel

Warm taupe closing section with dark copy, a short supporting sentence, and restrained line-art illustration.

### Footer

Black footer with grouped small navigation links and a large white brand statement.

### Measured component styles

- **Primary button** (“Get Started”): background #000000 · text #ffffff · radius 8px · padding 0px · 400 16px aeonik
- **Secondary button** (“Learn More”): background #eaeaea · text #000000 · radius 6px · padding 0px · 400 16px aeonik
- **Link** (“10 years powering the world's biggest AI”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px aeonik
- **Card** (“Turning raw, classified data into action”): background #ffffff · text #000000 · radius 16px · padding 32px · 400 16px aeonik
- **Navigation item** (“Products Solutions Research Resources Lo”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px aeonik

## Do

- Use white space as a deliberate part of the layout.
- Keep headlines large, direct, and visually calm.
- Use dark overlays to protect text legibility on imagery.
- Reserve black section bands for high-importance proof points.
- Keep customer and research cards spacious and softly rounded.
- Use taupe and deep green only as contained section or card accents.

## Don't

- Do not add bright accent colours absent from the measured palette.
- Do not make every section a card or boxed container.
- Do not add heavy shadows to otherwise flat surfaces.
- Do not crowd the hero with extra copy or decorative controls.
- Do not use the deep green as a page-wide background.
- Do not make small utility labels compete with the main headline.

## Agent prompt

Build a new Scale AI-style page with a clean white canvas (#ffffff), Decision Black (#000000) typography, and measured, restrained contrast. Use Aeonik or Inter for most text and a mono face such as Roboto Mono for small uppercase labels. Start with a compact horizontal navigation and a media-led hero: wide documentary imagery, a dark gradient overlay, and a large centered white headline. Create generous vertical breathing room, a centered content width, and clear shifts between white, Mist Gray (#eaeaea), and black sections. Use spacious rounded story cards, light borders, and almost no shadow. Keep Lab Green (#193a29) inside a proof card and Legacy Taupe (#a8927c) for a closing CTA panel only. Favor confident concise copy, customer evidence, and restrained editorial imagery over decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White navigation above an inset, full-width media hero; center the headline over the footage. | Top-level navigation, Primary CTA, Overlay headline | White canvas, Darkened video, Centered white headline, Compact nav controls |
| 2 | stats | A single-column black band for one prominent trust statement. | Proof point, Brand credibility | Black background, High-contrast text, Sparse composition |
| 3 | feature-grid | Broad pale-gray band with centered feature content and horizontally grouped cards. | Explore applications, Browse customer examples | Light-gray surface, Card carousel, Image-led content |
| 4 | feature-split | White section with a left-aligned content lead and open supporting space. | Capability overview, Section transition | White canvas, Minimal copy, Open layout |
| 5 | content-feed | Editorial introduction followed by a three-column mix of research and customer-story cards. | Read research, Open customer stories | Three-column cards, Image thumbnails, Left-aligned headings |
| 6 | cta | A single warm-toned panel with copy on one side and a simple illustration alongside. | Book a demo, Conversion close | Muted taupe background, Dark text, Line illustration, Rounded panel |
| 7 | footer | Black footer band with a compact brand mark and grouped link columns. | Browse site links, Explore company resources | Black surface, Small white links, Multi-column groups |
| 8 | footer | Black closing footer with an oversized statement and small legal or social details. | Brand sign-off, Social and legal links | Large white typography, Black background, Minimal utility row |

## Source CSS custom properties (selected)

```css
--plsmc-viewport-gap: 16px;
--tw-prose-quote-borders: #0000002e;
--tw-prose-pre-bg: #0000000a;
--tw-prose-th-borders: #0000002e;
--tw-prose-td-borders: #0000001a;
--nav-background: white;
--nav-text: black;
--nav-card-background: #f5f5f5;
--nav-shadow: #00000029;
--nav-dropdown-background: #ffffffeb;
--nav-panel-background: #f5f5f5;
--nav-ctas-background: #f5f5f5;
--nav-mobile-close-background: #eaeaea;
--nav-login-cta-border: #c7c7c7;
--nav-login-cta-bg: transparent;
--nav-login-cta-text: #929292;
--nav-demo-desktop-cta-bg: black;
--nav-demo-desktop-cta-text: white;
--nav-mobile-demo-cta-border: transparent;
--nav-mobile-demo-cta-bg: #eaeaea;
--nav-mobile-demo-cta-text: black;
--nav-mobile-cta-wrapper-bg: white;
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted-foreground: 240 5% 64.9%;
--card-foreground: 0 0% 98%;
--popover-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--destructive-foreground: 0 85.7% 97.3%;
--warning-foreground: 0 0% 9%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/scale-com