StackAdapt Design System Deep Dive

1. Brand Overview

StackAdapt’s visual language tells you exactly what kind of company they are before you read a single line of copy: serious, sophisticated, and engineered for precision in digital advertising. The design feels like it belongs to a performance marketing platform — high-contrast, data-friendly, and geared towards clarity over ornamentation.

The vibe is clean, corporate, but not cold. The palette leans heavily into deep blues and grays, with occasional flashes of saturated color for functional states (greens for success, reds for errors, oranges and yellows for highlights). This isn’t a playful brand — the colors are deliberate, the typography is modern sans-serif, and spacing is disciplined.

Their choice of Source Sans 3 as the primary typeface says a lot: it’s humanist enough to feel approachable, but structured enough to work in dashboards and dense interfaces. Combined with a restrained grid (8px base unit), the result is a system that’s easy to scale across product and marketing.

Rounded corners are used liberally — pills at 9999px for buttons, 5px for inputs — but not in a way that feels whimsical. It’s more about softening the hard edges of a data-heavy interface.

If you’re building for StackAdapt, you’re designing in a world where every pixel has a purpose. There’s no "let’s try this gradient" thinking here. It’s functional minimalism, with a clear hierarchy and strong accessibility cues. I like that — it makes the system predictable for developers and consistent for users.

2. Color System

2.1 Primary Colors

The standout primary is Sta Blue 400 — #0061FF. It’s the color of their main call-to-action buttons. Blue here is the tech industry’s safe bet: trust, reliability, stability. Compared to competitors in ad tech, it’s a more saturated blue than The Trade Desk’s muted approach, and less corporate than LinkedIn’s. It pops hard against dark backgrounds.

2.2 Complete Palette

Here’s every color token extracted from the site:

2.3 Color Relationships

This palette is massive — it’s basically a full functional spectrum for every status: success, error, warning, info, plus neutrals and brand accents. Contrast is high on interactive elements; for example, #0061FF on white passes WCAG AA easily. Dark mode is supported: multiple deep blues, blacks, and grays are there for inverted schemes.

2.4 Usage Guide

• Do: Use the deep tones (500 and above) for text on light backgrounds.
• Do: Keep interactive states in the middle range (300–400) — they pop without being neon.
• Avoid: Using the lightest (100–150) for text — they’re background colors.
• Avoid: Mixing multiple brand-status colors in one component. One status per element.

3. Typography

3.1 Font Families

Primary: Source Sans 3. No fallbacks listed, but standard sans-serif fallback implied. Helvetica appears in one context (heading-1, 16px, weight 400).
No Google Fonts or Adobe Fonts in use (likely self-hosted).

3.2 Type Scale

3.3 Hierarchy

The type scale is wide — from 64px hero headings down to 12px captions. Sizes drop in clean increments, weights shift between 400 (regular), 500 (medium), 600 (semibold), and 700 (bold) depending on emphasis. This is a system that can handle both marketing sites and dense product UIs without breaking.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints:
0px, 98px, 430px, 640px, 641px, 767px, 768px, 781px, 782px, 834px, 992px, 1024px, 1280px, 1319px, 1320px.
Clearly tuned for very specific device widths — likely a mix of marketing and app breakpoints.

5. Visual Elements

Border Radius

Values range from micro (2px) to full pills (9999px):

• 2px — Checkboxes
• 4px — Badges
• 5px — Inputs, images
• 8px — Cards
• 10px — Popup CTAs
• 12px — Div containers
• 30px — Buttons
• 32px — Buttons
• 64px — Pill buttons
• 80px — Large divs
• 9999px — Fully rounded pills, badges
• 50% — Circular images

Shadows

Minimal use:

• rgba(0,0,0,0.1) 0px 25px 50px 0px — Soft depth
• rgb(128,128,128) 0px 0px 5px 0px — Subtle outline
• Sometimes flat (0px 0px 0px 0px)

Borders

Mostly 1px solid, neutral grays. Used for structure over depth.

6. Components

6.1 Buttons

Primary — background: #0061FF, white text, border-radius: 64px, padding: 12px 24px.
Hover: translateY(-1px), opacity 0.5.
Focus: outline 2px solid input border color.

Secondary — Transparent background, white text, border: 1px solid #F9F9F9, border-radius: 64px.

Other variants:

• Cookie outline button — #f3f3f4 bg, #0c121a text, border-radius: 30px.
• Arrow button — white bg, gray border, border-radius: 9999px.

6.2 Links

Variants for dark/light text, underline on some states. No hover color changes — underline is the cue.

6.3 Forms

