design-principles

# Resume Matcher Design System: Swiss International Style

This project follows a strict **Swiss International Style** (International Typographic Style) aesthetic. It emphasizes cleanliness, readability, objectivity, and strong grid structures. The design is "Brutalist-Lite" — raw, functional, but polished.

---

## Core Philosophy

- **Form follows function**: content is primary
- **Grid Systems**: mathematically consistent layouts
- **High Contrast**: Sharp borders, distinct colors
- **Typography**: Hierarchy through size, weight, and font family mixing (Serif + Mono)

---

## Color Palette

The palette is minimal, relying on high contrast between ink and paper.

| Color Name | Hex / Tailwind | Usage |
|------------|----------------|-------|
| **Canvas Cream** | `#F0F0E8` | Main application background. Simulates paper. |
| **Panel Grey** | `#E5E5E0` | Secondary backgrounds, workspaces, unselected areas. |
| **Ink Black** | `#000000` | Borders, primary text, grid lines, hard shadows. |
| **Hyper Blue** | `#1D4ED8` (blue-700) | Primary actions, links, active states, accents. |
| **Paper White** | `#FFFFFF` | Input fields, active cards, resume pages. |
| **Signal Green** | `#15803D` (green-700) | Download actions, live status indicators. |
| **Alert Orange** | `#F97316` (orange-500) | Reset actions, highlights. |
| **Alert Red** | `#DC2626` (red-600) | Destructive actions, delete confirmations. |
| **Steel Grey** | `#4B5563` (gray-600) | Secondary labels like Live Preview text. |
| **Muted Text** | `text-gray-500` | Metadata, placeholders, descriptions. |

---

## Typography

We mix three typefaces to create a distinctive technical document feel.

### Headings: Serif
Used for major page titles and section headers. Represents authority and tradition.
- **Class**: `font-serif`
- **Style**: Bold, often Uppercase
- **Tracking**: Tight (`tracking-tight`) for large headers

### Body: Sans-Serif
Used for long-form text, descriptions, and general readability.
- **Class**: `f