frontend: rebuild shoploop.studio to Grip mood (cream/butter/lavender)#29
Merged
Conversation
- cream #F5F3EE base, buttercream #F5F369 / lavender #D9C6F0 / coral blush #F7C9BE panels - Instrument Serif display, Satoshi body, Noto Serif Devanagari for hi/mr - 32px signature panel radius, 2.5-stroke black borders on cards - 6 inline isometric SVG illustrations (jar, flower, loop, bottle, box, tube) - pill nav w/ butter EN-active toggle, dark ink CTA - rewrote page.tsx section stack: cream hero -> butter loop panel (4-step ribbon) -> paper categories (4 SKU) -> lavender integrations (16 tools) -> coral positioning + price ladder -> dark reference-implementations strip -> cream CTA close - rewired lang.tsx copy to tabletop SKU messaging (hi/en/mr) - dropped teal/amber dark theme entirely; body bg now cream closes visual-mismatch feedback: matches attached Grip.tools screenshots
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.
What
Rebuilds the marketing site frontend against Grip.tools visual language, matching the attached moodboard.
Why
The previous dark-teal + amber theme did not match the intended reference. Screenshots of Grip.tools were provided as the target aesthetic. Live at https://shoploop.pplx.app.
Tokens
#F5F3EE· paper#FAFAF8· butter#F5F369· lavender#D9C6F0· coral blush#F7C9BE· night#0D0D0F#0A0A0A/ inkMuted#4A4A4AComposition (top → bottom)
Files
app/globals.css— cream base, Instrument Serif stack, 32px panel utilityapp/layout.tsx— swap Google Fonts + Fontshare Satoshiapp/page.tsx— full rewritecomponents/GripIllustrations.tsx— 6 inline isometric line SVGscomponents/lang.tsx— trilingual copy for tabletop SKU messaging, butter EN-active toggletailwind.config.ts— new palette +rounded-panelPreserved
data-a2ui-actionandidselectors on every CTARemoved