DeepL DESIGN.md

Design System Inspiration of DeepL

Overview

Visual Theme & Atmosphere

"DeepL is on a mission to help businesses fully solve language with AI." It was "founded in Cologne in 2017 by CEO Jarek Kutylowski on the conviction that language should never be a barrier", and has grown from a single translation product into a Language AI company used by more than 200,000 business teams and millions of individuals. Its publisher notice names DeepL SE, Maarweg 165, 50825 Cologne.

The translator page is white and quiet: near-black text #191919, DeepL's deep navy #0f2b46 on the brand pills, a working blue #0070c9 for primary actions and links, and a fresh mint #6cf1c9 that appears when a pill is pressed. Type is Roboto (served as robotoLatin).

What makes it worth reading:

• A large, dual-theme token system. 1,094 --dui-* properties, each colour declared as light-dark(<light>, <dark>) with a -hex twin — --dui-color-background-action-primary light-dark(#0070c9,#0070c9).
• Complete action families. Basic, ghost, primary, danger and brand actions with hover, pressed and disabled values; borders and text follow the same pattern.
• A rebrand layer. 333 --dui-color-rebrand-* properties sit alongside the current set.

Primary tasks

• Translate text, files or speech; use the API.
• Start a free trial; log in.

Brand Narrative

A Cologne company that set out to remove language as a barrier. The translator stays calm — white, near-black, a working blue — with the brand's navy and a flash of mint when you commit to an action.

Principles

• Language should never be a barrier.
• Every colour for both themes. light-dark() throughout.
• Complete action states.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on deepl.com/en/translator: 1,551 root custom properties — --dui-* 1,094, --color-* 219, --csstools-* 112 (build helpers) and Tailwind's --tw-* (31, excluded).

Brand

• Brand (#0f2b46) — --dui-color-brand, --dui-color-background-action-brand.
• Brand hover (#091a2b) — the Start free trial pill on hover.
• Mint pressed (#6cf1c9) — the pills' pressed fill.

Primary blue

• Primary (#0070c9) → hover (#0053a9) → pressed (#00388d) — actions and links.
• Primary muted (#e0f0ff) — active tabs · Alternative border (#6d5cd8).

Neutrals

• Foreground (#191919) · Text strong (#292929) · Text secondary (#6f6f6f).
• Canvas (#ffffff) · Surface secondary (#f5f5f5) · Basic pressed (#e5e5e5) · Border hover (#c6c6c6) · Hover light (#f8f8f8).

Status

Success #007f59 · Danger #c34331 · Warning #c9a800.

Typography

Font family

Roboto, self-hosted as robotoLatin (300–700), with Noto Sans KR loaded for Korean.

Scale

H2 32px/400; H1 (the translator title) 20px/600; tabs 16px/600; header pills 18px/400.

Layout

• A light header with navigation and two pills, product tabs, then the two-pane translator.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat; 1px inset borders define controls.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.deepl.com/en/translator (live product page — 1,551 root custom properties read via getComputedStyle, Tailwind excluded; Roboto loaded as robotoLatin; three components measured at rest, hover, pressed and focus, captured 2026-09-27); https://www.deepl.com/en/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-27); https://www.deepl.com/en/about-us (About — mission, founded in Cologne in 2017, 200,000+ business teams, read 2026-09-27); https://www.deepl.com/en/publisher (publisher — DeepL SE, Maarweg 165, 50825 Cologne, HRB 104617, read 2026-09-27)

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched; consent rejected.

• Brand pill — Start free trial: #0f2b46, white 18px/400, 40px radius, 45px. Hover #091a2b; press flips to #6cf1c9 with navy text.
• Outline pill — Log in: white, navy text. Hover #f8f8f8; press #6cf1c9.
• Product tab — Translate files, speech, Use API: white with a 1px #e5e5e5 inset border, #292929 16px/600, 8px. Hover #f5f5f5 (border #c6c6c6), press #e5e5e5; focus a 2px #0070c9 outline. The active tab is #e0f0ff with #0053a9 text.

Radius

40px pills in the header; 8px tabs and cards.

States

Hover: navy deepens; white pills and tabs grey a step. Press: pills flash mint; tabs #e5e5e5. Focus: a 2px #0070c9 outline on tabs.

Do's and Don'ts

Do

• Use navy #0f2b46 for brand pills and blue #0070c9 for primary actions and links.
• Give every action hover, pressed and disabled values, declared for light and dark.
• Keep the mint #6cf1c9 for the pressed moment.

Don't

• Don't use mint as a resting fill.
• Don't use pure black; text is #191919.
• Don't replace inset borders with drop shadows.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#0f2b46 DeepL navy · #6cf1c9 mint · #0070c9 primary · #0053a9 hover · #e0f0ff active · #191919 ink · #f5f5f5 surface · #e5e5e5 border

Example Component Prompts

• "A 45px navy #0f2b46 pill, white 18px Roboto; hover #091a2b; pressed #6cf1c9 with navy text."
• "A tab row of white 40px buttons with 1px #e5e5e5 inset borders; active tab #e0f0ff with #0053a9 text."