coderef

DeepL

"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…
DownloadRaw
deepl.comVisit ↗
View full
deepl.comVisit site ↗
DeepL website, full page

Palette

At a glance

Website
deepl.com ↗
Theme
light
Typefaces
System
Sections
10
Length
983 words

Add it to your project

Then prompt your agent

Design System · DeepL

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: DeepL
colors:
  brand: '#0f2b46'
  brand-hover: '#091a2b'
  mint-pressed: '#6cf1c9'
  primary: '#0070c9'
  primary-hover: '#0053a9'
  primary-pressed: '#00388d'
  primary-muted: '#e0f0ff'
  alternative-border: '#6d5cd8'
  foreground: '#191919'
  text-strong: '#292929'
  text-secondary: '#6f6f6f'
  canvas: '#ffffff'
  surface-secondary: '#f5f5f5'
  basic-pressed: '#e5e5e5'
  border-hover: '#c6c6c6'
  hover-light: '#f8f8f8'
  success: '#007f59'
  danger: '#c34331'
  warning: '#c9a800'
typography:
  heading:
    fontSize: 32px
    fontWeight: 400
    use: section headings
  button:
    fontSize: 18px
    fontWeight: 400
    use: header pills
rounded:
  md: 8px
  pill: 40px
components:
  button-brand:
    type: button
    backgroundColor: '#0f2b46'
    textColor: '#ffffff'
    rounded: 40px
    height: 45px
    padding: 13px 16px 14px
    typography: 18px / 400
    hover: '#091a2b'
    pressed: '#6cf1c9'
    use: 'Start free trial — brand navy pill that deepens on hover and flashes mint #6cf1c9 with navy text when pressed.'
  button-outline:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#0f2b46'
    rounded: 40px
    height: 45px
    padding: 13px 16px 14px
    typography: 18px / 400
    hover: '#f8f8f8'
    pressed: '#6cf1c9'
    use: Log in — white pill with navy text; the same mint press.
  tab-product:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#292929'
    rounded: 8px
    height: 40px
    padding: 8px 16px
    typography: 16px / 600
    shadow: 'inset 0 0 0 1px #e5e5e5'
    hover: '#f5f5f5'
    pressed: '#e5e5e5'
    focus: 'outline 2px solid #0070c9'
    use: 'Translate files / speech / Use API — basic action tabs (--dui-color-background-action-basic-*) with a 1px inset border that darkens to #c6c6c6; the active tab is #e0f0ff with #0053a9 text.'
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: robotoLatin

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.

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.”

More like DeepL

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses