bold
CommunityApply bold, accessible typography-driven UI
Design & Creative#typography#design system#design tokens#design QA#component states#ui accessibility#style guidelines
AuthorPiercingXX
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents inconsistent visual hierarchies by standardizing a Bold design system with high-contrast color, heavyweight typography, and clear interaction-ready rules.
Core Features & Use Cases
- Style foundations: Establishes a bold typography scale (Archivo Black + JetBrains Mono), a defined spacing rhythm (4/8/12/16/24/32), and a consistent tokenized color palette for primary and semantic states.
- Accessibility guardrails: Enforces WCAG 2.2 AA expectations such as keyboard-first interaction, visible focus states, and reduced-motion support.
- Implementation-ready guidance: Provides do/don’t rules, component-level expectations (states/variants/anatomy), anti-patterns, and a QA checklist suitable for design reviews and engineering implementation.
Quick Start
Use the Bold design system skill to generate implementation-ready accessibility and token rules for the UI components you are designing today.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: bold Download link: https://github.com/PiercingXX/xx-stack/archive/main.zip#bold Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.