# Stytch · Design system migration spec

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

> This site is an excellent example of a developer-focused SaaS platform that uses strong typography and a restrained palette to communicate technical reliability and enterprise-grade security.

## 1. Identity DNA

Stytch's identity system is constructed like a well-engineered API: a robust toolkit for building secure identity layers. It balances technical depth with the reliable clarity required of an enterprise-grade platform, establishing a clean, typography-driven presence for a developer-focused authentication service.

**One-liner:** A clean, typography-driven developer platform identity for a secure authentication API.
**Keywords:** identity · authentication · platform · developer · API
**Analogy:** A robust, developer-focused toolkit for building secure identity layers, balancing technical depth with enterprise-grade reliability.

## 2. Color

The palette is a study in high-contrast monochrome, built on a warm white base and near-black ink for maximum legibility. This professional restraint prioritizes content clarity over decorative color, using muted grays only for necessary secondary hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFAF9` | main background |
| `--bg-soft` | `#F2F0EE` | card background |
| `--ink` | `#1D1D1D` | body text |
| `--ink-soft` | `#525151` | secondary text |
| `--muted` | `#CECECE` | placeholder |
| `--line` | `rgba(29,29,29,0.15)` | divider |

**Color principle:** High-contrast monochrome palette with a warm white base, prioritizing legibility and professional restraint.

The core principle is one of **professional restraint**, where every color choice serves the singular goal of clear, functional communication.

## 3. Typography

The typographic voice is split between a humanist sans-serif for authoritative display and a clean monospace for all functional, technical text. This deliberate pairing reinforces the dual nature of the platform: bold, confident statements at the system level, and precise, code-like reliability in the interface.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -2px | Main hero headline |
| headline | 48px | 1.1 | 700 | -1px | Section headers |
| body | 16px | 1.5 | 400 | 0 | General text and navigation |
| code | 14px | 1.6 | 400 | 0 | Code snippets and technical UI |

**Type rules:**
- Use Booton/BootonUncommon for hero displays and major headings.
- Use Chivo Mono for all body text, navigation, buttons, and technical elements.
- Maintain tight letter-spacing (-1px to -2px) for large display type.

## 4. Spacing

A consistent 4px-based spatial rhythm provides the underlying grid, with generous padding in hero sections to frame key messages.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px-based spatial rhythm with generous padding in hero sections (48px).

## 5. Surfaces

Depth is communicated through a minimal, flat layering system using a single, sharp shadow value. Borders are applied as 1px directional lines, often at the bottom or right, to create clean separation without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.5) 0px 8px 10px 0px
- **Borders:** 1px solid borders using ink and muted tones, often applied directionally (bottom/right).

## 6. Layout

The layout skeleton is a centered, single-column flow within a 1280px container, ensuring focused content delivery. This structure places massive, centered typography against the warm white background, creating a clear and direct path through the information.

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

**Skeleton:** Centered content container with a clean, single-column flow for hero sections.

## 7. Motion & Interaction

Motion philosophy is one of stability and precision, using only subtle, smooth CSS transitions for interactive states. Animations are strictly functional, reinforcing a sense of professional reliability rather than adding decorative flair.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.87, 0, 0.13, 1)`
- **Patterns:**
  - Subtle transform transitions for interactive elements.
  - Smooth easing curves for hover states and focus changes.

- **Hover:** Subtle opacity or background color shifts.
- **Click:** Minimal visual feedback, relying on state changes.
- **Transition:** Smooth CSS transitions on transform and color properties.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and technically precise, matching the monospace typographic system. It employs bold, large-scale headlines with negative letter-spacing and action-oriented, monospace calls-to-action on high-contrast buttons.

- **Tone:** Professional, direct, and technically precise.
- **Headline style:** Bold, large-scale typography with negative letter-spacing.
- **CTA style:** Action-oriented, monospace text on high-contrast buttons.
- **Avoid:** Avoid overly decorative or whimsical language. / Avoid complex gradients or vibrant color accents. / Avoid playful or informal UI patterns.

### Don'ts
- ❌ Don't use vibrant gradients — screenshot shows a monochrome, flat color palette instead.
- ❌ Don't use a playful or rounded serif font — screenshot uses a geometric/monospace-heavy system.
- ❌ Don't use large, colorful icons — screenshot relies on typography and subtle borders.
- ❌ Don't use dark mode as the default — screenshot shows a light, warm-white background.
- ❌ Don't use decorative illustrations — screenshot focuses on code snippets and clean UI.
- ❌ Don't use excessive shadows — screenshot shows very minimal, flat layering.

This system deliberately excludes vibrant gradients, playful serifs, decorative illustrations, and excessive shadows to maintain its focused, developer-centric language.

## System Prompt (paste into AI tool)

```
Stytch is a professional, developer-focused identity platform using a high-contrast monochrome palette. The primary colors are a warm white (#FBFAF9) and near-black ink (#1D1D1D), with muted grays (#525151, #CECECE) for secondary text. Typography is dominated by a humanist-sans for display (Booton) and a clean monospace (Chivo Mono) for body and technical UI. Avoid vibrant color accents, complex gradients, or playful, whimsical elements. Critical design constraints: prioritize monospace typography for all functional text, use 4px-based spacing with generous padding in hero sections, and maintain a strictly flat, high-contrast visual language. Ensure all UI components remain clean, bordered, and legible.
```