assets Static reporting component library

Case Study

From loose snippets to a governed component system.

This project started as a handful of standalone HTML/CSS charts and cards. It grew into a themed, documented, and composable reporting library with light/dark mode, print-aware sizing, and real example layouts.

Before

Isolated snippets, no shared language.

  • Individual HTML/CSS files with no shared tokens
  • Inconsistent sizing, color, and typography
  • No theme support, no documentation
  • Useful as raw material, not presentable as a system
Approach

Build the missing layers around the components.

  • Extract shared design tokens into theme.css
  • Add persistent light/dark mode across every page
  • Use print-aware inch-based sizing for component cards
  • Create composition pages that assemble components into realistic layouts
  • Document the token model, brand rules, and contribution expectations
After

A library that works like a product.

  • 8 standalone components with consistent tokens and accessibility
  • 3 composition pages showing real reporting scenarios
  • Shared theme with 40+ CSS custom properties
  • Zero dependencies, opens directly in any browser
  • Deployed on GitHub Pages with cache-busted versioning

What this demonstrates

Component design Print-aware, accessible HTML/CSS cards built for reuse.
Token architecture Shared CSS custom properties governing color, type, spacing, and motion.
Theming Full light/dark mode with system preference detection and persistence.
Composition Components assembled into executive, investor, and operating layouts.
Static deployment GitHub Pages with versioned asset references and no build step.
Accessibility Screen-reader summaries, focus states, and reduced-motion support.