# Evs Design System

> High-contrast technical interface using deep obsidian foundations and cyan-blue precision accents.

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

## TL;DR
Evs utilizes a "Dark Tech" aesthetic rooted in a high-contrast palette of Obsidian (`#131720`) and pure White (`#ffffff`). The system is punctuated by a high-voltage Cyan (`#00aeef`) used for primary actions and interactive highlights. Typography is exclusively Inter, favoring light weights (300) for body and standard weights (400) for large display headers, creating a clean, broadcast-engineering feel. Layouts are defined by generous vertical breathing room (up to 160px) and sharp, rectangular sectioning occasionally softened by large-radius (35px-50px) pill components.

## Signature DNA
1. **The Cyan Spark:** A high-saturation primary blue (`#00aeef`) is used sparingly but decisively for primary CTAs and active UI states against dark backgrounds.
2. **Light-Weight Utility:** Body copy and secondary links consistently use Inter at weight 300, providing a sophisticated, technical contrast to large 60px headers.
3. **Obsidian Foundations:** Deep achromatic surfaces (`#131720`) serve as the primary canvas for product showcases, reinforcing the brand's connection to live production environments.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary text on dark | 39 | 0.8 | Computed Style |
| `{color.obsidian}` | `#131720` | Dark section backgrounds, primary text | 21 | 0.8 | Computed Style |
| `{color.slate-light}` | `#f1f3f7` | Subtle section backgrounds | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.cyan}` | `#00aeef` | Primary button background, accent text | 33 | 0.8 | Computed Style |
| `{color.steel}` | `#636f7e` | Secondary text, borders, button text | 65 | 0.8 | Computed Style |
| `{color.navy-deep}` | `#2e3b4a` | Heading text | 24 | 0.8 | Computed Style |
| `{color.charcoal}` | `#1c212e` | Dark text emphasis | 17 | 0.8 | Computed Style |
| `{color.ash}` | `#98a2ae` | Muted borders and secondary text | 11 | 0.8 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Inter | 300, 400, 500 | All-purpose (Display, Heading, Body) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 60px | 64px | -2px | 400 | Hero H1 | `span.h1` |
| `{type.display.lg}` | 56px | 64px | -2px | 400 | Section Display | `span` |
| `{type.heading.md}` | 32px | 40px | -0.5px | 400 | Section Headings | `div.h3` |
| `{type.heading.sm}` | 24px | 32px | -0.5px | 500 | Sub-headings | `h4` |
| `{type.body.lg}` | 18px | 32px | -0.5px | 300 | Hero Intro Text | `section.hp__section--hero` |
| `{type.body.md}` | 18px | 27px | -0.5px | 300 | Standard Paragraphs | `p` |
| `{type.button}` | 16px | 16px | -0.5px | 300 | Primary CTA Text | `a.btn` |
| `{type.body.sm}` | 14px | 14px | -0.5px | 500 | Utility Links | `a` |

