Zemanta Design System Deep Dive

1. Brand Overview

Zemanta’s site feels like it knows exactly who it’s talking to: media buyers, marketers, and ad tech pros who care about clarity, conversion, and efficiency. The design language is not trying to woo you with slick gradients or aspirational imagery—it’s built for people who want to get stuff done. The vibe is professional but approachable.

The first thing you notice is the confident orange (#ee6513 / #ed6622) — a warm, saturated tone that’s both friendly and assertive. This orange isn’t shy. It’s on buttons, links, accents. It says “click me” without being obnoxious. Against a deep neutral (#333f48), it pops hard. That’s the core brand contrast: bright, warm accent over cool, dark background.

Typography is clean and modern. They’re using Sofia Pro (via Adobe Fonts) for headings and UI labels, paired with Open Sans for body text and some functional elements. Sofia Pro’s geometric shape makes headings feel precise; Open Sans keeps body copy readable at small sizes. This mix works because it balances personality with legibility.

Spacing is disciplined. The system rides an 8px grid, but they’re not afraid to drop in odd values like 11.2px or 29.6875px when needed. That tells you they’re not bound to “perfect” scales—they’ll tweak for optical balance.

Borders are mostly subtle, with 2px solid orange for CTAs, 1px greys for dividers. Shadows are minimal and low-opacity — depth is hinted, not screamed. Interactive components have hover states that sometimes scale (like the secondary button), sometimes fade. Motion is restrained.

Overall, Zemanta’s design philosophy: Clear hierarchy, bold accent color, minimal ornamentation, functional elegance. It’s a design system tuned for dashboards, data tables, and action-heavy interfaces — not lifestyle content. That’s smart for a DSP brand.

2. Color System

2.1 Primary Colors

The main brand color is orange, in two close variants: #ee6513 (rgb(238,101,19)) and #ed6622 (rgb(237,102,34)). These are saturated, high-energy hues. Orange, psychologically, signals optimism, action, and warmth. In ad tech, it’s less common than blue — differentiating Zemanta from the sea of “trustworthy” blues used by competitors like The Trade Desk or Google Ads. Orange here says “move fast, we’re approachable” rather than “we’re conservative and corporate.”

Primary background is white (#ffffff), which keeps the palette feeling open and uncluttered.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong between orange (#ee6513) and dark neutral (#333f48). White (#ffffff) keeps everything anchored. Accessibility-wise, orange on white passes WCAG AA for large text, but smaller text should be bold for readability. Dark neutral text on white is safe. Orange text on dark backgrounds is high-contrast.

No explicit dark mode palette here. The deep blues (#151e41, #27455c) could form a foundation if they ever go that route.

2.4 Usage Guide

• Orange works best for interactive elements: buttons, links. Avoid using it for large background areas — it’s too intense.
• Pair orange with white for CTAs; with dark neutral for emphasis.
• Use #333f48 for heavy text, #5e6770 for secondary labels.
• Avoid mixing the two oranges unless you’re controlling context — they’re close enough to feel inconsistent if used side-by-side.
• Keep background mostly white; dark sections should be deep blue or dark neutral.

3. Typography

3.1 Font Families

• Sofia Pro — Geometric sans-serif. Used for headings, links, buttons, captions.
• Open Sans — Humanist sans-serif. Used for body copy, some headings, buttons.
• Sources: Adobe Fonts integration (no Google Fonts here).

Fallbacks are minimal: some buttons have arial or calibri, Arial.

3.2 Type Scale

3.3 Hierarchy

H1 at 65px/900 weight is huge and commanding — probably for hero titles. The mix of Sofia Pro and Open Sans at headline level is unusual; it’s likely context-driven (marketing vs UI screens). Smaller headings often drop to 16px — which is basically body size — meaning hierarchy relies on weight and font rather than size alone.

Links often get 20px Sofia Pro — big enough to signal importance. Captions run at ~13px, Open Sans for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base unit appears to be 8px, but usage includes non-multiples for optical tweaks.

4.2 Layout

Breakpoints are numerous: from 400px up to 1350px. They’re clearly tuning for many device widths, not just standard mobile/tablet/desktop. Max content widths aren’t specified, but given a 1350px breakpoint, desktop layouts likely cap around that.

Responsive approach: small adjustments at narrow widths (400–600px), larger shifts around 768px (tablet) and 980–1100px (desktop).

5. Visual Elements

Border radius: Small radii dominate (1px, 2px). This keeps buttons and inputs feeling crisp. Exceptions: 100px for pill-like buttons, 50px for rounded search fields, 20px for some spans.

Shadows: Minimal, low-contrast. Examples: rgba(0,0,0,0.2) 0px 4px 8px, rgba(0,0,0,0.1) 0px 2px 5px. Depth is subtle.

Borders: Functional — 2px orange for CTAs, 1px greys for dividers. No decorative borders.

6. Components

6.1 Buttons

Variant 1 (Neutral text button)
Default: white background, #333f48 text, no padding, no border radius, no border.
Hover/Focus: not defined (probably minimal change).
Font: 16px, 500 weight.

Variant 2 (Outlined orange CTA)
Default: transparent background, #ed6622 text, padding 6px 20px, 3px radius, 2px solid #ed6622 border.
Hover: scale(1.1), removes border, keeps color.
Active: opacity 0.85, no border.
Focus: grey background, grey text, no border.

Variant 3 (Solid orange small button)
Default: #ee6513 background, white text, padding 12px 10px, 2px radius, 1px solid #ee6513.
Hover: no background, white text, transform translate(0.5em, -50%).
Active: opacity 0.85.
Focus: no background, white text.

6.2 Links

Three styles:

1. Orange (#ed6622), no underline. Hover: white.
2. Deep blue (#151e41), no underline. Hover: white.
3. Orange (#ee6513), underline. Hover: white, no underline.

6.3 Forms

No text inputs defined in data. Likely standard borders (1px grey) with small radius.

6.4 Cards

Shadows suggest some card use, but specifics aren’t in data.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-dark-neutral: #333f48;
  --color-medium-neutral: #5e6770;
  --color-orange-1: #ee6513;
  --color-orange-2: #ed6622;
  --color-dark-grey: #555555;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-deep-blue: #151e41;
  --color-light-grey: #d8d8d8;
  --color-navy: #27455c;
  --color-blue: #3860be;
  --color-mid-grey: #767676;
  --color-charcoal: #333333;
  --color-mid-grey-2: #888888;

  /* Typography */
  --font-heading: "sofia-pro", sans-serif;
  --font-body: "Open Sans", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-6: 6px;
  --space-10: 10px;
  --space-11_2: 11.2px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-19: 19px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-29_6875: 29.6875px;
  --space-31: 31px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-61: 61px;
  --space-96: 96px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-3: 3px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-100: 100px;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.2) 0px 4px 8px 0px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 2px 5px 0px;
  --shadow-lg: rgba(0,0,0,0.2) 0px 0px 18px 0px;
  --shadow-grey: rgb(153,153,153) 0px 2px 10px -3px;
  --shadow-inset-1: rgb(199,197,199) -3px -3px 5px -2px;
  --shadow-inset-2: rgb(199,197,199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Zemanta Design System Specification

You are a Zemanta design expert. Build UIs matching their visual language exactly.

## Brand Context
Zemanta’s design is clean, professional, and action-oriented. Bold orange accents over dark neutrals signal urgency and friendliness. Typography mixes geometric Sofia Pro for headings with functional Open Sans for body, keeping interfaces readable and sharp.

## Color Palette
- Dark Neutral: #333f48 — headers, body text
- Medium Neutral: #5e6770 — secondary text
- Brand Orange 1: #ee6513 — primary buttons, accents
- Brand Orange 2: #ed6622 — outlined buttons, links
- Dark Grey: #555555 — icons, close buttons
- Black: #000000 — rare high-contrast text
- White: #ffffff — backgrounds, text on dark
- Deep Blue: #151e41 — navigation links
- Light Grey: #d8d8d8 — dividers
- Navy: #27455c — section backgrounds
- Blue: #3860be — rare accents
- Mid Grey: #767676 — secondary text
- Charcoal: #333333 — hover/focus text
- Mid Grey 2: #888888 — hover/focus text

## Typography
Font families:
- Headings/UI: "sofia-pro", sans-serif
- Body: "Open Sans", sans-serif

Type sizes:
| Level | Font | Size | Weight | Line Height | Use |
| H1 Hero | Sofia Pro | 65px | 900 | 1.00 | Page titles |
| H1 Hero Alt | Open Sans | 42px | 500 | 0.65 | Marketing headings |
| H2 | Sofia Pro | 30px | 900 | 1.00 | Section headers |
| Body Lg | Open Sans | 24px | 400 | — | Paragraphs |
| Link Lg | Sofia Pro | 20px | 500 | 1.70 | Navigation links |
| Body | Open Sans | 16px | 500 | 1.44 | Standard text |
... (include all extracted sizes as above)

## Spacing & Grid
Base: 8px. Scale includes 1px, 2px, 5px, 6px, 10px, 11.2px, 12px, 15px, 16px, 19px, 20px, 24px, 25px, 29.6875px, 31px, 40px, 50px, 60px, 61px, 96px.

## Border Radius
- xs: 1px — spans
- sm: 2px — buttons, inputs
- sm-alt: 2.5px — regions
- md: 3px — buttons/divs
- lg: 17px — filters
- xl: 20px — spans
- full: 50px — search fields
- pill: 100px — pill buttons

## Shadows & Depth
Subtle shadows:
- rgba(0,0,0,0.2) 0px 4px 8px
- rgba(0,0,0,0.1) 0px 2px 5px
- rgba(0,0,0,0.2) 0px 0px 18px
- rgb(153,153,153) 0px 2px 10px -3px
- Inset: rgb(199,197,199) -3px -3px 5px -2px
- Inset: rgb(199,197,199) 0px 0px 12px 2px

## Component Specifications

### Primary Button (Solid Orange)
Default:
- background: #ee6513
- color: #ffffff
- padding: 12px 10px
- border-radius: 2px
- border: 1px solid #ee6513
- font-size: 11.382px
- font-weight: 600
Hover:
- background: none
- color: #ffffff
- border: none
Active:
- opacity: 0.85
Focus:
- background: none
- color: #ffffff
- outline: none

### Secondary Button (Outlined Orange)
Default:
- background: transparent
- color: #ed6622
- padding: 6px 20px
- border-radius: 3px
- border: 2px solid #ed6622
Hover:
- transform: scale(1.1)
- border: none
Active:
- opacity: 0.85
Focus:
- background: #dddddd
- color: #444444

### Link Styles
1. Orange, no underline — hover white
2. Deep Blue, no underline — hover white
3. Orange, underline — hover white, no underline

## Layout & Responsive Rules
- Breakpoints: 400, 425, 426, 476, 479, 500, 530, 550, 576, 600, 767, 768, 781, 782, 896, 980, 981, 1100, 1350px

## Interaction Rules
- Hover scale on secondary buttons
- Opacity changes on active states
- Minimal transitions (~150ms ease)

## DO
- Use only palette colors
- Maintain 8px grid
- Use Sofia Pro for headings, Open Sans for body
- Keep borders subtle
- Use small radii unless pill style is intended

## DON'T
- Invent new oranges
- Mix rounded and square corners
- Overuse shadows
- Use gradients

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ee6513;
  color: #fff;
  padding: 12px 10px;
  border-radius: 2px;
  border: 1px solid #ee6513;
  font-size: 11.382px;
  font-weight: 600;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: none;
  color: #fff;
  border: none;
}
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #ed6622;
  padding: 6px 20px;
  border-radius: 3px;
  border: 2px solid #ed6622;
  transition: transform 150ms ease;
}
.btn-secondary:hover {
  transform: scale(1.1);
  border: none;
}
```

Link:
```css
.link-orange {
  color: #ed6622;
  text-decoration: none;
}
.link-orange:hover {
  color: #fff;
}
```

9. Summary

TL;DR — Zemanta’s design system is crisp, functional, and built for action-heavy interfaces. Bold orange accents over deep neutrals, disciplined typography, and restrained motion make it ideal for ad tech dashboards.

Brand Keywords: warm-functional, orange-driven, grid-disciplined, minimal-shadow, action-oriented