Seedtag Brand Design System Deep Dive

1. Brand Overview

Seedtag’s visual language is unapologetically bold modernism with splashes of playful color. This is a brand that clearly knows it sits at the intersection of high-energy advertising tech and contemporary design aesthetics. Their page layouts lean into big typography—Moderat dominates here—paired with softened pill shapes and ultra-high contrast palettes.

There’s a confidence in how they use color. Most ad-tech brands opt for safe navies or clinical greys. Seedtag? They punch the viewer in the eye with #eebf45 (a rich golden yellow), #dd4c44 (a warm red) and pastel pink (#f7c3dc) as secondary accents. This isn’t accidental. It screams "media, creativity, energy" rather than "enterprise stability"—probably an intentional cue that they’re not a stuffy B2B SaaS.

There’s little reliance on heavy shadows. Instead, depth comes from color separation and border accents. The 30px pill radius is everywhere—buttons, callouts, maybe even some containers—giving the brand soft edges without going full rounded-card UI.

Typography is roomy, with enormous headings (120px at the top end) combined with ultra-light weights (100) for a sleek, airy feeling. The lack of Google/Adobe font sources in the data suggests they rely on a custom deployment of Moderat, reinforcing brand ownership over their typography stack.

The responsive approach is pragmatic. Breakpoints cut at familiar device widths (500px, 767px, 1024px, 1025px). They’re not chasing weird fluid type yet—they lean on Bootstrap, so this system is grid-first with component-based responsiveness.

Seedtag’s vibe: creative-advertiser energy wrapped in modern UI conventions. It’s for media buyers, agencies, and brands who value presentation as much as analytics—people comfortable in bright dashboards and bold layouts.

I love how they’ve avoided the "flat bootstrap" trap by making everything look intentional—choosing high-contrast buttons, large pill shapes, and a crisp sans-serif. Odd choice: the blue #0000ee link color feels old-school web default next to the curated brand palette. More on that later.

2. Color System

2.1 Primary Colors

Primary brand color: #eebf45 (rgb(238, 191, 69)) — a deep, warm golden yellow. This sits between optimism and authority. It’s less playful than neon yellow, more premium than flat orange. Against dark navy backgrounds (#181c2b), it pops without straining the eye.

Psychologically, yellows trigger warmth and call-to-action urgency without the aggression of reds. Compared to competitors in the ad-tech space (often heavy blues), this choice instantly signals difference and creative friendliness. Combined with dark backgrounds, it creates a luxury-accessible feel.

Their “secondary” semantic color in JSON is listed as transparent (rgba(0, 0, 0, 0)), which isn’t really a usable brand color—likely a placeholder or context-based variant.

2.2 Complete Palette

2.3 Color Relationships

From a WCAG perspective:

