Deepl Design System Deep Dive

1. Brand Overview

DeepL has built a reputation as the “translator for people who care about words.” And their visual language matches that ethos: precise, minimal, and serious, but with moments of warmth through color. The brand’s interface is unapologetically functional—nothing that doesn’t serve the task of translating gets in the way.

The vibe is restrained. Lots of deep navy (#0f2b46, #091a2b) and charcoal (#292929, #191919) anchor the design, paired with crisp white (#ffffff) for contrast. Blue accents (#0070c9, #0053a9) are used sparingly but decisively—on primary actions, highlights, and focus states. That restraint makes every accent feel intentional.

Typography is utilitarian. Roboto everywhere, sometimes paired with Noto Sans SC for Chinese contexts. No decorative flourishes. The type scale is tight, weights are functional, and line heights are tuned for dense, information-heavy layouts. This makes sense: users are often juggling multiple language inputs; clarity is king.

The layout system is built on an 8px grid, with occasional 4px values for micro-alignment. This gives the interface a rhythm—spacing feels consistent even when components vary in complexity. Breakpoints cover a wide range, from tiny mobile (320px) to ultra-wide desktop (1660px), hinting at a product that’s used in diverse contexts—quick translations on a phone, deep document work on a large monitor.

Component styling is semi-flat. Shadows are rare and subtle (rgba(0,0,0,0.1) at 2px, 8px). Borders and color changes do most of the work in defining hierarchy. Border radii vary from sharp (0px) to fully rounded (9999px pills), but usage is consistent: pills for CTAs, small radii for inputs, mid radii for cards.

Overall: This is a serious productivity tool with a clean, international aesthetic. It’s designed to be invisible enough to let language take the spotlight, but with enough brand cues to feel distinct.

2. Color System

2.1 Primary Colors

The semantic primary is rgb(25,25,25)—that’s #191919. This is unusual: most brands define primary as a bright accent. Here, primary is near-black. That says something: DeepL’s primary tone is authority, seriousness, and focus. The “true” accent is #0070c9 (blue), but in token naming it’s treated as a functional color (--color-background-action-primary), not “primary” in the brand sense.

Psychologically: #191919 is neutral enough to let translated text stand out, but dark enough to feel professional. The blue (#0070c9) adds trust and clarity—common in tech and productivity brands (compare to Microsoft’s blue or IBM’s).

Competitors like Google Translate lean lighter—white backgrounds, brighter blues. DeepL’s darker accents and muted neutrals feel more premium.

2.2 Complete Palette

Here’s the extracted palette with usage notes:

Plus the huge set of CSS variables defining functional colors:

For example:

• --color-background-action-primary: #0070c9
• --color-background-action-primary-hover: #0053a9
• --color-background-action-primary-pressed: #00388d
• --color-background-surface-success: #007f59 (light) / #43dea9 (dark)
• --color-background-surface-danger: #c34331 (light) / #ffb2a7 (dark)
• --color-background-surface-warning: #c9a800 (light) / #e8c300 (dark)

They’ve clearly built a full semantic system for light/dark mode.

2.3 Color Relationships

Contrast is generally high. #0070c9 on white passes WCAG AA easily for normal text. #191919 on white is perfect. Even muted grays (#696b6b) on white are borderline for small text—likely reserved for disabled states.

Dark mode uses lighter blues (#97caff) for accents and flips neutrals: text becomes #f5f5f5, surfaces go #191919. Tokens use light-dark() functions extensively, meaning they handle contrast automatically per mode.

2.4 Usage Guide

Works well:

• #0070c9 buttons on white, with #ffffff text.
• #0f2b46 pill buttons with white text—feels very branded.
• #e5e5e5 borders against #ffffff backgrounds—subtle separation.

Avoid:

• Using #c6c6c6 for text—it’s too low contrast except for disabled states.
• Putting #0070c9 on #0f2b46—low contrast, fails accessibility.
• Mixing multiple blues—stick to one accent per context.

3. Typography

3.1 Font Families

Everything is Roboto, with occasional Noto Sans SC for Chinese contexts. No fallbacks listed, but in practice Roboto has system fallbacks.

Sources: No Google Fonts or Adobe Fonts loaded—likely self-hosted.

3.2 Type Scale

Here’s the extracted type scale:

3.3 Hierarchy

The hierarchy is subtle. Biggest headings are light-weight (300), which keeps them from feeling too heavy over functional content. Small sizes (14px, 12px) are used for captions, with higher weights (500, 600, 700) to maintain presence despite the small size.

Line heights are tight for large headings (1.05) and looser for body/captions (1.50). This helps dense data remain readable.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px, but they use 4px increments for fine control. Common values:

4.2 Layout

Breakpoints are extensive: from 320px up to 1660px, with many intermediate steps (400px, 768px, 1024px, 1440px, etc.). This suggests a finely tuned responsive system—likely adjusting not just layout but component density.

5. Visual Elements

Border Radius

Values range from 0px to 9999px:

Shadows

Mostly flat:

• rgba(0,0,0,0) 0px 0px 0px 1px inset — transparent inset borders
• rgba(0,0,0,0.1) 0px 2px 8px — subtle depth
• Rare multi-layer shadows for cards.

Borders do most of the work for separation.

6. Components

6.1 Buttons

Outline Button:

• Default: transparent bg, #60afff text/border, 3px radius, 1px solid border.
• Hover: white text, no border.
• Active: #191919 bg, default text.
• Focus: 2px solid active border color, #3e3e3e bg.

Pill Button (Light):

• Default: white bg, #0f2b46 text, 40px radius.
• Hover/active/focus states match outline button’s handling.

Ghost Icon Button:

• Default: rgba(0,0,0,0.03) bg, rgba(0,0,0,0.25) text, 4px radius.
• Hover: border-color danger hover, white text.

Round Button:

• Default: #ededed bg, black text, full rounded (9999px).

Accent Tile Button:

• Default: #def5ff bg, #191919 text, 12px radius.

Dark Pill Button:

• Default: #0f2b46 bg, white text, 40px radius.
• Hover: #0070c9 bg, white text, white inset shadow.

6.2 Links

Varieties:

• White text, underline.
• Blue (#0070c9) text, no underline.
• Black (#191919) text, no underline.
• Navy (#0f2b46) text.

Hover generally darkens text to #191919.

6.3 Forms

Text inputs:

• Transparent bg, #292929 text, no border by default.
• Focus: no visible border color change (transparent).

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #191919;
  --color-neutral-light: #c6c6c6;
  --color-neutral-dark: #292929;
  --color-accent-blue: #0070c9;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-deep-navy: #091a2b;
  --color-slate-blue: #3b435c;
  --color-brand-navy: #0f2b46;
  --color-gray-mid: #696b6b;
  --color-blue-dark: #0053a9;
  --color-light-gray: #e5e5e5;
  --color-blue-mid: #0775cd;
  --color-blue-deep: #001f73;
  --color-gray-lightest: #f5f5f5;

  /* Typography */
  --font-roboto: "Roboto", sans-serif;
  --font-noto-sans-sc: "Noto Sans SC", sans-serif;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-xxl: 12px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: rgba(0, 0, 0, 0) 0px 0px 0px 1px inset;
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 2px 8px;
}

8. AI Coding Assistant Prompt

# Deepl Design System Specification

You are a DeepL design expert. Build UIs matching their visual language exactly.

## Brand Context
DeepL’s design is minimal, serious, and functional. It prioritizes clarity and readability for multilingual content. The palette is restrained, typography is utilitarian, and components are built for productivity, not decoration.

## Color Palette
- Primary: #191919 — Text, dark surfaces
- Neutral Light: #c6c6c6 — Dividers, backgrounds
- Neutral Dark: #292929 — Dark mode surfaces
- Accent Blue: #0070c9 — Primary actions, links
- Black: #000000 — Icons, text
- White: #ffffff — Backgrounds, text on dark
- Deep Navy: #091a2b — Headers, backgrounds
- Slate Blue: #3b435c — Secondary text
- Brand Navy: #0f2b46 — Buttons, borders
- Gray Mid: #696b6b — Disabled text
- Blue Dark: #0053a9 — Hover/focus states
- Light Gray: #e5e5e5 — Borders
- Blue Mid: #0775cd — Rare hover
- Blue Deep: #001f73 — Deep hover
- Gray Lightest: #f5f5f5 — Canvas secondary

## Typography
Fonts: Roboto, Noto Sans SC (for Chinese)

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56px | 300 | 1.05 | Main titles |
| H1 | 48px | 300 | 1.05 | Large headings |
| H1 | 40px | 300 | 1.05 | Section headings |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Button | 16px | 500 | 1.50 | Primary button text |
| Caption | 14px | 400-700 | 1.50 | Labels, hints |

## Spacing & Grid
Base: 8px grid. Scale: 2, 4, 6, 8, 10, 12, 13, 14, 16, 20, 24, 32, 40, 48, 56, 64px.

## Border Radius
- none: 0px — tables
- sm: 3px — small buttons
- md: 4px — inputs
- lg: 6px — medium buttons
- xl: 8px — cards
- pill: 40px — CTAs
- full: 9999px — avatars

## Shadows & Depth
Mostly flat. Use subtle shadows like `rgba(0,0,0,0.1) 0px 2px 8px` for cards.

## Components

### Primary Button
```css
.btn-primary {
  background: #0070c9;
  color: #ffffff;
  padding: 13px 16px 14px;
  border-radius: 40px;
  font-weight: 400;
  font-size: 18px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #0053a9; }
.btn-primary:focus { outline: 2px solid #0053a9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Outline Button
```css
.btn-outline {
  background: transparent;
  color: #60afff;
  padding: 12px 23px;
  border-radius: 3px;
  border: 1px solid #60afff;
  font-weight: 500;
  font-size: 16px;
}
```

### Input Field
```css
.input {
  background: transparent;
  color: #292929;
  border: none;
  border-radius: 0px;
  padding: 0px;
}
.input:focus { border-color: transparent; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 8px;
}
```

## Layout & Responsive Rules
Breakpoints: 320px, 400px, 768px, 1024px, 1440px, 1660px.

## Interaction Rules
- Transition timing: 150ms ease
- Focus indicators: 2px solid accent color
- Hover states: color shifts, subtle shadows

## DO List
- Use only colors from the palette
- Maintain 8px grid
- Use Roboto for all text, Noto Sans SC for Chinese
- Keep shadows subtle
- Reserve accent blue for interactive elements

## DON'T List
- Mix multiple blues in one component
- Use low-contrast combinations
- Overuse rounded corners—stick to radius rules
- Invent new colors

## Code Examples

Primary button (Tailwind):
```html
<button class="bg-[#0070c9] text-white py-[13px] px-[16px] rounded-[40px] text-[18px] font-normal hover:bg-[#0053a9] focus:outline focus:outline-2 focus:outline-[#0053a9]">
  Translate
</button>
```

Outline button:
```html
<button class="border border-[#60afff] text-[#60afff] py-[12px] px-[23px] rounded-[3px] text-[16px] font-medium hover:text-white">
  Cancel
</button>
```

Card:
```html
<div class="bg-white rounded-[8px] p-[16px] shadow-[0_2px_8px_rgba(0,0,0,0.1)]">
  Card content here
</div>
```

9. Summary

TL;DR — DeepL’s design system is built for clarity and authority. Dark neutrals, a single strong blue accent, and utilitarian Roboto typography make the UI feel serious and professional. The 8px grid keeps spacing consistent, and components follow strict radius rules.

Brand Keywords:

• language-focused
• precision-minimalist
• tech-formal
• international-serious