skills.rest
vuralserhat86
vuralserhat86COMMUNITY
Explore all skills by this author →
GitHub

design_tokens

Define design tokens for spacing, typography, and color systems.

43|11|Updated Dec 27, 2025
Search Tags:#typography#frontend#design system#ui/ux#color palette#design tokens#spacing
One-click install
npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill design-tokens-vuralserhat86
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design_tokens
Source: https://github.com/vuralserhat86/antigravity-agentic-skills/tree/main/skills/design_tokens
Command: npx skills add https://github.com/vuralserhat86/antigravity-agentic-skills --skill design-tokens-vuralserhat86

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining visual consistency across a digital product by defining and managing core design variables like spacing, typography, and color.

Core Features & Use Cases

  • 8-Point Grid System: Enforces consistent spacing and layout using multiples of 8px.
  • Typography Scale: Provides a defined set of font sizes and line heights for clear hierarchy.
  • Color System: Manages a palette with defined shades and opacity levels, adhering to WCAG contrast ratios.
  • Border Radius: Standardizes corner rounding for UI elements.
  • Use Case: Ensure all buttons, cards, and text elements across your application adhere to the same visual language, improving user experience and brand recognition.

Quick Start

Apply the design tokens skill to define the spacing system with 8px as the base unit.

Frequently Asked Questions about design_tokens

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

FAQPage Schema
How do I set up an 8-point grid system for UI spacing?▼

An 8-point grid system standardizes UI spacing using multiples of 8px. This design token approach enforces consistent layout spacing and visual hierarchy across all digital product components.

What is the best way to manage color palettes and opacity for dark and light themes?▼

Managing color palettes for dark and light themes requires a structured color system with defined shades and opacity levels. This approach ensures WCAG contrast ratios are met across theme variations.

How do I export design tokens for multiple frontend platforms?▼

You can export design tokens for multiple frontend platforms using Style Dictionary. This multi-platform export translates core design variables into platform-specific formats for consistent UI implementation.

Can I use this design token system to standardize typography scales and line heights?▼

Yes, this design token system defines a comprehensive typography scale with specific font sizes and line heights. It establishes clear text hierarchy for consistent frontend UI rendering.

Does this design token approach support WCAG contrast ratios for color systems?▼

Yes, the structured color system adheres to WCAG contrast ratios. By managing defined palettes and opacity levels, it ensures accessible color choices across light and dark mode theme variations.

Related Skills

Explore More Design & Creative Skills→
romiluz13romiluz13
161

architecture-patterns

Translate functionality requirements into architecture patterns with C4-inspired views.

Community
Intermediate
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced
qazuorqazuor

frontend-design

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

Community
Basic
oborchersoborchers
28

consistency-design-systems

Manage design tokens across primitive, semantic, and component layers using atomic design principles.

Community
Intermediate