Media.net Brand Design System Analysis

1. Brand Overview

Media.net’s site hits you with precision. Everything feels engineered for clarity and trust — which makes sense, given they operate in the high-stakes ad tech space. This isn’t a playful consumer brand; it’s a B2B machine. The design language is clean, tight, and unapologetically functional.

The vibe? Professional with a dash of boldness. They’ve chosen a deep, saturated violet (#4225a6) as the primary brand color, which instantly sets them apart from the sea of blues that dominate tech SaaS. That violet feels modern, slightly unconventional, and gives them a confident, premium tone without slipping into luxury pretension.

Typography is consistent — DM Sans everywhere — which reinforces the unified brand voice. Spacing and layout follow an 8px grid, but they’re not shy about breaking into large, cinematic scales (96px H1 titles, massive pill-shaped buttons with 1600px border-radius). This is deliberate: it keeps the site feeling airy, despite the functional content.

The design philosophy here is:

• Clarity first — everything is legible, accessible, and high contrast.
• Controlled expressiveness — bold color accents only where needed.
• Pill-shaped affordances — buttons, icons, and badges lean heavily on extreme radii.
• Flat depth — very few shadows; borders and color shifts do the heavy lifting.

If you’re designing for Media.net’s ecosystem, the goal is to make interfaces that feel precise, modern, and confident without being flashy. You’re not designing for delight — you’re designing for performance.

2. Color System

2.1 Primary Colors

Primary is #4225a6 (rgb(66, 37, 166)). It’s a deep, slightly muted violet — rich enough to stand out, but not neon. Psychologically, violet signals creativity and sophistication. In ad tech, where most competitors lean on trust blues (#0071e3, #0044cc), this is a differentiator. It says: "We’re serious, but we think differently."

Secondary is pure white (#ffffff), used for backgrounds and text on dark surfaces. This combination yields strong contrast — perfect for accessibility.

They also use a brand red (#d51254) for accents and CTAs, which adds urgency and draws the eye.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong across the board:

• Primary Violet (#4225a6) on white passes WCAG AAA for normal text.
• Brand Red (#d51254) on white is fine for large text but borderline for small text — use bold weights.
• Dark Gray (#111111) on white is perfect, extremely high contrast.

Dark mode sections (#1b1b1b background with white text) are equally readable.

The palette is balanced: three strong accents (violet, red, hot pink), a set of deep neutrals, and soft greys for structure. It’s not overloaded, which keeps the brand identity tight.

2.4 Usage Guide

Works well:

• Violet (#4225a6) + White — primary CTAs, hero headers.
• Red (#d51254) + White — urgency CTAs, icons.
• Jet Grey (#4c4c4c) + Soft Lavender Grey (#cac3df) — subdued UI elements.

Avoid:

• Red on Violet — fails contrast, creates vibration.
• Hot Pink (#e91e63) outside animated text — breaks brand tone.
• Mixing too many greys — stick to one neutral per context.

3. Typography

3.1 Font Families

Primary Font: DM Sans (Google Font), variable font enabled.
No visible secondary font in extracted data except Open Sans from Google Fonts (likely used in body or legacy areas).

DM Sans is geometric, clean, and modern — matches the brand’s precision vibe. Variable weights allow subtle hierarchy shifts without introducing a new typeface.

3.2 Type Scale

3.3 Hierarchy

They rely heavily on size jumps and weight changes rather than color changes. H1 hero at 96px is dramatic, but body stays tightly around 16px — keeps reading comfortable. Negative letter spacing on big titles tightens the feel, making them denser and more impactful.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All increments are multiples except for a few odd 9px, 10px, 17px values (likely tied to icon alignment).

4.2 Layout

Breakpoints:

• Mobile: 479px
• Small tablet: 767px
• Tablet: 991px
• Desktop: 1439px
• Large: 1920px

They scale typography and spacing fluidly between these. Likely using Vuetify’s grid system.

5. Visual Elements

Border Radius: Extreme pill shapes dominate (1600px radius for buttons). Smaller radii (4px, 16px, 24px, 48px, 64px) are used for cards and images.

Shadow: Minimal use — two shadows in the system:

• rgba(0, 0, 0, 0.15) 0px 0px 20px
• rgba(255, 255, 255, 0.3) 0px 0px 160px

Mostly flat design; borders handle separation.

Borders:

• 1px solid soft lavender (#cac3df) for cards.
• 2px solid white for inverse buttons.
• 0px 0px 1px solid dark grey for dividers.

6. Components

6.1 Buttons

Secondary (inverse):

• Default: transparent bg, #4c4c4c text, 1600px radius, 2px solid white border, padding 8px 8px 8px 24px.
• Focus: outline rgb(77, 101, 255) solid 0.125rem.

Secondary Icon (inverse):

• Default: bg #d51254, white text, 1600px radius, padding 8px.

Primary Icon:

• Default: bg white, text #d51254, 1600px radius, padding 8px.

Primary Fill:

• Default: bg #4225a6, text #4c4c4c, 1600px radius, padding 0.

Primary Icon Inverse:

• Default: bg #111111, white text, 1600px radius, padding 8px.

6.2 Links

Two styles:

• #111111 text, no underline.
• #4c4c4c text, no underline.
  Hover states not defined in data — likely subtle color shift.

6.3 Forms

No input styles extracted — likely minimal use or handled by Vuetify defaults.

6.4 Cards

• 1px solid soft lavender grey (#cac3df)
• Border radius 48px
• No shadows — flat separation.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary-violet: #4225a6;
  --color-secondary-white: #ffffff;
  --color-jet-grey: #4c4c4c;
  --color-dark-gray: #111111;
  --color-brand-red: #d51254;
  --color-deep-charcoal: #1b1b1b;
  --color-soft-lavender-grey: #cac3df;
  --color-medium-grey: #696670;
  --color-pure-black: #000000;
  --color-hot-pink: #e91e63;
  --color-titan-white: #e4e2e9;
  --color-magnolia: #e8e4f2;
  --color-purple-mid: #9b7eff;
  --color-brand-green: green;
  --color-grey: #565656;
  --color-brand-red-token: red;

  /* Typography */
  --font-primary: 'DM Sans', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 48px;
  --radius-xxl: 64px;
  --radius-full: 1600px;

  /* Shadows */
  --shadow-dark: rgba(0,0,0,0.15) 0px 0px 20px 0px;
  --shadow-light: rgba(255,255,255,0.3) 0px 0px 160px 0px;
}

8. AI Coding Assistant Prompt

# Media.net Design System Specification

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

## Brand Context
Media.net values clarity, precision, and confident minimalism. Bold color accents are used sparingly for impact. Layouts are spacious but driven by an 8px grid. Components lean heavily on pill-shaped forms and high-contrast typography.

## Color Palette
- Primary Violet: #4225a6 — Primary fills, key action buttons
- Secondary White: #ffffff — Backgrounds, text on dark surfaces
- Jet Grey: #4c4c4c — Body text, neutral UI elements
- Dark Gray: #111111 — Navigation, logo text
- Brand Red: #d51254 — CTAs, icons
- Deep Charcoal: #1b1b1b — Dark section backgrounds
- Soft Lavender Grey: #cac3df — Card borders, dividers
- Medium Grey: #696670 — Secondary text
- Pure Black: #000000 — Text or imagery overlays
- Hot Pink: #e91e63 — Animated headline flip-text
- Titan White: #e4e2e9 — Background fills
- Magnolia: #e8e4f2 — Light backgrounds
- Purple Mid: #9b7eff — Gradients, highlights
- Brand Green: green — Success states
- Grey: #565656 — UI chrome
- Brand Red Token: red — Error states

## Typography
Font Family: 'DM Sans', sans-serif; Variable font enabled  
Secondary: 'Open Sans', sans-serif

Type Scale:
| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 Hero | 96px | 700 | 1.00 | Main titles |
| H1 Alt  | 72px | 600 | 1.10 | Section titles |
| H1 Mid  | 32px | 500 | 1.20 | Subheadings |
| Body    | 16px | 400/500/700 | 1.00–1.60 | Paragraphs, UI labels |

## Spacing & Grid
Base: 8px  
Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px  
Use: Buttons (8px padding), cards (32px padding), sections (48–96px gaps)

## Border Radius
- sm: 4px — small UI elements
- md: 16px — medium components
- lg: 24px — badges
- xl: 48px — cards
- xxl: 64px — images
- full: 1600px — pill buttons, avatars

## Shadows & Depth
Minimal shadows:
- Dark: rgba(0,0,0,0.15) 0px 0px 20px
- Light: rgba(255,255,255,0.3) 0px 0px 160px

## Component Specifications

### Primary Button
Default:
- background: #4225a6
- color: #4c4c4c
- padding: 0px
- radius: 1600px
- border: none

### Secondary Button (inverse)
Default:
- background: transparent
- color: #4c4c4c
- padding: 8px 8px 8px 24px
- radius: 1600px
- border: 2px solid #ffffff
Focus: outline: #4d65ff solid 0.125rem

### Link
Default:
- color: #111111 or #4c4c4c
- text-decoration: none

### Card
- background: #ffffff
- border: 1px solid #cac3df
- radius: 48px
- padding: 32px

## Layout & Responsive Rules
Breakpoints:
- Mobile: <479px
- Small Tablet: 480–767px
- Tablet: 768–991px
- Desktop: 992–1439px
- Large: 1440–1920px

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus: use brand blue outline
- Disabled: opacity 0.5

## DO
- Use only palette colors
- Maintain 8px spacing grid
- Stick to DM Sans
- Use pill shapes for buttons
- Keep shadows minimal

## DON'T
- Add new colors
- Mix sharp and rounded corners
- Overuse hot pink
- Add drop shadows beyond specified

## Code Examples

```css
.btn-primary {
  background: #4225a6;
  color: #4c4c4c;
  padding: 0;
  border-radius: 1600px;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px solid #4d65ff;
  outline-offset: 2px;
}

.btn-secondary {
  background: transparent;
  color: #4c4c4c;
  padding: 8px 8px 8px 24px;
  border-radius: 1600px;
  border: 2px solid #ffffff;
}
.btn-secondary:focus {
  outline: 0.125rem solid #4d65ff;
}

.card {
  background: #ffffff;
  border: 1px solid #cac3df;
  border-radius: 48px;
  padding: 32px;
}
```

9. Summary

TL;DR — Media.net’s design system is bold but disciplined. Violet and red accents break the monotony of neutrals, DM Sans delivers clean readability, and pill-shaped components define the brand’s tactile feel. Minimal shadows keep everything flat and crisp.

Brand Keywords:

• violet-confident
• pill-shaped-minimal
• high-contrast-functional
• grid-disciplined
• flat-depth