GumGum Brand Design System Deep Dive

1. Brand Overview

GumGum’s site feels like a brand that knows its audience: tech-savvy, marketing-focused, but with a human edge. It’s not sterile corporate blue, and it’s not hyper-playful startup neon. Instead, they’ve carved out a space in the “confident modern” zone — deep navy for trust, bright green for action, plenty of white space to breathe.

Their design philosophy is clear: make complex advertising tech approachable. That’s why buttons are big and pill-shaped, links are underlined by default, and typography is a single, clean sans-serif family with weight shifts to signal hierarchy. No multi-font circus, no overcomplicated gradients.

This is a site for people who need clarity fast. Whether you’re a marketer looking for contextual targeting solutions or a partner scanning for ad specs, you’re not here to be entertained — you’re here to make decisions. GumGum’s design supports that by keeping the visual language tight.

One thing I notice: they lean heavily on their green (#00ce7c) as the interactive hero color. It’s everywhere — CTAs, hover states, link accents. That tells me they want a single “go” signal in the interface. In contrast, deep navy (#002a3a) anchors the layout, often as text, navigation, or background blocks.

Accessibility isn’t perfect — some text is #565959 on white, which is borderline for WCAG contrast — but main actions are fine. The site uses a responsive breakpoint set that’s wider than many — they’ve got multiple small device widths (400px, 425px, 426px) which suggests careful tuning for niche devices.

Overall vibe: smart, confident, approachable tech. Functional over flashy. And they’ve nailed consistency in their token usage — spacing stays mostly on the 8px grid, typography is tightly controlled, and buttons have defined states that don’t wander.

2. Color System

2.1 Primary Colors

The main brand color is #00ce7c (rgb(0, 206, 124)). It’s a saturated green that reads as fresh, active, and positive. Psychologically, green is “go”, “growth”, and “safe” — perfect for a brand selling ad tech that promises results without violating privacy.

Compared to competitors in ad tech (think The Trade Desk’s electric blue or Google Ads’ mixed palette), GumGum’s green is less common. That’s smart — it stands out in a sea of blue SaaS brands.

The secondary anchor is #002a3a (rgb(0,42,58)). This deep navy does the heavy lifting for text, headers, and backgrounds. It’s serious, trustworthy, and pairs perfectly with the green without feeling too nautical.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally strong between #00ce7c and white (#f8f8f8) — easily passing WCAG AA for large and normal text. Deep navy (#002a3a) on white is excellent.

Potential issues: #565959 on white is ~4.4:1, just scraping AA for normal text. #222222 is fine. There’s no explicit dark mode here — everything is light background with dark text or green accents.

2.4 Usage Guide

• Works well: #00ce7c on white for buttons; #002a3a on #f8f8f8 for text-heavy sections; #131e29 as a muted background with white text.
• Avoid: #565959 on #f8f8f8 for small text — borderline readable; #00ce7c on #002a3a without bold weight — contrast is lower.
• Accent strategy: Green is for interactive states only. Don’t use it for large background panels — it’s too aggressive.

3. Typography

3.1 Font Families

Everything is Mulish WF — a clean sans-serif — used for headings, body, buttons, captions, and links. No fallback stack listed, but source hints at Google Fonts (Mulish WF), plus icon font “Font Awesome - Solid”.

Variable fonts are enabled — they adjust weights from 300 to 900 without separate font files.

3.2 Type Scale

Here’s the extracted scale (abbreviated to key contexts):

3.3 Hierarchy

Headings jump aggressively in size — 60px down to 38px for subheads — which creates strong visual hierarchy. Heavy weights (700–900) ensure headings stand out even over dark backgrounds.

Body text is a comfortable 19.2px — slightly larger than the web default — improving legibility. Captions at 14px are fine; anything smaller (like the 9px uppercase captions) is strictly decorative.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

4.2 Layout

Breakpoints are numerous: 400, 425, 426, 530, 550, 610, 640, 767, 768, 769, 890, 896, 897, 991, 1023, 1024, 1280, 1920px. This indicates fine-grained control, especially around small tablet widths.

5. Visual Elements

• Border Radius: Ranges from 0px to full pills (50px, 78.4px). Small elements like inputs are 2px–6px; pills for buttons are consistently 50px.
• Shadows: Light, layered shadows exist (rgba(14,14,41,0.04) with multiple offsets) — subtle depth. Not a heavy drop shadow brand.
• Borders: Frequent use of 2px solid #00ce7c for buttons; 1px white borders for links.

6. Components

6.1 Buttons

Primary Nav Button (btn is-nav w-button):
Default: bg #00ce7c, text white, padding 8px 24px, radius 50px, border 2px solid #00ce7c. Hover: bg white, text #1883fd. Focus: bg #1eaedb, text white, border 1px solid black.

Outline Button (btn-outline):
Default: bg rgba(248,248,248,0.6), text #002a3a, padding 19.2px, radius 50px.

Homepage Watch Now:
Same as primary but bg white, text #00ce7c.

Cookie Setting Link:
Small (13px), bg #002a3a, text #c9c9c9, radius 2px.

6.2 Links

Six variants by color:

• Green (#00ce7c) underlined default, blue on hover
• Navy (#002a3a) no underline default, blue hover
• White (#ffffff) no underline default, blue hover
  Underline behavior: mostly off except brand green links.

6.3 Forms

Inputs default transparent bg, text #333, no border. Focus: outline 1px solid black, bg #1eaedb, text white.

Checkboxes similar: transparent default, focus same as inputs.

Selects: transparent default, text white.

7. Design Tokens

:root {
  /* Colors */
  --color-navy: #002a3a;
  --color-off-white: #f8f8f8;
  --color-green: #00ce7c;
  --color-black: #000000;
  --color-dark-slate: #131e29;
  --color-gray: #565959;
  --color-blue-gray: #323e48;
  --color-dark-gray: #222222;

  /* Typography */
  --font-primary: "Mulish WF", sans-serif;
  --font-icon: "Font Awesome - Solid";
  --text-h1-size: 60px;
  --text-h1-weight: 900;
  --text-body-size: 19.2px;
  --text-body-weight: 400;
  --text-caption-size: 14px;
  --text-caption-weight: 400;

  /* Spacing */
  --space-8: 8px;
  --space-10: 10px;
  --space-19: 19.2px;
  --space-24: 24px;
  --space-38: 38.4px;
  --space-80: 80.064px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  --radius-xl: 78.4px;

  /* Shadows */
  --shadow-soft: rgba(14,14,41,0.04) 0px 16px 16px 0px, rgba(14,14,41,0.04) 0px 8px 8px 0px, rgba(14,14,41,0.04) 0px 4px 4px 0px, rgba(14,14,41,0.04) 0px 2px 2px 0px;
}

8. AI Coding Assistant Prompt

# GumGum Design System Specification

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

## Brand Context
GumGum designs for clarity and confidence. Deep navy anchors layouts, bright green signals action. Typography is a single sans-serif family in varying weights; spacing sticks to an 8px grid.

## Color Palette
- Deep Navy: #002a3a — primary text, navigation backgrounds
- Off White: #f8f8f8 — background, surfaces
- Brand Green: #00ce7c — CTAs, buttons, link accents
- Black: #000000 — functional text
- Dark Slate: #131e29 — secondary backgrounds
- Gray: #565959 — secondary text
- Blue Gray: #323e48 — muted elements
- Dark Gray: #222222 — text accents

## Typography
Font: "Mulish WF", sans-serif  
Icon font: "Font Awesome - Solid"

| Level  | Size   | Weight | Line Height | Use For         |
|--------|--------|--------|-------------|-----------------|
| H1     | 60px   | 900    | 1.60        | Page titles     |
| H2     | 53.76px| 900    | 1.00        | Hero headings   |
| H3     | 50.4px | 700    | 1.11        | Section heads   |
| Body   | 19.2px | 400    | 1.60        | Main content    |
| Button | 16px   | 400    | 1.60        | Actions         |
| Caption| 14px   | 400    | 1.60        | Small labels    |

## Spacing & Grid
Base: 8px grid  
Tokens: 8px, 10px, 19.2px, 24px, 38.4px, 80.064px

## Border Radius
- sm: 2px — inputs
- md: 6px — cards
- lg: 20px — images
- pill: 50px — buttons
- xl: 78.4px — large containers

## Shadows & Depth
Soft layered shadow: rgba(14,14,41,0.04) with multiple offsets for subtle depth.

## Component Specifications

### Primary Button
Default: bg #00ce7c, text #fff, padding 8px 24px, radius 50px, border 2px solid #00ce7c  
Hover: bg #fff, text #1883fd  
Focus: bg #1eaedb, text #fff, border 1px solid #000  
Active: outline 2px solid #101010

### Secondary Button
Default: bg #fff, text #00ce7c, border 2px solid #00ce7c, radius 50px, padding 8px 24px

### Navigation Link
Default: color #002a3a, no underline  
Hover: color #1883fd

### Input Field
Default: transparent bg, text #333, no border  
Focus: outline 1px solid #000, bg #1eaedb, text #fff

### Card
Padding: 24px, bg #fff, radius 6px, shadow soft

## Layout & Responsive Rules
Max width: 1280px content  
Padding: 24px mobile, 38.4px desktop  
Breakpoints: 400px, 425px, 530px, 640px, 768px, 1024px, 1280px, 1920px

## Interaction Rules
Transitions: 150ms ease for hover/focus  
Focus indicators: solid outline with brand colors

## DO List
- Use only palette colors
- Maintain 8px spacing multiples
- Keep button radius at 50px
- Use Mulish WF for all text
- Keep shadows subtle

## DON'T List
- Invent new colors
- Mix sharp corners with pill shapes arbitrarily
- Use heavy drop shadows
- Shrink body text below 16px

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #00ce7c;
  color: #fff;
  padding: 8px 24px;
  border-radius: 50px;
  border: 2px solid #00ce7c;
  font-size: 16px;
  font-family: "Mulish WF", sans-serif;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  color: #1883fd;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 6px;
  padding: 24px;
  box-shadow: rgba(14,14,41,0.04) 0px 16px 16px 0px,
              rgba(14,14,41,0.04) 0px 8px 8px 0px;
}
```

### Input
```css
.input {
  background: transparent;
  color: #333;
  border: none;
}
.input:focus {
  outline: 1px solid #000;
  background: #1eaedb;
  color: #fff;
}
```

9. Summary

TL;DR: GumGum’s design system is tight, minimal, and action-oriented — deep navy for trust, bright green for action. Mulish WF everywhere, 8px spacing grid, pill-shaped buttons, subtle shadows.

Brand Keywords: confident-modern, tech-approachable, action-green, navy-trust, grid-disciplined