design-systems

Create token-based design systems with CSS variables and theming.

3|Updated Mar 5, 2026

Search Tags:#typography #design #theming #tokens #design-system #css-variables #color-system

Ready to run

npx skills add https://github.com/bipinks/ghost-office --skill design-systems-bipinks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-systems
Source: https://github.com/bipinks/ghost-office/tree/main/.claude/skills/design-systems
Command: npx skills add https://github.com/bipinks/ghost-office --skill design-systems-bipinks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams need a unified design system to ensure visual consistency and scalable UI across applications.

Core Features & Use Cases

Token architecture including CSS custom properties and semantic tokens to drive consistent theming across components.
Spacing, typography, color systems, and dark/light mode with support for theming and brand overrides.
Documentation and governance for token references, component catalogs, and usage guidelines to ensure design-system adoption.

Quick Start

Outline your token primitives (colors, spacing, typography) and establish a base theme and component variants to begin building your system.

Frequently Asked Questions about design-systems

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

FAQPage Schema

How do I build a scalable design system using CSS variables and tokens?▼

Build a scalable design system by defining token primitives for colors, spacing, and typography, then establishing a base theme with CSS custom properties and semantic tokens to drive consistent component theming across applications.

What is semantic token architecture and how does it support UI theming?▼

Semantic token architecture maps primitive design tokens like raw colors to meaningful UI roles, allowing you to apply CSS custom properties for consistent theming, brand overrides, and dark/light mode support across components.

How do I set up dark and light mode theming for a web UI design system?▼

Set up dark and light mode theming by defining semantic color tokens as CSS variables, applying theming rules to swap values based on user preference, and establishing brand overrides to ensure visual consistency across the interface.

What's the best way to structure spacing and typography systems for consistent UI?▼

Structure spacing and typography systems by outlining token primitives for both, establishing base theme variants, and documenting usage guidelines to ensure consistent application across your component library.

How do I create documentation and governance for a token-based design system?▼

Create documentation and governance by defining token references, cataloging components, and establishing usage guidelines to ensure design-system adoption and maintain visual consistency across products.