skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

refined

Generate UI code using tokenized typography, spacing, and semantic colors with WCAG 2.2 AA accessibility.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#ui styling#minimal design#component rules#token guidelines
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill refined-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refined
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/refined
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill refined-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves inconsistent styling and unclear implementation decisions by providing a single, authoritative set of design-system instructions for a modern minimal look with refined typography and accessibility constraints.

Core Features & Use Cases

  • Tokenized foundations: defines a typography scale, font families, spacing rhythm, and a coherent color palette (including semantic status colors) to ensure consistent UI outputs.
  • Accessibility and interaction guidance: enforces WCAG 2.2 AA alignment, keyboard-first behavior, and visible focus state expectations.
  • Implementation-ready component rules: translates style intent into practical do/don’t guidance for engineers building real components.

Use case: a team building a marketing site or internal app wants a consistent “Refined” visual language across buttons, inputs, cards, and content layouts while avoiding low-contrast text and spacing drift.

Quick Start

Use the refined skill to generate UI code that follows its typography, spacing, and semantic color tokens while meeting WCAG 2.2 AA and keyboard-first interaction requirements.

Frequently Asked Questions about refined

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

FAQPage Schema
How do I create a minimal design system with consistent typography and spacing?▼

Build a minimal design system by establishing tokenized typography scales, spacing rhythm, and semantic color palettes that enforce consistent UI styling across all components. Rule-based quality gates prefer semantic tokens over raw values to prevent spacing and color drift.

How do I ensure my UI components meet WCAG 2.2 AA accessibility requirements?▼

Meet WCAG 2.2 AA accessibility requirements by enforcing contrast standards, keyboard-first interactions, and explicit focus-visible states within your component rules. This prevents low-contrast text and inaccessible interaction patterns in design-system driven products.

What are semantic color tokens and how do I use them in component styling?▼

Semantic color tokens are named references mapping to status colors and UI states rather than raw hex values. Apply them in component styling to maintain visual consistency and automatically enforce correct contrast and interaction states across your design system.

Can I use a token-based design system for marketing sites and internal apps?▼

Yes, you can use a token-based design system for marketing sites and internal apps to apply a consistent visual language across buttons, inputs, cards, and content layouts. It translates style intent into practical do and don't implementation guidance for engineers.

How do I standardize interaction states and keyboard behavior in a UI library?▼

Standardize interaction states and keyboard behavior in a UI library by applying accessibility constraints that require keyboard-first interactions and explicit focus-visible state expectations. This ensures all components follow consistent, accessible interaction patterns.

Related Skills

Explore More Design & Creative Skills→
ThorStarlordThorStarlord
1

ui-system

Define literal and semantic design tokens for colors, spacing, and typography.

Community
Advanced
superpollo02superpollo02

flat

Generate WCAG 2.2 AA-compliant UI component instructions with tokenized colors, typography, and spacing.

Community
Intermediate
bergsidebergside
2.3k

gradient

Translate Gradient palette tokens into WCAG 2.2 AA UI implementation guidance.

Official
Intermediate
AshesOfTheUndeadAshesOfTheUndead

riso

Define and enforce risograph-inspired design tokens and component rules for UI consistency.

Community
Intermediate