Bold design skill for AI agents

Overview

Bold is a dark-surface, heavy-type design system skill file that tells AI coding assistants to generate interfaces with maximum visual impact. Built around Archivo Black — a grotesque sans-serif designed for headlines and high-impact display — and anchored to a dark #111111 surface, this skill produces UIs that feel like stadium scoreboards, sports broadcasts, and tech keynote stages.

This skill is built for products that need to command a room: marketing sites, product launches, gaming platforms, fitness apps, media companies, startup landing pages, and any interface where confidence and energy are the message.

Design Tokens

Color Palette

Bold pairs a strong cerulean blue primary with a vibrant teal secondary against a near-black surface — a palette that radiates energy in dark mode:

The dark surface is not an optional dark mode — it's the default canvas. The cerulean primary (#0077BC) and teal secondary (#009866) are specifically chosen to pop against the #111111 background, creating high-contrast interactive elements that are impossible to miss. On dark surfaces, the skill file specifies light text treatments (white or near-white) for body content and headings.

Typography

Bold uses Archivo Black as both the primary and display font — a typeface that was designed to shout:

• Primary and display font: Archivo Black — a heavy, condensed grotesque with no thin weights, uniform stroke widths, and a dense, imposing presence. It fills every line with visual mass, making even short labels feel like declarations
• Monospace font: JetBrains Mono — clean developer font for code blocks, data values, and technical content

The typography uses a desktop-first expressive scale — sizes are calibrated for large viewports where the heavy type has room to breathe, then scale down responsively. Font weights from 100 through 900 are available, but Archivo Black's personality shines at the heavier end (600–900), where its condensed geometry creates the signature wall-of-type impact.

The desktop-first approach means hero headings and display text are sized for maximum impact on wide screens, with explicit responsive breakpoints that preserve visual weight as viewports shrink rather than simply shrinking proportionally.

Spacing

All spacing follows a 4px base unit with a scale of 4 / 8 / 12 / 16 / 24 / 32px. With heavy type on a dark surface, spacing plays a critical role in preventing the interface from feeling oppressive. Generous spacing between sections creates breathing room that balances the dense visual weight of Archivo Black.

The skill file emphasizes contrast between tight internal component spacing (for density and impact) and generous outer spacing (for composition and rhythm), creating a push-pull effect that keeps bold layouts dynamic rather than monotonous.

The Dark Surface Strategy

The dark #111111 surface fundamentally changes how every design decision plays out:

• Color is amplified — the blue and teal tokens are more vivid against dark backgrounds than they would be on white, making interactive elements naturally prominent
• Typography carries more weight — light text on dark surfaces has a luminous quality that makes the already-heavy Archivo Black feel even more commanding
• Visual hierarchy is contrast-driven — instead of using size alone, the system leverages light-on-dark contrast to create hierarchy. Brighter elements come forward, dimmer elements recede
• The interface feels immersive — dark surfaces create an edge-to-edge experience where the content fills the user's visual field without the white-frame effect of light-mode designs

The skill file provides explicit guidance on text colors, border treatments, and component backgrounds that work specifically on the dark surface, so AI-generated output doesn't default to light-mode assumptions.

Component Coverage

Bold includes guidance for over 40 component families, each designed for visual impact on dark surfaces:

• Inputs and forms — heavy buttons, chunky text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with interaction behavior for keyboard, pointer, and touch. Components are dark-surface-native — they use light text, illuminated borders, and the blue/teal accent palette rather than adapting light-mode components to a dark background.

Accessibility

Bold has an extended accessibility specification that addresses the specific challenges of dark surfaces and heavy typography:

• WCAG 2.2 AA compliance as a non-negotiable requirement
• Keyboard-first interactions with visible focus states — focus rings use the primary blue or a high-contrast white against the dark surface for maximum visibility
• Screen-reader tested labels — every interactive element must have a programmatically associated label verified with a screen reader
• Reduced-motion support — all animations respect prefers-reduced-motion, with no purely decorative motion
• 44px+ touch targets — interactive elements meet minimum touch target sizes, especially important given the dense, heavy typography
• High-contrast support — the system must work in forced high-contrast modes where the dark surface may be overridden by the operating system

Dark interfaces carry specific contrast risks — text that looks fine on #111111 in normal viewing conditions can fail WCAG contrast ratios if the values aren't carefully checked. The skill file provides explicit minimum contrast requirements for every text-on-surface combination. When visual impact conflicts with accessibility, accessibility wins.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull bold

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build landing pages, dashboards, or marketing sites, and the output will follow the Bold system's dark surface, heavy typography, and high-impact color palette.

Claude (Anthropic)

Use Bold directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce dark-surface, heavy-type interfaces following the Bold tokens, typography scale, and accessibility requirements

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and dark-surface rules as prompt context

Design Philosophy

Bold is built on the principle that impact is a design choice, not an accident. The skill file follows three rules:

1. Weight is the message — Archivo Black, the dark surface, and the saturated accent colors all work together to create interfaces that feel heavy, confident, and commanding. Nothing about this system is tentative
2. Dark is the default — the #111111 surface isn't dark mode. It's the only mode. Every token, component, and layout rule is built for dark surfaces from the ground up, not adapted from a light-mode original
3. Impact and usability coexist — the heavy visual presence is governed by strict spacing rules, accessibility standards, and interaction guidelines. The interface hits hard, but it never confuses