Yellow Card Design System

Appearance

Design Language ​

The Yellow Card Design System is built on a set of core principles that guide all design and implementation decisions.

Design Philosophy ​

  • Token-First — All visual values extracted from Figma design files
  • Semantic Naming — Component and prop names reflect purpose, not appearance
  • Type Safety — Full TypeScript coverage with exported types
  • Accessibility — WCAG 2.1 AA compliant
  • Composability — Components designed to work together seamlessly

Principles ​

1. Consistency ​

Use design tokens for all visual properties. Follow established component patterns. Maintain consistent naming conventions across components.

2. Accessibility First ​

  • Keyboard navigation for all interactive elements
  • ARIA labels and roles where appropriate
  • Focus indicators on all focusable elements
  • Color contrast ratios meeting WCAG 2.1 AA
  • Screen reader compatibility

3. Progressive Enhancement ​

Core functionality works without JavaScript. Enhanced experiences with JavaScript enabled. Graceful degradation for older browsers.

4. Type Safety ​

All props fully typed with TypeScript. Types exported for consumer use. Runtime prop validation where needed.

5. Predictability ​

  • Consistent prop naming across components
  • Standard state patterns (default, hover, focus, active, disabled)
  • Predictable component behavior

Core Technologies ​

TechnologyPurpose
Vue 3Composition API with <script setup>
TypeScriptStrict mode, full type coverage
SCSSDesign tokens and component styling
PiniaState management (complex components)
ViteBuild tooling
Vitest + PlaywrightTesting

Next Steps ​