# Srbhr Resume Matcher Design Principles

> Swiss International Style Design

- Skill: `tomevault-io/srbhr-resume-matcher-design-principles` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/srbhr-resume-matcher-design-principles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/srbhr-resume-matcher-design-principles/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/srbhr-resume-matcher-design-principles

---


# 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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/srbhr) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->