The Problem
The imouto frontend had two intertwined problems. First, the explorer page was a bare utility grid while the occupation detail page had an elaborate editorial share card -- the two screens felt like different products. Second, the design language (cold navy plus corporate red) did not reflect the editorial identity of the project. The "job change, not job loss" framing should feel purposeful, alive, and hopeful. Instead it looked like a corporate dashboard.
The broader issue was that imouto had its own bespoke --color-* tokens with no connection to the motivka design system. Every new component meant inventing new colour variables that would eventually need migrating anyway.
What I Built
Token Migration
I rewrote app.css to use the Alfons/motivka token naming convention: --bg-primary, --card-bg, --accent, --text-primary, --text-secondary, --text-muted, --card-border, --border-glass. Every legacy --color-navy, --color-forest, --color-canopy, --color-amber, and --color-accent token was removed.
The key design decision was the accent colour override. Motivka uses Fire Engine Red (#ce2029) as its accent, but that is wrong for imouto. I overrode --accent to Navy Royal (#2e3d6b) -- semantically mapped to "AI, data, structure" in the motivka palette. It gives imouto a distinct identity within the shared system without forking the token architecture.
Glass Nav Shell
I built a persistent NavBar.svelte with glassmorphic treatment -- backdrop-filter: blur(12px) over a semi-transparent background. The nav shows IMOUTO branding and the dataset version, and it persists across all three views. The layout was rebuilt in +layout.svelte with the nav shell and a footer.
Explorer Hero
The explorer home page got a hero section with a tagline above the search bar, replacing the bare grid that loaded with no context. The search bar and country toggle were upgraded to use Alfons tokens.
Component-by-Component Migration
Every component was touched:
- OccupationCard: Converted to
.glass-panelwith Alfons tokens for backgrounds, borders, and text - TaskItem and FilterBar: Replaced all hardcoded hex values with semantic token references
- AiToolBadge: Updated badge colours to use the token system
- SplitImoutoScore and ComparisonPanel: Glass treatment applied to the comparison view
- Share card on occupation detail: Migrated from the old navy palette to Alfons tokens
The final token audit confirmed zero remaining legacy --color-* tokens and zero hardcoded hex values in any .svelte file.
Automatability Colours
The three automatability levels got their own semantic tokens: --color-full (Fire Engine Red for high-risk), --color-partial (Amber for growth/warning), and --color-human (Olive Green for positive human-required tasks). These sit within the shared token system but are specific to imouto's domain.
What is Next
The visual foundation is solid. Next steps are explorer UX improvements -- defaulting to AU occupations, adding sort controls, and replacing the progress bar with a proportional segmented task bar. Then the occupation detail page gets a dot strip chart to replace the old ring visualisation.