Repository navigation
feat: visual refactor to match hi-fi prototype + hero banner - #27
Merged
Merged
Conversation
Replace the brand palette with the prototype values in docs/design/tocarta.css (Duolingo-flavored lime/pink/gold and a 9-step navy ramp), introduce serif and mono font roles (Fraunces reserved for year numbers, JetBrains Mono for technical microcopy), and swap display from Fraunces to Nunito. Era colors remain as ADR-0014 specifies. Tailwind picks up the new tokens automatically and gains push-button shadow utilities mirroring --vd-btn-lift / --vd-btn-press from the prototype. Semantic CSS variables in global.css now map navy900/navy50/lime/pink/gold to the new hexes. The PDF renderer snapshot updates to track tokens.colors.navy900.
Add the heavier Nunito weights (800 ExtraBold, 900 Black) and JetBrains Mono 500/700 the prototype relies on for big display headers and ISRC microcopy. Drop Nunito_700Bold-only loading and switch the default header font from Fraunces to Nunito so it matches the new display role.
Replace the ASCII placeholders with SVG translations of the prototype assets
in docs/design/assets/. BrandMark renders the spinning vinyl (lime stroke,
navy disc, navy700 grooves, pink center, sheen arc) with optional spin and
multi-color glow halo (cross-platform: iOS shadow, Android elevation +
colored halo). Wordmark renders the bicolor TO/CARTA next to the mark in the
'split' default plus 'full' and 'mark-only' variants. Vinyl exposes the
small decorative ornament for accents like the ScanCTA background.
The library/* paths re-export from components/brand/* so existing screens
keep importing from @/components/library/{BrandMark,Wordmark} until the
screen-side refactor migrates the paths.
Tocarta's signature CTA — a 5px solid colored shadow that collapses to 1px on press while the button itself slides 3px down so the surface meets the shadow. Five variants (primary/secondary/danger/warn use a lime/pink/red/gold shadow; ghost is a flat outlined button) and three sizes (sm/md/lg) cover the prototype's call sites. The rnr/shadcn Button at components/ui/button.tsx stays for utility surfaces; PushButton is the brand-flavored option.
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
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.
Summary
Brings the implementation in line with the hi-fi prototype unpacked into
docs/design/, plus a hero banner for the README.Foundation (mechanical changes):
#58CC02Duolingo green, navy ramp anchored on#0F172A, etc.); added 11 missing tokens (navy950/800/600/400/50, limeL, goldD/L, pinkL, cyanD, redD)BrandMark,Wordmark(text-only TO/CARTA bicolor),VinylPushButtonprimitive with the signature pushable shadow (5px lift collapsing to 1px on press)boxShadow.push-{lime,pink,gold,red}andshadow-cardTailwind utilitiesLibrary + Generate + Resolving screens rebuilt from the prototype: gradient hero ScanCTA with bleeding BrandMark, prototype DeckCard layout, mono URL input, "What happens next" steps surface, spinning glowing BrandMark on Resolving with gold progress bar and live log.
Review + Card detail + Export + Scanner + Playback + Import all redesigned to the prototype: ScreenHeader pattern, InlineAlert, IconButton, IndeterminateBar new primitives. Visualizations now use the BrandMark itself (Vinyl) and brand-coded gradients (Rings).
Card detail front/back faithful to ADR-0014 +
docs/_card-design-preview.html:README hero banner (1660×474) at
.github/banner.pngrendered from.github/banner-mockup.htmlvia Playwright. Big "tocarta" wordmark with vinyl substituting the "o" of "to", tilted phone preview of the Library home, four era-colored cards (1958 Johnny B. Goode · 1971 Stairway to Heaven · 1985 Take On Me · 2013 Get Lucky) fanned around the phone. README updated with banner + CI/license/last-commit badges + tagline, matching the convention of the other Daniel Amaral repos (olheiro, letras, wizard).Test plan
npm test— 140 passnpm run typecheckcleannpm run lintclean (no-restricted-imports rule onexpo-avstill gates non-player imports)npx expo start --web— confirms screens render with new palette/typography (CORS still blocks Deezer/MusicBrainz; expected, manual via APK)