Give the app a visual identity of its own - #7
Merged
Conversation
The previous look was competent framework defaults: Tailwind's stock green, uniform rounded cards on drop shadows, emoji standing in for interface icons. Competent, and identical to everything else shipped this year. This is a considered replacement. Type. Instrument Serif for headline moments only - page titles, the balance score, empty states - against Geist for interface text and Geist Mono for figures. A serif is an unusual choice here and that is the point: used sparingly it gives the app a voice instead of geometric-sans anonymity. Used everywhere it would read as a recipe blog, so it is restricted to about six places. Colour. A desaturated pine mixed by hand rather than lifted from a framework palette, on a warm bone ground. Framework default colours are the fastest possible way to look generic. The pine inverts to a soft eucalyptus in dark mode so it stays legible rather than merely present. Ochre for late, and still nothing red anywhere. Structure. Hairline rules replace drop shadows throughout. Shadows imply floating cards; rules imply print, and this should feel printed. Lists are single ruled panels rather than stacks of separate cards, which removes a great deal of visual noise from the Today screen. Icons. lucide-react for all interface chrome. Emoji stay only where a person chose them - avatars and chore icons - which is the one place they carry meaning rather than substituting for a design decision. Also adds a shared form-style module, so inputs cannot quietly drift out of alignment with each other as the app grows. Fixes a runtime bug introduced and caught while building this: Lucide icons were being passed from Server Components into Client Components. Those are function components, which React cannot serialise across the boundary, so every page under /home returned 500. The build compiled happily. Nav icons are now passed as names and resolved client-side; button icons are passed as rendered elements. Verified by loading every route against the running server: all 200, zero server errors. 119 tests, lint and typecheck clean.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The previous look was competent framework defaults — Tailwind's stock green, uniform rounded cards floating on drop shadows, emoji standing in for interface icons. Competent, and indistinguishable from everything else shipped this year.
Type
Instrument Serif for headline moments only: page titles, the balance score, empty states. Against Geist for interface text and Geist Mono for figures.
A serif is an unusual choice for an app like this, and that's the point — used sparingly it gives chorely a voice instead of the geometric-sans anonymity every product defaults to. Used everywhere it would read as a recipe blog, so it appears in about six places and nowhere else.
Figures are tabular throughout, so numbers in a column don't dance as they change.
Colour
A desaturated pine, mixed by hand rather than lifted from a framework palette, on a warm bone ground. Framework default colours are the single fastest way to look generic;
green-700is a fingerprint.The pine inverts to a soft eucalyptus in dark mode so it stays genuinely legible rather than merely present. Ochre for late. Still nothing red anywhere — the restraint about tone is unchanged.
Structure
Hairline rules replace drop shadows throughout. Shadows imply floating cards; rules imply print, and this should feel printed. Lists are now single ruled panels rather than stacks of individually-shadowed cards, which takes a lot of visual noise out of the Today screen.
The landing page is now an asymmetric two-column layout with the form as a sticky companion, rather than another centred column of stacked boxes.
Icons
lucide-reactfor all interface chrome. Emoji remain only where a person chose them — avatars and chore icons — which is the one place they carry meaning rather than substituting for a design decision.A bug this caught
Lucide icons were being passed from Server Components into Client Components. Those are function components, and React cannot serialise a function across the boundary, so every page under
/homereturned 500.The build compiled without complaint and typecheck passed. It only surfaced by actually loading the pages. Nav icons are now passed as names and resolved on the client side (which also lets the icon respond to active state); button icons are passed as rendered elements, which serialise fine.
Verified
Every route loaded against the running server:
/,/home,/home/balance,/home/chores,/home/settings,/join/[code]— all 200, zero server errors in the log. 119 tests, lint and typecheck clean, production build passes.