skills.rest
cohki0305
cohki0305COMMUNITY
Explore all skills by this author →
GitHub

design-principles

Codify enterprise UI design systems with 4px grids and typography hierarchy.

Updated Jan 13, 2026
Search Tags:#typography#design#principles#minimal#ui-consistency#4px-grid#enterprise-ui
One-click install
npx skills add https://github.com/cohki0305/vibe-template --skill design-principles-cohki0305
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/cohki0305/vibe-template/tree/main/.claude/skills/design-priciples
Command: npx skills add https://github.com/cohki0305/vibe-template --skill design-principles-cohki0305

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies a precise, minimal design system for enterprise UI development.

Core Features & Use Cases

  • Establish a unified design direction for dashboards, admin interfaces, and data-heavy apps.
  • Enforce the 4px grid, consistent typography, and surface treatment to maintain visual coherence across components.
  • Provide concrete criteria for color foundations, layout approaches, and isolated UI controls to ensure an intentional product feel.

Quick Start

  1. Define your product context and choose a design direction (e.g., Precision & Density or Warmth & Approachability).
  2. Set a color foundation and typography baseline aligned with your brand persona.
  3. Apply consistent spacing, borders, and depth rules to new screens and components.

Frequently Asked Questions about design-principles

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

FAQPage Schema
How do I establish a consistent design system for enterprise dashboards and admin interfaces?▼

A 4px grid system enforces consistent spacing and alignment in enterprise UI development, ensuring that typography, component surfaces, and isolated controls maintain visual coherence and an intentional product feel across dashboards.

What typography and spacing rules should I follow for data-heavy apps?▼

Apply a 4px grid for spacing, set a typography baseline aligned with your brand persona, and enforce consistent borders and depth rules to ensure your enterprise UI maintains a minimal and precise product feel.

How do I choose a design direction for my enterprise UI components?▼

You define your product context and choose a design direction—like Precision & Density or Warmth & Approachability—then set a color foundation and typography baseline aligned with your brand persona to guide all component craft decisions.

Does this design system approach work for isolated UI controls in admin interfaces?▼

Yes, the system provides concrete criteria for color foundations, layout approaches, and isolated UI controls, ensuring that individual components within admin interfaces maintain visual coherence and an intentional product feel.

What are the limitations of using a minimal design system for enterprise UI development?▼

The primary limitation is that its minimal, precise focus targets dashboards and data-heavy admin interfaces specifically, meaning it may not provide the expressive depth or decorative surface treatments needed for consumer-facing apps.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
jeremyspoffordjeremyspofford

design-guide

Enforce consistent UI design with an 8px grid and Tailwind CSS configuration.

Community
Basic
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
abhay-ranaabhay-rana
2

design-principles

Enforce a 4px grid and typography hierarchy for enterprise UI design.

Community
Basic