# Retool · Design system migration spec

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

> Worth including as a prime example of a high-end, developer-focused SaaS interface that balances technical utility with premium, clean design.

## 1. Identity DNA

Retool’s design system functions like an enterprise-grade IDE: a dense, high-performance environment where every component exists to accelerate work. The system is built on operational clarity, with each decision reinforcing a sense of trust and precision for the developer building with it.

**One-liner:** A developer-first platform for building internal tools.
**Keywords:** operational · developer-first · trusted · high-performance
**Analogy:** The internal tooling equivalent of an enterprise-grade IDE.

## 2. Color

The color system is a study in high-contrast utility, pairing warm, muted neutrals with a single cool blue accent. This creates a palette that is both readable on dark backgrounds and unmistakably technical.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151515` | main background |
| `--bg-soft` | `#242424` | card background |
| `--bg-quiet` | `#8B867F` | quiet area |
| `--ink` | `#E9EBDF` | body text |
| `--ink-soft` | `#CBCC C4` | secondary text |
| `--muted` | `#8B867F` | placeholder |
| `--muted-soft` | `rgba(233, 235, 223, 0.4)` | weak hint |
| `--accent` | `#518DD2` | single accent |
| `--line` | `rgba(233, 235, 223, 0.12)` | divider |

**Color principle:** High-contrast utility with warm, muted neutrals and cool blue accents.

The guiding principle is restraint; the palette serves the interface's function, never decorating it.

## 3. Typography

Typography is a dialogue between a clean grotesque-sans for display and a humanist-sans for body text. The scale prioritizes large, thin-weight headlines that command attention before giving way to dense, readable data and code.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 380 | -1px | Hero headlines |
| display-2 | 48px | 1.1 | 380 | -0.5px | Section headlines |
| body | 24px | 1.2 | 400 | -0.24px | Primary body text |
| body-2 | 16px | 1.5 | 400 | 0px | Secondary body and UI text |
| mono | 14px | 1.2 | 400 | 0px | Code snippets and data labels |

## 4. Spacing

The rhythm is built on a consistent 4px base unit, creating a predictable grid for all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with 24px gutters and generous vertical padding for breathing room.

## 5. Surfaces

Depth is communicated through layered shadows and fine, semi-transparent borders rather than heavy elevation. This establishes a clear hierarchy of surfaces, from the deep background to floating UI components.

- **Radius:** sm 4px · md 8px · lg 20px · pill 9999px
- **Shadows:**
  - 0px 1px 2px rgba(0, 0, 0, 0.12)
  - 0px 68px 116px rgba(0, 0, 0, 0.35)
- **Borders:** 1px solid rgba(233, 235, 223, 0.12) for subtle separators; 1px solid rgb(233, 235, 223) for active states.

## 6. Layout

The layout skeleton is fundamentally centered: a dark, full-width field anchors a constrained content column. Within this column, generous vertical padding and large typography establish a clear, breathable hierarchy.

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

**Skeleton:** Full-width dark background with a centered, constrained content area.

## 7. Motion & Interaction

Motion is refined and strictly functional, used to guide focus and confirm interaction. Transitions are smooth and predictable, with staggered entrances for text that suggest careful assembly rather than flashy display.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.72, 0, 0.12, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover states.
  - Staggered entrance animations for text elements.
  - Subtle parallax or floating effects for UI components.

- **Hover:** Subtle background color shifts or slight upward translations for buttons and interactive elements.
- **Click:** Immediate visual feedback with color or opacity changes, often followed by a navigation transition.
- **Transition:** Consistent 0.4s ease for color, background-color, and border-color changes.
- **Keyboard:** Standard focus-visible outlines with custom colors to maintain visibility on dark backgrounds.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and confident—short, punchy, and action-oriented. It speaks to a practitioner, avoiding fluff, corporate buzzwords, and passive voice.

- **Tone:** Direct, technical, and confident.
- **Headline style:** Short, punchy, and action-oriented (e.g., 'Build how you want. Ship on a platform you can trust.').
- **CTA style:** Clear and benefit-driven, emphasizing ease of entry or expert consultation.
- **Avoid:** Fluff / Corporate buzzwords / Vague promises / Excessive exclamation points / Passive voice / Overly complex sentences

### Don'ts
- ❌ Don't use high-saturation neon colors — screenshot shows a palette of warm grays, dark backgrounds, and a single cool blue accent.
- ❌ Don't use decorative serif fonts for headlines — screenshot shows a clean, functional grotesque-sans for large display text.
- ❌ Don't use sharp 90-degree corners for main containers — screenshot shows a preference for soft, large-radius rounding (pill shapes or 20px+ curves).
- ❌ Don't use busy, textured backgrounds — screenshot shows smooth gradients and clean, solid dark surfaces.
- ❌ Don't use tiny, cramped layouts — screenshot shows generous spacing and large typography for a clear hierarchy.
- ❌ Don't use multiple competing accent colors — screenshot shows a restrained use of blue and warm orange/red only in specific graphic contexts.

The system deliberately avoids high-saturation neon colors, decorative serif fonts, and sharp 90-degree corners, committing fully to its functional, warm-neutral aesthetic.

## System Prompt (paste into AI tool)

```
A developer-focused SaaS platform for building internal tools. The design uses a dark mode palette with warm, muted grays (#151515, #E9EBDF) and a cool blue accent (#518DD2). Typography features a clean grotesque-sans for display and a humanist-sans for body text, with a heavy emphasis on large, thin-weight headlines. The layout is centered and spacious, with generous padding. Critical don'ts: never use high-saturation neon colors, avoid decorative serifs for headlines, and don't use sharp 90-degree corners for main UI containers. The tone is direct, technical, and confident.
```
