How are AI features visually identified?

The skill uses a specific 3-stop AI Gradient (Periwinkle to Pale Turquoise) to distinguish AI-powered features from standard application functionality.

Does this skill help with accessibility?

Yes, it enforces WCAG 2.1 AA compliance by providing color pairs that meet specific contrast ratios and requiring visible focus indicators for all interactive elements.

Is dark mode supported?

Absolutely. The guide includes a complete dark mode palette with adjusted saturation and lightness levels specifically optimized for dark backgrounds.

What is the benefit of using OKLCH in this skill?

OKLCH provides perceptual uniformity, meaning colors with the same lightness value appear equally bright to the human eye, resulting in more consistent UIs and smoother gradients than HSL or RGB.

Can I use this with Tailwind CSS?

Yes, the skill is fully compatible with Tailwind CSS and provides a mapping of brand tokens to Tailwind utility classes.

Brand System & Design Guide

Name: Brand System & Design Guide
Author: tundraray

bytundraray

•

Design Tools

Enforces modern design standards including OKLCH color palettes, AI-themed gradients, and WCAG accessibility compliance for production-ready UIs.

This skill equips Claude with the technical specifications and design philosophy of the Overture brand system, centered on the concept of 'Soft Intelligence.' It provides precise instructions for implementing the OKLCH color space to achieve perceptual uniformity and smooth gradient interpolation. By using this skill, developers can automatically apply consistent light and dark mode patterns, integrate signature AI gradients for specialized features, and ensure all UI components meet WCAG 2.1 AA accessibility standards using modern CSS or Tailwind CSS utilities.

Key Features

011 GitHub stars

02Implementation of the OKLCH color space for perceptually uniform UI styling.

03Strict WCAG 2.1 AA contrast compliance for all color combinations.

04Tailwind CSS v4 and modern CSS utility class integration.

05Signature AI Gradient system for identifying and highlighting intelligent features.

06Automated dark mode patterns with enhanced saturation for high visibility.

Use Cases

01Ensuring AI features are visually distinguished using the standardized AI gradient system.

02Building consistent, accessible UI components from scratch using brand-approved tokens.

03Migrating existing CSS or HSL/RGB color systems to modern OKLCH color spaces.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tundraray/overture brand-system-guide

For use in Claude.ai and ChatGPT

Download Skill