skills.rest
systempromptio
systempromptioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/systempromptio/systemprompt-marketplace --skill visual-design-system-systempromptio
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced
agentset-aiagentset-ai
2.0k

baseline-ui

Enforce Tailwind CSS defaults and accessible primitives for consistent UI.

Official
Basic
mrodrigues1mrodrigues1

responsive-design

Implement responsive web layouts with container queries and fluid scaling.

Community
Intermediate
AlterLab-IEUAlterLab-IEU
9

alterlab-vcd-color-theorist

Architect accessible color systems with OKLCH scales and WCAG contrast testing.

Community
Advanced