Adriver Design System Deep Dive

1. Brand Overview

Adriver presents itself as a functional, straightforward, and slightly technical brand. The site gives the impression that this is a business-to-business service — probably in advertising technology — aimed at professionals who don’t need fluff but do need clarity. The aesthetic skews towards utilitarian, with a restrained palette and clean typography choices that avoid over-designed flourishes.

The vibe: “We’re here to deliver results, not to entertain you.” There’s minimal decoration. Color is used sparingly and strategically: a deep, saturated blue for primary actions, a bright green for hover accents, and otherwise a grayscale environment. This makes the UI feel controlled and serious. It’s the kind of design that assumes the user is here with a purpose — not browsing casually.

Typography reinforces this utilitarianism. PF Centro Sans Pro dominates, with Helvetica Neue stepping in for certain UI and caption contexts. There’s no attempt to be trendy — no geometric sans or playful font — just clean, readable sans-serif stacks that feel corporate but not cold.

Spacing and layout follow an 8px base grid with some oddball increments, which suggests the system grew organically. Breakpoints are exhaustive — they’ve clearly tested a lot of device widths. Borders, not shadows, provide definition. This is a flat design system where depth comes from contrast and separation lines.

If you’re designing for Adriver, you’re designing for precision: functional color coding, strict typographic hierarchy, and no gratuitous effects. It’s for users who value speed and clarity in interaction over visual richness. And because the color accents are bright against a muted base, they pop — commands are obvious, links are visible, and hover states are read instantly.

2. Color System

2.1 Primary Colors

The primary brand color is #0078d7 (RGB 0, 120, 215). It’s a vivid medium blue — bright enough to stand out, but not so saturated that it feels cartoonish. This is a common choice in tech and corporate UI because it’s associated with trust, reliability, and action. It competes directly with Microsoft’s primary blue (which is actually very close). The blue is used for links and interactive elements, sometimes default link states, and is paired with a green accent for hover.

Accent/interactive hover color: #95d600 — a sharp, acidic green. This is the “look at me” color, used for hover states on links. It’s deliberately high-contrast against both the blue and the neutral grays.

2.2 Complete Palette

Plus CSS variables from WP admin theme:

• --wp-admin-theme-color: #007cba (admin blue)
• --wp-admin-theme-color-darker-10: #006ba1
• --wp-admin-theme-color-darker-20: #005a87
• --wp-bound-block-color: #7a00df (purple, likely isolated to WP editor)

2.3 Color Relationships

The palette is almost monochrome, with two brights (blue, green) and one white. Contrast is generally excellent — #0078d7 on white passes WCAG easily, #95d600 on white also passes. The only potential accessibility issue is the use of mid-gray (#777777 or #969696) for text — these can be borderline for small text sizes against white.

Dark mode is not implemented. The system is clearly designed for light backgrounds. If a dark variant were needed, blue and green accents would survive, but grays would need lightening.

2.4 Usage Guide

