# Style Guide

> Create or revise a practical visual style guide for software brands, frontend applications, product pages, dashboards, and presentation layers. Use when Codex needs to define visual direction, design principles, tokens, color, typography, spacing, layout, components, accessibility rules, interaction states, and implementation-ready guidance for UI or view-layer work based on product research and brand strategy.

- Skill: `b-holanda/style-guide` (Agent Skill)
- Install (CLI): `npx skillmds@latest add b-holanda/style-guide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/b-holanda/style-guide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: b-holanda (https://skillmd.com/u/b-holanda)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/b-holanda/style-guide

---


# Style Guide

Create a practical visual style guide for a software product, frontend application, dashboard, product page, or presentation layer.

This skill supports:

- UI design direction;
- frontend implementation;
- view-layer consistency;
- product pages;
- landing pages;
- dashboards and internal tools;
- design system foundations;
- brand-to-interface translation;
- presentation or pitch visuals when needed.

## Core Principle

A style guide is not decoration. Every visual decision should support clarity, usability, accessibility, trust, brand recognition, and implementation consistency.

For software interfaces, visual choices should help users:

- understand the product quickly;
- scan information efficiently;
- trust the workflow;
- identify actions and states;
- complete tasks without visual confusion.

## Source Priority

Before creating the style guide, inspect available context such as:

- brand brief;
- naming and positioning;
- value proposition;
- tone of voice;
- product or innovation research;
- frontend requirements;
- existing UI screens;
- component library conventions;
- design system files;
- repository CSS, tokens, themes, or component code.

If these sources are missing, proceed with a preliminary style guide and mark assumptions clearly.

## Evidence Rules

Never invent:

- official visual identity;
- official colors;
- official fonts;
- official logo;
- existing brand book;
- validated visual benchmarks;
- user preference without research;
- accessibility compliance that was not checked.

When information is missing, say:

> There is not enough evidence in the available material. Treat this as a visual hypothesis that requires validation.

## Classification Labels

Classify important visual decisions as:

- Product evidence;
- Brand evidence;
- Research evidence;
- Existing UI evidence;
- Design best practice;
- Visual hypothesis;
- Requires validation.

## Workflow

### 1. Read the Brand and Product Context

Identify:

- product name;
- positioning;
- value proposition;
- target users;
- key workflows;
- tone of voice;
- brand personality;
- visual direction;
- interface context;
- technical constraints;
- accessibility constraints.

### 2. Define Visual Principles

Create 3 to 6 visual principles.

Examples:

- clarity before ornament;
- trustworthy but not rigid;
- technical without feeling cold;
- efficient for repeated use;
- accessible by default;
- expressive only where it helps comprehension.

Justify each principle.

### 3. Define Visual Direction

Describe:

- desired visual feeling;
- formality level;
- technology level;
- warmth level;
- density level;
- use of icons;
- use of illustration;
- use of product screenshots or mockups;
- data visualization style;
- motion personality;
- brand expression inside the UI.

### 4. Define Design Tokens

Organize tokens for:

- color;
- typography;
- font scale;
- spacing;
- grid;
- radius;
- shadow;
- border;
- motion;
- breakpoints;
- z-index when needed.

### 5. Define Color

The palette should include:

- primary color;
- secondary color;
- accent color;
- neutrals;
- backgrounds;
- text colors;
- border colors;
- state colors;
- data visualization colors.

For each color, state:

- purpose;
- usage context;
- accessibility caution.

Do not choose colors only by taste.

### 6. Define Typography

Define:

- heading font;
- body font;
- monospace font when useful;
- safe fallback stack;
- size scale;
- weights;
- line height;
- use in navigation;
- use in dense UI;
- use in marketing or product pages.

Prefer fonts that are easy to use in web products unless the user provides a different constraint.

### 7. Define Layout

Define:

- responsive grid;
- page shell;
- spacing rhythm;
- content width;
- density;
- alignment;
- visual hierarchy;
- card usage;
- section usage;
- empty states;
- dashboard or form layout when relevant.

### 8. Define Base Components

Create guidance for:

- buttons;
- links;
- inputs;
- selects;
- checkboxes;
- radios;
- toggles;
- tabs;
- menus;
- cards;
- badges;
- alerts;
- modals;
- tables;
- charts;
- navigation;
- forms;
- loading states;
- empty states.

Include states where relevant:

- default;
- hover;
- focus;
- active;
- selected;
- disabled;
- loading;
- error;
- success.

### 9. Define Accessibility Rules

Cover:

- contrast;
- text size;
- focus indicators;
- keyboard navigation;
- color-independent meaning;
- readable line lengths;
- touch targets;
- responsive behavior;
- reduced motion;
- semantic structure.

Do not claim full accessibility compliance unless it was actually checked.

### 10. Prepare Frontend Handoff

Create guidance that can be implemented by a frontend or view-layer agent:

- token names;
- CSS variable suggestions;
- component expectations;
- layout constraints;
- responsive rules;
- state rules;
- accessibility rules;
- open questions.

## Output Format

Use the sections that fit the task:

## Visual Diagnosis

## Visual Principles

## Visual Direction

## Design Tokens

### Color

### Typography

### Spacing

### Grid

### Radius

### Shadow

### Border

### Motion

## Base Components

## Interaction States

## Layout Rules

## Accessibility Rules

## Frontend Handoff

## Validation Needed

## Quality Criteria

A good output from this skill should:

- be coherent with the brand strategy;
- support real frontend or view-layer implementation;
- avoid arbitrary visual choices;
- improve usability and scanability;
- preserve accessibility;
- distinguish confirmed decisions from hypotheses;
- be reusable across future product surfaces.