Instructions for building and maintaining the @banhandmi mobile-first React TypeScript frontend
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build tool | Vite 6 |
| Styling | Vanilla CSS (custom properties) |
| Icons | lucide-react (see Icons) |
| Fonts | Google Fonts (see Typography) |
| Linting | ESLint flat config + TS-ESLint |
| Token | Value | Usage |
|---|---|---|
--color-primary | #FFC067 | Primary golden accent |
--color-primary-light#FFD699 |
| Lighter golden for subtle fills |
--color-primary-dark | #E5A044 | Darker golden for text on gold bg |
--color-accent | #3AAFA9 | Teal accent (name, counters, icons) |
--color-accent-dark | #2B7A78 | Darker teal for borders/rings |
--color-bg-start | #FFF5E6 | Gradient start (top) |
--color-bg-mid | #FFE0B2 | Gradient midpoint |
--color-bg-end | #FFC067 | Gradient end (bottom) |
Background uses a linear-gradient(170deg, ...) with these three stops, attached as fixed.
| Font | CSS Variable | Usage |
|---|---|---|
| Plus Jakarta Sans | --font-body | All body text, labels, card titles, UI copy |
| Space Mono | --font-display | Big titles, counters, terminal text, tech-related elements, badges |
Weights loaded: Plus Jakarta Sans 400–800, Space Mono 400 & 700.
The core visual effect. Panels use blurred translucent backgrounds to create a dreamy, ethereal feel.
Standard glass (.glass class):