Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.
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/:
- style-guide.md - Core rules, colors, typography, components
- design-system.md - Extended tokens, spacing, shadows
- swiss-design-system-prompt.md - AI prompt for Swiss UI
Critical Rules (Always Apply)
Colors
| Name | Hex | Usage |
|---|---|---|
| Canvas | #F0F0E8 |
Background |
| Ink | #000000 |
Text, borders |
| Hyper Blue | #1D4ED8 |
Primary actions |
| Signal Green | #15803D |
Success |
| Alert Red | #DC2626 |
Danger |
Typography
font-serif → Headers
font-mono → Labels, metadata (uppercase, tracking-wider)
font-sans → Body text
Component Patterns
// 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
<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-* - Always use rounded-none
❌ Gradients or blur shadows
❌ Custom colors outside palette
❌ Pastel or soft colors
❌ Decorative icons without function
Retro Terminal Elements
Use bracket syntax for UI chrome ONLY (dashboard, settings, empty states):
<span className="font-mono text-xs uppercase">[ STATUS: READY ]</span>
<span className="font-mono text-xs uppercase">[ LOADING... ]</span>
DO NOT use retro elements on resume components - keep resume areas professional.
Quick Checklist
- [ ] Using
rounded-noneon 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
You Might Also Like
Related Skills
songsee
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
moltbot
slack-gif-creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
anthropicsalgorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
anthropicsbrand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
anthropicstheme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
anthropicscanvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
anthropics