### Principles
1. **Tight Display Tracking:** Large headers (32px+) use aggressive negative letter spacing (-2px) to maintain a compact, professional look.
2. **Lightweight Body:** Running text is almost exclusively weight 300, creating a "breathable" feel despite high-contrast colors.
3. **Vertical Rhythm:** Line heights for body text are generous (approx 1.5x - 1.7x the font size) to ensure legibility on dark backgrounds.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 10 |
| `{space.sm}` | 16px | 22 |
| `{space.md}` | 24px | 11 |
| `{space.lg}` | 40px | 24 |
| `{space.xl}` | 80px | 14 |
| `{space.section}` | 160px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp UI | 168 occurrences |
| `{radius.pill}` | 35px | Primary Buttons | `a.btn` |
| `{radius.large}` | 50px | Large UI Panels / Feature Cards | 8 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Standard layout | Default state across all pages |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action for lead generation and navigation.
**Pages observed:** https://evs.com, https://evs.com/about
**Spec:** Background: `{color.cyan}` (#00aeef) / Text: `{color.white}` (#ffffff) / Radius: 35px / Padding: 16px 40px / Typography: `{type.button}`
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

#### Secondary Ghost Button
**Role:** De-emphasized actions or secondary navigation.
**Pages observed:** https://evs.com
**Spec:** Background: transparent / Text: `{color.steel}` (#636f7e) / Border: 1px `{color.ash}` (#98a2ae) / Radius: 50% (Circular) / Padding: 0px / Typography: 18px
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Dark Surface Section
**Role:** High-impact product or feature showcase.
**Pages observed:** https://evs.com, https://evs.com/about
**Spec:** Background: `{color.obsidian}` (#131720) / Text: `{color.white}` (#ffffff) / Padding: 160px 0px
**States observed:** Default: Captured

#### Light Surface Section
**Role:** Content-heavy information or secondary features.
**Pages observed:** https://evs.com
**Spec:** Background: `{color.slate-light}` (#f1f3f7) / Text: `{color.steel}` (#636f7e) / Padding: 160px 0px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Circular Navigation Control
**Role:** Carousel or slider navigation.
**Pages observed:** https://evs.com
**Spec:** Background: `{color.obsidian}` (#131720) / Border: 1px `{color.steel}` (#636f7e) / Radius: 50% / Size: 40px x 40px
**States observed:** Default: Captured

#### White Ghost Button
**Role:** Secondary actions on white backgrounds.
**Pages observed:** https://evs.com
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.steel}` (#636f7e) / Border: 1px `{color.ash}` (#98a2ae) / Radius: 50%
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1440px |
| Section Vertical Padding | 160px |
| Element Gap (Standard) | 40px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked layouts, reduced section padding |

## Imagery & decoration
Evs uses high-resolution, dark-themed photography of live production environments (stadiums, broadcast trucks). Visuals often feature shallow depth of field and technical equipment. The brand avoids illustrative icons, preferring minimal glyphs and high-contrast text-on-image treatments.

## Do's
- Use `#131720` for all dark-mode section backgrounds.
- Apply `-2px` letter spacing to all headers above 32px.
- Use Inter 300 for all paragraph text to maintain technical elegance.
- Reserve `#00aeef` exclusively for primary interactive elements.
- Maintain 160px vertical padding between major content blocks.

## Don'ts
- **Wrong:** Using a generic blue (#007aff) for primary buttons. **Right:** Use Cyan (#00aeef). **Reason:** Brand identity relies on the specific high-voltage cyan.
- **Wrong:** Using bold weights (700+) for headings. **Right:** Use weight 400. **Reason:** Evs identity is built on "Light Tech" sophistication, not heavy impact.
- **Wrong:** Applying small border radii (4px-8px). **Right:** Use 0px for sections or 35px+ for pills. **Reason:** The system is a mix of absolute sharp and absolute round.
- Do not use pure black (#000000); use Obsidian (#131720).
- Do not use standard Inter tracking (0) for display headers.

## Similar brands
- Blackmagic Design
- Grass Valley
- Sony Pro
- Riedel Communications

## Quick start

```css
/* CSS Custom Properties */
:root {
  --evs-cyan: #00aeef;
  --evs-obsidian: #131720;
  --evs-white: #ffffff;
  --evs-steel: #636f7e;
  --evs-slate-light: #f1f3f7;
  
  --evs-font-main: 'Inter', sans-serif;
  
  --evs-radius-pill: 35px;
  --evs-space-section: 160px;
}
```

## Agent prompt examples
- "Create a hero section for Evs using a #131720 background, an Inter 400 heading at 60px with -2px tracking, and a primary pill button using #00aeef."
- "Design a content card for Evs with a 1px #98a2ae border, Inter 300 body text at 18px, and 40px internal padding."
- "Generate a secondary navigation bar using #636f7e text and circular ghost buttons with 1px #98a2ae borders."

## Known gaps
- Hover and Active states for buttons were not captured in the initial crawl.
- Mobile-specific typography scale for mid-range headings (24px-32px) was limited in evidence.
- Shadow tokens were not detected; the system appears to rely on flat color and borders for depth.

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