Onelink Brand Design System Deep Dive
1. Brand Overview
Onelink sits inside the AppsFlyer ecosystem as their “customer experience deep linking” product — a bridge between marketing touchpoints and actual in-app destinations. This isn’t a consumer brand, it’s B2B SaaS aimed squarely at marketers, growth teams, and developers who care about conversion rates and frictionless user journeys.
The vibe: modern enterprise tech, but not cold. There’s a lot of neutral grounding with selective hits of color for emphasis. It’s functional-first. No ornamental fluff. You get the sense they’d rather have a clean CTA than a fancy gradient.
From the extracted data, the design system is built on a Bootstrap grid with Vuetify components — so it’s responsive and component-driven out of the box. Breakpoints range from tiny (98px) to wide desktop (1920px), with a long tail of specific widths for pixel-perfect tweaks. This is a site that’s been tuned for edge cases.
Typography is pragmatic: Inter for most UI, PPFormula for headings and branding moments, occasional Open Sans for legacy or specific contexts. Fonts come from Google Fonts (Nunito, Poppins, Montserrat, Source Sans Pro) with variable font support. There’s no overcomplication — even their largest headings top out at 62px.
The color system is interesting: primary semantic is #171717 (almost black), secondary is transparent. Layered on top is a big palette of functional colors — blues from #0A2474 to #94C6FF, greens from #124463 to #C3FAEE, pinks from #7A1256 to #FFACC2, plus greys for structural elements. It’s not a single-brand-color world — it’s a toolkit.
Overall philosophy: clarity over flash. Crisp typography, high-contrast actions, lots of white (#ffffff) and deep neutral backgrounds, with the occasional saturated accent to draw the eye. This works for their audience because marketers need to read and click, not be distracted.
2. Color System
2.1 Primary Colors
Primary semantic color: #171717 — pitch-dark grey used for text, buttons, and key UI outlines. Psychologically, it’s authority and clarity. Compared to competitors in martech, who often lean on bright blues or greens, Onelink’s primary feels more grounded. It says “we’re stable” rather than “we’re exciting.”
Secondary semantic: transparent (rgba(0,0,0,0)), which means they often rely on background layers rather than a secondary brand hue.
White (#ffffff) is everywhere — backgrounds, button faces, empty states. It’s the canvas.
2.2 Complete Palette
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| White | #ffffff | Canvas | Backgrounds, button faces, card surfaces |
| Primary Neutral | #171717 | Brand/Text | Primary buttons, headings, body text |
| Slate | #514b5f | Secondary text | Tab labels, muted UI |
| Transparent Black 10% | #000000 | Overlay | Nav toggler, subtle headings |
| Deep Purple | #220d4e | Links | Navbar brand, privacy links |
| Light Grey | #b8b8b8 | Borders | Primary link color, disabled states |
| Charcoal | #3a3c40 | Hover | Hover/focus states |
| Charcoal Alt | #3a3d41 | Hover | Alternate hover/focus |
| Happy Green 2 | #CFF5DF | Accent | Thematic highlights |
| Pink 300 | #FFACC2 | Accent | Decorative elements |
| Pink 500 | #FF618B | Accent | Strong pink |
| Grey 200 | #D2D4D7 | Neutral | Background panels |
| Blue 700 | #1C4BAE | Accent | Strong blue |
| Grey 100 | #E4E5E7 | Neutral | Light backgrounds |
| Grey 600 | #585C63 | Text | Muted labels |
| Pink 400 | #FF8AA9 | Accent | Mid pink |
| Green 100 | #E1FCF4 | Accent | Light green background |
| Blue 300 | #94C6FF | Accent | Light blue |
| Pink 800 | #931E60 | Accent | Dark pink |
| Green 500 | #5FCBD0 | Accent | Mid green |
| Pink 900 | #7A1256 | Accent | Darkest pink |
| Grey 500 | #71767D | Neutral | Border/text |
| Blue 400 | #569EFF | Accent | Mid blue |
| Red 800 | #970016 | Error | Dark red |
| Red 500 | #EB4643 | Error | Bright red |
| Green 900 | #124463 | Accent | Dark green |
| Blue 800 | #11348C | Accent | Dark blue |
| Happy Green 1 | #9AFFC5 | Accent | Light green highlight |
| Pink 100 | #FAE7EC | Accent | Very light pink |
| Blue 100 | #D7EDFE | Accent | Pale blue |
| Green 600 | #45A4B2 | Accent | Mid teal |
| Grey 800 | #292B2E | Neutral | Dark background |
| Pink 600 | #DB467C | Accent | Mid pink |
| Pink 200 | #FFCCDA | Accent | Light pink |
| Green 800 | #1E5D78 | Accent | Dark teal |
| Grey 700 | #46494F | Neutral | Dark grey |
| Green 400 | #86E2DF | Accent | Light teal |
| Blue 500 | #3884F2 | Accent | Bright blue |
| Pink 700 | #B7306E | Accent | Dark pink |
| Blue 900 | #0A2474 | Accent | Deep navy |
| Red 100 | #FDDCE2 | Error bg | Pale red |
| Blue 600 | #2866D0 | Accent | Mid-dark blue |
| Green 200 | #C3FAEE | Accent | Pale teal |
| Grey 400 | #94989F | Neutral | Mid grey |
| Green 300 | #A2F0E7 | Accent | Light teal |
| Blue 200 | #BBDFFF | Accent | Light blue |
| Green 700 | #2F8095 | Accent | Mid teal |
2.3 Color Relationships
They like strong contrast: #171717 text on #ffffff is AAA compliant. Accent colors are saturated enough to pop on white, but some (e.g., Pink 100 #FAE7EC) will need dark text for legibility.
Dark mode isn’t explicitly implemented here — but the palette has enough dark neutrals (#292B2E, #171717) that flipping could work.
Error states are clearly red (#EB4643, #970016), success/positive cues lean green (#5FCBD0, #124463), info/links lean blue (#3884F2, #0A2474).
2.4 Usage Guide
- Works well: Dark text (#171717) on light neutrals (#E4E5E7, #ffffff). Accent blues for links, greens for success.
- Avoid: Putting light pinks (#FAE7EC) on white — too low contrast.
- CTA pattern: Dark button (#171717) with white text, hover to white background with accent border.
3. Typography
3.1 Font Families
- PPFormula — Custom? Used for large headings and branding. No fallbacks listed.
- Inter — Main UI font. Variable font support.
- Open Sans — Legacy/support text.
- Google Fonts loaded: Nunito, Poppins, Montserrat, Source Sans Pro, -apple-system.
3.2 Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| Heading 1 | PPFormula | 62px | 400 | 1.30 |
| Heading 1 | PPFormula | 48px | 400 | 1.30 |
| Heading 1 | Inter | 48px | 400 | 1.30 |
| Heading 1 | PPFormula | 32px | 400 | 1.40 |
| Link | PPFormula | 32px | 400 | 1.40 |
| Heading 1 | Inter | 32px | 400 | 1.40 |
| Heading 1 | PPFormula | 26px | 400 | 1.40 |
| Heading 1 | Inter | 24px | 400 | — |
| Heading 1 | Inter | 24px | 400 | 1.40 |
| Heading 1 | Inter | 22px | 400 | 1.55 |
| Button | Inter | 20px | 400 | 1.60 |
| Heading 1 | Inter | 20px | 400 | 1.60 |
| Link | Inter | 20px | 400 | 1.60 |
| Link | Inter | 20px | 600 | 1.40 |
| Heading 1 | Inter | 20px | 600 | 1.40 |
| Button | Inter | 20px | 400 | 1.60 |
| Button | Arial | 20px | 400 | 1.00 |
| Link | Inter | 18px | 400 | 1.60 |
| Heading 1 | Inter | 18px | 400 | 1.78 |
| Button | Inter | 18px | 500 | 1.33 |
| Link | Inter | 16px | 400 | 2.00 |
| Button | Inter | 16px | 500 | 1.50 |
| Heading 1 | Inter | 16px | 500 | 1.50 |
| Button | Inter | 16px | 400 | 1.00 |
| Heading 1 | Inter | 16px | 400 | 1.00 |
| Heading 1 | PPFormula | 16px | 400 | 1.60 |
| Heading 1 | Inter | 16px | 400 | 1.50 |
| Heading 1 | PPFormula | 16px | 600 | 1.60 |
| Button | Inter | 16px | 400 | — |
| Heading 1 | Open Sans | 16px | 400 | 1.40 |
| Heading 1 | Inter | 15px | 400 | 2.13 |
| Button | Inter | 14.4px | 400 | 2.64 |
| Button | Inter | 14.4px | 700 | 1.00 |
| Link | PPFormula | 14px | 600 | 1.60 |
| Link | PPFormula | 14px | 500 | 1.60 |
| Caption | PPFormula | 14px | 600 | 1.60 |
| Caption | Inter | 14px | 400 | 1.71 |
| Link | Inter | 14px | 400 | 1.60 |
| Caption | Inter | 14px | 400 | 1.60 |
| Link | Inter | 14px | 400 | 1.40 |
| Caption | Inter | 14px | 400 | 1.71 |
| Caption | Inter | 13.6px | 400 | — |
| Link | Inter | 13.008px | 700 | 1.50 |
| Link | Inter | 12.992px | 400 | 1.50 |
| Caption | Inter | 12.992px | 400 | 1.50 |
| Button | Inter | 12px | 500 | 1.30 |
| Link | Inter | 12px | 400 | 1.40 |
| Caption | Inter | 12px | 400 | 1.50 |
| Button | Inter | 12px | 700 | 1.00 |
| Link | Inter | 12px | 400 | — |
| Caption | Inter | 8.5px | 400 | — |
3.3 Hierarchy
Heading sizes jump from 62px down to 32px — big visual impact for hero sections. Most body and UI text sits at 14–16px, which keeps readability high. Line heights are generous (1.4–2.0), making complex marketing copy easy to scan.
PPFormula is used sparingly — that’s smart. It keeps brand flair without hurting legibility in data-heavy UI.
4. Spacing & Layout
4.1 Spacing Scale
Base grid: 8px. You see multiples throughout.
| Value | Rem | Count | Use |
|---|---|---|---|
| 1px | 0.06rem | 248 | Hairline borders |
| 1.5px | 0.09rem | 58 | Underlines |
| 5px | 0.31rem | 22 | Tight padding |
| 6px | 0.38rem | 228 | Small gaps |
| 7px | 0.44rem | 8 | Odd gap |
| 8px | 0.50rem | 18 | Base unit |
| 10px | 0.63rem | 57 | Input padding |
| 12px | 0.75rem | 34 | Button padding |
| 15px | 0.94rem | 30 | Card padding |
| 16px | 1.00rem | 13 | Base text line height |
| 20px | 1.25rem | 41 | Section gaps |
| 24px | 1.50rem | 20 | Larger padding |
| 25px | 1.56rem | 18 | Slightly oversized |
| 30px | 1.88rem | 27 | Hero gaps |
| 32px | 2.00rem | 8 | Large spacing |
| 40px | 2.50rem | 4 | Section spacing |
| 48px | 3.00rem | 5 | Headline spacing |
| 50px | 3.13rem | 4 | Big CTA gaps |
| 80px | 5.00rem | 4 | Hero padding |
| 160px | 10.00rem | 5 | Max section spacing |
4.2 Layout
Bootstrap grid plus Vuetify components. Breakpoints: mobile starts below 576px, tablet ~768px, desktop ~1024px+, wide screens up to 1920px. There’s a lot of specific breakpoints — they’ve clearly tweaked for certain devices (e.g., 428px, 897px).
5. Visual Elements
Border Radius
| Value | Count | Elements |
|---|---|---|
| 1px | 8 | Span |
| 2px | 18 | Badge, buttons |
| 2.5px | 1 | Region |
| 3px | 3 | Div |
| 4px | 6 | Anchor |
| 6px | 19 | Buttons, list items |
| 8px | 56 | Divs, nav, inputs |
| 10px | 2 | Buttons |
| 16px | 3 | Div, region |
| 17px | 1 | Filter |
| 50px | 1 | Search pills |
| 100% | 2 | Images, buttons |
They use 6px and 8px a lot — soft corners without being overly round. 100% for avatars or circular buttons.
Shadows
Mostly subtle:
rgba(0, 51, 99, 0.15) 0px 1px 3px— common- A few heavier:
rgba(0,0,0,0.2) 0px 4px 8px - Rare deep drop:
rgba(0,0,0,0.5) 0px 0px 20px
They’re not flat design purists — shadows are used for tabs and cards.
Borders
Common: 1px solid #b8b8b8 for divs, inputs. Functional — not decorative.
6. Components
6.1 Buttons
Tertiary (btn btn-tertiary)
Default: transparent, text #171717, 6px radius, 1px solid #171717. Padding 0 24px.
Hover: text #2285F7, white bg, shadow 0px 4px 8px rgba(0,0,0,0.3), border #447F19.
Active: bg #75AE4C, text var(--color-grey-900).
Focus: bg #1EAEDB, text white, opacity 0.7.
Primary (btn btn-primary btn-primary--no-line btn-sm)
Default: bg #171717, text white, 6px radius.
Hover: same as tertiary hover.
Active: same as tertiary active.
Focus: same as tertiary focus.
Block Tabs (block-tabs__link active)
Default: bg #E5E6EC, text #514b5f, 8px radius, shadow rgba(0,51,99,0.15) 0px 1px 3px.
Hover: bg #1EAEDB, text white.
Focus: outline black 2px.
Block Tabs inactive (block-tabs__link)
Default: bg white, text #514b5f.
Hover: same as active hover.
Focus: same as active focus.
6.2 Links
Variants:
- Deep purple #220d4e, underline default, hover blue #3860BE no underline.
- Primary neutral #171717, no underline default.
- White #ffffff, underline 1.5px default.
- Grey variants (#71767D, #b8b8b8, #514b5f).
Hover is always blue #3860BE.
6.3 Forms
Text input (email):
Default: bg #292B2E, text white, 1px solid #46494F, 8px radius, padding 10px 20px.
Focus: bg #1EAEDB, text white, border black.
Select:
Default: same as input.
Focus: bg #F1F1F1, text #333333, border #5897FB.
Checkbox: default transparent, focus same as text input focus.
7. Design Tokens (CSS Custom Properties)
:root {
/* Colors */
--color-white: #ffffff;
--color-primary-neutral: #171717;
--color-slate: #514b5f;
--color-transparent-black-10: #000000;
--color-deep-purple: #220d4e;
--color-light-grey: #b8b8b8;
--color-charcoal: #3a3c40;
--color-charcoal-alt: #3a3d41;
--color-happy-green-2: #CFF5DF;
--color-pink-300: #FFACC2;
--color-pink-500: #FF618B;
--color-grey-200: #D2D4D7;
--color-blue-700: #1C4BAE;
--color-grey-100: #E4E5E7;
--color-grey-600: #585C63;
--color-pink-400: #FF8AA9;
--color-green-100: #E1FCF4;
--color-blue-300: #94C6FF;
--color-pink-800: #931E60;
--color-green-500: #5FCBD0;
--color-pink-900: #7A1256;
--color-grey-500: #71767D;
--color-blue-400: #569EFF;
--color-red-800: #970016;
--color-red-500: #EB4643;
--color-green-900: #124463;
--color-blue-800: #11348C;
--color-happy-green-1: #9AFFC5;
--color-pink-100: #FAE7EC;
--color-blue-100: #D7EDFE;
--color-green-600: #45A4B2;
--color-grey-800: #292B2E;
--color-pink-600: #DB467C;
--color-pink-200: #FFCCDA;
--color-green-800: #1E5D78;
--color-grey-700: #46494F;
--color-green-400: #86E2DF;
--color-blue-500: #3884F2;
--color-pink-700: #B7306E;
--color-blue-900: #0A2474;
--color-red-100: #FDDCE2;
--color-blue-600: #2866D0;
--color-green-200: #C3FAEE;
--color-grey-400: #94989F;
--color-green-300: #A2F0E7;
--color-blue-200: #BBDFFF;
--color-green-700: #2F8095;
/* Typography */
--font-primary: "Inter", sans-serif;
--font-brand: "PPFormula";
--font-open-sans: "Open Sans", sans-serif;
/* Spacing */
--space-1: 1px;
--space-1_5: 1.5px;
--space-5: 5px;
--space-6: 6px;
--space-7: 7px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-15: 15px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-25: 25px;
--space-30: 30px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-50: 50px;
--space-80: 80px;
--space-160: 160px;
/* Radius */
--radius-1: 1px;
--radius-2: 2px;
--radius-2_5: 2.5px;
--radius-3: 3px;
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-10: 10px;
--radius-16: 16px;
--radius-17: 17px;
--radius-50: 50px;
--radius-full: 100%;
/* Shadows */
--shadow-sm: rgba(0, 51, 99, 0.15) 0px 1px 3px 0px;
--shadow-md: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
}8. AI Coding Assistant Prompt
# Onelink Design System Specification
You are an Onelink design expert. Build UIs matching their visual language exactly.
## Brand Context
Onelink is part of AppsFlyer’s product suite, targeting B2B marketers and growth teams. The design language is functional, high-contrast, and minimal. Bootstrap grid + Vuetify components are used for responsive layouts. Color pops are purposeful accents.
## Color Palette
- White: #ffffff — page backgrounds, card surfaces
- Primary Neutral: #171717 — headings, body text, primary buttons
- Slate: #514b5f — secondary text
- Deep Purple: #220d4e — links, navbar brand
- Light Grey: #b8b8b8 — borders, disabled states
- Blue 500: #3884F2 — links, focus outlines
- Red 500: #EB4643 — error states
- Green 500: #5FCBD0 — success states
- Grey 800: #292B2E — dark backgrounds
[include all palette entries from section 2.2]
## Typography
- Headings: "PPFormula"
- Body/UI: "Inter", sans-serif
- Legacy/support: "Open Sans", sans-serif
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 62px | 400 | 1.30 | Hero titles |
| H2 | 48px | 400 | 1.30 | Section titles |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Caption | 14px | 400–600 | 1.60–1.71 | Labels |
## Spacing & Grid
Base: 8px grid. Common values: 6px, 8px, 12px, 16px, 24px, 32px, 48px, 80px, 160px.
## Border Radius
- sm: 2px — badges
- md: 6px — buttons
- lg: 8px — cards, inputs
- full: 100% — circular buttons
## Shadows & Depth
- Small: rgba(0, 51, 99, 0.15) 0px 1px 3px
- Medium: rgba(0,0,0,0.2) 0px 4px 8px
## Component Specifications
### Primary Button
Default: bg #171717, text #ffffff, radius 6px, padding 0 24px, border none.
Hover: bg #ffffff, text #2285F7, border #447F19, shadow md.
Focus: bg #1EAEDB, text #ffffff, opacity 0.7.
Active: bg #75AE4C, text var(--color-grey-900).
### Secondary Button
Default: transparent, text #171717, border 1px solid #171717.
Hover/Focus: same as primary hover/focus.
### Navigation Links
Default: color #220d4e, underline.
Hover: color #3860BE, no underline.
### Input Fields
Default: bg #292B2E, text #ffffff, border 1px solid #46494F, radius 8px.
Focus: bg #1EAEDB, text #ffffff, border #000000.
## Layout & Responsive Rules
Bootstrap grid. Breakpoints: <576px mobile, ~768px tablet, ~1024px desktop, up to 1920px wide.
## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus: clear outline or color change
- Hover: always change color and/or shadow
## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use PPFormula for headings
- Keep corner radii consistent
- Use shadows sparingly
## DON'T List
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows
- Use gradients
## Code Examples
```css
.btn-primary {
background: #171717;
color: #ffffff;
padding: 0 24px;
border-radius: 6px;
font-weight: 500;
font-size: 16px;
border: none;
transition: background 150ms ease;
}
.btn-primary:hover {
background: #ffffff;
color: #2285F7;
border: 1px solid #447F19;
box-shadow: rgba(0,0,0,0.3) 0px 4px 8px;
}
.input {
background: #292B2E;
color: #ffffff;
border: 1px solid #46494F;
border-radius: 8px;
padding: 10px 20px;
}
.input:focus {
background: #1EAEDB;
border: 1px solid #000000;
color: #ffffff;
}
.card {
background: #ffffff;
border-radius: 8px;
padding: 24px;
box-shadow: rgba(0,51,99,0.15) 0px 1px 3px;
}
---
## 9. Summary
**TL;DR** — Onelink’s design system is a restrained, functional toolkit. Neutral-heavy palette with targeted accent colors, Inter + PPFormula typography, 8px grid, soft radii. Buttons and inputs are clear, with hover/focus states that pop without overcomplication.
**Brand Keywords**:
- functional-minimalist
- neutral-heavy
- accent-disciplined
- enterprise-clean
- grid-consistent