skills.rest
yuch4
yuch4COMMUNITY
Explore all skills by this author →
GitHub

design-principles

Apply 4px grid, typography, and depth rules to enterprise UI designs.

Updated Aug 27, 2026
Search Tags:#typography#dashboards#SaaS#UI#design-principles#grid#design-systems
One-click install
npx skills add https://github.com/yuch4/dx-selecta --skill design-principles-yuch4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/yuch4/dx-selecta/tree/main/.claude/skills/design-principles
Command: npx skills add https://github.com/yuch4/dx-selecta --skill design-principles-yuch4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enterprise UI design often suffers from inconsistency and lack of craft when building dashboards, admin panels, and SaaS interfaces. This Skill provides precise design principles to standardize spacing, typography, depth, and component behavior.

Core Features & Use Cases

  • Direction selection: Define a design direction (Precision, Warmth, Sophistication, Boldness, Utility) before implementation.
  • 4px grid & symmetric padding: Enforce spacing rules for cohesive layouts across screens.
  • Typography & depth: Establish a typographic scale and depth strategy aligned with enterprise UI needs.
  • Use Case: Apply to a SaaS admin UI to reach high-precision dashboard aesthetics.

Quick Start

Start with choosing a design direction and outline core spacing, typography, and depth rules for your dashboard UI.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I standardize spacing and typography for enterprise SaaS dashboards?▼

Standardize enterprise SaaS dashboards by enforcing a 4px grid, symmetric padding, consistent radii, and a scalable typography hierarchy to eliminate UI inconsistency.

What is a 4px grid system and how does it apply to admin panel UI design?▼

A 4px grid system enforces strict spacing rules and symmetric padding across admin panels, ensuring cohesive layouts and precise component alignment throughout the interface.

How do I establish a scalable typography hierarchy for a component library?▼

Establish a scalable typography hierarchy by applying crafted design principles that define text scale, depth strategy, and foundation rules aligned with enterprise UI needs.

Can I use these UI design principles for high-precision dashboard aesthetics?▼

Yes, you can apply these UI design principles to SaaS admin interfaces to achieve high-precision dashboard aesthetics by selecting a specific direction like Precision or Utility.

What's the best way to define a design direction before building a SaaS UI?▼

Define a SaaS UI design direction by choosing from Precision, Warmth, Sophistication, Boldness, or Utility, then outline core spacing, typography, and depth rules.

Related Skills

Explore More Design & Creative Skills→
kireevkit15-syskireevkit15-sys

shape

Run a structured discovery interview and generate a design brief.

Community
Advanced
mosif16mosif16
18

design-guide

Enforce a consistent 8px-grid design system across SwiftUI, Android, and web UI.

Community
Intermediate
dasheddashed
22

design-principles

Enforces grid spacing, typography hierarchy, and accessible color for admin and product dashboards.

Community
Basic
saranskumarsaranskumar

uiux-designer

Generate design system tokens and guidelines for React, Vue, Next.js, Flutter, and SwiftUI.

Community
Intermediate