DeepL

name DeepL

colors background: "#ffffff" foreground: "#0f2b46" # Blue Zodiac brand: "#0f2b46" # DeepL Blue muted: "#66768e" border: "#dce3e9" card: "#f8f8f8" # Alabaster accent: "#00b9f1" dark: background: "#081321" foreground: "#f8f8f8" muted: "#66768e" border: "#1c2b3a" card: "#0f2b46" accent: "#00b9f1"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "16px" lineHeight: "1.6" heading: fontWeight: "700" letterSpacing: "-0.01em"

rounded default: "4px" md: "8px" lg: "12px"

Design System: DeepL

Overview

DeepL's design system is built for "Trust and Precision." It uses a sophisticated dark blue and clean neutrals to establish its status as the world's most accurate translation tool.

Design Philosophy

• Accuracy above All: The UI is restrained and professional, ensuring that the focus remains entirely on the text being translated.

• Institutional Trust: Uses a deep "Blue Zodiac" to evoke the feeling of a reliable academic or professional institution.

• Frictionless Utility: Prioritizes large, side-by-side text areas and immediate "Copy" actions for zero-friction workflow.

• Global Clarity: Typography is engineered for readability across dozens of languages and scripts.

Colors

• Blue Zodiac (#0F2B46): The core brand color, representing depth, intelligence, and stability.

• Alabaster (#F8F8F8): A very light grey used for the "Output" text area to provide a subtle contrast with the "Input" area.

• DeepL Blue: Primarily used for the header, primary buttons, and the brand's digital identity.

Typography

• Inter: A neutral workhorse that handles complex scripts and technical terminology with exceptional clarity.

• Generous Leading: Uses high line-height (1.6x) in the translation areas to reduce eye fatigue during long reading sessions.

Components

• The Translation Mirror: Two large, side-by-side containers with integrated language selectors and toolbars.

• Language Pickers: Clean, searchable dropdowns with high-contrast text and subtle icons.

• The "Pro" Dashboard: A premium area for subscribers, using more of the brand blue and refined grey scales.

Visual Effects

• Minimal Decoration: Avoids shadows and gradients in the core translation area to maintain absolute focus.

• Success Indicators: Simple blue color shifts or checkmark icons for "Copy to Clipboard."

• Fast Content Fades: Smooth, brief transitions as translations appear or update.