office_translator/stitch_translation_app_ui_redesign/DESIGN.md

name, colors, typography, rounded, spacing

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