# Listenfirstmedia Design System

> High-contrast corporate clarity anchored by deep navy surfaces and vibrant magenta-to-yellow typographic accents.

**Source:** https://listenfirstmedia.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Listenfirstmedia utilizes a high-contrast palette of deep navy (`#333c7f`), stark white (`#ffffff`), and charcoal (`#1e1e1e`) to establish a professional, data-driven atmosphere. The system is punctuated by a signature accent pairing of magenta (`#cc3366`) and yellow (`#ffd400`), often used as underlines or emphasis within headlines. Typography relies on a clean hierarchy of **Roboto** and **Poppins**, with display text reaching up to 67px for maximum impact. Interactive elements are defined by rounded navy pills and sharp-edged white surfaces, maintaining a balance between modern SaaS aesthetics and traditional corporate reporting.

## Signature DNA
1. **The Accent Underline** (A vibrant yellow `#ffd400` or magenta `#cc3366` brush-stroke underline beneath key headline words like "Solved" or "and", observed on homepage and about page).
2. **Navy Primary Actions** (Dense navy `#333c7f` buttons with white text, providing a heavy anchor against the white canvas).
3. **Hybrid Font Stack** (The interplay between Poppins for modern UI elements and Roboto for structured content and headings).

## Family Map
Not captured in source (No sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, button text, card surface | 132 | 1.0 | Computed style |
| `{colors.charcoal}` | `#1e1e1e` | Primary body text, deep headings | 256 | 0.8 | Computed style |
| `{colors.slate}` | `#262e33` | Secondary text, button borders, dark UI labels | 24 | 0.8 | Computed style |
| `{colors.gray-muted}` | `#7f7f80` | Deemphasized text, metadata | 13 | 0.8 | Computed style |
| `{colors.silver}` | `#eeeeee` | Section dividers, subtle borders | 4 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#333c7f` | Primary button background, brand anchor | 6 | 0.6 | Computed style |
| `{colors.magenta}` | `#cc3366` | Typographic emphasis, active links | 27 | 0.8 | Computed style |
| `{colors.yellow}` | `#ffd400` | Headline decoration, highlights | 6 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Roboto** | 300, 400, 500, 600, 700 | Headings, structured body, labels | Roboto (Google Fonts) | Apache 2.0 |
| **Poppins** | 300, 400, 600 | UI labels, buttons, sub-navigation | Poppins (Google Fonts) | OFL |
| **-apple-system** | 300, 400, 500, 700 | Display headings, system fallbacks | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 67px | 80.4px | normal | 500 | Hero headlines | `h3.elementor-headline` |
| `{text.h2}` | 35px | 42px | normal | 600 | Section headers | `h2.elementor-headline` |
| `{text.h4}` | 24px | 28.8px | normal | 500 | Feature titles | `h4:nth-of-type(1)` |
| `{text.body-lg}` | 21px | 31.2px | normal | 400 | Testimonials | `div.elementor-testimonial__text` |
| `{text.body}` | 18px | 27px | normal | 400 | Icon list text | `span.elementor-icon-list-text` |
| `{text.body-sm}` | 16px | 24px | normal | 400 | Default running text | `section.elementor-section` |
| `{text.button}` | 15px | 15px | 0.5px | 300 | CTA labels | `a.elementor-button` |
| `{text.caption}` | 12px | 15.6px | normal | 400 | Post dates | `span.elementor-post-date` |

### Principles
1. **Tight Display Leading:** Large display text uses a 1.2x line-height ratio to maintain visual density.
2. **Explicit Tracking for UI:** Small Poppins labels and buttons use a `0.5px` letter-spacing to improve legibility on dark backgrounds.
3. **Weight Contrast:** Headings frequently jump from 300 (light) to 600 (semi-bold) to create immediate hierarchy.

## Spacing
**Base unit:** 10px (most frequent recurring unit)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xxs}` | 5px | 13 |
| `{space.xs}` | 10px | 50 |
| `{space.sm}` | 20px | 26 |
| `{space.md}` | 40px | 8 |
| `{space.lg}` | 80px | 3 |
| `{space.xl}` | 143px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Cards, section containers | 347 occurrences |
| `{radius.sm}` | 4px | Primary buttons | Rounded Button component |
| `{radius.pill}` | 999px | Secondary tags/badges | Radii evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.none}` | none | Standard cards and buttons | Component spec |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (e.g., "Let's Talk", "Get Started")
**Pages observed:** https://listenfirstmedia.com, https://listenfirstmedia.com/about
**Spec:**
- **Background:** `#333c7f`
- **Text:** `#ffffff`
- **Border:** 1px `#262e33`
- **Radius:** 4px
- **Padding:** 16px 36px
- **Typography:** Poppins 14px-15px
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Button (Ghost)
**Role:** Low-priority actions (e.g., "Contact us")
**Pages observed:** https://listenfirstmedia.com/about
**Spec:**
- **Background:** transparent
- **Text:** `#262e33`
- **Border:** 1px `#262e33`
- **Radius:** 0px
- **Padding:** 10px 20px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Testimonial Card
**Role:** Social proof display
**Pages observed:** https://listenfirstmedia.com
**Spec:**
- **Background:** `#ffffff`
- **Text:** `#1e1e1e`
- **Border:** 1px `#eeeeee` (bottom divider)
- **Padding:** 40px 0px
- **Typography:** 21px `-apple-system` (quote)
**States observed:** Default

