---
version: alpha
name: Vivaldi
description: A bright white canvas, a single confident signal-red accent, deep slate-navy ink, and a friendly system-font sans — the browser-for-power-users dressed in calm, customizable, geometry-first chrome instead of neon.
category: Browser
styles: Light, Playful, Colorful, Minimal

colors:
  # Surface / canvas
  background: "#ffffff"          # the dominant bright-white canvas
  surface: "#ffffff"            # cards and panels sit on white
  surface-muted: "#eeeeee"      # light gray section bands, inset rows
  surface-tint: "#f2f4f8"       # faint cool tint behind hero gradients — derived from the soft mesh

  # Ink / text — Vivaldi's slate-navy family, never pure black
  ink: "#2f374f"               # primary headings + body — the dominant slate-navy (670 hits)
  ink-strong: "#2f374f"        # display headings, full weight
  ink-medium: "#424b67"        # secondary copy
  ink-soft: "#4f5878"          # tertiary copy, captions, footer links
  ink-muted: "#475467"         # muted helper text — was --green-text
  on-primary: "#ffffff"        # white text on the red accent
  on-dark: "#ffffff"           # text on the rare dark/near-black surface

  # Brand accent — the singular Vivaldi red
  primary: "#ef3939"           # the signature signal red — CTAs, logo, focus, links-on-hover
  primary-hover: "#cb3030"     # deeper red on hover/active — was the extracted hover
  primary-deep: "#d9302d"      # pressed / strong variant

  # Dark chrome (the active-tab black from the product UI)
  ink-black: "#111111"         # near-black active-tab / dark UI surface — was #111

  # Borders
  border: "#eeeeee"            # hairline dividers, card edges
  border-strong: "#b7bcc0"     # control + input outlines — the cool neutral gray

  # Semantic (the site exposes these)
  success: "#1b8848"           # was --success-text
  donate: "#2f374f"            # donate/highlight text — was --donate-text

  # Bullet / list marker tint
  bullet: "#d9d9d9"            # was rgba(0,0,0,0.15) — Google format requires hex

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.05) — Google format requires hex
  shadow-ambient: "#000000"    # was rgba(0,0,0,0.1) — Google format requires hex
  shadow-highlight: "#ffffff"  # was rgba(255,255,255,0.25) inset — Google format requires hex

typography:
  display-hero:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 900
    lineHeight: 1.25
    letterSpacing: -1.408px
  display:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 54px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: -1.188px
  heading:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.27
    letterSpacing: -0.968px
  heading-sub:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.572px
  lead:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.64
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.78
    letterSpacing: 0px
  body:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  body-strong:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: -0.396px
  button-ui:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.86
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 5px
  lg: 7px
  xl: 16px
  pill: 9999px

components:
  # Sticky white top nav with the red CTA at the right
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 32px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  nav-link-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary}"

  # Primary solid red CTA — "Download Vivaldi"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"

  # Secondary outline button on white
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xl}"
    padding: 12px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary}"

  # Ghost / text button
  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary-hover}"

  # Standard card on white
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-feature:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Form input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Link
  link:
    textColor: "{colors.ink-soft}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary}"

  # Badge / tag
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  # Dark active-tab chrome chip (from the product UI)
  chip-active:
    backgroundColor: "{colors.ink-black}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 6px 12px
---

# Vivaldi Design System

## Overview

Vivaldi's site is the rare power-user pitch that doesn't *look* like a power-user pitch. The headline — "The only web browser powerful enough for you!" — promises endless customization and a wall of features, yet the page that frames it is almost serene: a bright, edge-to-edge white canvas (`{colors.background}`), deep slate-navy ink (`{colors.ink}`), and a single, unmistakable signal-red (`{colors.primary}`) that does every piece of brand signaling on the page. There is no gradient sludge, no glassmorphism, no competing accent. The restraint is the strategy — when the product itself is a maximalist toolbox, the marketing site stays calm so the screenshots can do the shouting.

