skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

bold

Generates Bold design-system UI guidance with WCAG 2.2 AA-aligned accessibility constraints and QA checklist.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#interaction states#ui tokens#component guidelines
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill bold-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bold
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/bold
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill bold-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bold design guidance prevents inconsistent, low-impact UI by enforcing a strong visual hierarchy with heavyweight type, high-contrast colors, and predictable spacing.

Core Features & Use Cases

  • High-impact typography and layout hierarchy: Uses Archivo Black (display/primary) and JetBrains Mono (labels) with an expressive desktop-first scale and defined font weights.
  • Token-driven color and spacing: Standardizes primary/secondary and semantic feedback colors, plus a fixed 4/8/12/16/24/32 rhythm for alignment and rhythm consistency.
  • Accessibility-first interaction rules: Requires WCAG 2.2 AA alignment, keyboard-first behavior, visible focus, reduced-motion support, and minimum touch target sizing.
  • Implementation-ready component guidance: Provides opinionated do/don’t constraints and testable quality gates for consistent UI outcomes.

Quick Start

Ask your AI agent to generate Bold-styled UI guidance and component rules that follow the provided tokens, include accessible interaction states, and end with a code-review QA checklist.

Frequently Asked Questions about bold

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

FAQPage Schema
How do I enforce WCAG 2.2 AA accessibility constraints in a UI design system?▼

Establish high-impact typography and layout hierarchy in a design system by applying heavyweight display fonts like Archivo Black, monospace labels, and a fixed 4/8/12/16/24/32 spacing rhythm to drive consistent visual alignment.

What interaction states should a UI component design system include for accessibility?▼

UI component design system accessibility requires explicit interaction states including default, hover, focus-visible, active, disabled, loading, and error states, ensuring keyboard-first behavior and reduced-motion support across all surfaces.

How do I use design tokens to standardize UI component guidelines?▼

Use design tokens to standardize UI component guidelines by mapping typography, primary and secondary colors, semantic feedback colors, and fixed spacing values into token-driven implementation rules for buttons, inputs, cards, modals, and navigation.

Does heavyweight typography work for building accessible web and app UI components?▼

Heavyweight typography works for accessible web and app UI components when paired with high-contrast colors and explicit interaction states, preventing low-impact UI while maintaining WCAG 2.2 AA alignment across all system surfaces.

What's the best way to test UI design system consistency and quality gates?▼

Test UI design system consistency and quality gates by applying opinionated do and don't constraints during component generation, followed by running a testable QA checklist to verify accessibility, token usage, and interaction state completeness.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
superpollo02superpollo02

fiction

Generate token-driven design-system rules for a storybook-inspired UI with WCAG 2.2 AA accessibility.

Community
Intermediate
EmasoftEmasoft
1

figma-to-swiftui

Translate Figma design files into native SwiftUI code via Figma MCP.

Community
Advanced
Lev-itLev-it

minimalist-ui

Generate minimalist document-style web interfaces with warm monochrome palettes and bento-grid layouts.

Official
Advanced