---
name: Modern Translation Design System
colors:
  surface: '#f8f9fa'
  surface-dim: '#d9dadb'
  surface-bright: '#f8f9fa'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f4f5'
  surface-container: '#edeeef'
  surface-container-high: '#e7e8e9'
  surface-container-highest: '#e1e3e4'
  on-surface: '#191c1d'
  on-surface-variant: '#434655'
  inverse-surface: '#2e3132'
  inverse-on-surface: '#f0f1f2'
  outline: '#737686'
  outline-variant: '#c3c6d7'
  surface-tint: '#0053db'
  primary: '#004ac6'
  on-primary: '#ffffff'
  primary-container: '#2563eb'
  on-primary-container: '#eeefff'
  inverse-primary: '#b4c5ff'
  secondary: '#505f76'
  on-secondary: '#ffffff'
  secondary-container: '#d0e1fb'
  on-secondary-container: '#54647a'
  tertiary: '#4d556b'
  on-tertiary: '#ffffff'
  tertiary-container: '#656d84'
  on-tertiary-container: '#eef0ff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dbe1ff'
  primary-fixed-dim: '#b4c5ff'
  on-primary-fixed: '#00174b'
  on-primary-fixed-variant: '#003ea8'
  secondary-fixed: '#d3e4fe'
  secondary-fixed-dim: '#b7c8e1'
  on-secondary-fixed: '#0b1c30'
  on-secondary-fixed-variant: '#38485d'
  tertiary-fixed: '#dae2fd'
  tertiary-fixed-dim: '#bec6e0'
  on-tertiary-fixed: '#131b2e'
  on-tertiary-fixed-variant: '#3f465c'
  background: '#f8f9fa'
  on-background: '#191c1d'
  surface-variant: '#e1e3e4'
typography:
  h1:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
    letterSpacing: -0.02em
  h2:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: -0.01em
  h3:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '600'
    lineHeight: 24px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 18px
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
  code:
    fontFamily: Monospace
    fontSize: 13px
    fontWeight: '400'
    lineHeight: 20px
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  sidebar-width: 240px
  container-max: 1440px
---

## Brand & Style
The design system is built for precision, efficiency, and clarity in professional localization workflows. It prioritizes a high density of information without sacrificing readability, catering to users who manage large volumes of linguistic data. 

The visual style is **Corporate / Modern**, characterized by a systematic approach to layout and a focus on utility. The interface evokes a sense of reliability and technical sophistication through its disciplined use of whitespace, a constrained color palette, and clear structural hierarchies. It avoids decorative elements in favor of functional clarity, ensuring that the user's primary focus remains on the content and translation accuracy.

## Colors
The color strategy for this design system centers on a high-contrast primary blue to drive action and focus. The background uses a very light gray to reduce eye strain during long working sessions, while maintaining a clean, "paper-like" feel.

- **Primary Blue (#2563EB):** Used for primary actions, active navigation states, and progress indicators.
- **Surface Colors:** The main background is a near-white neutral, with secondary surfaces (like sidebars) using a slightly deeper gray to create structural separation.
- **Semantic Colors:** Green, Amber, and Red are utilized strictly for translation status (Complete, In-Progress, or Error/Conflict) to provide immediate visual feedback.

## Typography
Inter is the foundation of this design system, chosen for its exceptional legibility at small sizes and its neutral, systematic character. 

The scale is intentionally compact to allow for side-by-side translation views (source vs. target). **H1** and **H2** tags are reserved for page headers and major section titles. **Body-md** is the workhorse size for translation strings, while **Body-sm** is used for metadata and secondary descriptions. Labels utilize a slightly heavier weight and increased letter spacing to distinguish them from editable content.

## Layout & Spacing
The layout employs a **Fixed Sidebar** and a **Fluid Main Content** area. This ensures that navigation is always accessible while the translation workspace expands to utilize the user's screen real estate.

Spacing follows a strict 4px grid. A standard 16px (md) gutter is used between content cards and sections to maintain a high information density without feeling cluttered. Internal component padding is kept tight (8px or 12px) to minimize unnecessary scrolling. In the main content area, cards should be organized in a grid or a vertical list depending on the view mode (Gallery vs. List).

## Elevation & Depth
Hierarchy is established through **low-contrast outlines** and **ambient shadows**. This design system avoids dramatic depth in favor of a flatter, more professional aesthetic.

- **Level 0 (Base):** Background surface (#F9FAFB).
- **Level 1 (Cards/Sidebar):** White surface with a 1px border (#E5E7EB).
- **Level 2 (Dropdowns/Modals):** White surface with a subtle ambient shadow (0px 4px 6px -1px rgba(0, 0, 0, 0.1)) to indicate interactivity and temporary placement.

Borders are the primary method of separation, while shadows are used sparingly to highlight active or floating elements.

## Shapes
The shape language is conservative and precise. A "Soft" roundedness level (4px/0.25rem) is applied to standard buttons, input fields, and small cards. Larger containers, like the main workspace cards, may use a 8px radius. 

Status indicators and avatar badges use a full circular (pill) radius to distinguish them from structural UI elements. This subtle rounding maintains a modern feel while preserving the serious, tool-like nature of the interface.

## Components

### Sidebar Navigation
The sidebar uses a slightly darker neutral background than the main content. Active states are indicated by a 2px vertical bar on the left edge using the primary blue, combined with a subtle light-blue background tint for the entire menu item. Icons should be line-based and 20px in size.

### Cards & Workspace
Main content cards feature a white background and a 1px border (#E5E7EB). To indicate selection or focus (e.g., the current segment being translated), the border color should shift to the primary blue.

### Buttons
- **Primary:** Solid #2563EB with white text. 
- **Secondary:** White background with a 1px #E5E7EB border and dark text.
- **Ghost:** No background or border, primary blue text; used for low-priority actions.

### Status Indicators
Translation progress is visualized through two methods:
1.  **Status Dots:** 8px circular indicators using semantic colors (Success, Warning, Error).
2.  **Compact Progress Bars:** 4px tall bars located at the bottom of project cards, using the primary blue for the fill and a light gray for the track.

### Input Fields
Inputs must accommodate multi-line text. They feature a 1px gray border that transitions to blue on focus. Use a monospaced font option for technical or code-based translation strings to ensure character clarity.