The defining gesture is that **one red**. `{colors.primary}` is a warm, slightly orange-leaning crimson (the Vivaldi diamond logo color) and it is rationed with discipline: the primary "Download Vivaldi" CTA, the logo, link hover states, focus rings, and the occasional badge. Everything else is the slate-navy ink family — `{colors.ink}` for headings and body, `{colors.ink-medium}` and `{colors.ink-soft}` stepping down through secondary and tertiary copy. That navy-instead-of-black choice is what keeps the page friendly rather than corporate; pure black would read as severe, but a blue-violet-tinted slate reads as approachable and human. Behind the hero, a barely-there cool tint (`{colors.surface-tint}`) blooms at the edges — a whisper of atmosphere, not a light show.

What makes Vivaldi feel *like itself* is the collision of a heavy, confident display voice against an otherwise quiet system. The hero headline runs at weight 900 (`{typography.display-hero}`) with tight negative tracking — bold, dense, almost shouty type — sitting on a calm white field with one red button beneath it. The chrome geometry is friendly and small-radius (4–7px on most controls, `{rounded.xl}` 16px on the rounded CTA pill), the shadows are soft and wide and diffuse, and the typeface is a plain system-UI sans (closest web match: **Inter**) chosen for legibility and neutrality rather than personality. Vivaldi's design says: the *browser* is where you express yourself — the website just gets out of the way.

**Key Characteristics:**
- Bright edge-to-edge white canvas (`{colors.background}`) — clean, never sterile, occasionally banded with light gray (`{colors.surface-muted}`)
- A single signal-red accent (`{colors.primary}`) doing all brand work — CTAs, logo, link-hover, focus, badges
- Slate-navy ink (`{colors.ink}`), never pure black — a blue-violet-tinted family that reads warm and friendly
- Heavy weight-900 display headlines (`{typography.display-hero}`) with tight negative tracking — confident, dense type on a calm field
- System-UI sans throughout (closest web font: Inter) — chosen for neutral legibility, not character
- Friendly small-radius geometry (`{rounded.sm}`–`{rounded.lg}`, 4–7px) with a rounded `{rounded.xl}` (16px) CTA pill
- Soft, wide, diffuse drop shadows (`0 2px 64px` at 5% black) — atmospheric lift, never hard edges
- A near-black chrome chip (`{colors.ink-black}`) borrowed from the product's active-tab UI
- Generous line-height on body copy (1.64–1.78) — relaxed, readable rhythm
- 8px-based spacing scale — orderly, predictable, never cramped

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant canvas. Hero, sections, cards — almost everything sits on bright white.
- **Light Gray** (`{colors.surface-muted}`): Section bands, inset rows, and secondary-button hover fills that separate content zones without a hard divider.
- **Cool Tint** (`{colors.surface-tint}`): A faint blue-gray wash that blooms behind the hero — the only atmospheric color move on the page.

### Ink / Text
- **Slate Navy** (`{colors.ink}`): The primary ink — headings and body. The single most-counted color in the extraction. Blue-violet-tinted, never pure black.
- **Medium Slate** (`{colors.ink-medium}`): Secondary copy and sub-headings.
- **Soft Slate** (`{colors.ink-soft}`): Tertiary copy, captions, footer links at rest.
- **Muted Helper** (`{colors.ink-muted}`): Low-emphasis helper text.

### Brand Accent
- **Vivaldi Red** (`{colors.primary}`): The signature. The download CTA, the diamond logo, link-hover, focus rings, badges. Rationed with discipline — one red, everywhere it matters.
- **Red Hover** (`{colors.primary-hover}`): The deeper red on hover.
- **Red Deep** (`{colors.primary-deep}`): The pressed / strong variant.

### Dark Chrome
- **Near-Black** (`{colors.ink-black}`): The active-tab black lifted from the product UI — used for dark chrome chips and inverted micro-surfaces.

### Borders & Semantic
- **Hairline** (`{colors.border}`) / **Strong Border** (`{colors.border-strong}`): Dividers and card edges (hairline) vs. control/input outlines (the cool neutral gray).
- **Success** (`{colors.success}`): The site's exposed success-text green.
- **Bullet Tint** (`{colors.bullet}`): List-marker gray (flattened from a translucent black).

