# Viewed.video Design System

> High-contrast monochrome utility meets a warm sunset-orange accent for a technical yet accessible video-marketing platform.

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

## TL;DR
Viewed.video utilizes a high-contrast foundation of deep charcoal `#303030` and pure white `#ffffff` to maintain a professional, utility-first aesthetic. The brand's primary energy is derived from a single, saturated orange accent `#faab4c`, used consistently for primary calls-to-action and critical text highlighting. Typography is anchored by **Ubuntu**, utilizing heavy weights (700-900) for display and lighter weights (300) for body copy to create a clear hierarchy. Layouts are spacious, often employing 80px to 90px section gaps and rounded pill-shaped buttons with 25px radii to soften the technical nature of the product.

## Signature DNA
1. **Sunset Pill CTAs** (The primary action is always a pill-shaped button `#faab4c` with white text, often featuring a 2px border or bevel effect to stand out against white or dark backgrounds).
2. **Ubuntu Weight Contrast** (The system pairs ultra-heavy 900 weight display text at 48px with light 300 weight body text at 16px-18px, creating a "bold header, airy content" rhythm).
3. **Monochrome Foundations** (The interface relies on `#303030` for almost all text and `#f7f8f9` for secondary surfaces, ensuring the orange accent remains the sole focus of the user journey).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--body_typography-color` | `#303030` | Primary text, headings, and dark borders | 222 | 1 | Computed Style |
| `--bg_color` | `#ffffff` | Primary page background and button text | 123 | 1 | Computed Style |
| `--awb-custom19` | `#5d5f64` | Secondary body text and form labels | 57 | 1 | Computed Style |
| `--awb-custom20` | `#f7f8f9` | Section backgrounds and inactive tabs | 21 | 1 | Computed Style |
| `--awb-color2` | `#edeef2` | Dividers, form borders, and separators | 3 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary_color` | `#faab4c` | Primary CTA background, links, and icons | 63 | 1 | Computed Style |
| `--awb-color5` | `#f8ad42` | Secondary accent, hover states, and borders | 48 | 1 | Computed Style |
| `--awb-color7` | `#0093d6` | Decorative blue accent (rare) | 9 | 1 | Computed Style |
| `accent-pink` | `#dd4167` | Decorative only | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Ubuntu | 300, 400, 700, 900 | All headings, body, and UI | Ubuntu (Google Fonts) | Canonical |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 48px | 62.4px | -2px | 900 | Hero display | `span:nth-of-type(1)` |
| `display-lg` | 48px | 62.4px | -2px | 700 | Primary headings | `h1.fusion-title-heading` |
| `display-md` | 40px | 52px | -1px | 700 | Section headers | `h2.fusion-title-heading` |
| `heading-md` | 30px | 36px | -1px | 700 | Sub-section headers | `h2.fusion-title-heading` |
| `heading-sm` | 24px | 31.2px | -1px | 700 | Feature titles | `h4.fusion-title-heading` |
| `body-lg` | 18px | 28px | 0.5px | 300 | Primary body copy | `p` |
| `body-md` | 16px | 22.85px | normal | 300 | Standard content | `section#content` |
| `button-text` | 14px | 17px | 1px | 700 | CTA labels | `a.fusion-button` |

### Principles
1. **Negative Tracking on Display:** All text 24px and above uses negative letter-spacing (-1px to -2px) to maintain visual density.
2. **Light Body Weight:** Standard body copy is almost exclusively weight 300, providing an airy feel against heavy headers.
3. **Uppercase Buttons:** Small CTA text (12px-14px) uses 1px letter spacing and heavy 700 weight for legibility.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 5px | 9 |
| `space-sm` | 20px | 81 |
| `space-md` | 30px | 33 |
| `space-lg` | 80px | 9 |
| `space-xl` | 90px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Sections, sharp containers | 384 occurrences |
| `radius-sm` | 5px | Form inputs | 3 occurrences |
| `radius-pill` | 25px | Buttons and small panels | 39 occurrences |
| `radius-full` | 50% | Icon circles and avatars | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main site actions (Try for Free, Sign Up)
**Pages observed:** All
**Spec:** Background `#faab4c` / Text `#ffffff` / Border `#ffffff` (2px) / Radius 25px / Padding 13px 29px / Typography Ubuntu 700 (14px)
**States observed:** Default | Hover: `#f9bd72` | Focus: not captured | Active: captured | Disabled: not captured

