# Design System

## Identity

OmniResume uses a restrained, premium visual language. Deep navy, warm off-white, and a single accent. Typography carries hierarchy. Decoration is minimal. The interface should feel like a professional tool, not a consumer app.

## Color Tokens

Defined in assets/css/tokens.css.

Surfaces:

- --surface-0: page background
- --surface-1: card and panel background
- --surface-2: elevated panel
- --surface-3: input and inset

Text:

- --text-1: primary
- --text-2: secondary
- --text-3: tertiary and hints

Borders:

- --border-1: subtle
- --border-2: standard
- --border-3: strong

Accent:

- --accent: primary brand accent
- --accent-hover
- --accent-soft: tinted background

Status:

- --success, --warning, --danger, --info with soft variants

The palette ships in light and dark themes. Theme selection is via [data-theme] on html.

## Typography

Families:

- --font-sans: Inter Variable (UI and body)
- --font-serif: Source Serif Variable (editorial)
- --font-mono: IBM Plex Mono (code, data)

Scale (modular, 1.200 minor third, clamped for viewport):

- --text-xs through --text-6xl

Weights: 400, 500, 600, 700

Line heights:

- --leading-tight: 1.15
- --leading-snug: 1.3
- --leading-normal: 1.55
- --leading-relaxed: 1.75

## Spacing

8-point grid with half steps.

--space-1 through --space-24

## Radius

- --radius-xs: 4px
- --radius-sm: 6px
- --radius-md: 10px
- --radius-lg: 14px
- --radius-xl: 20px
- --radius-full: 9999px

## Shadows

Two elevations only. Cards use --shadow-1. Modals use --shadow-2. No decorative shadows.

## Motion

Durations:

- --dur-fast: 120ms
- --dur-base: 200ms
- --dur-slow: 320ms

Easings:

- --ease-out
- --ease-in-out

All transitions are disabled under prefers-reduced-motion.

## Layout

Max content width: 1200px
Wide sections: 1440px
Narrow reading column: 68ch

Grid: 12 columns desktop, 6 tablet, 4 mobile.

## Components

Button. Three variants: primary, secondary, ghost. Three sizes: sm, md, lg. Loading state replaces label with spinner and disables interaction.

Field. Label above input. Help text below. Error state uses danger color and aria-describedby.

Card. Surface-1 background, border-1 border, radius-lg, shadow-1.

Modal. Centered, focus-trapped, escape to close, backdrop click to close.

Toast. Bottom-right desktop, bottom-center mobile, auto-dismiss with pause on hover.

Tabs. Keyboard navigable, aria-selected, roving tabindex.

Accordion. Native details or button plus region. Rotating chevron.

Template card. Preview thumbnail, name, category, ATS badge, two actions.

## Resume Document Styles

The resume preview uses its own CSS scope under .resume-doc. It does not inherit UI tokens except fonts. Template CSS files under assets/css/templates/ control layout, spacing, and typography within the document.

## Iconography

All icons are original SVG. Stroke width 1.75 at 24px. Round caps and joins. Currentcolor inherits from text.

## Illustration Style

Flat vector, geometric, limited palette drawn from the accent and navy family. No gradients except a single subtle one on the hero. No raster images.

## Voice

Clear. Direct. Active voice. No filler. Sentences are short. Instructions are imperative.