Yieldmo Brand Design System Deep-Dive

1. Brand Overview

Yieldmo’s design language is unapologetically bold. You feel it the second you land on their site—huge typography, sharp color contrasts, and pill-shaped buttons that don’t shy away from commanding attention. This is an ad tech brand, so the audience is marketers, agencies, and publishers. They’re selling performance, but the visual system sells confidence and authority.

The vibe? Modern, tech-savvy, and a bit editorial. There’s a clear split in personality: sharp sans-serif mechanical headings (PP Neue Machina) for the tech side, and Juana’s refined serif for the human, storytelling side. Helvetica is the workhorse for UI and body copy. They’re not afraid to mix type families, but they do it in a controlled way—no chaos.

Color is high-contrast: pure black (#000000) and white (#ffffff) dominate, with high-saturation accents like electric blue (#2e46f2), crimson-pink (#cc3366), and safety-yellow (#ffae02). These accents aren’t scattered everywhere—they’re deliberately placed on CTAs, tabs, and links.

Spacing? Strictly 8px grid. You see 100px section paddings, 20px UI gaps, and everything locked to multiples. Border radii range from tight 2px corners for utility controls to full 100px pills for primary buttons. This creates a clear hierarchy of interaction weight—bigger radius = higher emphasis.

Shadows are minimal. Most buttons and cards are flat. When shadows are used, they’re subtle rgba(0,0,0,0.2) soft drops—more for accessibility focus outlines than depth. Borders carry more weight than shadows here.

Yieldmo’s design philosophy is: Big type, bold color accents, restrained UI chrome. They want to feel premium but not ornamental. Every visual choice seems tuned to make the brand look like an authority in a crowded ad tech space. I love that they didn’t go with the “rounded-friendly” SaaS look—this is sharper, more confident.

2. Color System

2.1 Primary Colors

The dominant brand color is electric blue (#2e46f2). It’s used for tabs, primary actions, and hover states on links. Blue in tech branding signals trust, stability, and competence. This shade is far from corporate navy—it’s vivid, leaning toward a digital neon. That choice differentiates them from conservative competitors (think #00326c banking blues).

Secondary accent: crimson-pink (#cc3366). This is emotional, energetic, and works as a contrast pop against blue and black. It’s often used for links and focus outlines—injecting personality into otherwise monochrome layouts.

Black (#000000) and white (#ffffff) control the base contrast. Gray tones (#696969, #555555, #f3f3f3) fill in UI backgrounds, dividers, and disabled states. There’s also deep navy (#262a4c) for certain sections—feels editorial.

2.2 Complete Palette

CSS variable: --swiper-theme-color: #007aff (used likely for sliders/swipers).

2.3 Color Relationships

High contrast across the board. Black text on white backgrounds easily exceeds WCAG AA/AAA. Electric blue on white is borderline for small text but is fine for large UI elements. Crimson pink (#cc3366) on white is accessible for headings but should be cautious for small text.

Dark mode? The palette could invert easily—black becomes background, electric blue and crimson pink remain accents, white becomes text. Most colors are vibrant enough to survive inversion.

2.4 Usage Guide

• Primary combos: Electric blue + white text = CTAs.
• Secondary combos: Crimson pink + white for focus outlines or link emphasis.
• Avoid: Electric blue on crimson pink—low contrast, visually noisy.
• Neutral UX states: Light gray surfaces with dark gray text.
• Highlight states: Crimson pink works well as a focus ring against both light and dark backgrounds.

3. Typography

3.1 Font Families

• Juana — Serif, used for headings. Adds editorial authority. Often lowercase transform for a softer, approachable tone.
• PP Neue Machina — Geometric sans-serif, uppercase headings. Signals tech precision.
• Helvetica — UI workhorse. Used for links, buttons, body copy, captions. Familiar, neutral.

Source: Google Fonts (Bricolage Grotesque appears in sources but not in extracted styles), variable fonts enabled. No Adobe Fonts.

3.2 Type Scale

3.3 Hierarchy

The massive 120px–96px headings create a visual hierarchy that’s extreme. This works for brand storytelling, but not for dense UI. Mid-range sizes (32px–28px) handle subheads. Body copy sits at 16px Helvetica—neutral, readable. The mix of serif and sans in headings gives flexibility: serif for brand voice, sans for technical info.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.

Common values:

4.2 Layout

Breakpoints: wide range from 320px to 1200px, plus absurd 99999px for max constraints. They clearly design mobile-first with progressive enhancement.

5. Visual Elements

Border Radius

Shadows

Mostly subtle:

• rgba(0,0,0,0.2) 2px 8px 23px 3px
• rgba(0,0,0,0.2) 0px 4px 8px 0px

Used sparingly—no heavy depth.

Borders

Varied 1px solid in black, gray, pink accents. Borders often replace shadows for separation.

6. Components

6.1 Buttons

Variants:

1. Utility (circle) — black bg, 50% radius, hover light gray.
2. Primary Pill (pink) — #ff66bd bg, 100px radius, 16px/24px padding, hover changes text to white.
3. Text Button — transparent, no radius, hover pink bg.
4. Tab Primary (blue) — #2e46f2 bg, 100px radius, bold white text, hover pink bg.
5. Tab Secondary (light gray) — #f3f3f3 bg, 100px radius.
6. Accent Pill (yellow) — #ffae02 bg, 100px radius.
7. Floating Utility — white bg, outline pink, shadow.

States are fully defined: hover often swaps bg to var(--e-global-color-40e48ba) with white text; focus uses solid outlines.

6.2 Links

Three styles:

• Black text, no underline, hover blue.
• White text, bold, hover blue.
• Pink text, underline, hover removes underline and changes to blue.

6.3 Forms

No text inputs in extracted data—likely custom styled elsewhere.

6.4 Cards

No explicit card component extracted—light gray surfaces with subtle borders likely used.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-primary: #2e46f2;
  --color-gray-dark: #696969;
  --color-pink-accent: #cc3366;
  --color-navy-deep: #262a4c;
  --color-gray-mid: #555555;
  --color-gray-light: #f3f3f3;
  --color-blue-dark: #00326c;
  --color-blue-darker: #003674;
  --swiper-theme-color: #007aff;

  /* Typography */
  --font-juana: "Juana", serif;
  --font-pp-neue-machina: "PP Neue Machina", sans-serif;
  --font-helvetica: "Helvetica", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
  --space-65: 65px;
  --space-80: 80px;
  --space-100: 100px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-20: 20px;
  --radius-100: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft-lg: rgba(0,0,0,0.2) 2px 8px 23px 3px;
  --shadow-soft-md: rgba(0,0,0,0.2) 0px 4px 8px 0px;
}

8. AI Coding Assistant Prompt

# Yieldmo Design System Specification

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

## Brand Context
Yieldmo’s design is bold, high-contrast, and typographically dominant. It mixes editorial serif with geometric sans for headings, and Helvetica for UI. Colors are vivid and purposeful, with electric blue and crimson pink leading the accent palette. Layouts follow a strict 8px grid, with pill-shaped buttons for primary actions.

## Color Palette
- Black: #000000 — Default text, dark backgrounds
- White: #ffffff — Backgrounds, text on dark
- Electric Blue: #2e46f2 — CTAs, tabs, primary actions
- Dark Gray: #696969 — Secondary text, captions
- Crimson Pink: #cc3366 — Links, focus outlines
- Deep Navy: #262a4c — Section backgrounds
- Mid Gray: #555555 — UI controls
- Light Gray: #f3f3f3 — Surfaces, inactive tabs
- Dark Blue: #00326c — Rare hover/focus
- Darker Blue: #003674 — Rare hover/focus
- Swiper Theme: #007aff — Slider controls

## Typography
Fonts:
- Headings: "Juana", serif
- Tech headings: "PP Neue Machina", sans-serif
- Body/UI: "Helvetica", sans-serif

Type Scale: (size/weight/line-height)
- H1 Juana: 120px / 400 / 0.00
- H1 Machina: 96px / 800 / 1.00
- Body: Helvetica 16px / 400 / 1.50
- Caption: Helvetica 14px / 400 / 1.71
[...include all extracted sizes...]

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 5px, 6px, 8px, 10px, 12px, 20px, 30px, 40px, 60px, 65px, 80px, 100px.
Use multiples for all padding/margin.

## Border Radius
- sm: 2px — Utility buttons
- md: 3px — Toggles
- lg: 20px — Badges
- full-pill: 100px — CTAs
- circle: 50% — Icon buttons

## Shadows & Depth
- Soft large: rgba(0,0,0,0.2) 2px 8px 23px 3px
- Soft medium: rgba(0,0,0,0.2) 0px 4px 8px 0px

## Components

### Primary Button
Default: bg #2e46f2; color #ffffff; padding 8px 25px; radius 100px; border none; font-weight 800; font-size 16px.
Hover: bg var(--e-global-color-40e48ba); color #ffffff; border 1px solid #2e46f2.
Focus: outline 2px solid #000000; bg var(--e-global-color-40e48ba).
Active: color rgba(0,0,0,0.3); border 1px solid transparent.

### Secondary Button
Default: bg #f3f3f3; color #000000; padding 8px 25px; radius 100px.

### Navigation Links
Black text, no underline; hover: blue #3860be.

### Input Fields
Border: 1px solid #696969; radius 2px; padding 12px; font-size 16px.
Focus: outline 2px solid #cc3366.

## Layout & Responsive Rules
Breakpoints: 320px, 400px, 425px, 576px, 768px, 992px, 1200px.
Mobile padding: 20px; desktop padding: 40px.

## Interaction Rules
- Transition: 150ms ease.
- Focus indicators: solid outline in accent colors.
- Hover states: bg swap + text color change.

## DO List
- Use only palette colors.
- Maintain 8px grid.
- Use Juana for brand headings, Machina for tech headings.
- Full-pill radius for CTAs.
- Keep hover/focus outlines visible.

## DON'T List
- Don’t invent new colors.
- Don’t mix sharp and pill corners in same component.
- Don’t remove focus outlines.
- Don’t use heavy shadows.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #2e46f2;
  color: #fff;
  padding: 8px 25px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: var(--e-global-color-40e48ba);
  border: 1px solid #2e46f2;
}
.btn-primary:focus {
  outline: 2px solid #000;
}
```

### Card
```css
.card {
  background: #f3f3f3;
  border-radius: 20px;
  padding: 30px;
}
```

### Input
```css
.input {
  border: 1px solid #696969;
  border-radius: 2px;
  padding: 12px;
  font-size: 16px;
}
.input:focus {
  outline: 2px solid #cc3366;
}
```

9. Summary

TL;DR — Yieldmo’s system is bold, high-contrast, and typographically driven. Electric blue and crimson pink accents punctuate a black-and-white base. The 8px grid is strict, radii signal interaction priority, and type choices balance tech precision with editorial authority.

Brand Keywords:

• bold-editorial
• tech-precise
• high-contrast
• grid-disciplined
• accent-driven