b-holanda 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.