Scale AI

Overview

Scale AI is an infrastructure platform delivering data, evaluations, and outcomes for critical AI decisions across governments, Fortune 500 companies, and AI labs. The design system embodies **Precision Minimalism with Accent Confidence**—a visual language that prioritizes clarity and trustworthiness through a clean white canvas, bold primary blue (#006adc) for actionable elements, and carefully placed accent colors (vibrant green #72ce7b, purple #9068c2) that signal capability and innovation. The aesthetic rejects unnecessary ornamentation; every visual element serves a functional purpose, reflecting the brand's role as a reliable, no-nonsense infrastructure layer. The UI evokes confidence through restraint: generous whitespace, high-contrast typography in Aeonik (a geometric sans-serif with technical precision), and deliberate use of color to guide user attention to critical interactions.

The brand voice is authoritative yet approachable—speaking to technical audiences (ML engineers, government officials, enterprise decision-makers) with precision and respect. Vocabulary favors concrete terms: "proven," "reliable," "outcomes," "critical decisions" rather than aspirational language. Tone is calm, never breathless or hyperbolic. Example sentence: "Scale's data infrastructure powers AI systems that matter—from autonomous vehicles to medical diagnostics." The personality balances technical rigor with human-centered design; the interface acknowledges complexity without overwhelming the user.

Colors

The color system is built on a foundation of pure white (#ffffff) and near-black (#010101), creating maximum contrast and legibility for data-heavy interfaces. **Primary (#006adc)** is a confident, saturated blue used exclusively for CTAs, active states, links, and focus indicators—it commands attention without aggression. **Secondary (#72ce7b)** is a vibrant green reserved for success states, positive indicators, and secondary CTAs; it provides visual relief and signals progress. **Tertiary (#9068c2)** is a purple accent used for highlights, badges, and tertiary actions, adding sophistication and visual hierarchy. **Error (#d32f2f)** is a clear red for destructive actions and validation failures.

The surface stack manages depth through subtle gray shifts: surface-container-low (#f2f2f2)

Typography

The type system uses Aeonik (a geometric, technical sans-serif) across all scales, creating a cohesive, modern voice. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements with commanding presence; headline-lg (40px, 600 weight) structures primary content sections; headline-md (28px, 600 weight) organizes subsections; title-lg (20px, 600 weight) labels cards and feature blocks. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry narrative content with generous 28px and 24px line-heights, ensuring readability at all sizes. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) handle UI labels, buttons, and metadata. All headline weights use negative letter-spacing (-0.04em to -0.01em) to tighten g

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing flexibility for responsive design from mobile (single column) to desktop (multi-column layouts). The gutter is consistently 24px, creating rhythm and breathing room between sections. Container padding is 24px on mobile, scaling to 40px on tablet and desktop. White-space is treated as a first-class design element: section separators use lg spacing (40px) for major content breaks, md spacing (24px) for subsections, and sm spacing (12px) for component-level grouping. Cards and content blocks use md padding (24px) internally, with 16px border-radius for a modern, approachable feel. The page rhythm alternates between full-width hero sections (featuring bold imagery and large typography) and constrained content section

Elevation & Depth

Depth is conveyed through subtle shadow and border treatments rather than dramatic layering. **Level 1 (Base)**: Flat white surface (#ffffff) with no shadow; used for primary content areas and the page background. **Level 2 (Standard Card)**: 1px solid border in outline-variant (#c7c7c7), background white, box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); used for cards, input fields, and contained components. **Level 3 (Elevated/Hover)**: 1px solid border in outline (#929292), background surface-container-low (#f2f2f2), box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); applied on card hover and modal over

Shapes

The shape philosophy is **Technical Approachability**—rounded corners are present but restrained, signaling modernity without sacrificing precision. Buttons and inputs use 8px (lg) border-radius, creating a friendly, clickable appearance while maintaining geometric clarity. Cards and containers use 16px (xl) border-radius for a softer, more inviting feel; this is the most common radius on the page. Badges and pills use 9999px (full) for maximum roundness, creating visual distinction for status indicators. Dividers and subtle UI elements use 4px (sm) or no rounding, maintaining technical precis

Components

Action Elements **Button Primary** (#006adc background, white text, 48px height, 12px 24px padding, 8px border-radius) is the dominant CTA for sign-ups, form submissions, and primary actions. On hover, darken to #004ba8 with a 200ms ease-out transition. **Button Secondary** uses a transparent background with a 1px outline-variant border and primary text color; on hover, fill the background with surface-container-high (#e8e8e8) and darken the border to primary. Both buttons use label-md typography (14px, 600 weight) for clear, scannable text. Buttons must never be smaller than 48px height to ensure mobile touch targets.

Containers & Surfaces **Card** (16px border-radius, 24px padding, 1px outline-variant border, 0 1px 2px shadow) is the standard container for grouped content. On ho

Do's and Don'ts

**Do**

• Do use primary blue (#006adc) exclusively for CTAs, links, and active states—it is the visual anchor for user intent.
• Do maintain 24px gutter spacing between sections and 12px padding within components to create consistent rhythm and breathing room.
• Do apply 8px border-radius to buttons and inputs, 16px to cards, and 9999px to badges to create a clear visual hierarchy of interaction.
• Do use Aeonik typography at all scales with negative letter-spacing on headlines (-0.04em to -0.01em) to tighten geometric letterforms.
• Do provide clear focus states (3px primary border + 3px shadow) on all interactive elements for keyboard accessibility.
• Do use the secondary green (#72ce7b) for success states and positive indicators; reserve tertiary purple (#9068c2) for highlights and tertiary actions.

**Don't**

• Don't use colors outside the defined palette—primary, secondary, tertiary, error, and their container variants are the only approved accent colors.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12)—excessive depth undermines the clean, minimalist aesthetic.
• Don't mix typefaces; Aeonik is the only approved font family across all scales and weights.
• Don't use border-radius values outside the defined scale (sm: 0.25rem, DEFAULT: 0.5rem, md: 0.75rem, lg: 1rem, xl: 1.5rem, full: 9999px).
• Don't reduce button height below 48px or padding below 12px 24px—mobile touch targets must remain accessible.
• Don't apply color overlays or gradients to the white background; the surface must remain clean and uncluttered to maintain legibility.