# Samba.tv Design System

> High-contrast data-driven canvas where deep obsidian surfaces meet a singular electric violet pulse.

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

## TL;DR
Samba.tv utilizes a "Dark Mode by Default" architecture, anchoring its identity in a deep navy-black foundation `#212530` and pure obsidian `#101014`. The primary brand voltage is delivered through "Samba Blue" `#5d57e9`, a vibrant violet-leaning blue used for critical CTAs, active states, and decorative data-viz wireframes. Typography is strictly functional, pairing Arial for high-impact headlines with Helvetica Neue for dense corporate data. The system relies on generous vertical spacing (up to 200px) and sharp-edged or 20px rounded containers to separate complex data narratives.

## Signature DNA
1. **The Electric Pulse** (Samba Blue `#5d57e9` acts as the sole chromatic signal against achromatic backgrounds, used for the "Contact Us" pill and interactive data nodes across the homepage and about page.)
2. **Obsidian Depth** (Large-scale sectioning uses `#212530` and `#101014` to create a "broadcast" atmosphere, mimicking the dark environment of a living room television.)
3. **Wireframe Data-Viz** (Abstract geometric globes and line charts using 1px `#5d57e9` strokes serve as the primary decorative motif, reinforcing the "Data that powers TV" narrative.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--samba-black` | `#212530` | Primary section background / Dark text | 25 | 1.0 | Computed Style |
| `--white-smoke` | `#f4f3f6` | Light section background / Secondary text | 8 | 1.0 | Computed Style |
| `--light-grey` | `#d6d6d6` | Borders and muted text | 32 | 1.0 | Computed Style |
| `--foundation-obsidian` | `#101014` | Deepest surface background | 6 | 0.6 | Computed Style |
| `--foundation-white` | `#ffffff` | Primary body text on dark / Button text | 70 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--samba-blue` | `#5d57e9` | Primary CTA / Active borders / Brand icons | 44 | 1.0 | `--samba-blue` |
| `--samba-red` | `#fa5a62` | Decorative data points (minor) | 1 | 0.4 | `--samba-red` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Arial | 300, 400, 500, 700 | Headings / Display | Arimo | System |
| Helvetica Neue | 400, 500 | Body / UI Labels | Inter | Commercial |
| Roboto Mono | 400, 700 | Eyebrows / Technical labels | Roboto Mono | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 40px | 44px | normal | 500 | Hero Section Heads | `h2.heading8_whysamba` |
| `{type.h2}` | 36px | 43.2px | normal | 700 | Main Section Titles | `h2.h2_mainsite` |
| `{type.h3}` | 32px | 36px | normal | 400 | Sub-section Heads | `h2.h3_mainsite` |
| `{type.h4}` | 21px | 29.4px | normal | 700 | Card Titles | `h4.scroll-item-header` |
| `{type.body-lg}` | 18px | 28.8px | normal | 700 | Centered Subheads | `h4.h4_mainsite.center` |
| `{type.body}` | 16px | 22.4px | 0.2px | 400 | Standard Paragraph | `p.p_mainsite.white` |
| `{type.eyebrow}` | 14px | 18px | normal | 700 | Mono Section Labels | `h6.h6_mainsite.eyebrow` |
| `{type.caption}` | 11px | 20px | normal | 400 | Footer Links | `a.footer-bottom-links` |

### Principles
1. **Achromatic Hierarchy:** Use white text `#ffffff` on dark backgrounds and `#333333` on light backgrounds for maximum legibility.
2. **Monospace Context:** Use Roboto Mono for "eyebrow" text and technical titles to signal data-driven precision.
3. **Tight Display:** Large headings (36px+) utilize a tight 1.2 line-height ratio for a compact, editorial look.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 62 |
| `{space.sm}` | 16px | 28 |
| `{space.md}` | 20px | 49 |
| `{space.lg}` | 60px | 5 |
| `{space.section}` | 200px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers / Timeline cards | 186 occurrences |
| `{radius.sm}` | 4px | Form inputs / Small cards | `radius: 4px` |
| `{radius.md}` | 8px | Interactive surfaces | `radius: 8px` |
| `{radius.lg}` | 20px | Feature cards / Profile containers | `radius: 20px` |
| `{radius.pill}` | 60px | Primary CTA Buttons | `radius: 60px` |

## Elevation
Table: Not captured in source. The system is predominantly flat, relying on color blocking and 1px borders for depth.

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Contact Us)
**Pages observed:** https://samba.tv, https://samba.tv/about
**Spec:** Background: `#5d57e9` | Text: `#ffffff` | Radius: `60px` | Padding: `16px 35px` | Typography: Arial 16px
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Leadership Card
**Role:** Bio display for executives
**Pages observed:** https://samba.tv/about
**Spec:** Background: `#ffffff` | Text: `#212530` | Border: 1px `#d6d6dd` | Radius: `0px` | Padding: `20px`
**States observed:** Default: Captured

