AppLovin DESIGN.md
Brands
Mobile growth design with vivid coral identity, performance-first dashboards, bold typography, and ad-tech surfaces.
At a glance
- Group
- Brands
- Main color
- #ff4757Red design systems
- Fonts
- DM SansJetBrains Mono
Colors in this file
- #ffffff
background
- #1a1d2e
background
- #ff4757
background
- #e5e7eb
Unnamed
- #3b82f6
Unnamed
- #22c55e
Unnamed
- #f59e0b
Unnamed
- #8b5cf6
Unnamed
- #f9fafb
Unnamed
- #6b7280
Unnamed
Mobile growth design with vivid coral identity, performance-first dashboards, bold typography, and ad-tech surfaces.
1. Visual Theme & Atmosphere
AppLovin should feel performance-driven, bold, and results-oriented. The design language communicates mobile growth, ad monetization, ROAS, and machine-learning campaign optimization.
- Mood: energetic, data-forward, ambitious, results-focused
- Density: high, with campaign metrics, creative previews, and bid-flow tables
- Character: vivid coral brand, deep navy contrast, clean white panels, sharp corners
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--al-coral | #FF4757 | Primary brand CTA and highlights |
--al-navy | #1A1D2E | Dark backgrounds and primary text |
--al-blue | #3B82F6 | Secondary actions and links |
--al-green | #22C55E | ROAS positive / revenue growth |
--al-amber | #F59E0B | Budget warnings and pacing alerts |
--al-purple | #8B5CF6 | MAX monetization feature accent |
--surface-card | #FFFFFF | Cards and data panels |
--surface-bg | #F9FAFB | Page background |
--text-primary | #1A1D2E | Headings and values |
--text-secondary | #6B7280 | Subtext and chart labels |
--border-default | #E5E7EB | Panel and row borders |
Use coral as the primary action signal. Reserve green strictly for positive performance deltas and revenue states.
3. Typography Rules
css--font-sans: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 60px | 800 | 1.0 |
| Page Title | 40px | 700 | 1.1 |
| Section Title | 28px | 600 | 1.2 |
| Card Title | 20px | 600 | 1.3 |
| Body | 15px | 400 | 1.6 |
| Metric Value | 36px | 700 | 1.0 |
| Label | 12px | 600 | 1.3 |
4. Component Stylings
css.button-primary {
min-height: 44px;
padding: 0 20px;
border: none;
border-radius: 8px;
background: #FF4757;
color: #FFFFFF;
font: 700 14px/1 "DM Sans", sans-serif;
}
.campaign-card {
border: 1px solid #E5E7EB;
border-radius: 12px;
background: #FFFFFF;
padding: 20px 24px;
}
.dark-metric {
border-radius: 16px;
background: #1A1D2E;
color: #FFFFFF;
padding: 24px;
}
.roas-badge {
display: inline-flex;
padding: 4px 12px;
border-radius: 6px;
background: #DCFCE7;
color: #15803D;
font: 600 13px/1.4 "DM Sans", sans-serif;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Table row padding |
--space-4 | 16px | Card content rhythm |
--space-6 | 24px | Section padding |
--space-12 | 48px | Major layout separation |
Lead with ROAS and revenue at the top of every campaign view. Group campaign, creative, and audience data into distinct tabs.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 2px 8px rgba(26, 29, 46, 0.08); }
.shadow-panel { box-shadow: 0 12px 32px rgba(255, 71, 87, 0.12); }
.shadow-modal { box-shadow: 0 24px 64px rgba(26, 29, 46, 0.20); }
Use colored shadows sparingly to reinforce the coral brand on primary panels only.
7. Do's and Don'ts
Do lead with revenue and performance impact. Do use coral only for primary CTAs and key metric highlights. Do not use red for both brand and error states simultaneously. Do not clutter campaign tables with non-actionable columns. Do make bid and budget controls immediately accessible.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Summary KPIs only, no complex tables |
| Tablet | 768px | Two-column campaign cards, simplified charts |
| Desktop | 1200px | Full dashboard with table, charts, and sidebar filters |
Mobile views should surface the most critical performance signals — spend, revenue, and ROAS.
9. Agent Prompt Guide
Design like AppLovin: vivid coral CTAs, DM Sans bold typography, navy contrast panels, performance-first dashboards, ROAS-focused metric cards, and clear campaign hierarchy.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Fastly
Brands · Inter
Edge cloud design with bold red identity, performance-metric surfaces, developer-focused configuration UX, and global CDN clarity.
Minimax
Brands · DM Sans
MiniMax presents itself as a premium AI infrastructure brand through a striking duality — bold black-pill CTAs and stark white canvas for marketing, paired with vibrant gradient product cards (orange-red,…
Groq
Brands · Inter
AI inference design with electric orange identity, speed-first surfaces, token-throughput clarity, and developer-performance UX.
Replicate
Brands · basier-square
Replicate is a developer-tools platform with the soul of an art zine. The public marketing surfaces sit on a warm cream canvas (#f9f7f3) rather than the white-or-near-black default of typical AI infrastructure sites,…
Hotjar
Brands · Inter
Behavior analytics design with warm coral identity, heatmap visualization surfaces, session-replay clarity, and user-empathy UX.
Auth0
Brands · Inter
Identity and authentication platform with a clean enterprise aesthetic — dark navy brand, orange accents, and security-infrastructure UI patterns.