skills.rest
gabathanasiou
gabathanasiouCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Design System Standards

Define and enforce consistent UI design rules for typography, spacing, colors, and sprite usage.

2|Updated Feb 10, 2026
Search Tags:#typography#design#ui#consistency#design-system#spacing#retro-ui
One-click install
npx skills add https://github.com/gabathanasiou/Pokemon-battle-modular --skill design-system-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System Standards
Source: https://github.com/gabathanasiou/Pokemon-battle-modular/tree/main/.agent/skills/design_system
Command: npx skills add https://github.com/gabathanasiou/Pokemon-battle-modular --skill design-system-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This document defines and enforces consistent UI design rules to ensure visual coherence across the application.

Core Features & Use Cases

  • Typography standards: define font sizes, weights, and hierarchy for all screens
  • Spacing & layout guidelines: consistent paddings, gaps, and container rules
  • Sprite and icon usage: rules for pixel-perfect sprites, size and rendering
  • Use Case: apply to a new summary screen to maintain retro aesthetic and align with the reference

Quick Start

Apply the design system standards to a new UI screen to ensure typography, spacing, borders, and sprite usage match the retro aesthetic.

Frequently Asked Questions about Design System Standards

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

FAQPage Schema
How do I maintain consistent typography and spacing across UI components?▼

To maintain consistent typography and spacing, apply predefined UI design rules that specify concrete font sizes, weights, hierarchy, paddings, and gaps. This ensures visual coherence across all application screens and components.

What design system standards do I need for a retro UI aesthetic?▼

For a retro UI aesthetic, design system standards must specify pixel-perfect sprite usage, specific rendering rules, border styles, and concrete typography sizes. These rules ensure the new screen matches the reference visual style.

How do I enforce visual coherence when building a new summary screen?▼

You enforce visual coherence on a new summary screen by applying standardized UI design rules that guide typography, spacing, colors, and sprite usage. This aligns the layout with the existing application aesthetic.

Can I use these UI design rules to define font hierarchy and borders?▼

Yes, you can use these UI design rules to define font hierarchy and borders. The standards specify concrete requirements for typography sizes, spacing, borders, and component layout to be implemented by designers and developers.

What is the best way to standardize pixel-perfect sprites and icons in a design system?▼

The best way to standardize pixel-perfect sprites and icons is to enforce specific UI design rules for sprite size and rendering. This maintains visual consistency and ensures icons align with the overall design system.

Related Skills

Explore More Design & Creative Skills→
GeargrindadminGeargrindadmin

eval-ui-ux

Evaluate UI/UX for design system adherence, visual consistency, and accessibility.

Community
Advanced
connoradsconnorads
15

frontend-design

Generate production-ready HTML, CSS, and JavaScript frontend interfaces from design briefs.

Community
Basic
willibrandonwillibrandon
289

Pixel Art Professional

Apply dithering, palette optimization, shading, and antialiasing to pixel art sprites.

Community
Advanced
sandgardenhqsandgardenhq
130

frontend-design

Design and generate distinctive frontend interfaces with HTML, CSS, JavaScript, React, or Vue.

Official
Intermediate