# Webstudio · Design system migration spec

> Source: https://webstudio.is  ·  Curated by OpenDesign  ·  en

> This site showcases modern dark UI patterns with thoughtful use of gradients and subtle elevation, making it excellent for developer tool design inspiration

## 1. Identity DNA

Webstudio's design system draws a direct analogy to a modern developer-focused IDE: a precise, tool-oriented interface built for speed and performance. Every component is an instrument, calibrated to the needs of builders working in a no-code environment. The result is a system that feels both technical and approachable, a professional workspace rendered in dark, high-contrast tones.

**One-liner:** A sleek, dark-themed developer tool platform focusing on speed and dynamic rendering.
**Keywords:** web development · no-code · performance · hosting · builder
**Analogy:** A modern developer-focused IDE interface

## 2. Color

The color system operates on a principle of high-contrast ink on dark backgrounds, creating a visual field where light text and subtle borders define form. Vibrant multi-color gradients provide the sole accent, used sparingly to guide attention without solid, high-saturation blocks.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#11181C` | main background |
| `--bg-soft` | `#1A1D1E` | card background |
| `--bg-quiet` | `rgba(255,255,255,0.05)` | quiet area |
| `--ink` | `#E6E7E9` | body text |
| `--ink-soft` | `#D0D3D4` | secondary text |
| `--muted` | `#A6A9AB` | placeholder |
| `--muted-soft` | `rgba(208,211,212,0.6)` | weak hint |
| `--accent` | `linear-gradient(135deg, #92FDDC 0%, #7D7FFB 31.94%, #ED72FE 64.24%, #FDD791 100%)` | single accent |
| `--line` | `rgba(208,211,212,0.19)` | divider |

**Color principle:** High contrast ink on dark backgrounds with subtle borders

The guiding principle is functional contrast over decorative color, ensuring every element remains legible and purposeful within the dark interface.

## 3. Typography

Typographic voice is carried by a humanist sans-serif, set in two core weights: 400 for body text and 600 for emphasis and interactive elements. The scale is engineered for impact, with tight letter spacing applied to large display headlines to create dense, authoritative statements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.2 | 600 | -1.5px | Hero headlines and section titles |

**Type rules:**
- Use 400 weight for body text
- Use 600 weight for emphasis and UI elements
- Apply tight letter spacing (-1.5px) to large display text

## 4. Spacing

Spacing follows a strict 4.5px base unit, establishing a consistent vertical rhythm that governs padding, margins, and component intervals.

- **Base unit:** 4.5px
- **Scale:** 4.5 / 9 / 18 / 27 / 36 / 72 / 144 px
- **Rhythm:** 4.5px base unit with vertical rhythm multiples

## 5. Surfaces

Surfaces are defined by depth through minimal means: a 1px subtle border provides definition, while shadows are restricted to either a faint, dark elevation or a distinctive colored glow. This approach creates a layered interface that feels integrated rather than lifted.

- **Radius:** sm 4.5px · md 9px · lg 18px · pill 100000px
- **Shadows:**
  - 0 2px 3px rgba(0,0,0,0.13)
  - 0 0 32px rgba(74,78,250,0.5)
- **Borders:** 1px solid rgba(208,211,212,0.19)

## 6. Layout

The layout skeleton centers content within a generous vertical padding structure, creating a focused, columnar reading flow. Feature sections are organized into card-based layouts with consistent rounding and subtle borders, maintaining visual order while accommodating dynamic content.

- **Container max:** 1200px
- **Paragraph max:** 600px
- **Grid:** 12 columns, gutter 27px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with generous vertical padding

## 7. Motion & Interaction

Motion philosophy treats animation as a functional feedback layer, not a decorative overlay. Interactions employ smooth color and scale transitions for hover states, linear slides for continuous motion, and a distinct spring-like bounce for playful, affirming moments.

- **Durations:** micro 150ms · small 250ms · medium 1500ms
- **Easing:** `cubic-bezier(0.33, 1, 0.68, 1)`
- **Patterns:**
  - Smooth color and scale transitions on hover
  - Linear slide animations for continuous motion
  - Spring-like bounce for playful interactions

- **Hover:** Scale up slightly and change color with smooth transition
- **Click:** Subtle scale down effect
- **Transition:** All properties with 150ms ease-out
- **Keyboard:** Focus ring with accent color glow

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, delivering bold, concise statements about performance and developer experience. It avoids marketing jargon and overly technical language, opting instead for direct, action-oriented calls to action.

- **Tone:** Professional yet approachable
- **Headline style:** Bold, concise statements about performance
- **CTA style:** Direct action-oriented with gradient backgrounds
- **Avoid:** Marketing jargon / Overly technical language without explanation / Aggressive urgency

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows dark mode primary
- ❌ Don't use serif fonts — screenshot shows humanist sans-serif exclusively
- ❌ Don't use high-saturation solid accent colors — screenshot uses gradients
- ❌ Don't use sharp corners — screenshot shows rounded elements (9px+)
- ❌ Don't use heavy box shadows — screenshot uses subtle elevation or glow
- ❌ Don't use all caps for body text — screenshot uses sentence case

The system deliberately does not implement light mode, serif typography, sharp corners, solid accent colors, heavy shadows, or all-caps body text.

## System Prompt (paste into AI tool)

```
A developer-focused web application builder platform with dark theme. Primary background is deep charcoal (#11181C) with lighter dark surfaces (#1A1D1E). Text is light gray (#E6E7E9) on dark. Accent is a vibrant multi-color gradient (teal to purple to pink to gold). Typography uses Manrope (humanist-sans) with tight letter spacing for headlines. Key elements include rounded buttons (100px radius), subtle borders (rgba(208,211,212,0.19)), and card-based layouts. Critical don'ts: don't use light mode, don't use serif fonts, don't use sharp corners, don't use solid accent colors, don't use heavy shadows, don't use all caps for body text. Focus on performance messaging and developer experience.
```
