Cross-project design system inspired by Material Design 3’s architecture with a dark, muted, technical aesthetic. Tokens are the source of truth, generating platform outputs for CSS, Tailwind, and React.

Features

  • Design tokens — color palettes, typography scale, elevation, shape, spacing, and motion in JSON
  • React component library — published as @gf/react with themed components
  • Tailwind v4 preset — maps tokens to Tailwind classes (bg-primary, text-foreground, rounded-md)
  • CSS custom properties — usable in vanilla HTML/CSS projects via var(--primary), etc.
  • Dark + light mode — dark by default with light mode opt-in

View on GitHub →