# Appwrite · Design system migration spec

> Source: https://appwrite.io  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, developer-focused SaaS UI, effectively balancing a dark, sophisticated aesthetic with clear, actionable information.

## 1. Identity DNA

The Appwrite design system operates as a dark, sophisticated command center for building modern applications. Its identity is rooted in the clarity and control demanded by backend infrastructure, where every element serves a functional purpose within a high-contrast, focused environment.

**One-liner:** An open-source backend-as-a-service platform designed for speed and scale.
**Keywords:** open-source · backend · infrastructure · developer platform
**Analogy:** A dark, sophisticated command center for building modern applications.

## 2. Color

The color system is anchored by a deep charcoal base, creating a immersive dark canvas where information hierarchy is defined by light. A singular, high-saturation pink accent is reserved exclusively for primary actions, creating a clear and immediate visual pathway for user interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#19191c` | main background |
| `--bg-soft` | `#1d1d21` | card background |
| `--bg-quiet` | `#202023` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#acacaf` | secondary text |
| `--muted` | `#57575c` | placeholder |
| `--accent` | `#fd356e` | single accent |
| `--line` | `rgba(172, 172, 175, 0.2)` | divider |

**Color principle:** Dark mode base with high-contrast white text and a singular, vibrant pink accent for primary actions.

This disciplined palette enforces a core principle: contrast is a functional tool for guiding attention, not merely an aesthetic choice.

## 3. Typography

Typography is split between a bold, heavy grotesque for display and headlines, asserting presence with tight tracking, and a humanist sans-serif for body text, optimized for prolonged reading on dark surfaces. A monospace face is strictly confined to code and technical identifiers, maintaining a clear boundary between prose and machine input.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 500 | -1.5px | Hero headlines |
| heading | 40px | 1.2 | 500 | -0.5px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Paragraph text |

**Type rules:**
- Display text uses a heavy grotesque typeface with tight tracking.
- Body text defaults to a highly legible humanist sans-serif.
- Monospace font is strictly for code snippets and technical identifiers.

## 4. Spacing

All spatial relationships are governed by a strict 4px grid, enforcing a consistent and predictable visual rhythm across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A strict 4px grid system that maintains consistent visual density.

## 5. Surfaces

Depth is communicated through subtle, layered elevation, not through stark color contrast. Cards and interactive surfaces float above the dark base using soft shadows and barely-there borders, defining boundaries without breaking the immersive theme.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 3px 0px rgba(0, 0, 0, 0.05)
  - 0px 4px 8px 20px rgba(0, 0, 0, 0.2)
- **Borders:** Subtle 1px borders in rgba(172, 172, 175, 0.2) define card boundaries without breaking the dark immersion.

## 6. Layout

The layout skeleton begins with a powerful, centered single-column hero to focus the narrative. It then expands into a multi-column grid for features and case studies, structuring complex information into digestible, parallel flows.

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

**Skeleton:** A centered single-column layout for hero sections, transitioning to a multi-column grid for feature and case study sections.

## 7. Motion & Interaction

Motion is restrained and purposeful, used to confirm interactions and guide focus rather than to decorate. All transitions follow a standard cubic-bezier curve, providing a consistent, polished feedback loop that feels responsive but never distracting.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity fades for secondary elements.
  - Smooth color and border transitions on interactive states.

- **Hover:** Subtle opacity or background-color shifts on hover for interactive elements.
- **Click:** Immediate visual feedback via scale or color change.
- **Transition:** All transitions use a standard 0.15s to 0.3s cubic-bezier(0.4, 0, 0.2, 1) curve.
- **Keyboard:** Standard focus states with subtle outlines or borders.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and empowering, speaking to developers with clarity and respect for their time. It avoids passive language and vague promises in favor of active, action-oriented statements that reflect the platform's focus on efficiency.

- **Tone:** Professional, direct, and empowering, focusing on developer efficiency and scale.
- **Headline style:** Bold, direct, and action-oriented, often using present tense verbs.
- **CTA style:** Clear and action-oriented, such as 'Start project' or 'Request a demo'.
- **Avoid:** Passive language / Overly complex jargon / Vague promises

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a deep dark theme (#19191c).
- ❌ Don't use serif fonts for headlines — screenshot shows a clean, modern grotesque sans-serif.
- ❌ Don't use muted or pastel accent colors — screenshot shows a highly saturated pink (#fd356e).
- ❌ Don't use sharp corners on primary buttons — screenshot shows pill-shaped (999px) radius.
- ❌ Don't use high-contrast white backgrounds for cards — screenshot shows dark, slightly elevated surfaces.
- ❌ Don't use wide tracking on large headlines — screenshot shows tight, negative tracking.

The system deliberately avoids light backgrounds, serif headlines, and muted accent colors, rejecting visual patterns that compromise its dark, high-contrast command-center ethos.

## System Prompt (paste into AI tool)

```
Appwrite is an open-source Backend-as-a-Service (BaaS) platform for developers, featuring a dark, sophisticated UI. The primary color palette consists of a deep dark background (#19191c), high-contrast white text (#ffffff), and a vibrant pink accent (#fd356e) for primary calls to action. Typography combines a bold grotesque sans-serif for headlines with a humanist sans-serif for body text, maintaining a clean and modern aesthetic. Critical design constraints: never use light backgrounds or pastel accent colors; always maintain high contrast for readability on dark surfaces; and strictly use pill-shaped (999px radius) corners for primary action buttons to ensure visual consistency.
```