Brand Builder: Complete Design System & Brand Identity Toolkit | Skills Pool
技能檔案
Brand Builder: Complete Design System & Brand Identity Toolkit
Premium skill for building complete brand identity and design systems for web applications. Covers visual design language, typography systems, color palettes, design tokens, component libraries, brand guidelines, logo specifications, and production-grade design system architecture. Essential for creating cohesive, accessible, scalable visual identities across web products. Handles design system setup, token management, brand voice integration, and design token CSS architecture for light/dark modes.
CutTheChexx0 星標2026年4月3日
職業
分類
銷售同市場推廣
技能內容
<!-- Open RX — Created by CutTheChexx. All rights reserved. -->
Brand Builder: Complete Design System & Brand Identity Toolkit
Professional-grade skill for establishing visual identity, design systems, and brand guidelines for web applications. Production-ready patterns and token architecture.
Semantic Colors: Success (green), warning (amber), error (red), info (blue). Use consistent lightness ratios across all semantic meanings.
Neutral Scale: 11-step neutral scale from pure white (0) to pure black (11). Building: lightest use #FAFAFA, darkest use #1A1A1A. Middle tones at 50%, 60%, 70%, 80% lightness.
HSL-Based System: Define all colors in HSL for consistency. Hue stays fixed within a color family, adjust saturation and lightness for variations. Example: Primary blue at H:215° S:100% L:50%, with L:95% for backgrounds, L:10% for text.
相關技能
CSS Variable Architecture: Root variables for base colors. Semantic variables for usage context.
Dark Mode Mapping: Don't invert colors. Create parallel token sets. Dark backgrounds 10-15% lightness, light text 90-95% lightness. Test WCAG contrast ratios (4.5:1 for text).
Accessibility First: All text must hit 4.5:1 contrast minimum (WCAG AA). Large text (18pt+) needs 3:1 minimum. Use WebAIM contrast checker during palette builds.
2. Typography System
Font Selection Strategy:
Google Fonts or Self-Hosted: Google Fonts provides reliability; self-hosted gives performance control and licensing flexibility. Variable fonts reduce file size significantly.
Variable Font Benefits: Single file replaces 12+ weight/style variants. Include only needed weights (typically 400, 500, 600, 700 for sans-serif).
Type Scale (Modular Scale): Use 1.125 ratio (minor third) or 1.25 ratio (major third). Starting from 16px body:
XS: 14px (body-small, captions)
SM: 14px (default body)
BASE: 16px (body-default)
LG: 18px (body-large, intro text)
XL: 20px (heading-6)
2XL: 24px (heading-5)
3XL: 28px (heading-4)
4XL: 32px (heading-3)
5XL: 36px (heading-2)
6XL: 48px (heading-1)
Hierarchy & Usage:
Headings: H1 for page titles, H2 for sections, H3 for subsections. Don't skip levels. Always use semantic HTML (h1, h2, etc.).
Body Text: 16px at 1.5 line-height minimum. 14px max for secondary text. Code blocks at monospace, 13-14px.
Font Loading Strategy:
Use font-display: swap for body fonts (fast render with fallback).
Use font-display: block for critical fonts (headings).
Preload primary font files: <link rel="preload" as="font" href="font.woff2" type="font/woff2" crossorigin>
Load max 2-3 font families (primary sans + one serif if needed + monospace).
Accessibility (contrast requirements, icon alt text patterns)
Do's and Don'ts (visual examples of brand applied correctly vs. incorrectly)
Maintenance Strategy:
Keep guidelines as living document (Figma file or shared notion page).
Version each update ("v1.0 → v1.1 → v2.0").
Require review before major brand changes.
Screenshot key sections as PNG for easy reference.
9. Design System Maintenance
Version Control for Design Tokens:
Track tokens in git. Changelog format:
## v1.1.0 (2026-02-15)
- Added new semantic color `--color-info-light`
- Increased `--space-md` from 16px to 18px
- Deprecated `--color-deprecated-teal` (use `--color-secondary` instead)
Component Changelog:
Document changes per component version. Example: Button v2.0 adds loading state, changes variant names from "primary/secondary" to "default/outline".