Applovin Brand Design System Deep Dive

1. Brand Overview

Applovin’s visual language is unapologetically digital. This is not a brand trying to mimic print aesthetics or artisan textures — it’s built for screens. The tone is sharp, functional, and corporate-tech polished, but not sterile. You can feel the “platform” mindset in every design choice: efficiency, scalability, and a layered hierarchy that works across product pages, investor material, and marketing.

The vibe: a SaaS company that wants to look trustworthy to enterprise clients but still approachable to developers and publishers. They don’t lean into playful gradients or heavy animations — the design is clean and minimal, with just enough accent color to guide interaction. The palette is dominated by black, white, muted grays, and a single pop of digital blue (#68a7ff), used for links and interactive states. They also have a deeper blue for hover states (#3860be), which feels deliberate — it’s a more grounded tone that signals engagement without screaming.

Typography is consistent: DM Sans is everywhere for body copy, buttons, and links. They use MontBold for large headings, giving them a strong, bold voice for hero sections. That’s a nice balance: MontBold for big statements, DM Sans for readability and flexibility.

Spacing follows an 8px base grid with some odd fractional values (7.68px, 13.008px) — likely a byproduct of responsive scaling or Tailwind arbitrary values. Breakpoints cover a wide range from 400px mobile up to 1280px desktop, signaling a fully responsive approach with fine-grained device targeting.

Overall, Applovin’s design system is tech-forward, modular, and minimal. It’s built for clarity, not decoration. They keep borders crisp, corners mostly sharp (lots of 0px radius in buttons), and shadows almost nonexistent. When shadows do appear, they’re subtle, soft, and functional — not part of the core look.

If you’re designing for Applovin, the rules are simple: keep it clean, keep it readable, and use accent colors only for interactive elements. The rest is monochrome discipline.

2. Color System

2.1 Primary Colors

The primary accent is a bright digital blue: #68a7ff (rgb(104, 167, 255)). It’s used for links and possibly other interactive text. This blue is not the main button background — interestingly, buttons use black or white backgrounds and switch to a teal-blue (rgb(30, 174, 219)) on hover. That teal isn’t part of the static palette list, which tells you it’s purely an interactive state color.

Psychologically, the primary blue conveys trust and clarity. Compared to competitors in ad tech or mobile marketing, Applovin’s blue is lighter and friendlier than deep corporate blues like Adobe’s #1473e6. It sits closer to casual app UI blues, which might help them feel approachable to indie game developers.

Black (#000000) is the backbone. It’s used for text, borders, and secondary buttons. White (#ffffff) is the canvas for most components. Grays range from #555555 (medium gray) to #d3d9e7 (light, bluish gray for dividers).

2.2 Complete Palette

2.3 Color Relationships

Black/white is the dominant contrast pair. Blue (#68a7ff) is used sparingly, ensuring high contrast with white and black backgrounds. The WCAG contrast ratio for #68a7ff on white is about 3:1 — borderline for small text, so they wisely use it for larger link text or bolded interactive elements. On black, #68a7ff has excellent contrast (>8:1).

Grays are used for hierarchy — lighter grays for dividers, medium grays for secondary text. The blue-gray (#4f5a7d) adds a cool tone to backgrounds without overpowering content.

Dark mode isn’t evident here — no inverse palette tokens are present. But the palette would adapt easily, as the colors are already high-contrast.

2.4 Usage Guide

• Use black for all default text and borders.
• Use white for primary backgrounds and text on dark buttons.
• Use #68a7ff for links; hover to #3860be for emphasis.
• Use teal-blue (rgb(30, 174, 219)) only for hover/focus states on buttons.
• Use #d3d9e7 and #d8d8d8 for dividers, not text.
• Avoid using accent colors in non-interactive elements — keeps the brand clean.

3. Typography

3.1 Font Families

Two fonts: MontBold for large headings (weight 800), and DM Sans for everything else. DM Sans appears in multiple weights (300 to 700), covering body, captions, links, and buttons. Fallbacks are “DM Sans Fallback” — likely system sans-serif.

No Google Fonts or Adobe Fonts are declared in the data, implying self-hosted webfonts.

3.2 Type Scale

3.3 Hierarchy

MontBold 60px is the hero — big page titles or marketing headlines. DM Sans takes over for subheadings and body content, with a consistent 1.50 line height for readability. Button text is smaller (13.008px) but bold enough (600 weight) to stand out. Captions drop to 12px–14px with tighter line heights.

The variety of weights in DM Sans creates subtle hierarchy without changing font family — efficient for branding.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid (common values: 8, 16, 24, 40, etc.) with some odd decimals from responsive scaling.

4.2 Layout

Breakpoints:

• 400px, 425px, 426px — small mobile
• 500px, 530px, 550px — mid-size mobile
• 600px — large mobile / small tablet
• 768px, 769px — tablet
• 834px, 890px, 896px, 897px — large tablet / small desktop
• 1023px, 1024px, 1040px — desktop cutoff
• 1280px — large desktop

This is granular — likely adjusting for specific device widths.

5. Visual Elements

Border Radius System

Observation: Buttons use 0px radius — very sharp. Full pill radius (33554400px) is used for specific shapes, likely avatar or pill tags.

Shadows

Rare and subtle:

• rgba(0,0,0,0.2) 0px 0px 18px 0px
• rgb(153,153,153) 0px 2px 10px -3px
• rgb(199,197,199) -3px -3px 5px -2px
• rgb(199,197,199) 0px 0px 12px 2px

These are functional — not a core aesthetic.

Borders

Mostly 1px solid black or gray. Used for buttons, dividers. Occasional colored borders (#32ae88 green) for specific states.

6. Components

6.1 Buttons

Two main styles:

White Button

• Default: bg white, color black, padding 12px 10px, border 1px solid black, radius 0px, font-weight 600, font-size 13.008px.
• Hover: opacity 0.9, color white, bg teal-blue (#1eaedb).
• Focus: outline 2px solid black, bg teal-blue, color white.

Black Button

• Default: bg black, color white, same padding and font as white button.
• Hover: bg teal-blue (#1eaedb), color white.
• Focus: outline 2px solid black, bg teal-blue.

6.2 Links

Three styles:

1. Blue link (#68a7ff) → hover #3860be
2. Dark gray link (#171717) → hover #3860be
3. Bold black link → hover #3860be

No underlines by default.

6.3 Forms

Inputs not detailed in the data — likely minimal border styles.

6.4 Cards

Not explicitly defined — likely white background, subtle border or shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-overlay: #001026;
  --color-gray-555: #555555;
  --color-slate-blue-gray: #4f5a7d;
  --color-white: #ffffff;
  --color-light-bluish-gray: #d3d9e7;
  --color-neutral-gray: #d8d8d8;
  --color-deep-blue: #27455c;
  --color-bright-blue: #68a7ff;
  --color-dark-gray: #656565;
  --color-mid-gray: #767676;

  /* Typography */
  --font-heading-bold: "MontBold", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7_68: 7.68px;
  --space-10: 10px;
  --space-11_2: 11.2px;
  --space-12: 12px;
  --space-13_008: 13.008px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-40: 40px;
  --space-48: 48px;
  --space-96: 96px;
  --space-120: 120px;
  --space-170: 170px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-3: 3px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-full: 33554400px;

  /* Shadows */
  --shadow-1: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
  --shadow-2: rgb(153, 153, 153) 0px 2px 10px -3px;
  --shadow-3: rgb(199, 197, 199) -3px -3px 5px -2px;
  --shadow-4: rgb(199, 197, 199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Applovin Design System Specification

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

## Brand Context
Applovin’s design is clean, minimal, and tech-focused. Black and white dominate, with a single bright blue accent for links and a teal-blue for button hovers. Typography is DM Sans for most UI, MontBold for large headings. Corners are mostly sharp; shadows are rare and subtle.

## Color Palette
- Black: #000000 — Core text, borders, secondary button backgrounds
- Dark Overlay: #001026 — Semi-transparent overlays
- Gray 555: #555555 — Secondary text, icons
- Slate Blue Gray: #4f5a7d — Neutral section backgrounds
- White: #ffffff — Backgrounds, text on dark buttons
- Light Bluish Gray: #d3d9e7 — Dividers
- Neutral Gray: #d8d8d8 — UI borders
- Deep Blue: #27455c — Accent backgrounds
- Bright Blue: #68a7ff — Links
- Dark Gray: #656565 — Neutral text
- Mid Gray: #767676 — Captions, placeholders

## Typography
- Headings: "MontBold", sans-serif (weight 800)
- Body: "DM Sans", sans-serif (weights 300–700)

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | MontBold | 60px | 800 | 1.15 | Page titles |
| Subheading | DM Sans | 24px | 400 | — | Section headings |
| Body-lg | DM Sans | 21px | 300 | 1.33 | Intro text |
| Body-md | DM Sans | 18px | 400 | 1.50 | Default body |
| Body-sm | DM Sans | 16px | 400 | 1.50 | Compact body |
| Link | DM Sans | 16px | 700 | 1.50 | Navigation |
| Button | DM Sans | 13.008px | 600 | 1.20 | Button labels |
| Caption | DM Sans | 12px | 500 | 1.33 | Small text |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 4px, 5px, 6px, 7.68px, 10px, 11.2px, 12px, 13.008px, 15px, 16px, 20px, 24px, 25px, 40px, 48px, 96px, 120px, 170px

## Border Radius
- None: 0px — Buttons
- xs: 1px — Spans
- sm: 2px — Buttons, divs
- md: 12px — Divs
- lg: 20px — Tags
- full: 33554400px — Pills

## Shadows & Depth
Rare, subtle shadows:
- rgba(0,0,0,0.2) 0px 0px 18px 0px
- rgb(153,153,153) 0px 2px 10px -3px
- rgb(199,197,199) -3px -3px 5px -2px
- rgb(199,197,199) 0px 0px 12px 2px

## Component Specifications

### Primary Button (Black)
Default:
- background: #000000
- color: #ffffff
- padding: 12px 10px
- border: 1px solid #000000
- border-radius: 0px
- font: DM Sans, 13.008px, weight 600

Hover:
- background: #1eaedb
- color: #ffffff
- opacity: 0.9

Focus:
- outline: 2px solid #000000
- background: #1eaedb
- color: #ffffff

### Secondary Button (White)
Default:
- background: #ffffff
- color: #000000
- same padding/font as primary

Hover/Focus:
- same as primary but starting from white bg

### Links
- Default: #68a7ff, no underline
- Hover: #3860be, no underline

### Input Fields
- border: 1px solid #000000 or gray
- radius: 2px
- focus: border-color teal-blue (#1eaedb)

### Cards
- background: #ffffff
- radius: 12px
- padding: 24px
- subtle shadow or border

## Layout & Responsive Rules
- Breakpoints: 400px, 425px, 426px, 500px, 530px, 550px, 600px, 768px, 769px, 834px, 890px, 896px, 897px, 1023px, 1024px, 1040px, 1280px
- Maintain 8px grid
- Page padding: 24px mobile, 40px desktop

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus: 2px solid outline in black or teal-blue
- Disabled: opacity 0.5, no hover effect

## DO List
- Use ONLY colors from palette
- Maintain 8px grid multiples
- Keep button corners sharp (0px radius)
- Use MontBold only for large headings
- Keep links without underline
- Use teal-blue only for interactive states

## DON'T List
- Don’t add drop shadows beyond listed ones
- Don’t round button corners
- Don’t use accent colors for static text
- Don’t mix MontBold into body copy

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #000;
  color: #fff;
  padding: 12px 10px;
  border: 1px solid #000;
  border-radius: 0;
  font-family: 'DM Sans';
  font-size: 13.008px;
  font-weight: 600;
  transition: background 150ms ease, opacity 150ms ease;
}
.btn-primary:hover {
  background: rgb(30, 174, 219);
  opacity: 0.9;
}
.btn-primary:focus {
  outline: 2px solid #000;
  background: rgb(30, 174, 219);
}
```

### Secondary Button
```css
.btn-secondary {
  background: #fff;
  color: #000;
  padding: 12px 10px;
  border: 1px solid #000;
  border-radius: 0;
  font-family: 'DM Sans';
  font-size: 13.008px;
  font-weight: 600;
}
.btn-secondary:hover {
  background: rgb(30, 174, 219);
  color: #fff;
  opacity: 0.9;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.2) 0px 0px 18px 0px;
}
```

9. Summary

TL;DR — Applovin’s design system is black-and-white minimalism with a single pop of blue for links and teal-blue for interaction states. Typography is DM Sans for body, MontBold for big headings. Corners are mostly sharp; spacing is strict on an 8px grid. Shadows are rare and subtle.

Brand Keywords:

• tech-minimalist
• sharp-corners
• blue-accent
• grid-disciplined
• corporate-clean