• Blue (#0078d7): Use for primary links and interactive elements. Avoid using it for non-interactive decoration — keeps the action signal strong.
• Green (#95d600): Hover/focus indicator. Only use on interactive elements to avoid confusion.
• Grays: Layered use for hierarchy — darker for headings/body (#494949), lighter for secondary info (#969696), very light for borders (#d3d3d3).
• Avoid pairing green directly with red — not in palette, but would clash.
• White background is default; use black text for maximum clarity in headings.

3. Typography

3.1 Font Families

The main family is PF Centro Sans Pro — light, regular, and bold weights. This is a clean sans with slight humanist touches. Fallbacks are Calibri and Arial — safe sans-serif defaults.

Helvetica Neue appears for certain link and caption contexts, with fallbacks to Helvetica and Arial. No Google Fonts, no Adobe Fonts — this is a custom/self-hosted setup.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is handled by big jumps: 64px down to 44px, then 36px. That’s a steep scale, which makes headings stand out but could feel aggressive on small screens. Body and link text sits at 18px — slightly larger than the web default — improving readability. Captions at 14px are standard.

Line height varies widely — note the 0.67 for some headings, which is very tight and gives a blocky, compact feel. This is intentional for headlines to keep vertical space under control. Links in uppercase with tracking are rare — only one style uses it, so it’s a special-case call-to-action.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but with irregular increments.

4.2 Layout

Breakpoints are exhaustive: from 0px up to 1280px, with many in-between markers (319px, 320px, 567px, 568px, etc.). This suggests a responsive design tuned for specific devices — probably legacy support too.

5. Visual Elements

Border Radius

This is minimal rounding. The 40px on a button is clearly a pill shape. Most components are square or slightly rounded.

Shadows

No shadows. This is flat design. Depth comes from borders.

Borders

A mix of widths and colors:

• Hairline (1px) in grays (#d3d3d3, #dddddd) for inputs/buttons.
• Accent border: 3px solid #95d600 — used on links.
• Dividers: solid 1px #494949 or #333333.

6. Components

6.1 Buttons

Only one button style extracted (header-search-button):

Default:

• Background: #f8f8f8
• Text color: #b3b3b3
• Padding: 24px 45px 0px 0px (odd — top-heavy padding)
• Border radius: 0px
• Border: none
• Box shadow: none
• Font size: 18px, weight: 400

Hover:

• Background: transparent

No focus/active styles specified in extraction.

6.2 Links

Five link color variants:

1. #777777 → hover #95d600
2. #000000 → hover #95d600
3. #0078d7 → hover #95d600
4. #ffffff → hover #95d600
5. #494949 → hover #95d600

All remove underline by default and on hover.

6.3 Forms

Search input:

• Background: #f7f7f7
• Text color: #b3b3b3
• Border: none
• Padding: 1px 20px
• Radius: 0px
• Focus: default browser ring (-webkit-focus-ring-color auto 5px)

6.4 Cards

No explicit card component extracted; likely built from divs with spacing and borders.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-gray: #494949;
  --color-primary-blue: #0078d7;
  --color-black: #000000;
  --color-medium-gray: #969696;
  --color-ui-gray: #777777;
  --color-mid-gray: #888888;
  --color-accent-green: #95d600;
  --color-light-gray: #d3d3d3;
  --color-hover-gray: #5e5e5e;

  /* WP admin colors */
  --wp-admin-theme-color: #007cba;
  --wp-admin-theme-color-darker-10: #006ba1;
  --wp-admin-theme-color-darker-20: #005a87;
  --wp-bound-block-color: #7a00df;

  /* Typography */
  --font-heading-light: "pf_centro_sans_prolight", Calibri, Arial;
  --font-heading-bold: "pf_centro_sans_probold", Calibri, Arial;
  --font-heading-regular: "pf_centro_sans_proregular", Calibri, Arial;
  --font-helvetica-neue: "Helvetica Neue", Helvetica, Arial;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-17: 17px;
  --space-19: 19px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-31: 31px;
  --space-37: 37px;
  --space-40: 40px;
  --space-70: 70px;
  --space-82: 82px;
  --space-100: 100px;
  --space-110: 110px;
  --space-115: 115px;

  /* Border radius */
  --radius-1: 1px;
  --radius-4: 4px;
  --radius-40: 40px;
}

8. AI Coding Assistant Prompt

# Adriver Design System Specification

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

## Brand Context
Adriver's design is functional, minimal, and professional. Color is used strategically — blue for primary actions, green for hover accents, and grays for structure. Typography is clean sans-serif with tight heading line-heights. Flat design — no shadows, depth from borders.

## Color Palette
- White: #ffffff — Page backgrounds, text in inverse contexts
- Dark Gray: #494949 — Body text, dividers
- Primary Blue: #0078d7 — Links, primary actions
- Black: #000000 — Headings, emphasis
- Medium Gray: #969696 — Secondary text
- UI Gray: #777777 — Navbar links, inactive states
- Mid Gray: #888888 — Neutral UI elements
- Accent Green: #95d600 — Hover states, highlights
- Light Gray: #d3d3d3 — Borders
- Hover Gray: #5e5e5e — Hover/focus text
- WP Admin Blue: #007cba — Admin UI
- WP Admin Blue Darker 10: #006ba1 — Admin UI hover
- WP Admin Blue Darker 20: #005a87 — Admin UI active
- WP Bound Block Purple: #7a00df — Editor block highlight

## Typography
Fonts:
- Headings: "pf_centro_sans_prolight", Calibri, Arial
- Headings Bold: "pf_centro_sans_probold", Calibri, Arial
- Headings Regular: "pf_centro_sans_proregular", Calibri, Arial
- UI/Links/Captions: "Helvetica Neue", Helvetica, Arial

Sizes:
| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 Light | 64px | 400 | 1.23 | Page titles |
| H1 Bold | 44px | 400 | 1.14 | Section titles |
| H1 Reg | 36px | 400 | 0.67 | Subtitles |
| Link Reg | 36px | 400 | 0.67 | Large link |
| H1 Reg | 20px | 400 | 1.60 | Subhead |
| Link Helv | 18px | 400 | 1.11 | Navigation |
| Link Reg | 18px | 400 | 1.33 | Body link |
| H1 Reg | 18px | 400 | 1.33 | Body heading |
| Caption Helv | 14px | 400 | 1.43 | Caption text |
| Link Bold | 14px | 400 | 1.57 | Uppercase CTA |
| Link Reg | 14px | 400 | 1.29 | Small link |
| Link Helv | 14px | 400 | 1.43 | Small nav |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 4px, 5px, 8px, 9px, 12px, 17px, 19px, 20px, 24px, 30px, 31px, 37px, 40px, 70px, 82px, 100px, 110px, 115px
Map:
- Button padding: 19px horizontal
- Card padding: 30px
- Section gaps: 40px–70px

## Border Radius
- None: 0px — default
- xs: 1px — spans
- sm: 4px — buttons
- pill: 40px — pill buttons

## Shadows & Depth
Flat design — use borders for separation, no shadows.

## Component Specifications

### Primary Button
Default:
- background: #f8f8f8
- color: #b3b3b3
- padding: 24px 45px 0px 0px
- border-radius: 0px
- border: none
- font-size: 18px
Hover:
- background: transparent

### Links
- Color options: #777777, #000000, #0078d7, #ffffff, #494949
- Hover: #95d600
- No underline

### Input Fields
Default:
- background: #f7f7f7
- color: #b3b3b3
- border: none
- padding: 1px 20px
Focus:
- outline: -webkit-focus-ring-color auto 5px

## Layout & Responsive Rules
Breakpoints: 0px, 319px, 320px, 567px, 568px, 600px, 767px, 768px, 770px, 771px, 1023px, 1024px, 1279px, 1280px

## Interaction Rules
- Transition: 150ms ease for state changes
- Hover color change for links
- Focus outline for inputs

## DO
- Use only palette colors
- Stick to 8px grid or listed spacing values
- Use PF Centro Sans Pro for headings, Helvetica Neue for captions/UI
- Keep buttons flat — no shadows
- Maintain hover green for interactive elements

## DON'T
- Invent new colors
- Mix rounded and sharp corners without purpose
- Use shadows for depth
- Reduce contrast on primary actions

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #f8f8f8;
  color: #b3b3b3;
  padding: 24px 45px 0 0;
  border-radius: 0;
  border: none;
  font-size: 18px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: transparent;
}
```

### Link
```css
a.nav-link {
  color: #0078d7;
  text-decoration: none;
}
a.nav-link:hover {
  color: #95d600;
}
```

### Input
```css
.input-search {
  background: #f7f7f7;
  color: #b3b3b3;
  border: none;
  padding: 1px 20px;
}
.input-search:focus {
  outline: -webkit-focus-ring-color auto 5px;
}
```

9. Summary

TL;DR: Adriver’s design system is flat, functional, and minimal. Two brights (blue and green) drive interaction, grays structure the content, and typography is clean sans-serif with tight spacing. It’s built on an 8px grid but with some irregular increments, and it uses borders instead of shadows for depth.

Brand Keywords:

• utilitarian-flat
• corporate-minimal
• action-color-coded
• typography-disciplined