apply-saville

Apply 45Black's Saville Edition v5.0 "The Clarity Standard" unified design system.

Brand Reference

IMPORTANT: Always read the brand specification first:

~/.45black/brand/SAVILLE-v5.md

For framework comparison and selection guidance:

~/.45black/brand/README.md

This file contains the authoritative design tokens, colour values, and implementation guidance. Do NOT use hardcoded values from this skill - always reference the brand file.

Variant Selection

v5.0 introduces two variants:

Selection Rule: If users spend 8+ hours daily in the interface, use Clarity.

For client-facing/external products, consider Trustee Edition instead (/apply-trustee).

When To Use

• Starting new 45Black project
• Rebranding existing project
• User mentions: "apply saville", "45black brand", "design system"

Workflow

1. Read Brand Specification

cat ~/.45black/brand/SAVILLE-v5.md

Extract current version, colour palette, typography, and token values.

2. Select Variant

Ask user or determine based on product type:

• Internal tool? → Core variant
• External/client-facing? → Clarity variant
• Data-dense dashboard? → Clarity variant (no matte)
• Marketing/brand site? → Core variant (with matte)

3. Detect Project Type

Identify framework (React/Next/Vite) and styling approach (Tailwind/CSS/etc).

4. Install Typography

Set up IBM Plex Sans and Mono fonts (+ Merriweather for document reading panes).

5. Generate Design Tokens

Create CSS custom properties or Tailwind config from brand spec values.

Include mode-specific tokens:

• Home Strip (dark mode)
• Away Strip (light mode)
• High Contrast mode

6. Apply Code Bar

Implement 6px code bar with correct colour order: Green → Teal → Blue → Purple → Coral → Orange

7. Configure Matte Texture

• Core variant: Enable matte texture (15% dark, 8% light)
• Clarity variant: Disable matte texture

8. Set Typography Weights

• Core variant: Hero text weight 300
• Clarity variant: Hero text weight 500

9. Create Base Components

Provide Saville-styled components using tokens from brand spec.

10. Verify WCAG Compliance

Check contrast ratios against brand spec requirements:

• Primary text: 4.5:1 minimum
• Orange (#F57C00): 19pt+ only
• Touch targets: 44px minimum

11. Document

Create DESIGN_SYSTEM.md referencing brand spec version and variant used.

Key v5.0 Changes from v4.4

Quality Gates

Before completion, verify:

Universal

• Brand spec file was read (~/.45black/brand/SAVILLE-v5.md)
• Variant selected (Core or Clarity)
• Warm carbon backgrounds (not #0F0F0F)
• Code bar height is 6px
• IBM Plex fonts load correctly
• WCAG AA contrast ratios pass
• Orange only used at 19pt+
• Focus indicators visible (2px ring)
• Border radius ≤ 12px
• Animation duration ≤ 300ms

Core Variant

• Matte texture enabled at correct opacity
• Hero typography weight 300

Clarity Variant

• Matte texture disabled
• Hero typography weight 500
• Touch targets 44px minimum

Model Preference

sonnet - Design implementation is procedural, not reasoning-heavy

References ~/.45black/brand/SAVILLE-v5.md for authoritative values v5.0 "The Clarity Standard" - Unified Design System