• Yellow (#eebf45) over navy (#181c2b) — strong contrast (~9:1), accessible for normal text.
• White (#ffffff) over black (#000000) — infinite contrast; safe.
• Blue (#0000ee) defaults — accessible against white backgrounds but less pleasant against dark surfaces. This feels like they left default browser link colors in some places.

Dark mode? Not explicitly here, but most surfaces are dark navy or black, so light foreground colors are chosen accordingly. The gold and pastel pink read well in dark contexts.

2.4 Usage Guide

Combinations that work:

• Yellow on navy (CTAs).
• Red borders on transparent backgrounds (secondary buttons).
• Pastel pink borders for subtle accents.

Avoid:

• Blue link on navy background (low modernity, weird contrast).
• Pink (#f7c3dc) for body text—it’s low contrast against white or pale surfaces.

3. Typography

3.1 Font Families

Primary typeface: Moderat (sans-serif) — used everywhere from huge headlines to tiny captions. Multiple weights (100, 400) give flexibility between ultra-light elegance and readable mid-weight body text.

Fallbacks: None specified—this likely is a locally-hosted font. No Google Fonts or Adobe Fonts inclusion detected. This is a proprietary choice—important for brand lock-in.

Also, one instance of Times appears at 16px weight 400, probably for a specific stylistic element—interesting juxtaposition with modern Moderat.

3.2 Type Scale

3.3 Hierarchy

Hierarchy here is dramatic. 120px headlines dominate hero sections—these are not subtle. The drop to 70px still feels large for web. The ultra-light weight (100) gives a premium editorial feel but may hurt readability for long text blocks.

Line heights are generally tight at the top (0.92 for 120px) and loosen toward small sizes (1.50+ in captions). That’s a good practice for dense small text.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Values are in multiples but with some off-grid decisions (e.g. 10px, 15px).

4.2 Layout

Framework: Bootstrap grid. Breakpoints at 500px (small mobile), 767px (tablet), 1024px (desktop cutoff), 1025px (desktop-specific tweaks). This is classic device-based layout, not fluid-responsive scaling.

5. Visual Elements

Border Radius

• 3px — tiny rounding, rare
• 5px — slightly larger, rare
• 30px — dominant pill style for buttons, divs
• 50% — full circle for avatars/buttons

Shadows

Only one inset shadow: rgba(0,0,0,0.4) 0px 50px 50px -50px inset. Used 4 times. This is subtle inner shading, not drop shadows—reinforces flat design with light depth simulation.

Borders

Common styles:

• 1px solid #dd4c44 (red) — buttons
• 1px solid #f7c3dc (pink) — accent divs/buttons
• 1px solid #ffffff (white) — buttons
• 1px solid #eebf45 (yellow) — less frequent
• Misc: border-top with white 0.4 opacity, 2px pink solid, 1px bottom black solid.

6. Components

6.1 Buttons

Secondary Red Button

Default:

• background: transparent
• color: #dd4c44
• padding: 10px 20px
• radius: 30px
• border: 1px solid #dd4c44
• font-weight: 100
• font-size: 12px

Hover:

• background: #eebf45
• color: #181c2b

Primary Yellow Button

Default:

• background: #eebf45
• color: #181c2b
• padding: 10px 20px
• radius: 30px
• border: 1px solid #eebf45
• font-weight: 100
• font-size: 12px

Hover: Same as default—no change (odd; might be missing data or intentionally static).

6.2 Links

Varieties:

• White text, no underline.
• Red (#dd4c44), no underline.
• Black (#000000), no underline.
• Blue (#0000ee), underline.
• Pink (#f7c3dc), no underline.
• Navy (#181c2b), no underline.

Hover behaviors mostly undefined—suggesting minimal interactive style changes.

6.3 Forms

No text, checkbox, radio, or select styles extracted—either not used or visually minimal.

6.4 Cards

No explicit card component in data—likely styled via divs with radius and borders. Inset shadow could be the depth cue.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-link: #0000ee;
  --color-deep-navy: #181c2b;
  --color-slate-grey: #353b4d;
  --color-pastel-pink: #f7c3dc;
  --color-warm-red: #dd4c44;
  --color-golden-yellow: #eebf45;
  --color-soft-coral: #efaaa6;
  --color-semi-red: rgba(221, 76, 68, 0.525);
  --color-semi-pink: rgba(247, 195, 220, 0.53);

  /* Typography */
  --font-primary: 'Moderat', sans-serif;
  --font-secondary: 'Times', serif;

  /* Font Sizes */
  --font-size-xxxxl: 7.50rem; /* 120px */
  --font-size-xxxl: 4.38rem; /* 70px */
  --font-size-xxl: 3.13rem; /* 50px */
  --font-size-xl: 2.81rem; /* 45px */
  --font-size-lg: 2.50rem; /* 40px */
  --font-size-md: 1.75rem; /* 28px */
  --font-size-sm: 1.25rem; /* 20px */
  --font-size-xs: 1.13rem; /* 18px */
  --font-size-xxs: 1.00rem; /* 16px */
  --font-size-xxxs: 0.88rem; /* 14px */
  --font-size-caption: 0.75rem; /* 12px */
  --font-size-tiny: 0.63rem; /* 10px */

  /* Spacing */
  --space-10: 0.63rem;
  --space-12: 0.75rem;
  --space-15: 0.94rem;
  --space-20: 1.25rem;
  --space-25: 1.56rem;
  --space-30: 1.88rem;
  --space-35: 2.19rem;
  --space-40: 2.50rem;
  --space-45: 2.81rem;
  --space-50: 3.13rem;
  --space-60: 3.75rem;
  --space-80: 5.00rem;
  --space-100: 6.25rem;
  --space-120: 7.50rem;
  --space-135: 8.44rem;
  --space-140: 8.75rem;
  --space-170: 10.63rem;
  --space-190: 11.88rem;
  --space-300: 18.75rem;
  --space-320: 20.00rem;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-pill: 30px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-inset: rgba(0,0,0,0.4) 0px 50px 50px -50px inset;
}

8. AI Coding Assistant Prompt

# Seedtag Design System Specification

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

## Brand Context
Seedtag blends bold editorial typography with vibrant, high-contrast colors. Soft pill-shaped buttons, flat design with subtle inset shadows, and large-scale headings define their look. They aim for creative-advertising energy, not corporate minimalism.

## Color Palette
- Primary Yellow: #eebf45 — CTAs, primary buttons
- Warm Red: #dd4c44 — Secondary buttons, accents
- Pastel Pink: #f7c3dc — Accent borders
- Deep Navy: #181c2b — Background for yellow buttons
- Black: #000000 — Text, nav
- White: #ffffff — Text, backgrounds, overlays
- Link Blue: #0000ee — Default links
- Slate Grey: #353b4d — Secondary background
- Soft Coral: #efaaa6 — Hover accents
- Semi Red: rgba(221, 76, 68, 0.525) — Hover tint
- Semi Pink: rgba(247, 195, 220, 0.53) — Hover tint

## Typography
- Font family: 'Moderat', sans-serif
- Secondary: 'Times', serif (rare uses)

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1    | 120px | 400 | 0.92 | Hero titles |
| H1    | 70px  | 400/100 | 1.10 | Section headers |
| H1    | 50px  | 100 | 1.40 | Sub headers |
| H1    | 45px  | 400/100 | 1.20 | Headings |
| H1    | 40px  | 100 | 1.40 | Headings |
| Body  | 28px  | 400 | 1.29 | Large body |
| Body  | 20px  | 100 | 0.80 | Small body |
| Caption | 14px | 100 | 1.50 | Metadata |
| UI Label | 12px | 100 | 1.33 | Buttons, links |
| Tiny Caption | 10px | 100 | 1.60 | Microcopy |

## Spacing & Grid
Base: 8px grid
Scale: 10px, 12px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px, 60px, 80px, 100px, 120px, 135px, 140px, 170px, 190px, 300px, 320px

## Border Radius
- sm: 3px — rare small rounding
- md: 5px — rare
- pill: 30px — buttons
- circle: 50% — avatars, round buttons

## Shadows
- inset: rgba(0,0,0,0.4) 0px 50px 50px -50px — subtle depth

## Components

### Primary Button
Default:
- background: #eebf45
- color: #181c2b
- padding: 10px 20px
- border-radius: 30px
- border: 1px solid #eebf45
- font-weight: 100
- font-size: 12px
Hover:
- same as default
Focus:
- outline: none
Disabled:
- opacity: 0.5

### Secondary Button
Default:
- background: transparent
- color: #dd4c44
- padding: 10px 20px
- border-radius: 30px
- border: 1px solid #dd4c44
- font-weight: 100
- font-size: 12px
Hover:
- background: #eebf45
- color: #181c2b

### Navigation Links
- White: no underline
- Red: #dd4c44, no underline
- Black: #000000, no underline
- Blue: #0000ee, underline

### Layout & Responsive Rules
- Breakpoints: 500px, 767px, 1024px, 1025px
- Bootstrap grid-based container/row/col

### Interaction Rules
- Transitions: 150ms ease
- Hover for buttons changes background on secondary only
- No heavy focus outlines—color changes instead

## DO List
- Use ONLY colors from palette
- Maintain 8px spacing multiples
- Keep button radius at 30px pill form
- Use Moderat for all text
- Keep large headings light-weight
- Ensure high contrast for text

## DON'T List
- Introduce new colors
- Use drop shadows—only inset allowed
- Mix sharp and pill corners in same module
- Override link styles without reason

## Code Examples
Primary button:
```css
.btn-primary {
  background: #eebf45;
  color: #181c2b;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #eebf45;
  font-weight: 100;
  font-size: 12px;
  transition: background 150ms ease;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```
Secondary button:
```css
.btn-secondary {
  background: transparent;
  color: #dd4c44;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #dd4c44;
  font-weight: 100;
  font-size: 12px;
}
.btn-secondary:hover {
  background: #eebf45;
  color: #181c2b;
}
```

9. Summary

TL;DR: Seedtag’s design system is vibrant, pill-heavy, and flat by choice. Moderat headlines dominate, colors shout in gold, red and pastel pink, and interaction is minimal beyond secondary button hover states. Bootstrap grid underpins it all.

Brand Keywords: bold-modernist, creative-advertising, pill-radius-heavy, high-contrast