skills.rest
tundraray
tundrarayCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

brand-system-guide

Enforce brand design standards for UI components using OKLCH colors and WCAG 2.1 AA.

2|1|Updated Jan 16, 2026
Search Tags:#accessibility#WCAG#brand#color#OKLCH#design-system#dark-mode
One-click install
npx skills add https://github.com/tundraray/overture --skill brand-system-guide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-system-guide
Source: https://github.com/tundraray/overture/tree/main/skills/brand-system-guide
Command: npx skills add https://github.com/tundraray/overture --skill brand-system-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a centralized reference for brand design standards, ensuring UI components adhere to OKLCH color usage, WCAG 2.1 AA accessibility, and consistent dark mode patterns across products.

Core Features & Use Cases

  • OKLCH color guidance and token usage to ensure perceptually uniform designs across light and dark modes.
  • AI gradient system concepts and guidelines to identify AI-powered UI elements.
  • Accessibility compliance guidance including contrast recommendations and WCAG 2.1 AA checks.
  • CSS utility classes and design tokens integration for consistent styling across projects.
  • White-label customization notes and token overrides for branding consistency.
  • Use Case: When implementing a new UI component, apply these tokens and rules to meet brand standards in real projects.

Quick Start

Use brand-system-guide when implementing a new UI component to ensure colors, accessibility, and dark mode patterns are applied.

Frequently Asked Questions about brand-system-guide

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

FAQPage Schema
How do I enforce WCAG 2.1 AA accessibility compliance in UI components?▼

To enforce WCAG 2.1 AA accessibility compliance, apply the provided contrast recommendations and accessibility checks during UI implementation. This ensures your components meet standardized accessibility requirements across products.

What is OKLCH color usage and how does it work for dark mode patterns?▼

OKLCH color usage leverages a perceptually uniform color model, ensuring consistent visual contrast across light and dark mode patterns. It provides design tokens that maintain uniform appearance across UI themes.

How do I implement AI gradient UI elements for branding consistency?▼

To implement AI gradient UI elements, apply the provided system concepts and guidelines to visually identify AI-powered features. This integrates AI visual cues seamlessly into your brand design standards.

Can I use CSS utility classes and design tokens for white-label customization?▼

Yes, you can use CSS utility classes and design tokens for white-label customization by applying token overrides. This allows you to adapt the UI for different products while maintaining branding consistency.

What is the best way to manage brand design consistency across multiple projects?▼

The best way to manage brand design consistency is to use a centralized reference guide with ready-to-use design tokens and CSS utility classes. This enforces standardized OKLCH colors and dark mode patterns across all UI projects.

Related Skills

Explore More Design & Creative Skills→
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced
locnbk2002locnbk2002
1

ui-styling

Style React interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
mitchellvandusen-cellmitchellvandusen-cell

brand

Enforce brand consistency and design standards across UI components.

Community
Advanced
openyakopenyak
704

accessibility-review

Audit designs or pages for WCAG 2.1 AA accessibility compliance.

Official
Intermediate