skills.rest
sotono-046
sotono-046COMMUNITY
Explore all skills by this author →
Website𝕏@__sotonoGitHub

design-principles

Define design direction, color, typography, and spacing tokens for dashboards.

1|Updated Feb 12, 2025
Search Tags:#typography#design#dashboards#UI#design-system#color-tokens
One-click install
npx skills add https://github.com/sotono-046/dotfiles --skill design-principles-sotono-046
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/sotono-046/dotfiles/tree/main/claudecode/skills/design-principles
Command: npx skills add https://github.com/sotono-046/dotfiles --skill design-principles-sotono-046

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams establish and maintain a cohesive, precise, and minimal design system for enterprise dashboards, admin interfaces, and web apps. It prevents visual drift by codifying direction, typography, spacing, and color.

Core Features & Use Cases

  • Design Direction: define a clear personality to match the product context (Precision & Density, Warmth, Sophistication, etc.).
  • Foundations: establish a color foundation, typographic scale, and a 4px grid for spacing.
  • Component Consistency: set rules for card layouts, isolated controls, and surface treatment to ensure cohesive UI.
  • Use Case: apply to a finance dashboard to achieve a polished, enterprise-grade look.

Quick Start

Use design-principles to craft a minimal, precise UI system for a dashboard admin tool, specifying typography, spacing, and color tokens.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I create a cohesive design system for an admin dashboard?▼

To create a cohesive design system for an admin dashboard, establish a clear design direction, define a color foundation, set a typographic scale, and apply a 4px grid for spacing to prevent visual drift.

What is a minimalist UI design system and when do I need one?▼

A minimalist UI design system codifies typography, spacing, and color rules to ensure consistency. You need one during initial UI scoping, component creation, and style token governance for enterprise web apps.

Can I use these design principles for finance dashboards?▼

Yes, you can apply these design principles to finance dashboards to achieve a polished, enterprise-grade look by enforcing precise surface treatments, card layouts, and isolated control rules.

What's the best way to govern color tokens and typography in web apps?▼

The best way to govern color tokens and typography in web apps is codifying a minimal design system that defines a color foundation and typographic scale, ensuring component consistency across interfaces.

Why does my dashboard UI look inconsistent across components?▼

Your dashboard UI looks inconsistent due to visual drift from ungoverned styles. Applying a precise design system with a 4px spacing grid, color tokens, and isolated control rules solves this fragmentation.

Related Skills

Explore More Design & Creative Skills→
SwimmingLiuSwimmingLiu
1

extract

Extract reusable UI components and design tokens from codebases.

Community
Intermediate
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
plurigridplurigrid
60

brand-guidelines

Apply brand colors, typography, and spacing to documents and presentations.

Official
Basic
Prorise-coolProrise-cool
24

design-system-planning

Plans design systems including token strategy, component architecture, documentation, versioning, governance, and adoption frameworks.

Community
Advanced