# Framer · Design system migration spec

> Source: https://framer.com  ·  Curated by OpenDesign  ·  en

> A masterclass in modern SaaS design, balancing bold typography with a dark, premium aesthetic.

## 1. Identity DNA

This is a design system built like a black monolith—its exterior a pure, unadorned surface that reveals vibrant digital ecosystems within. The identity is defined by extreme high contrast and professional restraint, channeling the precision of a modern site builder into every decision.

**One-liner:** A sleek, dark-mode SaaS platform for building beautiful websites with integrated design tools.
**Keywords:** creative · visual builder · high-performance · startup-focused
**Analogy:** A high-end design tool that feels like a polished creative studio.

## 2. Color

The palette is reductive to the point of being absolute: pure black backgrounds and pure white text, creating maximum impact through stark opposition. This is not a system of nuanced gradients but of dramatic, high-contrast statements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-quiet` | `#242424` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.6)` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--muted-soft` | `#CCCCCC` | weak hint |
| `--accent` | `#0099FF` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with a single vibrant blue accent.

The governing principle is that separation and hierarchy are achieved solely through contrast and spacing, not through color variety.

## 3. Typography

Typographic voice is delivered exclusively through geometric sans-serif forms, with heavy, tightly-set headlines for impact and regular-weight body text for sustained readability. The system deliberately excludes decorative serifs or scripts, maintaining a clean, modern consistency.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 500 | -2px | Primary hero headline |
| display-sm | 32px | 1.2 | 500 | -0.5px | Section headers |
| body | 18px | 1.5 | 400 | -0.15px | Paragraph and UI text |
| caption | 12px | 1.6 | 400 | -0.01px | Metadata and labels |

**Type rules:**
- Use tight letter-spacing for large display text
- Maintain high contrast for body text against dark backgrounds
- Prioritize geometric sans-serif for headers and UI

## 4. Spacing

Rhythm is established through generous vertical whitespace between sections, contrasted with tight line spacing in headlines to create dense, impactful blocks of type.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous whitespace for a premium feel.

## 5. Surfaces

Surfaces are defined by absence. There are no borders, no drop shadows; the system relies entirely on the contrast of elements against the dark field and the generous spacing between them to create structure and depth.

- **Radius:** sm 6px · md 8px · lg 15px · pill 100px
- **Shadows:**
  - 0px 1px 2px rgba(0,0,0,0.25)
  - 0px 10px 30px rgba(0,0,0,0.25)
  - 0px 0px 0px 2px #090909
- **Borders:** Minimal, often using subtle white borders or shadows to define depth.

## 6. Layout

The layout skeleton is a stark, full-width hero section that immediately establishes the dark canvas. This is followed by a horizontal scroll gallery, a dynamic pattern that showcases site examples in a continuous, edge-to-edge stream.

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

**Skeleton:** Centered content with large margins and a clear vertical rhythm.

## 7. Motion & Interaction

Motion is functional and subtle, reinforcing the system's professional clarity. Smooth horizontal scrolling guides the gallery, while hover states and page transitions use minimal opacity changes and fades to provide feedback without distraction.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`
- **Patterns:**
  - Smooth fade-ins and subtle hover transitions

- **Hover:** Subtle color shifts or opacity changes on buttons and links.
- **Click:** Immediate visual feedback with slight scale or color changes.
- **Transition:** Smooth transitions on all interactive elements.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and empowering, using action-oriented headlines with strong, direct verbs. It avoids technical jargon, overly casual language, and passive constructions in favor of clear, benefit-focused communication.

- **Tone:** Confident, modern, and professional.
- **Headline style:** Bold, direct, and benefit-driven.
- **CTA style:** Clear and action-oriented.
- **Avoid:** Overly technical jargon / Passive language / Cluttered layouts

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a primary #000000 background.
- ❌ Don't use serif fonts — screenshot shows sans-serif display and body fonts.
- ❌ Don't use rounded squares — screenshot shows 100px pill buttons.
- ❌ Don't use multiple bright colors — screenshot shows a dominant blue accent.
- ❌ Don't use thin, light typography — screenshot shows bold, high-contrast headings.
- ❌ Don't use cluttered layouts — screenshot shows generous whitespace and a clear hierarchy.

The system deliberately forgoes multiple accent colors, light backgrounds, decorative borders, and typographic ornamentation, committing fully to its minimalist, high-contrast thesis.

## System Prompt (paste into AI tool)

```
This is a high-performance SaaS website for a design tool. The design DNA is a dark, premium, and clean aesthetic. Key colors are #000000 (bg), #FFFFFF (ink), and #0099FF (accent). Fonts are primarily geometric and humanist sans-serifs. Critical donts: don't use light backgrounds, don't use serif fonts, don't use multiple competing accent colors, don't use thin typography for headlines, don't use cluttered layouts, don't use non-pill buttons. The tone is confident and modern, focusing on speed and creative power.
```
