# Daily · Design system migration spec

> Source: https://www.daily.co  ·  Curated by OpenDesign  ·  en

> Worth including for its masterful execution of 'developer-focused minimalism,' using a restricted monochrome palette and monospace accents to project technical expertise.

## 1. Identity DNA

The design system for Daily is built like industrial-grade infrastructure: robust, precise, and engineered for clarity over ornament. Its strict monochrome palette and typographic dualism create a visual language that prioritizes technical authority, mirroring the company's role as a global realtime communication provider.

**One-liner:** A minimalist, monochrome interface for a global realtime communication platform.
**Keywords:** realtime · infrastructure · WebRTC · global · enterprise · developer
**Analogy:** Industrial-grade infrastructure provider with a clean, developer-focused aesthetic.

## 2. Color

The color system is a study in restraint, employing a near-white background and deep charcoal to create a high-contrast foundation. Neutral grays provide the necessary hierarchy for secondary information without introducing visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCFCFC` | main background |
| `--bg-soft` | `#F4F5F6` | card background |
| `--ink` | `#161618` | body text |
| `--ink-soft` | `#374151` | secondary text |
| `--muted` | `#6B7280` | placeholder |
| `--line` | `rgba(229,231,235,1)` | divider |

**Color principle:** Strict monochrome palette focusing on content clarity through high contrast and neutral grays.

This commitment to a strictly monochrome palette ensures content remains the undisputed focal point.

## 3. Typography

Typography operates on a dual-axis: DM Sans provides a clean, humanist voice for primary communication, while DM Mono handles technical labeling with categorical precision. The scale balances dramatic hero headlines with a clear hierarchy for navigation and data.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -0.5px | Primary hero headline |
| headline | 36px | 1.1 | 500 | -0.5px | Section headlines |
| subhead | 20px | 1.4 | 400 | 0 | Introductory sub-headlines |
| body | 16px | 1.55 | 400 | 0 | Standard body text |
| label | 14px | 1.4 | 400 | 0.7px | Uppercase navigation and small labels |
| stat | 36px | 1.0 | 500 | -0.5px | Large statistic numbers |

**Type rules:**
- Use DM Sans (humanist-sans) for headlines and body text.
- Use DM Mono for UI labels, navigation items, and technical callouts.
- Maintain tight tracking for large headlines and loose tracking (0.7px) for uppercase labels.

## 4. Spacing

A 4px base unit governs the rhythm, with deliberate vertical spacing (48px–96px) creating breathing room between major content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base with generous vertical spacing (48px-96px) between major content sections.

## 5. Surfaces

Surfaces are defined by subtle, layered shadows that imply depth without heavy UI chrome. Borders are minimal and functional, using a consistent light gray rule.

- **Radius:** sm 4px · md 4px · lg 0px · pill 9999px
- **Shadows:**
  - 0px 4px 6px -4px rgba(0,0,0,0.1)
  - 0px 10px 15px -3px rgba(0,0,0,0.1)
- **Borders:** 1px solid #E5E7EB

## 6. Layout

The layout skeleton is asymmetric and spacious, typically placing bold headline text on the left with supporting graphics or space to the right. Structured grids then organize detailed information like statistics and features.

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

**Skeleton:** Asymmetric hero with text left and minimal graphics right; structured grid for stats.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose, using smooth, short-duration transitions for state changes. Content appearance is handled through simple fade-in and slide-up effects.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for standard UI interactions.
  - Subtle fade-in and slide-up effects for content appearance.

- **Hover:** Standard color and background transitions (0.15s) for interactive elements.
- **Click:** Immediate visual feedback with no heavy scaling or complex animations.
- **Transition:** All standard transitions utilize a 0.3s or 0.5s cubic-bezier(0.4, 0, 0.2, 1) curve.
- **Keyboard:** Standard focusable elements with standard browser outlines.

## 8. Voice & Don'ts

The editorial voice is technical, direct, and authoritative, using precise language like 'WebRTC infrastructure' to describe capability. It deliberately avoids marketing jargon and complex phrasing.

- **Tone:** Technical, authoritative, and precise.
- **Headline style:** Direct and descriptive, focusing on scale and capability.
- **CTA style:** Action-oriented, such as 'START BUILDING' and 'LEARN MORE'.
- **Avoid:** Excessive marketing jargon / Complex sentence structures / Vague claims without technical backing

### Don'ts
- ❌ Don't use vibrant accent colors — screenshot shows a strictly monochrome palette.
- ❌ Don't use decorative or serif fonts — screenshot shows only humanist-sans and monospace categories.
- ❌ Don't use rounded, friendly card styles — screenshot shows sharp or slightly rounded (4px) corners and hard dividers.
- ❌ Don't use dense, cramped layouts — screenshot shows generous whitespace (48px-96px) between sections.
- ❌ Don't use informal, casual language — screenshot uses precise technical terms like 'WebRTC infrastructure'.
- ❌ Don't use complex, busy background patterns — screenshot uses a plain, near-white (#FCFCFC) background.

The system explicitly rejects vibrant colors, decorative type, and rounded, friendly components in favor of technical starkness.

## System Prompt (paste into AI tool)

```
Design a minimalist, developer-focused interface for a global realtime infrastructure platform. The system uses a strict monochrome palette of near-white (#FCFCFC) and deep charcoal (#161618), with medium gray (#6B7280) for secondary text and #E5E7EB for borders. Typography is split between a humanist-sans (DM Sans) for primary content and a monospace (DM Mono) for UI labels and navigation, maintaining a 4px base grid with generous vertical rhythm. Key critical don'ts: avoid any vibrant accent colors, do not use decorative serif typefaces, and never use rounded, 'friendly' card components. The layout should prioritize extreme clarity and technical authority over visual flair.
```