Ad-delivery Brand Design System Deep Dive

1. Brand Overview

Ad-delivery’s design gives off the kind of stripped-down utilitarian vibe you see in services that care more about the backend doing its job than about dazzling the frontend. Landing on ad-delivery.net feels a bit like opening an old tool that never needed a refresh because it still works — typography defaults, minimal layout adjustments, almost no branding color work. There’s no logo embedded in the site data, only a bare favicon.ico. That already tells you how stripped this is — a favicon is the most minimal identity possible.

They’re likely operating in an environment where the audience is technical: advertisers, publishers, maybe programmatic ad buyers. These people care about data feeds and performance, not whimsical gradients. In that mindset, the visual design takes a back seat. Borderless defaults, system-like typography, flat rendering. It’s an anti-brand in a sense — the absence of embellishment is the aesthetic.

Philosophically, it’s “function-first, branding-second.” No obvious color tokens. No heavy visual hierarchy beyond typography size changes. That might be intentional to keep cognitive load low: fewer distractions, more focus on the data or controls. On the flip side, it removes almost all emotional cues, making the interface purely mechanical. This works if your users already trust the tool’s capability, but it’s cold to newcomers.

What’s interesting is the complete absence of modern UI tropes — no shadows, no rounded corners, no vibrant CTA buttons. The only explicit style beyond defaults is a thin bottom border (0px 0px 2px solid rgb(0,0,0)) applied to a div. That one line could be dividing a navigation bar or separating sections, acting as the only depth cue.

It’s not responsive in a modern sense; no breakpoints detected. This suggests fixed-width layouts or simple fluidity with no mobile optimization code in place (at least not through CSS media queries). That decision either reflects a niche user base (desktop-first ad management) or a very barebones front-end template.

In short: Ad-delivery’s design system is almost non-existent, intentionally or not. But even this spartan aesthetic is a form of system: a small set of spacing values, two font contexts, one border style, and the rest handled by browser defaults.

2. Color System

This will be short because there are no declared palette tokens in the extracted data. The semantic colors object and palette array are empty; no CSS custom properties for colors. The only color value we see is:

• Black: rgb(0,0,0) used for a 2px solid bottom border on a div.

That’s literally the only explicit color.

2.1 Primary Colors

There is no defined primary brand color. The only hint at intentional use is that black border. If it’s being used as a divider, black works for maximum contrast against a light background. It’s a safe, utilitarian decision. Psychologically, pure black signals authority, seriousness, minimalism. In an ad-tech context, it says “we’re here to show you data, not entertain you.”

Compared to competitors (Google Ads, Facebook Ads Manager), this is extremely bare. Others use blues for trust, greens for action. Ad-delivery uses nothing.

2.2 Complete Palette

That’s the entire palette.

2.3 Color Relationships

One color means no relationships to analyze. Contrast is 100% with white backgrounds. Accessibility is trivially compliant — black text or borders on white passes AAA contrast.

2.4 Usage Guide

Combinations are irrelevant here — there aren’t multiple colors to combine. The rule is: black for borders/dividers; everything else uses browser defaults (typically black text on white backgrounds). If they introduce more colors later, the first step should be ensuring high contrast and defining roles (primary, secondary, background, etc.).

Avoid introducing arbitrary web colors unless tied to a clear functional role. Right now, the lack of palette makes consistency easy (everything is monochrome), but if you start adding accents, you’ll need strict guidelines.

3. Typography

Typography is the only area with multiple explicit values in Ad-delivery’s extracted design data.

3.1 Font Families

Two contexts:

1. Heading 1

   • Family: Times
   • Weight: 400
   • Source: Neither Google nor Adobe Fonts; system serif font
   • Fallbacks: not declared, but browser defaults would fall back to Times New Roman or another local serif.

2. Caption

   • Family: monospace
   • Weight: 400
   • Source: System default monospace
   • Fallbacks: None declared.

No variable font usage. Both fonts are generic, rendering differently depending on platform and installed typefaces.

3.2 Type Scale

Surprising point: Heading 1 is just 16px — exactly default browser body size. They didn’t bump it up for hierarchy. H1 is visually similar to body text unless accompanied by other styling (spacing, borders, boldness). This flattens hierarchy significantly.

Caption drops to 13px monospace. Monospaced text is often used for data, code, IDs — fits an ad-tech vibe. The 3px drop in size signals secondary information.

3.3 Hierarchy

Hierarchy is practically nonexistent in pure size terms. The only clear cue is font family change. Times for headings might feel more “formal.” Monospace for captions makes them feel utilitarian or technical. Readability is okay, but 16px serif as a heading is unusual — serif headings can carry a more editorial tone, but at small sizes they don’t command much attention.

4. Spacing & Layout

