# Savee · Design system migration spec

> Source: https://savee.it  ·  Curated by OpenDesign  ·  en

> A textbook example of a premium dark-mode SaaS design that uses minimal color and large typography to convey a sense of professional quality.

## 1. Identity DNA

Savee functions as a digital mood board, a curated library of visual references for the working designer. The system is built on a strict dark-mode foundation where high contrast and minimal color keep the focus squarely on the content being collected.

**One-liner:** A premium visual curation tool for designers built on a dark, minimal aesthetic.
**Keywords:** curation · visual inspiration · design reference · clean · premium
**Analogy:** A digital mood board platform for creative professionals.

## 2. Color

The palette is a study in restraint, built on a near-black ground and pure white type. A single, vibrant blue accent is reserved exclusively for primary actions, ensuring its use is always intentional.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#050505` | main background |
| `--bg-soft` | `#151515` | card background |
| `--bg-quiet` | `#1e1e1e` | quiet area |
| `--ink` | `#fdfdfd` | body text |
| `--ink-soft` | `#a3a3a3` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--muted-soft` | `#404040` | weak hint |
| `--accent` | `#1019ed` | single accent |
| `--line` | `rgba(64,64,64,0.5)` | divider |

**Color principle:** High-contrast dark mode using pure blacks and whites with a single vibrant blue accent.

This is a system of maximum contrast, where every color choice serves clarity and hierarchy.

## 3. Typography

Typography employs a clean, geometric sans-serif for a neutral yet professional voice. A large display scale is used to make statements, while medium-weight text ensures impact without appearing heavy.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 500 | -1.44px | Hero headlines |
| h2 | 36px | 1.11 | 500 | -0.48px | Section headings |
| body | 16px | 1.375 | 400 | -0.24px | Paragraphs and UI text |

## 4. Spacing

Spacing follows a strict 4px base grid, creating a consistent and predictable rhythm across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous vertical spacing for sections.

## 5. Surfaces

Surfaces are defined by their elevation, using a specific deep shadow to lift cards and inputs from the background. Borders are subtle, 1px lines in a muted gray, providing just enough definition to separate content areas.

- **Radius:** sm 4px · md 12px · lg 20px · pill 9999px
- **Shadows:**
  - 0px 18px 70px rgba(0,0,0,0.35)
- **Borders:** 1px solid rgb(64,64,64) for cards and inputs.

## 6. Layout

The layout is a centered, single-column skeleton that prioritizes focus over density. Generous vertical spacing and large hero sections frame the primary value proposition without distraction.

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

**Skeleton:** Single column centered layout with large hero sections.

## 7. Motion & Interaction

Motion is reserved for meaningful feedback, with smooth fade-in and scale-up animations that introduce elements with purpose. Transitions are quick and subtle, designed to feel polished rather than performative.

- **Durations:** micro 150ms · small 400ms · medium 680ms
- **Easing:** `cubic-bezier(0.22, 0.86, 0, 1)`
- **Patterns:**
  - Fade-in and scale-up on page load
  - Smooth color transitions on hover

- **Hover:** Subtle background color change or opacity shift.
- **Click:** Immediate feedback with color transition.
- **Transition:** 0.15s cubic-bezier for colors, 0.68s for transforms.
- **Keyboard:** Standard focus management with visible outlines.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and confident, matching the clean visual language. Copy is action-oriented, focusing on the core utility for the designer.

- **Tone:** Professional, clean, and confident.
- **Headline style:** Direct and impactful, focusing on the value proposition.
- **CTA style:** Action-oriented and clear, like 'Build your library'.
- **Avoid:** Playful or casual language / Visual clutter / Complex gradients

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a pure black (#050505) background.
- ❌ Don't use decorative fonts — screenshot shows clean, geometric sans-serif typography.
- ❌ Don't use multiple accent colors — screenshot shows a single vibrant blue (#1019ed) accent.
- ❌ Don't use sharp corners on buttons — screenshot shows full pill-shaped buttons (9999px radius).
- ❌ Don't use thin, light fonts — screenshot shows medium-weight (500) headings for impact.
- ❌ Don't use busy backgrounds or gradients — screenshot shows solid, flat dark surfaces.

The system deliberately avoids playful language, visual clutter, and decorative flourishes, maintaining its role as a serious tool for creative professionals.

## System Prompt (paste into AI tool)

```
This is a premium visual curation platform for designers, emphasizing a clean, minimal dark-mode aesthetic. The primary background is near-black (#050505), contrasted with pure white (#fdfdfd) text and muted gray (#a3a3a3) secondary text. The single vibrant blue accent (#1019ed) is used exclusively for primary calls to action like 'Build your library'. Typography uses a geometric sans-serif category with a large display scale (60px) for impact. Critical design constraints include avoiding light mode, avoiding multiple accent colors, using pill-shaped buttons instead of rectangular ones, avoiding decorative fonts, and maintaining generous white space to ensure visual focus remains on the curated content.
```
