# Vividand · Design system migration spec

> Source: https://vividand.co  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restrained, high-end agency design, using bold typography and a minimal dark-mode palette to convey authority and premium positioning.

## 1. Identity DNA

Vividand’s design system functions like a high-end architectural studio that builds invisible frameworks—the structure is the statement. Every decision, from the deep charcoal field to the generous vertical rhythm, serves to construct an environment where content occupies the space with authority and precision.

**One-liner:** A premium, dark-mode agency portfolio defined by bold typography and 3D glass accents.
**Keywords:** premium · strategic · agency · fintech · bold
**Analogy:** A high-end architectural studio that builds invisible frameworks.

## 2. Color

A strictly monochrome palette anchors the system, using a deep charcoal (#101010) as the foundational field against which high-contrast off-white (#FFFDF9) text establishes immediate, unambiguous legibility. Very subtle, muted blue-grey accents appear only to differentiate secondary elements without breaking the achromatic composure.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#101010` | main background |
| `--bg-soft` | `#1a1a1a` | card background |
| `--ink` | `#FFFDF9` | body text |
| `--ink-soft` | `#6F879C` | secondary text |
| `--line` | `rgba(255, 253, 249, 0.2)` | divider |

**Color principle:** Deep charcoal grounds the layout, while high-contrast off-white text ensures absolute legibility and premium feel.

The palette operates on a principle of chromatic restraint, where value contrast does the work that hue would elsewhere.

## 3. Typography

Typography is the primary structural element, employing geometric sans-serif typefaces to carry the visual weight of the system. The rules enforce uppercase for secondary navigation and tight tracking for large display text, ensuring the typographic voice is consistently bold and direct across the scale.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 105px | 1.0 | 700 | -1px | Hero headlines |
| body | 20px | 1.3 | 400 | -0.2px | General text |

**Type rules:**
- Use uppercase for secondary navigation and labels
- Maintain tight tracking for large display text

## 4. Spacing

Vertical spacing is governed by a generous rhythm, with major sections separated by 48px to 96px, creating a deliberate, cinematic pace through the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing (48px-96px) between major sections creates a breathable, cinematic feel.

## 5. Surfaces

Surfaces are defined by their flat, shadowless depth, relying on the contrast between the dark background and light text to create presence. Borders are minimal and functional, consisting only of 1px solid lines in low-opacity white, used strictly as horizontal dividers to structure list rows.

- **Radius:** sm 15px · md 15px · lg 15px · pill 999px
- **Borders:** Minimal, 1px solid lines in low-opacity white are used strictly for horizontal dividers.

## 6. Layout

The layout skeleton alternates between an asymmetric split in the hero section and a disciplined full-width list format for content below. This structure prioritizes large-scale typography and left-aligned text blocks, using horizontal separators to maintain order without visual clutter.

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

**Skeleton:** Asymmetric split layout in hero; full-width list with left-aligned text and horizontal separators.

## 7. Motion & Interaction

Motion philosophy is one of deliberate, understated enhancement—slow fade-ins for text blocks and gentle cubic-bezier transforms for 3D glass elements prioritize quality over speed. Crisp linear opacity changes govern UI transitions, ensuring interactions feel refined and purposeful.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.52, 0.01, 0, 1)`
- **Patterns:**
  - Slow fade-ins for text blocks
  - Gentle cubic-bezier transforms for 3D elements
  - Crisp linear opacity changes for UI transitions

- **Hover:** Subtle opacity changes on interactive elements.
- **Click:** Minimal visual feedback; relies on transition effects.
- **Transition:** Smooth transitions using linear opacity and cubic-bezier transforms.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and understatedly authoritative, with headlines that are short, punchy, and heavily stylized through typography alone. CTAs are minimalist, often reduced to text or a subtle geometric prompt, aligning with a tone that avoids clutter and corporate jargon.

- **Tone:** Confident, direct, and understatedly authoritative.
- **Headline style:** Short, punchy, and heavily stylized through typography.
- **CTA style:** Minimalist, often just text or a subtle geometric prompt.
- **Avoid:** Clutter / Bright neon colors / Playful animations / Corporate jargon

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows a strictly monochrome palette with muted blue-grey accents.
- ❌ Don't use serif fonts for headlines — screenshot shows exclusively geometric sans-serif typography.
- ❌ Don't apply heavy drop shadows — screenshot shows flat, clean surfaces without 3D depth shadows.
- ❌ Don't center-align all text — screenshot shows strong left-aligned typography for headings.
- ❌ Don't use busy background patterns — screenshot shows a solid, deep charcoal background.
- ❌ Don't use rounded corners on everything — screenshot shows sharp edges or very specific 15px border radii.

The system deliberately excludes bright neon colors, playful animations, and heavy drop shadows to maintain its premium, architectural character.

## System Prompt (paste into AI tool)

```
A premium agency portfolio for Vivid+Co, characterized by a dark charcoal background (#101010) and high-contrast off-white typography (#FFFDF9). The visual system uses geometric sans-serif fonts to create a bold, modern aesthetic. It features 3D glass-render accents and clean horizontal dividers. Critical constraints: avoid serif fonts, avoid bright accent colors, avoid heavy drop shadows, and maintain generous vertical spacing to preserve the cinematic, premium feel.
```