Design System Reference v3
Use this page to preview your core block styles, CTA patterns, and typography across the Trans Inclusion Toolkit site. Each component below inherits your CSS variable map for full consistency.
📦 Diagnostic Card Example
This card uses the .diagnostic-card class and demonstrates tokenized borders, padding,
hover transitions, and rounded corners. Use this pattern for toolkit summaries or persona cards.
🎯 CTA Blue Section
Demonstrates the .cta-blue style — a left-accent border, lavender-tinted background,
and variable-driven padding. Ideal for feature callouts or section breaks.
💡 CTA Yellow Example
This example uses .cta-card and tokenized colors
(var(--theme-palette-color-10) for border,
var(--theme-palette-color-11) for background).
Designed for prompts, notes, or “Did you know?” panels.
🌙 Dark Mode Example
Demonstrates automatic color remapping for .cta-card using
[data-theme='dark'] selectors.
📊 Score Card Table
| Domain | Score | Status |
|---|---|---|
| People & Culture | 4 / 5 | Strong |
| Systems & Data | 3 / 5 | Progressing |
| Governance | 2 / 5 | Needs Review |
✅ Accessibility & Responsiveness Test
Resize your browser or preview on mobile to verify stacking behavior, focus outlines, and readable contrast across all components.
Animation Safe Test: Hover over cards to verify subtle lift; motion disabled when prefers-reduced-motion is active.