### Shadow Tints
- **Shadow / Highlight tints** (`{colors.shadow-soft}`, `{colors.shadow-ambient}`, `{colors.shadow-highlight}`): Opaque stand-ins for the soft, wide drop shadows and the subtle 1px white inset highlight on buttons (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary (all roles)**: a **system-UI sans** — the site uses the native font stack (`system-ui`). The closest web-deliverable match is **Inter**, with fallbacks `system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif`. There is no display face, no serif, no monospace — one neutral sans carries everything.
- **Weight strategy**: a wide weight range from 400 (body) to 900 (hero display) is the entire typographic expression. Vivaldi gets its voice from *weight contrast*, not from a distinctive typeface.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / 900 / -1.408px — the marquee headline ("powerful enough for you!") |
| `display` | 54px / 700 — large section headlines |
| `heading` | 44px / 700 — feature headings |
| `heading-sub` | 26px / 700 — sub-section headings, large links |
| `lead` | 22px / 400 / 1.64 — lead paragraphs, intro copy |
| `body-large` | 18px / 400 / 1.78 — emphasized body, nav-adjacent copy |
| `body` | 16px / 400 / 1.75 — standard body |
| `body-strong` | 16px / 700 — inline emphasis |
| `nav-link` | 18px / 500 — primary navigation items |
| `button-ui` | 16px / 500 — button labels |
| `caption` | 14px / 400 / 0.5px — captions, footer meta |

### Principles
- **Weight is the voice**: with one neutral sans, Vivaldi expresses hierarchy through weight (900 → 700 → 500 → 400), not through type contrast.
- **Heavy heroes, light body**: weight-900 display on a calm white field; relaxed 400-weight body with generous 1.64–1.78 line-height.
- **Tight tracking scales with size**: -1.408px at 64px easing to 0px at body size — large type compresses, reading text breathes.
- **System-native by choice**: the plain UI font signals "this is software," not "this is a brand campaign."

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (the most-counted value by a wide margin).

The rhythm is orderly and predictable — `{spacing.sm}` (8px) for micro-gaps, `{spacing.lg}` (16px) and `{spacing.xl}` (24px) as the workhorse component spacing, scaling up to `{spacing.5xl}` (96px) between major sections. Nothing feels cramped; nothing sprawls.

### Grid & Container
- Max content width: a centered column roughly 1200–1320px wide
- Hero: centered single column — heavy headline, light subhead, one red CTA, then a full-width product screenshot below
- Sections alternate white and light-gray (`{colors.surface-muted}`) bands to segment content
- A dense responsive breakpoint ladder (35 stops from 320px to 2100px) suggests careful per-width tuning rather than a few coarse jumps

### Whitespace Philosophy
- **Calm around a loud product**: the site gives the maximalist browser screenshots room to breathe
- **Bands, not borders**: zones are separated by alternating white/gray fills more than by hairlines
- **Generous body leading**: relaxed line-height does as much spacing work as margins

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Page text, white sections, banded content |
| Subtle (Level 1) | `0 3px 7px` at 10% (`{colors.shadow-ambient}`) | Small lifted controls, hover hints |
| Card (Level 2) | `0 2px 64px` at 5% (`{colors.shadow-soft}`) — wide, soft, diffuse | Floating cards, the hero product screenshot |
| Elevated (Level 3) | `0 2px 64px` at 7.5% (`{colors.shadow-soft}`) | The most-lifted product surface |
| Inset highlight | `0 1.6px 0 inset` white-25 (`{colors.shadow-highlight}`) | Top-edge highlight on the red CTA — a subtle physical rim |
| Focus Ring | `0 0 0 2px {colors.primary}` | Keyboard focus — the red accent doubles as the focus signal |

**Shadow Philosophy**: Vivaldi's shadows are the opposite of dramatic. The signature is a very wide, very soft, low-opacity drop (`0 2px 64px` at 5% black) — more an ambient halo than a hard edge, so the hero screenshot appears to float a few millimeters off the page rather than cast a sharp shadow. The red CTA picks up a faint 1px white inset highlight along its top edge for a gentle keyboard-key lift. Depth here is atmospheric and quiet, matching the calm white canvas.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, the flush top nav |
| `sm` | 4px | Default — most controls, small chips, language pickers |
| `md` | 5px | Buttons, dropdowns, dark chrome chips |
| `lg` | 7px | Cards, dropdown menus (often `0 0 7px 7px` for docked menus) |
| `xl` | 16px | The rounded "Download Vivaldi" CTA pill |
| `pill` | 9999px | Reserved — avatars, fully-round status dots |

Vivaldi's geometry is friendly but restrained: most chrome sits in the tight 4–7px range, giving controls soft-but-crisp corners. The one expressive move is the `{rounded.xl}` (16px) CTA — noticeably rounder than everything around it, so the download button reads as the page's single most-inviting target.

## Components

The complete component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Vivaldi red (`{colors.primary}`) fill, white text, `{rounded.xl}` (16px) rounded pill. The "Download Vivaldi" CTA. Hover deepens to `{colors.primary-hover}`; active to `{colors.primary-deep}`.
- **`button-secondary`** — White fill, slate-navy text, same rounded pill. Hover fills light gray and shifts text to red.
- **`button-ghost`** — Transparent/white, red text, smaller `{rounded.md}` radius — low-emphasis text actions.

### Cards
- **`card`** / **`card-feature`** — White or light-gray surface, `{rounded.lg}` / `{rounded.xl}` radius, the wide soft drop shadow. Feature cards step up to the larger radius and 32px padding.

### Inputs
- **`input`** — White fill, `{colors.border-strong}` cool-gray outline, `{rounded.md}` radius. **`input-focus`** picks up the red focus ring rather than recoloring the field.

### Links
- **`link`** — Soft-slate (`{colors.ink-soft}`) at rest, shifting to Vivaldi red (`{colors.primary}`) with an underline on hover. The red-on-hover link is a core site behavior.

### Badges & Chrome
- **`badge`** — Red fill, white text, small `{rounded.sm}` radius — feature flags and "New" markers.
- **`chip-active`** — Near-black (`{colors.ink-black}`) fill, white text — the product's active-tab chrome, used for dark micro-surfaces.

### Navigation
- **`nav-bar`** — Flush white top bar, no radius, slate-navy 18px/500 nav links, red CTA pinned to the right. **`nav-link-hover`** fills light gray and reddens the label.

## Do's and Don'ts

### Do
- Use bright white (`{colors.background}`) as the dominant ground — Vivaldi's calm is the foil for a loud product
- Ration the red (`{colors.primary}`) to CTAs, logo, link-hover, focus, and badges — one red, used with discipline
- Set headings in slate-navy (`{colors.ink}`), never pure black — the blue-violet tint is what keeps it friendly
- Drive hierarchy through weight (900 → 700 → 500 → 400) on a single neutral sans
- Give body copy generous line-height (1.64–1.78) for a relaxed, readable rhythm
- Keep chrome radii tight (`{rounded.sm}`–`{rounded.lg}`, 4–7px) and reserve `{rounded.xl}` (16px) for the primary CTA
- Use the wide, soft `0 2px 64px` shadow to float product screenshots — atmospheric, not hard-edged
- Separate sections with alternating white/light-gray (`{colors.surface-muted}`) bands rather than heavy borders
- Let the red double as the focus-ring color (`0 0 0 2px {colors.primary}`)

### Don't
- Don't introduce a second accent color — the single red is the whole brand signal
- Don't use pure black for ink — slate-navy (`{colors.ink}`) is the language; black reads cold and corporate
- Don't reach for gradients, neon, or glassmorphism — the canvas is flat, bright white with at most a faint cool tint
- Don't cast hard, tight drop shadows — Vivaldi's shadow is wide and diffuse (`0 2px 64px`)
- Don't round everything to the CTA's 16px — most controls stay in the 4–7px range; the big radius is the CTA's privilege
- Don't swap in a distinctive display typeface — the system-UI sans is the deliberate, neutral choice
- Don't crowd the layout — the calm whitespace is what lets the maximalist product breathe
- Don't make body type heavy — keep reading copy at 400 with relaxed leading

---

## Responsive Behavior

### Breakpoints

*(Dembrandt surfaced 35 breakpoint stops from 320px to 2100px — an unusually dense ladder. The table maps to the standard zones the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column; hero display scales 64px → ~34px; nav collapses to a menu; CTA full-width |
| Mobile | 400–767px | Stacked single column; product screenshot scrolls; section padding compresses |
| Tablet | 768–1023px | Two-column feature grids; horizontal nav returns; generous side margins |
| Desktop | 1024–1440px | Full centered layout, multi-column feature grids, hero screenshot at full scale |
| Large Desktop | >1440px | Centered content with broad white margins; spacing opens toward `{spacing.5xl}` (96px) |

### Touch Targets
- The red CTA runs comfortably tall with `12px 28px` padding — an easy thumb target
- Nav links carry `8px 12px` padding with generous gutters; adjacent links stay tappable

### Collapsing Strategy
- **Navigation**: the full horizontal nav collapses to a hamburger menu on mobile; the red "Download Vivaldi" CTA persists
- **Hero**: heavy headline reflows and scales down while keeping weight 900; subhead and CTA stack
- **Type**: display drops from 64px toward ~34px with proportionally lighter negative tracking
- **Spacing**: section gaps compress from ~96px toward ~48px
- **Grids**: multi-column feature rows collapse to single column

### Image Behavior
- The hero product screenshot keeps its wide soft drop shadow at all sizes
- On mobile the desktop-browser screenshot horizontally scrolls or scales to preserve UI detail
- Feature illustrations reflow as flex/grid children, never tiling

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`) — dominant ground
- Text: Slate Navy (`{colors.ink}`) — never pure black
- Secondary text: Medium / Soft Slate (`{colors.ink-medium}`, `{colors.ink-soft}`)
- Brand accent: Vivaldi Red (`{colors.primary}`) — CTAs, logo, link-hover, focus
- Border: Hairline (`{colors.border}`) / Strong (`{colors.border-strong}`)
- Primary CTA: Vivaldi Red (`{colors.primary}`), `{rounded.xl}` (16px) pill, white text
- Focus ring: Vivaldi Red (`{colors.primary}`), 2px

### Example Component Prompts

- "Create a Vivaldi hero: bright white background (`{colors.background}`) with a faint cool tint (`{colors.surface-tint}`) blooming at the edges. Centered weight-900 headline (`{typography.display-hero}`, 64px, letter-spacing -1.408px) in slate-navy (`{colors.ink}`), a light 22px lead paragraph (`{typography.lead}`) in soft slate (`{colors.ink-soft}`) below it, and a single red CTA: Vivaldi red (`{colors.primary}`) fill, white text, `{rounded.xl}` (16px) radius, `12px 28px` padding."
- "Build a primary download button: Vivaldi red (`{colors.primary}`) fill, white text, `{typography.button-ui}` (16px/500), `{rounded.xl}` radius, a faint 1px white inset top highlight (`{colors.shadow-highlight}`); hover deepens to `{colors.primary-hover}`, active to `{colors.primary-deep}`."
- "Render a feature card: light-gray (`{colors.surface-muted}`) surface, `{rounded.xl}` radius, 32px padding, a wide soft `0 2px 64px` shadow at 5% black (`{colors.shadow-soft}`), slate-navy heading (`{colors.ink}`) and soft-slate body (`{colors.ink-soft}`)."
- "Design an input: white fill, cool-gray outline (`{colors.border-strong}`), `{rounded.md}` (5px) radius, slate-navy text (`{colors.ink}`); on focus add a 2px Vivaldi-red ring (`{colors.primary}`) rather than recoloring the field."
- "Create the top nav: flush white bar (`{colors.background}`), no radius, slate-navy 18px/500 links (`{typography.nav-link}`) that fill light gray and turn red (`{colors.primary}`) on hover, with a red `{rounded.xl}` CTA pill pinned to the right."

### Iteration Guide

1. Start on bright white (`{colors.background}`). If you reached for a gradient or a tinted ground, pull it back — flat white with at most a faint cool edge-bloom is the canvas.
2. Use exactly one accent. If a second color crept in, remove it — Vivaldi red (`{colors.primary}`) does all the signaling.
3. Set ink in slate-navy (`{colors.ink}`), not black. Verify the blue-violet tint — pure black is wrong here.
4. Drive hierarchy with weight on a single neutral sans (Inter / system-ui): 900 hero, 700 headings, 500 nav/buttons, 400 body.
5. Keep most radii tight (4–7px); reserve `{rounded.xl}` (16px) for the primary CTA only.
6. Float surfaces with the wide soft `0 2px 64px` shadow — never a hard, tight drop.
7. Give body copy relaxed line-height (1.64–1.78). Let whitespace and banding, not borders, segment the page.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Vivaldi. Brand names and trademarks belong to their respective owners.