#### Outline Button
**Role:** Secondary actions (Book a Demo, Find Out More)
**Pages observed:** All
**Spec:** Background `transparent` / Text `#faab4c` / Border `#faab4c` (2px) / Radius 25px / Padding 11px 23px / Typography Ubuntu 700 (13px)
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

### Tier 2: Patterns

#### Feature Surface
**Role:** Content grouping with subtle separation
**Pages observed:** All
**Spec:** Background `#f7f8f9` / Text `#303030` / Border `none` / Radius 0px / Padding 22.5px 27px
**States observed:** Default

#### Icon Circle
**Role:** Decorative or functional icon containers
**Pages observed:** All
**Spec:** Background `transparent` / Text `#faab4c` / Border `#5d5f64` (1px) / Radius 50% / Padding 0px
**States observed:** Default | Hover: Background `#ffffff`

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-impact footer or transition bands
**Pages observed:** Homepage, About
**Spec:** Background `#313131` / Text `#ffffff` / Border `none` / Radius 0px / Padding 50px 30px 90px
**States observed:** Default

#### Integration Card
**Role:** Partner and CRM display
**Pages observed:** Homepage
**Spec:** Background `transparent` / Text `#303030` / Border `#e2e2e2` (1px) / Radius 25px / Padding 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max content width | ~1200px |
| Section Gap | 80px - 90px |
| Column Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; text aligns center; padding reduces to 20px |
| Desktop | 1440px | Multi-column grids (3-up for features); horizontal top-nav |

## Imagery & decoration
Viewed.video uses high-quality product screenshots with soft shadows and "Before/After" split-screen comparisons. Decorative elements include stylized envelope icons and subtle gradients in background bands (e.g., green-to-blue integration bands). It avoids overly complex illustrations, favoring clean UI-driven graphics.

## Do's
- Use `#faab4c` for all primary conversion points.
- Pair Ubuntu 900 headers with Ubuntu 300 body text.
- Maintain 80px-90px vertical spacing between major sections.
- Use 25px border radius for all interactive button elements.
- Keep background surfaces either pure white `#ffffff` or light gray `#f7f8f9`.

## Don'ts
- **Wrong:** Using `#0093d6` for a primary button. **Right:** Use `#faab4c`. **Reason:** Blue is a decorative accent only; orange is the conversion color.
- **Wrong:** Setting body text in Ubuntu 700. **Right:** Use Ubuntu 300. **Reason:** Heavy weights are reserved for display hierarchy.
- **Wrong:** Using sharp corners for buttons. **Right:** Use 25px radius. **Reason:** The brand identity relies on the "pill" shape for interactivity.
- Do not use `#303030` as a background for primary text sections; keep it for headers and footers.
- Do not use more than one primary CTA per view.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #faab4c;
  --primary-hover: #f9bd72;
  --ink: #303030;
  --ink-muted: #5d5f64;
  --canvas: #ffffff;
  --canvas-soft: #f7f8f9;
  --radius-pill: 25px;
  --font-main: 'Ubuntu', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Viewed.video style: Ubuntu 700, 14px, uppercase, sunset orange background #faab4c, white text, and a 25px pill radius."
- "Design a feature section with a light gray background #f7f8f9, an Ubuntu 900 header in #303030, and body text in Ubuntu 300."
- "Generate a pricing card with a 1px #edeef2 border, 25px corner radius, and a primary orange button at the bottom."

## Known gaps
- Hover states for tertiary links were not fully captured in the bulk run.
- Shadow tokens were not explicitly declared in the CSS variables, though visual shadows exist on product screenshots.
- Mobile-specific font size scaling for display-mega was not captured.

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