| name | hituto-design |
| description | Hi-Tuto design system for all frontend/UI work in this repo. Use whenever creating or modifying React components, pages, styles, Tailwind classes, or the mascot in frontend/ — ensures the Thinkby-inspired look (flat vivid color panels, one-sided shadows, square mascot) stays consistent. |
Hi-Tuto Design System Skill
Full source of truth: ui_ux_design/ui-ux-design.md (read it for anything not covered here).
Live implementations: frontend/tailwind.config.js (tokens), frontend/src/components/Mascot.tsx + BrandMark.tsx (canonical mascot SVGs), frontend/src/index.css (.font-display, .font-logo, .hard-card, .sticker, .btn-press), frontend/src/features/landing/Landing.tsx (reference-quality composition examples).
The look in one paragraph
Warm cream canvas (bg-paper #FDF1E7) with flat, borderless cards in vivid fills — deep forest lime-dark #14380E and deep purples plum/cobalt alternate with light mint, pink-lavender lilac, peach, and one punchy blue sky tile. Vivid green lime/grass #2BC15D is the action color. Depth comes from one-sided bottom shadows (shadow-press = 0 4px 0 #14380E) on buttons and sticker pills only. A soft square mascot with tall calm eyes appears at one emotional moment per screen. Four-point sparkles ✦ decorate dark panels.
Hard rules
- Never put black borders or diagonal offset shadows (
4px 4px 0 #000) on components — that's the rejected "Gumroad" look. Cards are flat: hard-card = rounded-4xl border-0 shadow-card.
- Outlines exist only on: sticker chat pills (deep colored tones:
border-lime-dark on green, border-cobalt on lavender), headline highlight pills (border-[3px] border-ink on bg-lilac, slight rotation), and inside the mascot SVG.
- Buttons:
rounded-full bg-lime text-lime-dark font-extrabold shadow-press btn-press hover:brightness-105, no border. On dark panels use shadow-[0_4px_0_rgba(0,0,0,0.35)].
- Always use Tailwind tokens (
bg-lime, text-plum, shadow-press…). Raw hex only inside Mascot/BrandMark SVGs.
- Headings:
font-display (Plus Jakarta Sans 800, tracking -0.025em). The Fraunces soft serif (font-logo) is ONLY for the "Hi Tuto" wordmark.
- Mascot: use the existing
<Mascot mood="..."/> component — never redraw it as a blob. Colorways: study/mark vivid green + forest outline; tutor pale blue #CFE6FC + forest outline (sits on the sky tile); celebrate lavender + vivid purple #7C2FA8 outline (sits on deep purple/forest). Max one hero mascot per screen plus tiny 32px chips in chat pills.
- Text pairings:
text-lime-dark on mint, text-plum on lilac, text-paper/text-mint on deep panels, ink on cream/peach/sky. Never white text on vivid lime.
Chat/sticker pills (tutor UI)
- Student/green:
rounded-xl border-2 border-lime-dark bg-lime text-lime-dark font-extrabold shadow-[0_4px_0_#14380E] rotate-[-1.5deg]
- Tutor/lavender:
rounded-xl border-2 border-cobalt bg-lilac text-plum shadow-[0_4px_0_#35193B] rotate-[1.5deg]
- Width content-driven (
w-max max-w-full), tiny <Mascot mood="mark" className="h-8 w-8"/> chip inside.
Gotchas (will bite you)
- Restart the Vite dev server after editing
tailwind.config.js — the config watcher is broken on this machine; stale classes keep serving and changes silently don't render. lsof -ti :5173 | xargs kill then cd frontend && npm run dev.
- Keyframes that set
transform (animate-mascot-bob) override Tailwind translate utilities — wrap the mascot in a positioned div and animate the inner SVG.
font-display is both a CSS component class and a Tailwind utility; both must stay mapped to Plus Jakarta Sans.
Composition recipe per screen
One bold statement · one mascot moment · one dominant flat color field (make some of them DEEP forest/purple, not all light) · one sticker/achievement element · generous cream negative space. Verify against the checklist in ui_ux_design/ui-ux-design.md §13.
