# Ably · Design system migration spec

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

> This site is a prime example of a modern, developer-focused SaaS design that effectively uses a dark theme, bold typography, and a limited, high-impact color palette to convey reliability and performance.

## 1. Identity DNA

The Ably design system is architected as a high-performance engine room for digital experiences, built to power real-time connectivity across devices with unwavering reliability. Its identity DNA is rooted in the essential qualities of developer infrastructure: clarity, precision, and the robust strength of a system designed to function under pressure.

**One-liner:** A developer-focused infrastructure platform for building resilient, real-time applications.
**Keywords:** realtime · infrastructure · developer · reliability · connectivity
**Analogy:** A high-performance engine room for modern, multi-device digital experiences.

## 2. Color

The palette is a study in high-contrast dark mode, where a deep, near-black background (#03020D) provides a vast canvas for crisp white (#FFFFFF) and functional gray (#C6CED9) text. A single, vibrant orange (#FF5416) serves as the energetic accent, reserved exclusively for high-priority actions and primary calls-to-action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#03020D` | main background |
| `--bg-soft` | `#141924` | card background |
| `--bg-quiet` | `#3F4555` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#C6CED9` | secondary text |
| `--muted` | `#C6CED9` | placeholder |
| `--muted-soft` | `#C6CED9` | weak hint |
| `--accent` | `#FF5416` | single accent |
| `--line` | `rgba(226,232,240,1.0)` | divider |

**Color principle:** High-contrast dark mode with a vibrant, energetic orange accent for high-priority actions.

The principle is strict chromatic discipline: one accent color commands focus against a disciplined dark field, ensuring visual hierarchy is maintained through contrast alone.

## 3. Typography

Typography adopts a clear, hierarchical voice using clean, modern sans-serif categories—humanist and geometric forms that prioritize legibility. The scale serves two primary functions: commanding display text for bold statistics and key messages, and a reliable body style for dense technical content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -0.6px | Large hero headings and bold statistics. |
| body | 17px | 1.6 | 500 | 0px | General body text and UI elements. |

**Type rules:**
- Use a clear typographic hierarchy with large, bold display text for key messages.
- Ensure sufficient contrast between white/gray text and the dark background.

## 4. Spacing

A consistent 4px base unit establishes the fundamental rhythm, providing the underlying structure for all spacing decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** A consistent 4px base unit provides structure and predictable spacing throughout the layout.

## 5. Surfaces

Depth is communicated through subtle, calculated shadow and border treatments. Surfaces are defined not by fill color, but by the precise application of shadow (0px 4px 4px rgba(0,0,0,0.25)) and a dual-border language—one for subtle separation, another for interactive element definition.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 4px 4px 0px rgba(0,0,0,0.25)
- **Borders:** 1px solid rgba(226,232,240,1.0) for subtle separation and 1px solid rgba(255,255,255,0.25) for interactive elements.

## 6. Layout

The structural skeleton is a centered 12-column grid that organizes content into distinct, purpose-driven sections. This framework accommodates everything from expansive hero headlines to dense statistic displays and modular use-case cards, all held within a generous gutter.

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

**Skeleton:** A structured 12-column grid system with a centered container, featuring distinct sections for hero content, stats, and use-case cards.

## 7. Motion & Interaction

Motion philosophy is one of smooth, purposeful feedback rather than decoration. Transitions for interactive states—hovers, clicks, and layout shifts—employ a standard cubic-bezier(0.4, 0, 0.2, 1) easing curve to create natural, predictable animations that reinforce interface reliability.

- **Durations:** micro 150ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for interactive states like hover, color changes, and layout shifts.

- **Hover:** Visual feedback through color changes, opacity adjustments, or subtle padding shifts.
- **Click:** Immediate response with standard interactive feedback, often transitioning the element to its active state.
- **Transition:** Consistent use of cubic-bezier(0.4, 0, 0.2, 1) for smooth, natural-feeling animations.
- **Keyboard:** Standard keyboard navigation support, likely including focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, authoritative, and technically precise, emphasizing performance and reliability without resorting to casual jargon. It favors direct, benefit-oriented headlines and actionable CTAs that guide the user with clarity.

- **Tone:** Confident, authoritative, and developer-focused, emphasizing reliability and performance.
- **Headline style:** Direct, benefit-oriented, and concise, often using strong verbs and impactful numbers.
- **CTA style:** Actionable and clear, using verbs like 'Start' and 'Jump to' to guide the user.
- **Avoid:** Avoid overly casual or jargon-heavy language that obscures the technical value proposition. / Avoid using light or pastel color palettes that clash with the dark, high-contrast theme. / Avoid cluttered layouts; maintain generous whitespace to highlight key information. / Avoid complex or unpredictable animations; keep motion subtle and purposeful. / Avoid using multiple competing accent colors; stick to the primary orange for focus.

### Don'ts
- ❌ Don't use a light theme — screenshot shows a dark background (#03020D) with white text.
- ❌ Don't use a primary blue accent — screenshot shows a vibrant orange (#FF5416) for key actions.
- ❌ Don't use rounded corners smaller than 4px — screenshot shows a consistent use of 8px-12px for cards.
- ❌ Don't use complex sans-serif fonts — screenshot shows clean geometric and humanist sans-serifs.
- ❌ Don't use small, cramped spacing — screenshot shows a generous 24px gutter and large padding.
- ❌ Don't use decorative serif fonts — screenshot shows modern, functional sans-serif typography.

By design, the system deliberately omits light themes, competing accent colors, and complex animations that could compromise its focused, high-performance character.

## System Prompt (paste into AI tool)

```
This is a developer-focused SaaS website for a real-time infrastructure platform. The design DNA is built on a deep, dark color scheme (#03020D background) with high-contrast white (#FFFFFF) and soft gray (#C6CED9) text, anchored by a vibrant orange (#FF5416) accent. Typography is primarily clean, modern sans-serif (humanist and geometric categories), with a clear hierarchy from large, bold headlines to readable body text. Critical design constraints: never use a light theme, never use blue as the primary accent, and avoid cramped layouts. The overall feel is professional, reliable, and highly functional, designed to appeal to technical decision-makers.
```