Design Principles

---
name: design-principles
description: |
  Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles. Provides colors, typography, borders, shadows, and component patterns.
---

# Swiss International Style Design

> **Invoke when:** Creating new components, modifying styles, or building new pages.
> **Skip when:** Backend work, API changes, logic-only changes.

## Before Designing

Read the full design specs in `docs/agent/design/`:

1. **[style-guide.md](docs/agent/design/style-guide.md)** - Core rules, colors, typography, components
2. **[design-system.md](docs/agent/design/design-system.md)** - Extended tokens, spacing, shadows
3. **[swiss-design-system-prompt.md](docs/agent/design/swiss-design-system-prompt.md)** - AI prompt for Swiss UI

## Colors

| Name | Hex | Usage |
|------|-----|-------|
| Canvas | `#F0F0E8` | Background |
| Ink | `#000000` | Text, borders |
| Hyper Blue | `#1D4ED8` | Primary actions |
| Signal Green | `#15803D` | Success |
| Alert Orange | `#F97316` | Warning |
| Alert Red | `#DC2626` | Danger |
| Steel Grey | `#4B5563` | Secondary text |

## Typography

```
font-serif  → Headers
font-mono   → Labels, metadata (uppercase, tracking-wider)
font-sans   → Body text
```

## Component Patterns

```tsx
// Button: Square corners, hard shadow, press effect
<button className="rounded-none border-2 border-black shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none">

// Card: Hard shadow, no rounded corners
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000]">

// Label: Mono, uppercase
<label className="font-mono text-sm uppercase tracking-wider">
```

## Status Indicators

```tsx
<div className="w-3 h-3 bg-green-700" />  // Ready
<div className="w-3 h-3 bg-amber-500" />  // Warning
<div className="w-3 h-3 bg-red-600" />    // Error
<div className="w-3 h-3 bg-blue-700" />   // Active
```

## Anti-Patterns (NEVER)

- `rounded-*` (except `rounded-none`)
- Gradients or blur shadows
- Custom colors outside palette
- Pastel or soft colors
- Decorative icons without function

## Retro Terminal Elements

For dashboard/settings/empty states ONLY:

```tsx
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
```

**DO NOT use retro elements on resume components.**

## Checklist

- [ ] `rounded-none` on all components
- [ ] Hard shadows (`shadow-[Xpx_Xpx_0px_0px_#000000]`)
- [ ] Correct typography (serif headers, mono labels, sans body)
- [ ] Colors from palette only
- [ ] No gradients or blur effects