When should I use the AI Gradient feature?

The AI Gradient is a signature visual element reserved for identifying AI-powered features like chat interfaces, generation buttons, and AI-driven loading states.

Can I use this with my existing Tailwind CSS project?

Yes, the skill is designed to integrate seamlessly with Tailwind CSS by utilizing CSS custom properties for themes and standardized utility classes.

What is OKLCH and why does this skill use it?

OKLCH is a modern color space providing perceptual uniformity and smoother gradients, natively supported by Tailwind CSS v4 and modern browsers.

Does this skill help with web accessibility?

Yes, it enforces WCAG 2.1 AA compliance for color contrast and ensures all interactive elements have visible focus indicators and proper keyboard navigation.

Brand System Design Guide

Name: Brand System Design Guide
Author: tundraray

bytundraray

•

Herramientas de Diseño

Enforces production-grade brand standards, including OKLCH color systems, AI-specific gradients, and WCAG 2.1 AA accessibility compliance.

Acerca de

The Brand System Guide skill empowers Claude to maintain visual consistency and professional design standards across frontend projects. By implementing a 'Soft Intelligence' philosophy, it provides a comprehensive framework for OKLCH-based color palettes, specialized AI gradients for identifying machine-driven features, and robust dark mode patterns. It ensures all generated UI components are not only aesthetically pleasing but also fully accessible, meeting WCAG 2.1 AA standards while providing seamless integration with Tailwind CSS and modern browser features.

Características Principales

Implementation of the OKLCH color space for perceptual uniformity and wider gamut support
Automated WCAG 2.1 AA accessibility compliance for color contrast and focus indicators
Ready-to-use Tailwind CSS configuration and reusable UI component patterns
1 GitHub stars
Signature AI Gradient system for distinctively identifying AI-powered UI features
Comprehensive dark mode color patterns and CSS utility class generation

Casos de Uso

Migrating existing CSS or HSL color schemes to the modern OKLCH color space
Ensuring all frontend components meet strict accessibility and dark mode requirements
Building a cohesive design system for a new AI-powered web application

Acerca de

Características Principales

Implementation of the OKLCH color space for perceptual uniformity and wider gamut support
Automated WCAG 2.1 AA accessibility compliance for color contrast and focus indicators
Ready-to-use Tailwind CSS configuration and reusable UI component patterns
1 GitHub stars
Signature AI Gradient system for distinctively identifying AI-powered UI features
Comprehensive dark mode color patterns and CSS utility class generation

Casos de Uso

Migrating existing CSS or HSL color schemes to the modern OKLCH color space
Ensuring all frontend components meet strict accessibility and dark mode requirements
Building a cohesive design system for a new AI-powered web application