Aboutads (YourAdChoices) Design System Deep Dive

1. Brand Overview

Aboutads (YourAdChoices) is not selling sneakers or SaaS. It’s a trust brand. Their entire digital identity is aimed at explaining, in plain terms, how online advertising works and how people can control their ad experience. That mission bleeds into the design choices: clean, functional, and slightly institutional. This is a brand that needs to reassure, not excite.

The site feels like it’s built for two audiences at once: the average internet user who lands here from an “AdChoices” icon in an ad, and industry folks who know what the DAA (Digital Advertising Alliance) is. That tension produces a visual style that’s both approachable and authoritative. They’ve gone for simplicity, but not minimalism for art’s sake — minimalism for clarity.

The palette is crisp: a bright cyan (#00aecd) as the primary accent, lots of white space, neutral greys for text, and a small set of secondary accent colors (green, orange, red) that feel almost like functional highlights. Typography is straightforward: Google’s Lato and Droid Sans, with old-school Verdana/Arial in some spots — a mix that says “we care about readability across devices, even outdated ones.”

Buttons are chunky, with comfortable radii (10px–11px) and high-contrast borders. Borders are used for structure instead of shadows — this is a flat design system. There’s no reliance on drop shadows to create hierarchy; instead, spacing and color do the heavy lifting.

Spacing is mostly on an 8px grid with a few oddball values (1.98px, 5.94px) that look like legacy or one-off adjustments. That’s telling: this isn’t a purely atomic design system — there are some hand-tuned spots.

Overall, the design philosophy is:
Clarity first. Accessibility in mind. No visual fluff unless it has a functional purpose. The visual language is generic enough to work for an informational site but distinct enough (thanks to the cyan) to be remembered.

2. Color System

2.1 Primary Colors

The hero here is #00aecd (rgb(0, 174, 205)). This is used for CTAs, accent links, and key interaction points. It’s a bright, saturated cyan that pops on white without feeling aggressive. It’s technical but friendly — a good fit for a brand that wants to appear both competent and approachable.

Compared to competitors in privacy and ad transparency (who often lean on blues, e.g., #0074d9), this shade leans greener, which subtly sets it apart. Blue says “corporate trust”; cyan says “modern, transparent, fresh.”

2.2 Complete Palette

2.3 Color Relationships

White (#ffffff) dominates as a background and text color on cyan. The primary cyan (#00aecd) against white yields a contrast ratio around 2.1:1 — insufficient for WCAG AA text contrast if used for body text, which is why it’s mostly used for larger text or as a background with white text over it.

Dark gray (#333333) and almost black (#222222) on white are safe — high contrast, easy to read. White on cyan is also safe — high contrast ratio (~5.3:1), meeting AA and AAA for large text.

There’s no dedicated dark mode. The palette is clearly built for light backgrounds, with white as the base.

2.4 Usage Guide

What works:

• Cyan (#00aecd) as the background for buttons with white text — crisp, modern, and accessible.
• Dark gray text (#333333) on white for long-form content — readable and neutral.
• Small accent pops from green, orange, and red sparingly — keeps them meaningful.

What to avoid:

• Cyan as small body text on white — fails contrast.
• Using multiple accents together — green, red, and orange together would start to feel like a traffic light.
• Borders in low-contrast colors — stick to #00aecd or #dddddd for delineation.

3. Typography

3.1 Font Families

They’re using a mix:

• Lato (Google Fonts) — modern, clean sans-serif, used for links, body text, captions.
• Droid Sans (Google Fonts) — slightly more mechanical and neutral, used for headings.
• Verdana, Arial — fallback system fonts for headings and buttons in certain contexts.

No Adobe Fonts or variable fonts. This is a pragmatic stack — free, web-safe, widely supported.

3.2 Type Scale

3.3 Hierarchy

The large jumps from 50px to 44px to 28px for headings give flexibility for hero vs secondary headings. The use of Verdana/Arial at ~20px bold for certain headings/buttons is interesting — it’s a throwback to pre-webfont days and ensures maximum legibility in system UI contexts.

Body and link sizes range from 14px–20px, with generous line heights (1.5) for readability. The 1.0 line height on some links is tight — likely for navigation menus.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px scale, but with some irregular values.

4.2 Layout

No explicit breakpoints in the data — likely a responsive approach based on fluid widths. The spacing scale supports both tight UI (1–5px) and large page sections (70px+).

5. Visual Elements

Border Radius:

• 0px (bottom corners only) — rare
• 4px — dialogs, modals, buttons
• 5px (full or left corners only) — buttons, images, sections
• 10px — buttons, divs
• 11px — buttons

They’re not afraid to mix 5px, 10px, and 11px — a little inconsistent.

Shadows: None. Flat design.

Borders:

• 2px solid white — buttons on dark backgrounds
• 2px solid cyan — divs
• 1px solid light blue (#8bd0e9) — buttons
• 1px solid gray (#aaaaaa) — dialogs/modals
• 1px solid light gray (#dddddd) — buttons
• 1px solid black — sections

Borders are functional, not decorative.

6. Components

6.1 Buttons

Primary (choices-button):

• Default: background #00aecd, text white, border 1px solid #8bd0e9, radius 10px.
• Font: 18px, weight 400.
• No hover/focus styles captured — likely minimal state change.

Secondary (learn-button faq-button1):

• Transparent background, text white, border 2px solid white, radius 5px, padding 5px 10px.
• Font: 18px, weight 400.

6.2 Links

Three styles:

1. White text, underline.
2. Dark gray (#333333), no underline.
3. Cyan (#00aecd), no underline.

Hover states not captured — likely simple underline toggles.

6.3 Forms

No input styles in data — possibly default browser styles or minimal customization.

6.4 Cards

No explicit card component in data — likely sections with borders/radii.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-gray: #333333;
  --color-almost-black: #222222;
  --color-primary-cyan: #00aecd;
  --color-light-green: #8fb163;
  --color-bright-red: #f15a40;
  --color-black: #000000;
  --color-warm-orange: #faa74a;
  --color-light-blue-border: #8bd0e9;
  --color-gray-border: #aaaaaa;
  --color-light-gray-border: #dddddd;

  /* Typography */
  --font-lato: 'Lato', sans-serif;
  --font-droid-sans: 'Droid Sans', sans-serif;
  --font-verdana: Verdana, Arial, sans-serif;
  --font-arial: Arial, sans-serif;

  /* Font Sizes */
  --font-size-h1-lg: 50px;
  --font-size-h1-md: 44px;
  --font-size-h1-sm: 28px;
  --font-size-lg: 20px;
  --font-size-md: 18px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;

  /* Line Heights */
  --line-height-tight: 1.0;
  --line-height-normal: 1.2;
  --line-height-loose: 1.5;

  /* Spacing */
  --space-1: 1px;
  --space-1-98: 1.98px;
  --space-2: 2px;
  --space-3-96: 3.96px;
  --space-4: 4px;
  --space-5: 5px;
  --space-5-94: 5.94px;
  --space-6: 6px;
  --space-7: 7px;
  --space-9-9: 9.9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-70: 70px;
  --space-75: 75px;
  --space-85: 85px;
  --space-105: 105px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-lg-plus: 11px;
}

8. AI Coding Assistant Prompt

# Aboutads (YourAdChoices) Design System Specification

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

## Brand Context
Aboutads is a trust-focused informational brand explaining online advertising choices. The design is clean, flat, and functional — accessibility and clarity are priorities. Primary cyan accents guide the eye without overwhelming.

## Color Palette
- White: #ffffff — page background, text on dark
- Dark Gray: #333333 — body text, headings on light
- Almost Black: #222222 — dialog title bars
- Primary Cyan: #00aecd — CTAs, primary buttons, accent links, borders
- Light Green: #8fb163 — success/highlight states
- Bright Red: #f15a40 — error/warning states
- Black: #000000 — section borders, rare text
- Warm Orange: #faa74a — informational accents
- Light Blue Border: #8bd0e9 — button borders
- Gray Border: #aaaaaa — dialog/modal borders
- Light Gray Border: #dddddd — button borders

## Typography
- Headings: 'Droid Sans', sans-serif
- Body/Links: 'Lato', sans-serif
- Buttons/System UI: Verdana, Arial, sans-serif

| Level        | Size   | Weight | Line Height | Use For |
|--------------|--------|--------|-------------|---------|
| H1 Large     | 50px   | 400    | 1.20        | Hero titles |
| H1 Medium    | 44px   | 400    | 1.50        | Section titles |
| H1 Small     | 28px   | 400    | 1.50        | Subheadings |
| Heading Bold | 19.8px | 700    | 1.50        | UI headings |
| Link Large   | 20px   | 400    | 1.00        | Navigation links |
| Link Medium  | 18px   | 400/900| 1.50        | Body links |
| Link Small   | 14px   | 400/900| 1.50        | Footer links |
| Caption      | 12-14px| 400    | 1.50        | Small text |
| Button Large | 19.8px | 700    | 1.50        | CTA buttons |
| Button Small | 12px   | 700    | 1.20        | Small buttons |

## Spacing & Grid
Base: 8px scale with some irregular values.
Scale: 1px, 1.98px, 2px, 3.96px, 4px, 5px, 5.94px, 6px, 7px, 9.9px, 10px, 12px, 13px, 20px, 30px, 40px, 70px, 75px, 85px, 105px.
Use multiples of 8px where possible; odd values are for fine-tuning.

## Border Radius
- none: 0 — sharp edges
- sm: 4px — dialogs, modals, small buttons
- md: 5px — inputs, images
- lg: 10px — buttons, cards
- lg-plus: 11px — buttons

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

## Component Specifications

### Primary Button (.choices-button)
Default:
- Background: #00aecd
- Text: #ffffff
- Border: 1px solid #8bd0e9
- Radius: 10px
- Font: 18px Lato, weight 400
- Padding: 0
- No shadow
States:
- Hover: [no data — maintain background]
- Focus: outline none
- Disabled: opacity 0.5

### Secondary Button (.learn-button, .faq-button1)
Default:
- Background: transparent
- Text: #ffffff
- Border: 2px solid #ffffff
- Radius: 5px
- Padding: 5px 10px
- Font: 18px Lato, weight 400

### Links
- White links: underline
- Dark gray links: no underline
- Cyan links: no underline
Hover: match brand underline behavior.

### Inputs
No custom styles provided — default browser or minimal.

### Cards
Use white background, border radius 5–10px, borders in #dddddd or #8bd0e9.

## Layout & Responsive Rules
- Max content width: fluid, no fixed value in data
- Page padding: use 20px–40px on desktop, 10px–20px on mobile
- Grid gap: multiples of 8px

## Interaction Rules
- Transition: 150ms ease for interactive elements
- Focus: visible focus ring for accessibility
- No motion for decorative purposes

## DO
- Use only palette colors
- Keep 8px grid
- Use Lato for body, Droid Sans for headings
- Use borders instead of shadows
- Keep text contrast WCAG-compliant

## DON'T
- Add drop shadows
- Mix sharp and rounded corners in the same component
- Use cyan for small body text on white
- Introduce new accent colors

## Code Examples

### Primary Button
```css
.choices-button {
  background: #00aecd;
  color: #ffffff;
  border: 1px solid #8bd0e9;
  border-radius: 10px;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  padding: 0;
}
.choices-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Secondary Button
```css
.learn-button {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  padding: 5px 10px;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #dddddd;
  padding: 20px;
}
```

9. Summary

TL;DR: Aboutads uses a flat, functional design with cyan as the star accent, plenty of white space, and typography that prioritizes readability over style. Borders replace shadows, and spacing is mostly on an 8px grid with a few quirks.

Brand Keywords:

• clarity-first
• flat-functional
• trust-oriented
• accessible-minimal
• cyan-accent