La Monte Young-Inspired Theme, Color Tokens, and Typography Overhaul

[jimmyNicholas]

Summary

This PR implements a comprehensive design system inspired by La Monte Young’s 1960s conceptual art, focusing on clarity, minimalism, and expressive typography. The changes unify the color and font system across the app, making future theming and maintenance much easier.

Key Changes

• Design Tokens via Tailwind @theme:

All colors and font families are now defined as CSS variables in the @theme block, using the --color-* and --font-* namespaces. This enables utility classes like bg-colour-hour, text-colour-on-surface, etc., throughout the app.

• Global Typewriter Font:

The default font for the entire app is now a typewriter stack (Special Elite, Courier Prime, IBM Plex Mono), set at the body level for full inheritance.

• Handwriting Font for Accents:

A handwriting font stack (Caveat, Pacifico, Homemade Apple) is available for special elements (e.g., “listen to the time”).

• Unified Color System:

All color usage (backgrounds, text, borders, SVG fill/stroke) now references theme tokens, ensuring consistency and easy future updates.

• SVG and Tailwind Harmony:

SVG elements use the same color tokens as the rest of the UI, ensuring a unified look.

• Removed Redundant Styles:

All legacy font and color classes have been removed. No lingering Tailwind color or font utility classes remain.

• Editor Linting:
  Added guidance for suppressing @theme at-rule warnings in VS Code.

Why?

• Maintainability: One source of truth for colors and fonts.
• Theming: Easy to update or add new themes in the future.
• Aesthetics: Achieves the desired La Monte Young-inspired look and feel.
• Clarity: Code is easier to read and reason about.

Reference Images

Composition #7

Composition #5

Composition #10

1960s clock