mcpField
D
design-principles

design-principles

github.com/srbhrDesign & UI29.0k92 installsUpdated 1d ago
Repository

About design-principles

A design skill that specifies Swiss International Style rules for creating or modifying interface components and pages. It defines a limited color palette, typography, component treatments, and patterns to avoid.

Key features

  1. 01Swiss-style color palette
  2. 02Typography roles for serif, mono, and sans
  3. 03Square corners and hard shadows
  4. 04Component status indicators
  5. 05Anti-pattern checklist

Use cases

  1. 01Designing new interface components
  2. 02Updating page styling
  3. 03Applying consistent typography and colors
  4. 04Reviewing styles against design rules

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/srbhr/resume-matcher --skill design-principles

After installing, type/design-principlesin Claude Code to confirm it loaded.

Details

From the project README

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 - Core rules, colors, typography, components
  2. design-system.md - Extended tokens, spacing, shadows
  3. swiss-design-system-prompt.md - AI prompt for Swiss UI

Colors

NameHexUsage
Canvas#F0F0E8Background
Ink#000000Text, borders
Hyper Blue#1D4ED8Primary actions
Signal Green#15803DSuccess
Alert Orange#F97316Warning
Alert Red#DC2626Danger
Steel Grey#4B5563Secondary text

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-* (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:

<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

Comments

Markdown supported