visual-design-system

Enforce branded visual design consistency using OKLCH tokens and fluid typography.

2|Updated Feb 24, 2026

Search Tags:#typography #branding #tokens #design-system #visual-design #dark-mode #oklch

Ready to run

npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill visual-design-system-systempromptio

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-design-system
Source: https://github.com/systempromptio/systemprompt-marketplace/tree/main/plugins/development/skills/visual-design-system
Command: npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill visual-design-system-systempromptio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Brings consistency to UI visuals by enforcing a branded design system with asymmetric corners, OKLCH color tokens, fluid typography, and a three-tier surface hierarchy across components.

Core Features & Use Cases

Branded asymmetric corner patterns for consistent card and container radii
OKLCH-based color tokens and a semantic color system with light/dark support
Fluid typography with clamp() for scalable, accessible text
Three-tier surface hierarchy (base, surface, elevated) and elevation rules
Strict token-based design rules to avoid hard-coded values

Quick Start

Apply the OKLCH color tokens, asymmetric corner radii, and typography tokens to your UI components to achieve a world-class visual design.

Frequently Asked Questions about visual-design-system

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

FAQPage Schema

How do I enforce consistent UI design tokens across a frontend codebase?▼

To enforce consistent UI design tokens, you apply OKLCH color tokens, fluid typography with clamp(), and a three-tier surface hierarchy across your components, avoiding hard-coded values entirely.

What is the best way to implement accessible dark mode support in a design system?▼

Implement accessible dark mode support by using light-dark tokens within an OKLCH-based semantic color system, ensuring proper contrast and a three-tier surface hierarchy across base, surface, and elevated layers.

How do I set up fluid typography with clamp() for scalable UI text?▼

Set up fluid typography with clamp() by applying strict typography tokens to your UI components, allowing text to scale dynamically while maintaining accessibility and branded visual consistency.

Why use OKLCH color tokens for a semantic color system?▼

Use OKLCH color tokens to build a semantic color system because they provide perceptual uniformity, enabling precise light and dark mode contrast adjustments and consistent branded visual design across components.

Does this visual design system require specific component architecture for asymmetric corner radii?▼

Applying asymmetric corner radii requires no specific component architecture, but it does enforce branded asymmetric corner patterns for consistent card and container styling across your UI components.

Can I use hard-coded values for spacing and elevation in my UI components?▼

No, you cannot use hard-coded values. The system enforces strict token-based design rules for spacing and elevation, requiring a three-tier surface hierarchy to maintain visual consistency across UI projects.