| 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 dimensional SVG mascot and its emotions in frontend/ — ensures the Thinkby-inspired look stays consistent. |
Hi-Tuto Design System Skill
Full source of truth: ../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).
Bundled mascot resources:
assets/Mascot.tsx — reusable snapshot of the canonical transparent dimensional SVG component.references/mascot-system.md — anatomy, emotion-extension workflow, placement rules, and sync requirements. Read it before changing mascot geometry, moods, facial expressions, props, or colorways.
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, headline highlight pills, and small mascot details that need separation. Never add a heavy contour around the mascot body; its depth comes from gradients, highlights, and soft colored shadows.
- 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. Preserve its transparent canvas, squared silhouette, satin body gradient, upper-left sheen, glossy eyes, and soft depth shadow. Never replace it with a white-backed raster or redraw it as a blob. Colorways: study/mark vivid green, tutor pale blue, celebrate lavender. 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.
Mascot workflow
Before adding or changing an emotion, read references/mascot-system.md and inspect ../../frontend/src/components/Mascot.tsx.
- Keep the base body, lighting definitions, viewBox, and
useId()-scoped SVG IDs unchanged unless redesigning the whole mascot system.
- Express emotion through eyes, mouth, pose, prop, sparkle/confetti accents, and palette—not through a new silhouette.
- Add a typed
MascotMood, its palette entry, and one conditional SVG layer. Reuse the existing gradients and filters.
- Verify the mood at hero size and at 32–44px. Preserve
title, aria-label, and decorative aria-hidden behavior.
- After updating the live component, synchronize it to
assets/Mascot.tsx so the bundled skill asset never drifts.
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.md §13.
