Design Principles

What it does

This skill provides guidance and resources for adhering to a strict design system, specifically the Swiss International Style, within agent workflows. It focuses on ensuring visual consistency by providing rules for colors, typography, component patterns, and explicitly outlining anti-patterns to avoid. The goal is to create clean, functional user interfaces with a distinct aesthetic.

When to use it

• Creating new UI components.
• Modifying existing styles or page designs.
• Building entirely new pages that need to adhere to the design system.
• When you want to ensure your work aligns with established visual guidelines and best practices.

Key capabilities

• Color Palette: Defines specific hex codes for colors like Canvas, Ink, Hyper Blue, Signal Green, Alert Orange, Alert Red, and Steel Grey, dictating their usage.
• Typography Rules: Specifies font choices: serif for headers, mono for labels/metadata, and sans-serif for body text.
• Component Patterns: Provides code examples (using HTML and CSS) for buttons, cards, and labels demonstrating key styling principles.
• Status Indicators: Defines visual representations for Ready, Warning, Error, and Active states using colored squares.
• Anti-Pattern Restrictions: Lists elements to avoid, such as rounded corners, gradients, custom colors outside the palette, and decorative icons.

Example prompts

• "Create a button component following Swiss design principles."
• "What is the correct hex code for the 'Success' color?"
• "Show me an example of how to style a label using the defined typography rules."

Tips & gotchas

• Read the Documentation: Before starting any design work, consult the full design specs located in docs/agent/design/ including style-guide.md, design-system.md, and swiss-design-system-prompt.md.
• Strict Adherence: The skill emphasizes strict adherence to the defined rules; deviations are discouraged.
• Retro Elements Limited: Retro terminal elements should only be used in specific contexts like dashboards, settings pages, or empty states – not on resume components.