Adjust Design System Deep-Dive

1. Brand Overview

Adjust’s site feels like a control panel for grown-up mobile marketers. Clean, no-nonsense, but still approachable. They’re not chasing “wow” visual effects — they want clarity, confidence, and a sense of trust. You can tell they’ve balanced B2B seriousness with tech-forward polish.

This is not a playful consumer brand. No neon gradients, no drop shadows screaming “fun.” It’s restrained. The color palette pivots between deep navy (#04182b), crisp black, balanced neutrals (#e6e6e6), and pure white — almost monochrome, but enough weight shifts to make UI elements pop. When accents do show up (like #007aff in Swiper theme or ring colors), they’re functional, not decorative. Think highlights for interactive states, not marketing candy.

Typography is built to hold multi-language content. Primary font TTNormsPro sits alongside multiple Noto Sans fallbacks (JP, KR, SC) plus Sarabun. That’s intentional — Adjust operates globally. The site’s typography choices say “we control the voice” but are prepared for CJK character sets without breaking layout.

Layout is structured on an 8px grid system. That’s a telltale sign of a modern design team disciplined about spacing. It’s hard to overstate this — consistent spacing keeps the site feeling tight even when visual styling is minimal.

The whole thing runs on Tailwind CSS (with plenty of arbitrary value utilities) and Vuetify components. Framework choice reflects a hybrid approach: Vuetify for core UI patterns and Tailwind for rapid custom adjustments. An engineer-friendly stack with enough design guardrails.

If you’re designing or building for Adjust, the key is to maintain that balance — minimalism without blandness, technical precision without feeling cold, functional accents instead of decorative noise. Their visual language is tight, formal, and optimized for clarity in complex UIs.

2. Color System

2.1 Primary Colors

The deep navy #04182b is the closest thing to a signature color. It appears in interactive elements (borders) and text. It’s dark enough for high contrast against white or light gray, but less stark than pure black. Psychology-wise, navy reads as trustworthy, professional, and stable — perfect for analytics software.

Black (#000000) plays a role, but mostly for text or strong headings. White (#ffffff) is the clean slate — backgrounds, text on dark buttons, or light UI surfaces. Neutral gray (#e6e6e6) defines dividers, subtle borders, and soft backgrounds.

Functional blues appear in CSS variables — #007aff for Swiper theme color and rgba(0,42,158,.5) for ring color. These are bright enough to stand out but are not part of main marketing visuals — more like accessibility and focus indicators.

Competitors often lean into aggressive colors for brand recall (Mixpanel purple, Amplitude teal). Adjust goes the opposite way: keep the core dark, use color only where necessary.

2.2 Complete Palette

2.3 Color Relationships

Deep navy (#04182b) vs white (#ffffff) — huge contrast, way above WCAG AA requirement for text. Black (#000000) and white likewise. Gray (#e6e6e6) keeps contrast soft — perfect for dividers where you don’t want visual break lines to dominate content.

Accessibility: The palette supports excellent readability. Focus states use semi-transparent blue rings, which may need contrast testing against light backgrounds to ensure WCAG compliance at 3:1 or above.

Dark mode? This palette already has strong dark values — flipping background to navy or black would work with white text easily. Neutral gray could shift to a darker gray for divider lines.

2.4 Usage Guide

Works well:

• Navy text on white backgrounds — crisp, authoritative.
• White text on navy buttons — clean and high contrast.
• Gray dividers with plenty of whitespace keep sections defined without adding clutter.

Avoid:

• Navy (#04182b) over gray (#e6e6e6) — too low-contrast for body text.
• Using #007aff as anything but a functional accent — it feels out of place for marketing visuals.
• Mixing black and navy in adjacent headline elements — they’re close enough to look wrong when side-by-side.

3. Typography

3.1 Font Families

Primary UI font: TTNormsPro, with fallbacks: Noto Sans JP, Noto Sans KR, Noto Sans SC, Sarabun. This covers Latin and key Asian scripts without breaking style.

Links and captions keep the same stack. Buttons sometimes fall back to plaintext system fonts (Arial in the data), probably from Vuetify defaults or embedded video players using WistiaPlayerInter.

No Google Fonts. No Adobe Fonts. The brand runs custom/self-hosted TTNormsPro.

3.2 Type Scale

3.3 Hierarchy

48px bold H1 is the heavyweight — page titles, hero headlines. The scale drops fast to 36px and 30px for section headings. Then multiple 21px weights for subheadings or transitional headlines — nice mid-size that works across languages.

Body text sits at 18px or 16px, line height 1.50 — good readability for B2B content. Captions drop to 14px and sometimes 12px (uppercased for emphasis in UI labels).

They don’t overcomplicate hierarchy — you could define three heading sizes and two body sizes and cover 90% of the site.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All spacing values are multiples except for 2px (hairlines).

4.2 Layout

Breakpoints:

• 639px / 640px — mobile threshold
• 768px — tablet
• 1024px / 1025px — desktop entry
• 1200px / 1280px — wide desktop
• 1536px — extra-wide

Tailwind classes + Vuetify v- components suggest a responsive grid handled at these breakpoints. Likely max-width containers around 1200–1280px for content.

5. Visual Elements

Border Radius System

High-radius values (9999px, 50%) are used with intent — pills and avatars. No random mixing of sharp and round corners.

Shadow System

1. rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px — subtle depth for cards.
2. rgb(255, 255, 255) 0px 0px 0px 2px inset — white insets for internal borders.
3. rgba(0, 0, 0, 0.05) 0px 1px 2px 0px — micro shadows for small interactive elements.

This is not flat design, but shadows are restrained.

Borders & Dividers

Mostly 1px or 2px solid lines in gray or navy. 2px navy borders for strong interactive frames. 1px gray dividers for content separation. Some 1px 0px variants for horizontal dividers only.

6. Components

6.1 Buttons

No explicit dataset for button colors, but border-radius and spacing imply:

• Medium buttons: 14px-16px padding, 16px radius.
• Pill buttons: 9999px radius.
• Borders for secondary styles: navy or blue (#04182b or #005ff7).

They likely use Tailwind states (hover:, focus:) with Vuetify’s ripple disabled for some.

6.2 Links

Two styles:

• White (#ffffff), no underline, medium weight.
• Navy (#04182b), no underline, medium weight.

Hover state data missing, but likely color change or underline introduction.

6.3 Forms

Not in dataset — either dynamic components or minimal styles. Vuetify defaults might apply (rounded 8px or 16px, subtle shadows/borders).

6.4 Cards

Rounded corners at 16px. Subtle shadows for elevation. Likely padding in 24px–40px range given spacing data.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-neutral: #e6e6e6;
  --color-black: #000000;
  --color-navy-dark: #04182b;
  --color-white: #ffffff;
  --color-ring-blue: rgba(0,42,158,.5);
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-primary: "TTNormsPro", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Sarabun";
  --font-button: Arial;
  --font-video: WistiaPlayerInter, Helvetica;

  /* Spacing */
  --space-2: 0.13rem;
  --space-8: 0.50rem;
  --space-12: 0.75rem;
  --space-14: 0.88rem;
  --space-16: 1.00rem;
  --space-24: 1.50rem;
  --space-32: 2.00rem;
  --space-40: 2.50rem;
  --space-48: 3.00rem;
  --space-64: 4.00rem;
  --space-96: 6.00rem;
  --space-100: 6.25rem;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 60px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px;
  --shadow-inset-white: rgb(255,255,255) 0px 0px 0px 2px inset;
  --shadow-sm: rgba(0,0,0,0.05) 0px 1px 2px 0px;
}

8. AI Coding Assistant Prompt

# Adjust Design System Specification

You are an Adjust design expert. Build UIs matching their visual language exactly.

## Brand Context
Adjust’s design is clean, professional, and international-friendly. Minimal color usage, high typographic clarity, structured on an 8px grid. Accents are functional, shadows are subtle, and corners are consistently rounded.

## Color Palette
- Neutral Gray: #e6e6e6 — dividers, subtle backgrounds
- Pure Black: #000000 — primary text, strong headings
- Deep Navy: #04182b — brand dark, links, borders
- Pure White: #ffffff — backgrounds, text on dark buttons
- Ring Blue: rgba(0,42,158,.5) — focus outlines for accessibility
- Swiper Blue: #007aff — carousel controls

## Typography
- Font Family: TTNormsPro, Noto Sans JP, Noto Sans KR, Noto Sans SC, Sarabun
- Secondary: Arial for some buttons, WistiaPlayerInter for video player text
| Level      | Size            | Weight | Line Height | Use |
|------------|-----------------|--------|-------------|-----|
| H1         | 48px / 3.00rem  | 700    | 1.17        | Page titles |
| H2         | 36px / 2.25rem  | 700    | 1.25        | Section headings |
| H3         | 30px / 1.88rem  | 700    | 1.27        | Sub-sections |
| H4/H5/H6   | 21px / 1.31rem  | 400-700| 1.33        | Subheadings |
| Body Lg    | 18px / 1.13rem  | 400-500| 1.50        | Paragraphs |
| Body Sm    | 16px / 1.00rem  | 400-500| 1.50        | Small text |
| Caption    | 14px / 0.88rem  | 400-700| 1.29        | Labels/UI text |
| Micro      | 12px / 0.75rem  | 300-400| 1.50        | Small captions |

## Spacing & Grid
Base: 8px
Scale: 2px, 8px, 12px, 14px, 16px, 24px, 32px, 40px, 48px, 64px, 96px, 100px
Use multiples for padding, margins, gaps.

## Border Radius
- sm: 8px — list items
- md: 12px — anchors
- lg: 16px — cards, nav, images
- xl: 60px — large pill elements
- full: 9999px — pill buttons, avatars
- circle: 50% — icon circles, video play

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px — cards
- Inset white: rgb(255,255,255) 0px 0px 0px 2px inset — inner borders
- Small: rgba(0,0,0,0.05) 0px 1px 2px — tiny UI elements

## Components

### Primary Button
```css
.btn-primary {
  background: #04182b;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 16px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #000000; }
.btn-primary:focus { outline: 2px solid rgba(0,42,158,.5); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #04182b;
  padding: 14px 24px;
  border-radius: 16px;
  font-family: var(--font-primary);
  font-weight: 500;
  border: 2px solid #04182b;
}
.btn-secondary:hover { border-color: #007aff; color: #007aff; }
```

### Link
```css
.link-dark {
  color: #04182b;
  font-weight: 500;
  text-decoration: none;
}
.link-light {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
}
.link-dark:hover, .link-light:hover { text-decoration: underline; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
```

## Layout & Responsive Rules
- Max content width ~1280px
- Mobile padding: 16px; desktop: 24px
- Grid gap: multiples of 8px
- Breakpoints: 640px, 768px, 1024px, 1200px, 1280px, 1536px

## Interaction Rules
- State transitions: 150ms ease for hover/focus changes
- Focus indicators: 2px solid ring blue with 2px offset
- Loading states: use opacity + spinner with neutral gray background

## DO List
- Use only colors in palette
- Maintain 8px spacing grid
- Keep rounded corners consistent per component
- Use TTNormsPro for all headings and body text
- Apply shadows only where specified

## DON'T List
- Invent new colors
- Mix sharp and rounded corners in same component
- Add heavy shadows
- Use #007aff outside functional controls
- Break grid multiples

## Code Examples
Button:
```css
<button class="btn-primary">Get Started</button>
```
Card:
```css
<div class="card">Content goes here</div>
```
Input:
```css
.input {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
}
.input:focus {
  border-color: #04182b;
  outline: 2px solid rgba(0,42,158,.5);
}
```

9. Summary

TL;DR: Adjust’s design system is disciplined — minimal palette, TTNormsPro typography with global fallbacks, 8px grid, consistent rounded corners, subtle shadows. It’s built for clarity and control.

Brand Keywords:

• tech-precise
• global-ready
• restrained-minimal
• functional-accent
• professional-clarity