# Dify · Design system migration spec

> Source: https://dify.ai  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of modern, clean SaaS design for developer tools, balancing professionalism with clear visual hierarchy.

## 1. Identity DNA

The Dify design system operates like a professional developer console: it prioritizes clarity and efficiency over ornament. Its identity is built on a high-contrast foundation of black and white, punctuated by a single, electric blue accent that signals primary actions. This creates a clean, developer-focused aesthetic that is both bold and utilitarian.

**One-liner:** A clean, developer-focused AI platform with a bold blue accent and structured layout.
**Keywords:** AI platform · developer tool · workflow automation
**Analogy:** A sleek, professional developer console meets modern SaaS dashboard

## 2. Color

The color system is defined by a stark, high-contrast pairing of black and white, establishing a clear and professional base. A single electric blue accent is reserved exclusively for primary actions and key highlights, ensuring a focused and intentional visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E5EAFF` | card background |
| `--bg-quiet` | `#F8F9FB` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#333333` | placeholder |
| `--accent` | `#0033FF` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast black on white with a single electric blue accent for primary actions

The governing principle is restraint: one accent color maintains clarity and prevents visual competition across the interface.

## 3. Typography

The typographic voice is clean and utilitarian, relying on a **grotesque sans-serif** category that reinforces the platform's developer-focused nature. Headlines are set with tight letter-spacing and a compact line-height for maximum impact, while body text uses a lighter weight for comfortable readability.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 45px | 1.1 | 500 | -0.4px | Main hero headlines |
| headline | 38px | 1.2 | 500 | -0.4px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Paragraphs and descriptions |
| caption | 12px | 1.8 | 400 | 0px | Fine print and UI labels |

**Type rules:**
- Use tight letter-spacing for large display text
- Keep line-height at 1.1 for maximum impact on headlines
- Use weight 400 for body text, weight 500 for emphasis

## 4. Spacing

Spacing follows a consistent 4px base unit, creating a predictable and structured rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 64 / 100 px
- **Rhythm:** Consistent 4px base unit with generous whitespace in hero sections

## 5. Surfaces

Surface treatment is minimal and functional, using depth sparingly to create hierarchy. Thin 1px borders in a soft blue-gray (#E5EAFF) define edges, while shadows are subtle and used only to lift key elements like cards.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgb(229, 234, 255) 0px 0px 0px 1px
  - rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- **Borders:** Thin 1px borders using soft blue-gray (#E5EAFF)

## 6. Layout

The layout skeleton is built on a full-width header that anchors the experience, leading to a centered content container for optimal reading width. Within this container, multi-column feature grids organize complex information into digestible modules.

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

**Skeleton:** Full-width header, centered content container, multi-column feature grids

## 7. Motion & Interaction

Motion philosophy prioritizes utility over decoration. Simple opacity transitions on hover and smooth scrolling between sections provide immediate, unobtrusive feedback that supports rather than distracts from the core workflow.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Simple opacity transitions for hover states
  - Smooth scroll behavior between sections

- **Hover:** Subtle color shift or opacity change on interactive elements
- **Click:** Immediate visual feedback with color change
- **Transition:** All properties transition smoothly over 0.2s
- **Keyboard:** Standard focus indicators using default browser outlines

## 8. Voice & Don'ts

The editorial voice is professional, direct, and authoritative, speaking to developers with action-oriented clarity. Headlines lead with verbs, calls to action are simple commands, and the language avoids unnecessary casualness or jargon.

- **Tone:** Professional, developer-focused, authoritative
- **Headline style:** Direct, action-oriented verbs starting sentences
- **CTA style:** Simple, clear action verbs like 'Get Started'
- **Avoid:** Overly casual or playful language / Excessive punctuation or emojis / Jargon that doesn't serve the developer audience

### Don'ts
- ❌ don't use decorative fonts — screenshot shows clean sans-serif throughout
- ❌ don't use multiple accent colors — screenshot shows only one dominant blue (#0033FF)
- ❌ don't use heavy shadows — screenshot shows very subtle, minimal shadow usage
- ❌ don't use rounded corners everywhere — screenshot shows mostly sharp or slightly rounded corners
- ❌ don't use busy backgrounds — screenshot shows mostly solid white or very light gray backgrounds
- ❌ don't use centered text for body copy — screenshot shows left-aligned body text

The system deliberately avoids decorative fonts, multiple accent colors, heavy shadows, and busy backgrounds to preserve its focused, professional utility.

## System Prompt (paste into AI tool)

```
Dify is a professional AI developer platform with a clean, minimal aesthetic. The design uses a high-contrast palette of pure white (#FFFFFF) and black (#000000), with a single electric blue accent (#0033FF) for primary actions and highlights. Typography relies on a clean grotesque sans-serif category with tight letter-spacing for headlines. The layout is spacious, with generous whitespace and a structured grid system. Critical design rules: use only one accent color (blue), keep borders subtle with soft blue-gray (#E5EAFF), avoid decorative elements or heavy shadows, maintain left-aligned body text, and preserve the professional, developer-focused tone.
```