skills.rest
brayandiazc
brayandiazcCOMMUNITY
Explore all skills by this author →
Website𝕏@brayandiazcGitHub

identidad

Generates color and typography directions and writes them into design tokens.css files.

15|22|Updated May 5, 2024
Search Tags:#typography#color palette#design tokens#visual identity#contrast#oklch#dark theme
One-click install
npx skills add https://github.com/brayandiazc/project-starter-template-es-ai --skill identidad-brayandiazc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: identidad
Source: https://github.com/brayandiazc/project-starter-template-es-ai/tree/main/.claude/skills/identidad
Command: npx skills add https://github.com/brayandiazc/project-starter-template-es-ai --skill identidad-brayandiazc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Defining a product's visual identity often stalls between vague taste preferences and a concrete, working design system. This Skill bridges that gap by producing two or three justified color and typography directions, translating them into a twenty-token OKLCH design system with light and dark themes, and letting you preview them applied to real components before deciding. ## Core Features & Use Cases - Product-grounded directions: Reads the product definition (audience, problem, register) before proposing anything, and delegates design judgment to the frontend-design skill for calibrated, non-generic proposals. - Token contract translation: Converts 4-6 proposed colors into twenty tokens across light and dark themes in OKLCH, with AA contrast verification and free-license (OFL/Apache/MIT) self-hosted fonts via Fontsource. - Live preview and decision record: Applies each direction to design/preview.html with real-time AA contrast recalculation, then records the chosen direction in an ADR and regenerates DESIGN.md. - Use Case: After defining your product but before prototyping views, ask for an identity proposal; compare two or three palettes applied to real components, pick one, and have the decision documented automatically. ## Quick Start Ask the assistant to define the visual identity for the product and propose color and typography directions to preview in design/preview.html.

Frequently Asked Questions about identidad

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

FAQPage Schema
How do I choose a color palette for a new product?▼

Define the product's audience and register first, then request two or three distinct palette directions with named colors and rationale. Apply each one to a component preview page and judge them visually rather than from written descriptions.

How do I create light and dark theme design tokens in CSS?▼

Define tokens in OKLCH so luminance adjustments stay perceptually predictable, then recalculate primary and accent colors per theme to maintain AA contrast. A dark theme is not an inverted light theme; each surface and content color is chosen independently.

Can I use paid fonts in a product design system?▼

This workflow restricts typography to free-license fonts (OFL, Apache, MIT) self-hosted via Fontsource to avoid legal dependencies. If a direction calls for a paid typeface, a free equivalent is proposed instead.

Why does my dark theme fail contrast checks?▼

Colors chosen only for a light theme usually fail AA contrast on dark backgrounds because contrast depends on relative luminance. Recalculate primary and accent luminance per theme and verify pairs in a live preview before committing.

When should visual identity be defined in a product workflow?▼

Define identity after the product is specified (audience, problem, register) but before prototyping any views. Earlier is guesswork without context; later means rebuilding views that were created with the wrong colors.

Related Skills

Explore More Design & Creative Skills→
constellizeconstellize
1

business-problem

Generate a SPIIBV business problem statement as a Markdown document.

Official
Intermediate
pelcherspelchers

production-frontend-orchestrator

Orchestrate frontend prototyping from app requirements into a convergent design.

Community
Advanced
DarlingMarketingandTechDarlingMarketingandTech

darling-martech-ui

Create Next.js front-end components with Darling MarTech design tokens and Framer Motion.

Community
Advanced
pmksharpmkshar

marq-design-system-architect

Generate complete design systems from briefs or existing sites.

Community
Advanced