# Yungmedia Design System

> High-contrast cobalt and white canvas anchored by heavy geometric sans-serif typography and sharp, unrounded functional elements.

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

## TL;DR
Yungmedia utilizes a high-voltage "monochrome" system where deep cobalt blue (#0048cb) acts as the primary structural and interactive floor. The visual language is defined by **Objectivity**, a geometric sans-serif used at extreme weights (900) for display headings, creating a sense of industrial reliability. Layouts alternate between pure white (#ffffff) and saturated blue sections, using yellow (#ffaa17) as a sparse high-contrast accent for key emphasis. Components favor sharp 0px radii for primary actions, while secondary cards use a subtle 7px corner, maintaining a professional, agency-grade rigidity.

## Signature DNA
1. **Cobalt Saturation** (The use of #0048cb as both a background for hero sections and the primary color for interactive text, creating a unified brand "wash" across the homepage and about pages.)
2. **Heavyweight Geometry** (Objectivity Extra Bold at weight 900 for section headers, often paired with tight line heights to create dense, impactful blocks of copy.)
3. **Sharp Functionalism** (Primary CTA buttons and section containers utilize a 0px border radius, signaling a "no-frills" professional service environment.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | #ffffff | Page background, text on dark, button text | 51 | 1.0 | css_variable:--white |
| `{color.ink}` | #222429 | Primary headings and dark text | 1 | 1.0 | css_variable:--thm-black |
| `{color.text}` | #686a6f | Standard body copy | 32 | 1.0 | css_variable:--thm-text |
| `{color.muted}` | #999b9f | De-emphasized metadata | 7 | 0.6 | computed_style |
| `{color.light}` | #f4f5f8 | Subtle section backgrounds | 1 | 1.0 | css_variable:--light |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | #0048cb | Hero backgrounds, borders, primary buttons | 123 | 0.8 | computed_style |
| `{color.link}` | #0000ee | Interactive links on pricing/about pages | 70 | 0.8 | computed_style |
| `{color.accent}` | #ffaa17 | High-emphasis text highlights | 8 | 1.0 | css_variable:--thm-base |
| `{color.deep-blue}` | #003493 | Darker surface variants | 10 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Objectivity Extra Bold | 400, 800, 900 | Display Headings | Montserrat (Google Fonts) | Custom/Licensed |
| Objectivity Bold | 400, 700, 900 | Subheadings, UI | Montserrat (Google Fonts) | Custom/Licensed |
| Objectivity Regular | 300, 400, 500 | Body, Navigation | Montserrat (Google Fonts) | Custom/Licensed |
| Times New Roman | 400, 700 | Secondary headings | None | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 32px | 42.88px | normal | 900 | Section labels | `span.float-left` |
| `{type.h2}` | 31px | 48px | normal | 400 | Main section heads | `h2` |
| `{type.h3}` | 28px | 34px | normal | 400 | Fact/Counter blocks | `div.factsbor` |
| `{type.h4}` | 26px | 29.9px | normal | 700 | Case study titles | `div.casestudycont` |
| `{type.body-lg}` | 18px | 28.98px | normal | 500 | Subtitles | `p.casestudysubtitle` |
| `{type.body}` | 16px | 34px | normal | 400 | Navigation links | `a` |
| `{type.body-sm}` | 14px | 22.54px | normal | 400 | Card descriptions | `div.casestudysubcont` |
| `{type.caption}` | 12px | 20px | normal | 400 | Overline text | `p.overite` |

### Principles
1. **Display weight is absolute.** Use weight 900 for primary brand statements to maintain the "Objectivity" signature.
2. **Vertical rhythm is generous.** Line heights for body text (e.g., 34px for 16px font) are significantly taller than standard to improve readability on high-contrast backgrounds.
3. **Serif as secondary.** Times New Roman is used sparingly for specific sub-headers, providing a traditional counterpoint to the modern geometric sans.

## Spacing
**Base unit:** 20px (most frequent occurrence)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 14 |
| `{space.sm}` | 15px | 13 |
| `{space.md}` | 20px | 57 |
| `{space.lg}` | 30px | 22 |
| `{space.xl}` | 50px | 7 |
| `{space.xxl}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Primary buttons, section containers | 399 occurrences |
| `{radius.soft}` | 7px | Content cards, form inputs | 14 occurrences |
| `{radius.pill}` | 50px | Decorative panels | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | rgba(0, 0, 0, 0.16) 0px 5px 10px 0px | Service cards | 4 occurrences |
| `{shadow.deep}` | rgba(0, 0, 0, 0.55) 2px -4px 25px -11px | Featured case studies | 5 occurrences |
| `{shadow.accent}` | rgb(255, 192, 67) 4px 5px 0px 0px | Highlighted UI elements | 2 occurrences |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Pricing, About)
**Pages observed:** /pricing, /about
**Spec:** Background `{color.light}` (#f0f0f0) / Text `{color.ink}` (#000000) / Border 2px solid `{color.ink}` (#000000) / Radius `{radius.sharp}` (0px) / Padding 1px 6px / Typography 13px
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Service Card
**Role:** Displaying agency offerings
**Pages observed:** yungmedia.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.text}` (#686a6f) / Radius `{radius.soft}` (7px) / Padding 15px / Shadow `{shadow.card}`
**States observed:** Default: Captured

#### Case Study Card
**Role:** Featured work highlights
**Pages observed:** yungmedia.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.text}` (#686a6f) / Radius `{radius.soft}` (7px) / Padding 20px 60px 50px / Shadow `{shadow.deep}`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Contact Input
**Role:** Lead generation form
**Pages observed:** yungmedia.com
**Spec:** Background `{color.primary}` (#0048cb) / Text `{color.white}` (#ffffff) / Border 1px solid `{color.white}` (#ffffff) / Radius `{radius.soft}` (7px) / Typography 14px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px (approx) |
| Section padding | 80px vertical |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; section padding reduces to 20px; font sizes for headers scale down. |

## Imagery & decoration
- **Iconography:** Uses "Flaticon" and "Font Awesome 6 Brands" for service indicators.
- **Graphic Motif:** Concentric circular diagrams used in hero sections to visualize "Growth," "Strategy," and "Quality."
- **Avoids:** Soft gradients, rounded buttons, and low-contrast text.

## Do's
- Use **Objectivity Extra Bold** at weight 900 for all primary section titles.
- Maintain a **0px border radius** on all primary CTA buttons.
- Alternate sections between **#ffffff** and **#0048cb** backgrounds.
- Use **#ffaa17** (Yellow) exclusively for text highlights within blue sections.
- Apply **rgba(0, 0, 0, 0.16)** shadows to cards to provide depth on white backgrounds.

## Don'ts
- Do not use rounded corners (radius > 0px) on primary action buttons.
- Do not substitute **Objectivity** with a serif font for body copy.
- Do not use the sub-brand blue (if any were defined) as the primary background; stick to **#0048cb**.
- Do not use letter-spacing on display headings; keep it "normal."

## Similar brands
- IBM (Carbon Design System)
- Huge Inc.
- R/GA

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #0048cb;
  --color-accent: #ffaa17;
  --color-ink: #222429;
  --color-text: #686a6f;
  --font-display: "Objectivity Extra Bold", sans-serif;
  --radius-sharp: 0px;
  --radius-soft: 7px;
}
```

## Agent prompt examples
- "Generate a hero section with a #0048cb background, white weight-900 Objectivity text, and a sharp 0px radius button with a 2px black border."
- "Create a service grid using 7px rounded white cards with a 10px blur shadow and #686a6f body text."
- "Design a contact form footer using #0048cb background and white input fields with 7px border radius."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the computed style logs.
- The specific mobile breakpoint trigger (px) was not defined in the CSS variables, though mobile layouts were observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://yungmedia.com | 1440px | 2026-06-06 |
| Pricing | https://yungmedia.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://yungmedia.com | 390px | 2026-06-06 |