#### Timeline Item
**Role:** Chronological company milestones
**Pages observed:** https://samba.tv/about
**Spec:** Background: `#ffffff` | Border-top: 4px `#5d57e9` | Radius: `0px` | Padding: `20px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Data Feature Block
**Role:** Highlighting specific technology stats
**Pages observed:** https://samba.tv
**Spec:** Background: `#101014` | Text: `#ffffff` | Border: none | Radius: `0px` | Padding: `50px 0px`
**States observed:** Default: Captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** https://samba.tv, https://samba.tv/about
**Spec:** Background: `#101014` | Text: `#ffffff` | Height: `35px` (inner) | Typography: Arial 14px
**States observed:** Default: Captured

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** https://samba.tv, https://samba.tv/about
**Spec:** Background: `#101014` | Text: `#d6d6d6` | Border-top: 1px `#333333` | Padding: `60px 0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 200px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Section padding reduces; Typography scales down (Display 40px -> 32px). |

## Imagery & decoration
- **Wireframe Graphics:** 1px stroke illustrations of globes and charts in `#5d57e9`.
- **Photography:** High-quality lifestyle imagery (people watching TV) used in heroes, often with a dark overlay to maintain text contrast.
- **Logo Grid:** Grayscale logo treatment for partner brands (AOC, Sony, etc.) to prevent chromatic competition.

## Do's
- Use `#5d57e9` for the primary "Contact Us" action only.
- Maintain high contrast by using `#ffffff` text on all dark foundation colors.
- Use Roboto Mono for section eyebrows to reinforce the "Data" brand pillar.
- Apply `20px` radius to feature cards but keep section containers `0px`.
- Ensure 200px vertical spacing between major homepage sections.

## Don'ts
- **Wrong:** Using `#9e77ed` (Untitled UI token) as the primary brand blue.
  **Right:** Use `--samba-blue` (`#5d57e9`).
  **Reason:** `#5d57e9` is the validated brand primary; other tokens are legacy or framework defaults.
- **Wrong:** Placing `#333333` text on a `#212530` background.
  **Right:** Use `#ffffff` for text on dark surfaces.
  **Reason:** Contrast ratio is insufficient for accessibility.
- **Wrong:** Rounding the corners of the main navigation bar.
  **Right:** Keep navigation and section blocks at `0px` radius.
  **Reason:** The system uses sharp edges for structural layout.

## Similar brands
- Vizio (Data/TV focus)
- Nielsen (Corporate/Data focus)
- Roku (Dark mode entertainment UI)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --samba-blue: #5d57e9;
  --samba-black: #212530;
  --obsidian: #101014;
  --white-smoke: #f4f3f6;
  --light-grey: #d6d6d6;
  --font-heading: 'Arial', sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}
```

## Agent prompt examples
- "Create a hero section with a background of #101014, a heading in Arial 40px weight 500 (#ffffff), and a pill-shaped button using #5d57e9."
- "Design a feature card with a 20px border radius, a 1px border of #d6d6d6, and an eyebrow label in 14px Roboto Mono."
- "Generate a data visualization component using 1px strokes of #5d57e9 on a #212530 surface."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Shadow tokens were not present in the CSS variables or computed styles.
- Success and Error semantic colors were not observed on the analyzed marketing pages.