Appsflyer Design System: Monochrome Precision & Clarity

Alright — let's break down Appsflyer's design system from the extracted data. I'm going to go section by section, keep it tight, and give you my raw, opinionated take.

1. Brand Overview

Appsflyer’s site reads like a B2B SaaS brand that knows its audience: marketers, growth teams, and data-driven product managers. The vibe is confident, modern, and restrained. They’re not blasting neon gradients or crazy animations — instead, they’re leaning into precision and clarity.

Primary text color? Almost-black #171717. That says “trust me, I’m solid.” The palette layers in greys for hierarchy, with occasional bursts of bright functional colors (greens, blues, pinks) for emphasis — but those aren’t constant. They’re used sparingly, often in data visualizations or callouts, which keeps the main interface clean.

Typography is a mix of PPFormula (custom, geometric, brand voice) and Inter (UI-friendly, system legibility). This duality is smart — PPFormula gives headlines personality, Inter keeps dense UI text easy to scan. They even sprinkle in Open Sans and occasionally Arial for certain buttons — probably legacy or embedded third-party components.

Layout-wise, the grid is clearly Bootstrap under the hood, but with Vuetify components controlling a lot of the structure. Breakpoints span from mobile micro-widths (321px) up to huge desktop (1920px), so they’ve got a fully responsive approach baked in.

The brand philosophy here: clarity over decoration, function over flourish. This is a system that prioritizes data readability and UI consistency. If you were designing your own analytics dashboard product, this is a model worth studying.

2. Color System

2.1 Primary Colors

