skills.rest
marktantongco
marktantongcoCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-foundations

Standardize visual design tokens for typography, color, spacing, and iconography.

Updated Apr 12, 2026
Search Tags:#typography#design#accessibility#tokens#color#spacing#iconography
One-click install
npx skills add https://github.com/marktantongco/brutalist-editorial --skill visual-design-foundations-marktantongco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-foundations
Source: https://github.com/marktantongco/brutalist-editorial/tree/main/skills/visual-design-foundations
Command: npx skills add https://github.com/marktantongco/brutalist-editorial --skill visual-design-foundations-marktantongco

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Teams and designers often face inconsistent typography, color, spacing, and iconography across products, causing poor readability, slow implementation, and accessibility failures. This Skill consolidates practical rules, token patterns, and accessibility checks to make visual decisions repeatable and implementation-ready.

Core Features & Use Cases

  • Modular typography scales and responsive type guidance to create consistent hierarchy and fluid sizing.
  • An 8-point spacing system and semantic spacing tokens for predictable layout rhythm and component spacing.
  • Semantic color token strategies, contrast guidance, and programmatic checks to meet WCAG requirements and support dark mode theming.
  • Tailwind and CSS custom property examples for design tokens, plus Tailwind config snippets for quick integration.
  • Icon sizing, sprite generation patterns, and accessible icon button patterns for consistent UI controls.
  • Use Case: Establish a living style guide for a Next.js + Tailwind web app, generate tokens for developers, and audit an existing UI for contrast and spacing inconsistencies.

Quick Start

Create a design token set for a new web project including a modular typography scale, an 8-point spacing system, semantic color tokens with WCAG contrast checks, dark mode variables, and an icon size scale.

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 design tokens for typography, color, and spacing in a web app?▼

Design tokens standardize visual decisions by capturing typography scales, 8-point spacing systems, and semantic color values. This Skill provides CSS custom properties and Tailwind config snippets to make these tokens implementation-ready and eliminate inconsistencies across web apps.

How do I set up a responsive typography scale for my design system?▼

A responsive typography scale uses modular type sizing to create consistent visual hierarchy across breakpoints. This Skill generates fluid type scale rules and token patterns so text scales predictably without manual adjustments for each screen size.

Can I use this to generate WCAG-compliant semantic color tokens with dark mode support?▼

Yes, you can generate semantic color tokens with built-in WCAG contrast calculations and dark mode strategies. This Skill provides programmatic checks to ensure your color palettes meet accessibility requirements across both light and dark themes.

Does this work with Tailwind CSS for setting up an 8-point spacing system?▼

Yes, this works with Tailwind CSS by providing config snippets that map semantic spacing tokens to an 8-point grid system. You get predictable layout rhythm and component spacing defaults that integrate directly into your existing utility classes.

What's the best way to standardize icon sizing and build accessible icon buttons?▼

Standardize icon sizing by establishing a consistent size scale and using sprite generation patterns for UI controls. This Skill provides accessible icon button patterns to ensure your iconography system remains cohesive and meets accessibility requirements.

How do I audit an existing UI for spacing and contrast inconsistencies?▼

Audit an existing UI by applying WCAG contrast calculations and validating spacing against an 8-point system. This Skill provides the reference rules and programmatic checks needed to identify and fix visual inconsistencies across your digital product.

Related Skills

Explore More Design & Creative Skills→
mahirocokomahirocoko

redesign-existing-projects

Audit existing projects for design weaknesses in typography, color, layout, and interactions.

Community
Intermediate
wshobsonwshobson
38.6k

visual-design-foundations

Apply typography, color, spacing, and iconography principles to create design tokens and style guides.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

visual-design-foundations

Establish design systems with typography scales, 8-point grids, and semantic color tokens.

Community
Intermediate
dinoudondinoudon

accessibility-audit

Audit web applications for WCAG 2.2 compliance across seven accessibility categories.

Community
Advanced