design-principles

Apply Swiss International Style guidelines to UI component design and visual tokens.

28.1k|5.0k|Updated Apr 8, 2020

Search Tags:#typography #design #ui #tokens #design-system #color-palette

Ready to run

npx skills add https://github.com/srbhr/Resume-Matcher --skill design-principles-srbhr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/srbhr/Resume-Matcher/tree/main/.claude/skills/design-principles
Command: npx skills add https://github.com/srbhr/Resume-Matcher --skill design-principles-srbhr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a concise design system reference to ensure a consistent Swiss International Style across Resume Matcher UI, reducing design debt and speeding up UI decisions.

Core Features & Use Cases

Establishes a shared design language for components, layouts, and tokens.
Guides color, typography, spacing, and component patterns to maintain consistency across the app.
Use Case: When starting a new UI module or updating existing styles, invoke this skill to align visuals with the Swiss design system.

Quick Start

Read the full design specs in the body of the skill and apply the tokens, colors, typography, and spacing rules to your component.

Frequently Asked Questions about design-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I apply Swiss International Style to UI components?▼

Design tokens act as shared variables for color and spacing, mapping Swiss design constraints directly into UI component code to maintain visual consistency and reduce design debt.

What are design tokens for a minimal UI color palette?▼

Design tokens act as shared variables for color and spacing, mapping Swiss design constraints directly into UI component code to maintain visual consistency and reduce design debt.

How do I ensure accessible typography and spacing in a design system?▼

Adopt alternative grid-based modern minimalist design frameworks that provide pre-configured typography and spacing variables, yielding visually standardized UI layouts without custom token definitions.

When do I need a design system reference for UI updates?▼

Use this design system reference when starting a new UI module or updating existing styles to align your visual decisions with standardized Swiss International Style constraints.

Why use Swiss design principles to reduce design debt?▼

By codifying Swiss International Style guidelines, this approach provides a concise design system reference that speeds up UI decisions and reduces design debt across your interface.

Do I need a specific framework to use these UI design tokens?▼

No specific framework is required, but your environment must support custom style variables and component pattern configurations to effectively inject standardized design tokens into layouts.