Primary semantic color: rgb(23, 23, 23) (#171717). Nearly pure black, but not harsh. It’s the anchor for text, buttons, and nav links. It feels grounded and professional — less aggressive than pure black, but still max contrast.

Secondary semantic color is literally transparent — rgba(0, 0, 0, 0). That’s telling: they don’t use a “secondary” brand color in the semantic sense. It’s all about a monochrome foundation, with functional colors added contextually.

This works because their audience cares about reading charts and tables. Heavy primary color use could distract. Compare to competitors like Mixpanel or Amplitude — they lean on blues/purples as core brand colors. Appsflyer’s approach is quieter, more utilitarian.

2.2 Complete Palette

Here’s every extracted color mapped:

2.3 Color Relationships

Primary on white? Perfect contrast (meets WCAG AAA). Grey on white? Depends — #71767d on white is borderline for small text (around 4.6:1). This is fine for secondary text but not for body copy at minimum sizes.

Functional blues (#3884f2, #2866d0) are high-contrast against white — safe for CTAs. Error red (#eb4643) pops hard, but they soften backgrounds with #fddce2 for alerts — smart move.

Dark mode? Not explicitly implemented here, but the palette has dark neutrals (#292b2e, #171717) that could make inversion easy.

2.4 Usage Guide

• Black #171717 for main text and buttons. Avoid using it on large backgrounds — too heavy.
• Greys for hierarchy: #71767d for secondary text, #b8b8b8 for subtle borders.
• Blues for interaction: CTAs, links, hover states.
• Greens for success, reds for error — always pair with light background variants for accessibility.
• Avoid pairing saturated pinks with saturated blues — too much vibrancy for a data-heavy UI.
• Transparent overlays (rgba(0,0,0,0.1)) keep layer separation without clutter.

3. Typography

3.1 Font Families

• PPFormula — custom, geometric sans. Used for headlines, links, some buttons.
• Inter — system-readable sans. Used for most UI text, buttons, captions.
• Open Sans — occasional use (probably legacy).
• Arial — rare, probably fallback in embedded components.

Sources: Google Fonts includes Nunito, Poppins, Source Sans Pro, Montserrat, -apple-system. No Adobe Fonts.

3.2 Type Scale

3.3 Hierarchy

Biggest headline is 62px PPFormula — hero statements. Section titles drop to 48px, then 40px bold for emphasis. Inter takes over for smaller headings and body — keeps legibility high.

Buttons mostly at 16–20px — that’s generous, good for touch targets. Captions go down to 14px, links scale with body size.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. But they break it with some odd values: 1.5px (border widths), 5px, 7px. Mostly though: 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 56, 64, 80, 101px, 102.8px.

4.2 Layout

Bootstrap grid + Vuetify components. Breakpoints from tiny (321px) to large (1920px). This means they aren’t just designing for mobile/desktop — they’re catching every weird viewport in between.

5. Visual Elements

Border Radius

Ranges from 1px (span) to 50% (circle avatars). Most common: 6px (buttons), 8px (cards), 4px (images), 12px (modals).

Shadows

Minimal. A few soft shadows (rgba(0,0,0,0.2)) for depth, but many components are flat with borders.

Borders

Thin 1px solid greys dominate. Functional borders for separation — not decoration.

6. Components

6.1 Buttons

Primary:

• Default: bg #171717, text #ffffff, radius 6px
• Hover: text #2285f7, bg #ffffff, shadow rgba(0,0,0,0.3) 0px 4px 8px
• Active: text var(--color-grey-900)
• Focus: outline black 1px, bg #1eaedb, shadow same as hover

Tertiary:

• Default: transparent bg, text #171717, border 1px solid #171717
• Hover: same as primary hover

6.2 Links

Four styles — black, white, grey, deep blue. Hover always shifts to #3860be and removes underline.

6.3 Forms

No extracted input styles — likely default Vuetify with brand tweaks.

6.4 Cards

Borders in light grey, occasional shadows.

7. Design Tokens

:root {
  --color-primary: #171717;
  --color-secondary: transparent;
  --color-grey-ui: #71767d;
  --color-white: #ffffff;
  --color-grey-deep: #514b5f;
  --color-grey-medium: #46494f;
  --color-grey-light: #b8b8b8;
  --color-grey-very-light: #e4e5e7;
  --color-blue-500: #3884f2;
  /* ... include all palette hex ... */
  --font-ppformula: "PPFormula", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-open-sans: "Open Sans", sans-serif;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --shadow-soft: rgba(0,0,0,0.2) 0px 4px 8px;
}

8. AI Coding Assistant Prompt

# Appsflyer Design System Specification

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

## Brand Context
Appsflyer’s design is clean, utilitarian, and data-focused. It uses a monochrome foundation with functional accent colors. Typography mixes brand personality (PPFormula) with UI legibility (Inter).

## Colors
- Primary Black: #171717 — Text, nav, primary buttons
- Grey UI: #71767d — Secondary text, dividers
- White: #ffffff — Backgrounds, button text
- Blue 500: #3884f2 — CTAs, links
- Red 500: #eb4643 — Errors
- Green 500: #5fcbd0 — Success
- [List every color with usage...]

## Typography
Fonts:
- Headings: "PPFormula", sans-serif
- Body: "Inter", sans-serif
- Captions: "Inter" or "PPFormula" depending on context

Type scale:
| Level | Font | Size | Weight | Line Height | Use |
| H1 | PPFormula | 62px | 400 | 1.3 | Hero titles |
| H2 | PPFormula | 48px | 400 | 1.3 | Section headings |
| Body | Inter | 16px | 400 | 1.6 | Paragraphs |
| Button | Inter | 16px | 500 | 1.5 | CTAs |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 28px, 32px, 56px, 64px, 80px

## Border Radius
- sm: 4px — images, small inputs
- md: 6px — buttons
- lg: 8px — cards
- full: 50% — avatars

## Shadows & Depth
Use subtle shadows:
- rgba(0,0,0,0.2) 0px 4px 8px — hover depth

## Components

### Primary Button
```css
.btn-primary {
  background: #171717;
  color: #ffffff;
  padding: 0 24px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 16px;
  border: 1px solid transparent;
}
.btn-primary:hover {
  color: #2285f7;
  background: #ffffff;
  box-shadow: rgba(0,0,0,0.3) 0px 4px 8px;
}
.btn-primary:focus {
  outline: 1px solid #000000;
  background: #1eaedb;
  color: #ffffff;
}
```

### Tertiary Button
```css
.btn-tertiary {
  background: transparent;
  color: #171717;
  border: 1px solid #171717;
  border-radius: 6px;
  padding: 0 24px;
}
```

### Link
```css
a {
  color: #171717;
  text-decoration: underline;
}
a:hover {
  color: #3860be;
  text-decoration: none;
}
```

## Layout & Responsive Rules
Max width: 1920px
Breakpoints:
- Mobile: < 576px
- Tablet: 768px–1024px
- Desktop: > 1280px

## Interaction Rules
- Transition: 150ms ease on hover/focus
- Focus: visible outline
- Hover: subtle color change, optional shadow

## DO
- Use only palette colors
- Maintain 8px grid
- Use PPFormula for headings, Inter for body
- Keep borders 1px solid greys

## DON'T
- Invent new brand colors
- Mix sharp and rounded corners
- Overuse shadows

## Code Examples
Primary button and card shown above.

9. Summary

TL;DR — Appsflyer’s design system is monochrome-first, with functional accent colors. Typography is a hybrid of personality and clarity. Layout is grid-based, responsive across all widths.

Brand Keywords: data-focused, monochrome-precise, utilitarian-clean, B2B-trustworthy