skills.rest
tmtgroupbot
tmtgroupbotCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Create design tokens for typography, color, spacing, and iconography systems in CSS and Tailwind.

Updated Mar 30, 2026
Search Tags:#typography#design tokens#wcag#color theory#tailwind#dark mode#spacing system
One-click install
npx skills add https://github.com/tmtgroupbot/lptracker-deploy --skill visual-design-foundations-tmtgroupbot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/tmtgroupbot/lptracker-deploy/tree/main/skills/visual-design-foundations
Command: npx skills add https://github.com/tmtgroupbot/lptracker-deploy --skill visual-design-foundations-tmtgroupbot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building visually consistent interfaces is hard when teams rely on arbitrary values, mismatched fonts, and inaccessible colors. This Skill provides ready-to-use design token systems and implementation patterns so typography scales, spacing grids, color palettes, and icon systems stay cohesive and WCAG-compliant across a project. ## Core Features & Use Cases - Design Token Systems: Pre-built CSS custom property scales for typography (modular ratios), spacing (8-point grid), semantic colors, icon sizes, border radii, and aspect ratios. - Accessibility Tooling: WCAG contrast ratio calculators, accessible color pair generators, and color blindness simulation matrices to validate palettes. - Theming & Dark Mode: Two-tier semantic token architecture with light/dark theme switching via CSS custom properties and a React ThemeProvider. - Use Case: When starting a new web project, use this Skill to generate a complete Tailwind config with fluid typography, a perceptually uniform OKLCH color scale, and dark mode tokens before writing any component code. ## Quick Start Ask the AI to generate a complete design token system with a typography scale, 8-point spacing grid, and accessible color palette for your project.

Frequently Asked Questions about visual-design-foundations

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

FAQPage Schema
How do I create a typography scale for my website?▼

Use a modular scale by multiplying a base font size (typically 16px) by a ratio like 1.25 (major third) or 1.333 (perfect fourth) for each step. Define the results as CSS custom properties such as --font-size-sm through --font-size-5xl, and pair each size with an appropriate line height.

How do I implement dark mode with CSS custom properties?▼

Define semantic color tokens like --color-bg-primary and --color-text-primary on :root for the light theme, then override them under a [data-theme="dark"] selector. A React ThemeProvider can toggle the data-theme attribute and respect the prefers-color-scheme media query for system defaults.

What contrast ratio is required for WCAG accessibility?▼

WCAG AA requires a 4.5:1 contrast ratio for body text, 3:1 for large text (18px or 14px bold and above), and 3:1 for UI components. The enhanced AAA level requires 7:1 for normal text. You can verify ratios programmatically by computing relative luminance from hex colors.

How do I set up design tokens in Tailwind CSS?▼

Extend the theme object in tailwind.config.js with your fontFamily, fontSize (including line heights), colors, and spacing values. Map semantic names like brand-600 to your palette hex values so utilities like bg-brand-600 stay consistent across the project.

Why use OKLCH instead of HSL for color palettes?▼

OKLCH is perceptually uniform, meaning equal lightness steps look equally different to the human eye, unlike HSL where perceived brightness varies by hue. This makes OKLCH better for generating color scales where each shade step feels consistent across different hues.

What size should touch targets and icons be for accessibility?▼

WCAG recommends a minimum touch target of 44px, with 48px being more comfortable. Icon glyphs themselves typically use a 12px to 48px scale (16-24px for standard UI), with padding on the interactive element providing the remaining touch area.

Related Skills

Explore More Design & Creative Skills→
zivtechzivtech

graphic-design-planner

Define graphic design production plans and visual systems from brand constraints and channel requirements.

Official
Advanced
gyalamanch001agyalamanch001a

tailwind-design-system

Build scalable Tailwind CSS v4 design systems with semantic tokens and CVA variants.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
idy-00idy-00

migrate-design-system

Maps design tokens between a token system and external design systems via role-based crosswalks.

Community
Intermediate