# Svz · Design system migration spec

> Source: https://www.svz.io  ·  Curated by OpenDesign  ·  en

> Excellent example of premium agency design with bold typography and sophisticated dark aesthetic.

## 1. Identity DNA

The Svz design system operates like the facade of a modernist gallery: a stark, dark envelope that frames its contents with authority, allowing the work itself to radiate. Its identity is built on a foundation of **bold typographic contrast** and a sophisticated dark atmosphere, signaling a premium digital agency focused on deliberate brand building.

**One-liner:** Bold typography and dark sophistication for a premium digital agency.
**Keywords:** digital agency · brand building · bold · premium
**Analogy:** A premium design agency portfolio with bold, editorial typography and a dark, sophisticated atmosphere.

## 2. Color

The palette is a study in high-contrast drama, anchored by a near-black background that makes the white typography and vibrant coral accent feel electric. Every color decision serves the core principle of visual impact and clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#080808` | main background |
| `--bg-soft` | `#262525` | card background |
| `--bg-quiet` | `#0d0d0d` | quiet area |
| `--ink` | `#fcfcfc` | body text |
| `--ink-soft` | `#f3efef` | secondary text |
| `--muted` | `#262525` | placeholder |
| `--accent` | `#FF4D5C` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with vibrant coral accent

This strict, dark environment is a foundational rule, not a theme—it ensures every element placed within it has purpose and presence.

## 3. Typography

Typography is the primary voice, engineered for contrast by mixing a **transitional serif for display headlines** with a humanist sans-serif for body text and interface elements. The scale is aggressive, favoring large, tight-tracked display type that commands attention while uppercase rules for navigation establish a structured, editorial hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -2.4px | Hero headline |
| display | 32px | 1.1 | 400 | -1.6px | Section headings |
| body | 14px | 1.5 | 400 | 0px | Body text |

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

## 4. Spacing

Spacing follows a consistent 4px base grid, creating a measurable rhythm that structures the generous whitespace between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous whitespace

## 5. Surfaces

Surfaces are defined not by elevation but by subtle light, using inset shadows and fine, low-opacity borders to create depth within the dark field. These treatments are minimal, ensuring the interface feels like a cohesive, sophisticated plane rather than a stack of discrete layers.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is a series of full-width dark sections that stretch edge-to-edge, broken by centered content containers. This creates a strong, horizontal rhythm where projects and content are framed within a focused, 12-column grid against the expansive dark.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark sections with centered content containers

## 7. Motion & Interaction

Motion is employed with restraint, using smooth fade-ins and subtle parallax to enhance the sense of depth and quality. All interactions, from hover states to focus outlines, are bound by a consistent 0.3-second easing, providing feedback that feels responsive yet unhurried.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-in transitions
  - Background element parallax
  - Hover state animations

- **Hover:** Color transitions and opacity changes
- **Click:** Visual feedback through state changes
- **Transition:** All transitions 0.3s ease
- **Keyboard:** Focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice matches the visual system: confident, premium, and slightly provocative. Headlines are bold, all-caps statements, and calls to action are direct, often accompanied by arrow indicators that guide with purpose.

- **Tone:** Confident, premium, slightly provocative
- **Headline style:** Bold, all-caps display type with mixed serif/sans
- **CTA style:** Direct, action-oriented with arrow indicators
- **Avoid:** Casual language / Overly technical jargon / Generic corporate speak

### Don'ts
- ❌ 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

The system deliberately avoids casual language, decorative body fonts, and light backgrounds, committing fully to its premium, dark, and typographically bold stance.

## System Prompt (paste into AI tool)

```
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.
```