### Tier 3: Surface-specific

#### Content Section
**Role:** Standard page row
**Pages observed:** https://listenfirstmedia.com, https://listenfirstmedia.com/about
**Spec:**
- **Background:** `#ffffff`
- **Padding:** 26px 0px
- **Radius:** 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | ~1140px (standard Elementor container) |
| Section Gap | 143px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 10-20px; font sizes scale down. |
| Desktop | 1440px | Multi-column grids (3-up for blog posts). |

## Imagery & decoration
- **Vector Illustrations:** Uses stylized, flat-color human figures with oversized limbs and abstract data symbols (circles, lines, grids).
- **Accents:** Hand-drawn style brush strokes in `#ffd400` or `#cc3366` used as underlines.
- **Avoids:** Heavy drop shadows, complex gradients, or skeuomorphic elements.

## Do's
- Use `#333c7f` for all primary user intents.
- Apply `#ffd400` underlines to exactly one word in a hero headline.
- Maintain `0px` border radius for all content containers and cards.
- Use **Roboto** for any text exceeding two lines of length.
- Ensure `143px` vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#cc3366` as a button background. **Right:** Use `#333c7f`. **Reason:** Magenta is reserved for typographic emphasis and links, not primary actions.
- **Wrong:** Adding shadows to cards. **Right:** Use 1px `#eeeeee` borders. **Reason:** The brand identity is flat and high-contrast.
- **Wrong:** Mixing Poppins and Roboto in the same text block. **Right:** Use Roboto for body and Poppins for UI labels.

## Similar brands
- Salesforce (Corporate SaaS clarity)
- Sprout Social (Data-centric reporting aesthetic)
- Gartner (Research-heavy professional layout)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #333c7f;
  --color-accent-magenta: #cc3366;
  --color-accent-yellow: #ffd400;
  --color-text-main: #1e1e1e;
  --color-bg-white: #ffffff;
  --font-heading: 'Roboto', sans-serif;
  --font-ui: 'Poppins', sans-serif;
  --radius-button: 4px;
}
```

## Known gaps
- Hover and active states for primary buttons were not explicitly captured in the computed style logs.
- Form input validation states (Success/Error) were not present on the analyzed pages.
- Dark mode variations were not observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://listenfirstmedia.com | 1440px | 2026-06-06 |
| About | https://listenfirstmedia.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://listenfirstmedia.com | 390px | 2026-06-06 |