Inputs: dark background (#242A31), white text, border: 1px solid #66696e, border-radius: 5px. Focus: subtle shadow.

Checkboxes: squared (2px radius), gray border.

7. Design Tokens

:root {
  /* Colors */
  --sta-blue-400: #0061FF;
  --sta-gray-500: #242A31;
  /* ... all other colors from palette ... */

  /* Typography */
  --font-primary: "Source Sans 3", sans-serif;
  --font-secondary: Helvetica, sans-serif;
  --h1-size: 64px;
  --h1-weight: 700;
  /* ... all type sizes ... */

  /* Spacing */
  --space-8: 8px;
  --space-16: 16px;
  /* ... */

  /* Radius */
  --radius-pill: 9999px;
  --radius-sm: 5px;
  --radius-md: 8px;
  /* ... */

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.1) 0px 25px 50px 0px;
}

8. AI Coding Assistant Prompt

# StackAdapt Design System Specification

You are a StackAdapt design expert. Build UIs matching their visual language exactly.

## Brand Context
StackAdapt’s design is functional minimalism for ad tech. High-contrast, disciplined grids, modern sans-serif typography, and a full functional color spectrum for states.

## Color Palette
- Primary Blue 400: #0061FF — Main CTAs
- Primary Blue 450: #0045BE — Hovered CTAs
- Primary Blue 500: #00287D — Dark sections
- Gray 500: #242A31 — Body text
- Gray 350: #86898D — Secondary text
- Green 400: #00BA60 — Success
- Red 400: #F44F47 — Error
- Yellow 400: #FDCB1E — Warning
- Orange 400: #FF8E24 — Info
- [Include all palette entries above...]

## Typography
- Primary font: "Source Sans 3", sans-serif
- Secondary font: Helvetica, sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 64px | 700 | 1.5 | Hero headings |
| H2 | 48px | 700 | 1.17 | Section titles |
| Body | 16px | 400 | 1.5 | Body copy |
| Button | 18px | 600 | 1.5 | Clickable CTAs |
| Caption | 12px | 400 | 1.5 | Small annotations |

## Spacing & Grid
Base: 8px. Scale: 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px, 128px.  
Use for padding, margins, gaps.

## Border Radius
- none: 0px — Data tables
- xs: 2px — Checkboxes
- sm: 5px — Inputs
- md: 8px — Cards
- lg: 10px — CTAs
- pill: 64px — Buttons
- full: 9999px — Pills, avatars

## Shadows & Depth
- Soft: rgba(0,0,0,0.1) 0px 25px 50px 0px
Minimal shadows — borders preferred for depth.

## Components

### Primary Button
```css
.btn-primary {
  background: #0061FF;
  color: #fff;
  padding: 12px 24px;
  border-radius: 64px;
  font-weight: 600;
  font-size: 18px;
  border: none;
  transition: transform 150ms ease, opacity 150ms ease;
}
.btn-primary:hover { transform: translateY(-1px); opacity: 0.5; }
.btn-primary:focus { outline: 2px solid #66696e; }
.btn-primary:active { transform: translateY(1px); }

Secondary Button

.btn-secondary {
  background: transparent;
  color: #f9f9f9;
  padding: 11px 24px;
  border-radius: 64px;
  border: 1px solid #f9f9f9;
  font-weight: 600;
  font-size: 18px;
}

Input Field

.input {
  background: #242A31;
  color: #fff;
  border: 1px solid #66696e;
  border-radius: 5px;
  padding: 30px 12px 8px;
}
.input:focus { box-shadow: 0 0 3px #66696e; outline: none; }

Layout & Responsive Rules

• Breakpoints: 0, 98, 430, 640, 767, 768, 834, 992, 1024, 1280, 1320px
• Maintain 8px grid
• Section padding: 64px desktop, 32px mobile

Interaction Rules

• Transitions: 150ms ease for hover/active
• Focus: 2px solid outline in border color
• Hover: translateY(-1px) for buttons

DO

• Use only palette colors
• Maintain 8px spacing multiples
• Use Source Sans 3 everywhere
• Keep buttons pill-shaped
• Use soft shadows sparingly

DON'T

• Invent new colors
• Mix sharp and rounded corners
• Overuse shadows
• Stretch images

Code Examples

Primary Button (Tailwind):

<button class="bg-[#0061FF] text-white px-6 py-3 rounded-[64px] font-semibold text-[18px] hover:-translate-y-0.5 hover:opacity-50 transition-all duration-150">
  Get Started
</button>

Card:

<div class="bg-white rounded-[8px] p-6 border border-[#E7E7E8]">
  <h2 class="text-[#242A31] font-semibold text-[24px]">Title</h2>
</div>

Input:

<input type="text" class="bg-[#242A31] text-white border border-[#66696e] rounded-[5px] px-3 py-2 focus:shadow-[0_0_3px_#66696e] focus:outline-none">

---

## 9. Summary

**TL;DR** — StackAdapt’s design system is a disciplined, status-rich color palette wrapped around a modern sans-serif type scale on an 8px grid. It’s built for clarity in data-heavy contexts, with pill buttons, soft shadows, and predictable spacing.

**Brand Keywords**:
- functional-minimalism
- tech-trust
- status-rich
- grid-disciplined
- pill-corners