---
name: Svz
description: "Excellent example of premium agency design with bold typography and sophisticated dark aesthetic."
version: alpha

colors:
  background: "#080808"
  primary: "#fcfcfc"
  secondary: "#f3efef"
  tertiary: "#FF4D5C"
  neutral: "#262525"
  bg-soft: "#262525"
  bg-quiet: "#0d0d0d"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2.4px"
  display:
    fontFamily: transitional-serif
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

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

---

## Overview

Bold typography and dark sophistication for a premium digital agency.

*A premium design agency portfolio with bold, editorial typography and a dark, sophisticated atmosphere.*

## Colors

High-contrast dark mode with vibrant coral accent

- **Background (`#080808`)** — uses `bg` token
- **Primary text (`#fcfcfc`)** — uses `ink` token
- **Secondary text (`#f3efef`)** — uses `ink-soft` token
- **Accent (`#FF4D5C`)** — uses `accent` token
- **Muted (`#262525`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use uppercase for navigation and labels
- Mix serif and sans-serif for typographic contrast
- Tight letter-spacing for large display text

## Layout

Full-width dark sections with centered content containers

*Rhythm:* Consistent 4px base grid with generous whitespace

## Elevation & Depth

- rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset
- Borders: 1px solid rgba(255,255,255,0.1)

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Bordered button with uppercase text and arrow icon
- **card:** Dark cards with subtle borders and hover states
- **chip:** Small uppercase tags or labels
- **input:** Minimal borderless inputs
- **hero:** Full-screen dark section with large typographic headline and geometric background elements

## Do's and Don'ts

**Don't:**
- don't use light backgrounds — screenshot shows predominantly dark (#080808) theme
- don't use decorative fonts for body text — screenshot shows clean sans-serif for UI elements
- don't add rounded corners to buttons — screenshot shows rectangular buttons with subtle radius
- don't use muted colors for emphasis — screenshot shows high-contrast white text on dark backgrounds
- don't use small font sizes for headlines — screenshot shows large 64px display text
- don't avoid uppercase navigation — screenshot shows all-caps navigation items

---

## System Prompt (paste into AI agent)

```
Premium digital agency portfolio with dark sophisticated atmosphere. Primary colors: #080808 background, #fcfcfc white text, #FF4D5C coral accent. Typography mixes transitional-serif display with humanist-sans body. Critical donts: never use light backgrounds, avoid decorative body fonts, maintain high contrast, use uppercase navigation, keep buttons rectangular with minimal radius. Positioning: bold agency for forward-thinking brands. Layout uses 12-column grid with generous whitespace.
```