4.1 Spacing Scale

Extracted spacing values (custom scale):

There’s no base 4px/8px system. This is literally three values, non-multiples of each other except 10px doubling 5px. 13px is an oddball. More likely manually set for alignment around font sizes.

4.2 Layout

No breakpoints detected. No container width variables. This suggests fixed or auto-width:

• Possibly minimal CSS, relying on browser defaults.
• No defined responsive rules.

5. Visual Elements

• Border Radius: None. Data shows no radius values. Corners are square everywhere.
• Shadows: None. Absolutely flat rendering.
• Borders: One combination: bottom border, 2px solid black, applied to a div. No top, left, right borders.

It’s the most stripped-down depth system possible: one kind of border for division, no softening via radius, no shadows.

6. Components

From extracted data: no button styles, no input styles, no link overrides. This leaves us with:

• Buttons: Likely default HTML buttons.
• Links: Default blue/unvisited, purple/visited — whatever browser provides.
• Forms: Inputs have browser default styles.
• Cards: Not a concept here — no component-specific styles.

This is a case of “the component library is the browser itself.”

7. Design Tokens

Based only on extracted values:

:root {
  /* Colors */
  --color-black: #000000; /* divider */

  /* Typography */
  --font-heading-1-family: "Times";
  --font-heading-1-size: 16px;
  --font-heading-1-weight: 400;
  --font-caption-family: monospace;
  --font-caption-size: 13px;
  --font-caption-weight: 400;

  /* Spacing */
  --space-5: 5px;
  --space-10: 10px;
  --space-13: 13px;

  /* Borders */
  --border-divider-width: 2px;
  --border-divider-style: solid;
  --border-divider-color: var(--color-black);

  /* Border Radius */
  --radius-none: 0;
}

8. AI Coding Assistant Prompt

# Ad-delivery Design System Specification

This design system is based on Ad-delivery’s official website. Minimal values, minimal styling — extracted from the production site.

## System Prompt
You are an Ad-delivery design expert. Build UIs matching their visual language exactly.

## Brand Context
Ad-delivery uses a stripped-down, functional aesthetic. No brand colors beyond black, no custom components, two system fonts. Layout and styling are minimal, relying mostly on browser defaults. Square corners, flat interfaces, and tight spacing dominate.

## Color Palette
- Black: #000000 — dividers (2px solid bottom border), text defaults from browser

### Color Rules
- Black border only for dividers/separators.
- No other colors; text colors use browser default.

## Typography
- Heading-1: "Times", serif
  - Size: 16px
  - Weight: 400
- Caption: monospace
  - Size: 13px
  - Weight: 400

| Level      | Size  | Weight | Line Height | Use For |
|------------|-------|--------|-------------|---------|
| Heading-1  | 16px  | 400    | default     | Section headings |
| Caption    | 13px  | 400    | default     | Metadata, code, IDs |

## Spacing & Grid
Base: No defined grid; custom values only.
Scale: 5px, 10px, 13px
Use:
- 5px: tight gaps inside elements
- 10px: padding blocks, medium spacing
- 13px: alignment with font sizes

## Border Radius
- None: 0px — all elements

## Shadows & Depth
Flat design: no shadows. Depth given by black dividers.

## Component Specifications

### Primary Button
Use browser default button styles.  
Only modify spacing if needed with 5px or 10px padding.  
Border radius: 0px.

### Navigation Links
Browser defaults. No hover overrides.

### Input Fields
Browser defaults. Squared corners.

### Cards
No card component. Use dividers if needed for separation.

## Layout & Responsive Rules
No breakpoints. Rely on natural HTML flow.

## Interaction Rules
No transitions or animations. State changes are immediate.

## DO List
- Use only black for dividers.
- Keep corners square (0px radius).
- Use system fonts: Times for H1, monospace for captions.
- Maintain extracted spacing values only.
- Rely on browser defaults for most components.

## DON'T List
- Don’t introduce shadows.
- Don’t add border radius.
- Don’t use colors outside #000000 for borders.
- Don’t change font families outside specified contexts.

## Code Examples

### Divider
```css
.divider {
  border-bottom: 2px solid #000000;
}
```

### Heading 1
```css
h1 {
  font-family: Times, serif;
  font-size: 16px;
  font-weight: 400;
}
```

### Caption
```css
.caption {
  font-family: monospace;
  font-size: 13px;
  font-weight: 400;
}
```

9. Summary

TL;DR — Ad-delivery’s design system is extreme minimalism: browser defaults, one border style, two fonts, and no palette. Functional, cold, and unbranded — ideal for users who want pure utility.

Brand Keywords:

• function-first
• anti-brand
• monochrome-utilitarian
• desktop-centric
• code-friendly