# Sketch · Design system migration spec

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

> This site is a prime example of a modern, professional SaaS product that uses typography and whitespace to create a premium feel.

## 1. Identity DNA

Sketch presents itself as a professional studio environment, a premium toolkit designed with the same care as the instruments within it. The system prioritizes a focused, design-centric space where the user's work is the central element, supported by a refined, dark-themed interface.

**One-liner:** A professional, high-contrast design platform that centers the user's work within a refined, dark-themed UI.
**Keywords:** design-centric · professional · focused · inviting
**Analogy:** A premium, focused toolkit that feels like a well-crafted studio environment.

## 2. Color

The color system is built on high-contrast neutrals, using deep ink and light grays to ensure legibility and focus. A subtle warm gradient in key areas adds depth and visual interest without competing with content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f5f5f5` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--bg-quiet` | `#f0f0f0` | quiet area |
| `--ink` | `#212123` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#0000006b` | placeholder |
| `--muted-soft` | `#00000052` | weak hint |
| `--line` | `rgba(0,0,0,0.32)` | divider |

**Color principle:** High-contrast neutrals with a subtle warm gradient in the hero to create focus and depth.

The principle is to use contrast and subtlety to direct attention, not to decorate.

## 3. Typography

Typography establishes a clear voice through a transitional serif for impactful headlines and a neutral humanist sans-serif for body copy. This pairing balances professional authority with approachable clarity.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -2px | Primary headline |
| heading | 40px | 1.1 | 400 | -1.5px | Secondary headings |
| subhead | 22px | 1.3 | 400 | -0.5px | Paragraph lead-in |
| body | 16px | 1.5 | 400 | 0 | Body text |
| caption | 14px | 1.4 | 400 | 0 | Small text and metadata |

**Type rules:**
- Display font is a transitional serif with high contrast.
- Body text uses a neutral humanist sans-serif.
- Letter spacing is tightly tracked on large display sizes.

## 4. Spacing

Spacing follows a strict 4px grid, establishing a consistent vertical rhythm that supports readability and structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Based on a 4px grid with generous whitespace for breathing room.

## 5. Surfaces

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 1px 4px 0px
  - rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
- **Borders:** Subtle 1px borders in rgba(0,0,0,0.32) for definition.

## 6. Layout

The layout employs a centered content column with generous padding, establishing a clear visual hierarchy. A 12-column grid underpins this structure, organizing space with precision and breathing room.

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

**Skeleton:** Centered content with generous padding and a clear visual hierarchy.

## 7. Motion & Interaction

Motion is minimal and functional, used primarily to acknowledge user interaction or to guide focus during scroll. Transitions are smooth and brief, designed to provide feedback without introducing distraction.

- **Durations:** micro 125ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
- **Patterns:**
  - Fade-in on scroll
  - Smooth hover transitions

- **Hover:** Subtle color or opacity changes on interactive elements.
- **Click:** Standard pointer cursor with immediate feedback.
- **Transition:** Color transitions at 0.125s for micro-interactions.
- **Keyboard:** Standard tab navigation with focus indicators.

## 8. Voice & Don'ts

The editorial voice is confident and professional, using direct language to communicate clearly. Headlines often employ the serif font for impact, while calls to action remain action-oriented and clear.

- **Tone:** Confident, friendly, and professional.
- **Headline style:** Direct, often using a serif font for impact and a welcoming tone.
- **CTA style:** Action-oriented and clear, using high-contrast buttons.
- **Avoid:** Technical jargon / Aggressive sales language / Overly casual slang

### Don'ts
- ❌ Don't use low-contrast text — screenshot shows high-contrast ink on light backgrounds.
- ❌ Don't use overly decorative fonts for body text — screenshot uses a clean humanist sans.
- ❌ Don't use harsh, bright accent colors for primary actions — screenshot uses dark, high-contrast buttons.
- ❌ Don't clutter the layout with too many elements — screenshot maintains generous whitespace.
- ❌ Don't use sharp, square corners for primary components — screenshot uses rounded corners (20px, 12px).
- ❌ Don't use thin, light fonts for large headlines — screenshot uses a bold, high-contrast serif.

The system deliberately avoids technical jargon, aggressive sales language, and overly casual tones to maintain its focused, professional demeanor.

## System Prompt (paste into AI tool)

```
This is a premium design tool website positioned as a focused, professional toolkit for designers. Key hex colors include a light gray background (#f5f5f5), high-contrast dark ink (#212123), and subtle muted tones for secondary text. Typography features a transitional-serif for display headlines (like 'Designers, welcome home.') and a humanist-sans for body copy. Critical donts: 1. Don't use low-contrast text; the design relies on high legibility. 2. Don't use overly decorative fonts for body text; maintain clarity. 3. Don't clutter the layout; preserve the generous whitespace that creates focus. 4. Don't use harsh, bright accent colors for primary buttons; keep them dark and high-contrast. 5. Don't use sharp, square corners for components; use the established rounded corner system. 6. Don't use thin, light fonts for large headlines; use the high-contrast serif font for impact.
```