bsw-design-system

Reference BSW Nightingale design tokens, typography, and component HTML/CSS patterns.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/latecheckout/bsw-tiger-team-skills --skill bsw-design-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bsw-design-system
Source: https://github.com/latecheckout/bsw-tiger-team-skills/tree/main/plugins/bsw-design-system/skills/bsw-design-system
Command: npx skills add https://github.com/latecheckout/bsw-tiger-team-skills --skill bsw-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

BSW Nightingale design system reference provides a centralized source of color tokens, typography, component HTML/CSS patterns, and branding rules to ensure consistent, on-brand UI across design and development tasks.

Core Features & Use Cases

  • Color tokens, typography scales, and spacing guidelines aligned to Nightingale.
  • Ready-to-use HTML/CSS templates and component patterns for rapid prototyping.
  • Baylee voice and copy rules guidance to ensure consistent brand voice in UI copy.

Quick Start

Load the BSW Nightingale Design System and generate a ready-to-use sample component.

Frequently Asked Questions about bsw-design-system

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

FAQPage Schema
How do I get CSS variable values for a design system when building UI components?

Design system tokens like color, spacing, and typography scales are delivered as CSS variables for consistent UI. The BSW Nightingale reference provides these token values alongside ready-to-use HTML/CSS component templates for rapid prototyping.

What's the best way to ensure UI copy follows brand voice rules during prototyping?

Brand voice consistency in UI copy requires following established style guidelines. Baylee voice and copy rules are included in the design system reference to validate text patterns and maintain consistent brand tone across components.

Can I generate HTML and CSS templates directly from design tokens for rapid prototyping?

Yes, ready-to-use HTML and CSS templates can be generated directly from design tokens. The Nightingale system provides component patterns aligned with its color, typography, and spacing tokens to accelerate branded UI tasks.

Does this design system reference work without external dependencies or component libraries?

No external dependencies are required to use the design system reference. It operates standalone, providing token values, typography guidelines, and component HTML/CSS patterns without needing additional component libraries installed.

Why do my UI components look inconsistent when applying custom typography and spacing?

Inconsistent UI usually stems from hardcoded values instead of design tokens. Referencing centralized typography scales and spacing guidelines from the Nightingale system ensures components remain aligned and visually consistent.

What design tokens are included in the BSW Nightingale design system?

The BSW Nightingale design system includes color tokens, typography scales, and spacing guidelines. These tokens are exposed as CSS variables to ensure consistent, on-brand UI across both design and development workflows.