yuris/garage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity Actions

design: decisions blocking storefront implementation #40

New issue
Closed
opened 2026-08-27 06:35:50 +00:00 by yuris · 1 comment
yuris commented 2026-08-27 06:35:50 +00:00
Owner
Copy link

The approved storefront mockups live at /home/yuris/.od/projects/garage/ (OpenDesign project garage): beranda.html, produk.html, produk-shockbreaker-avanza.html, checkout-whatsapp.html, layanan.html, kontak.html, plus assets/tokens.css and assets/app.js. #39 already shipped the overhaul (#33–#38), so the remaining work is the delta between those mockups and the code — but four items in the mockups cannot be implemented as drawn. They are decisions, not tasks.

1. Public stock counts

The mockup's product detail renders Ready · 8 pcs. docs/store-prd.md lists exact stock counts as a non-goal, and packages/catalog/index.ts pins inStock with the comment "Boolean, never a count… renders Ready/Habis only". A count also goes stale between deploys, since the catalog is a build-time snapshot.

Recommendation: drop the count, keep Ready. Answer needed before #47.

2. Accent colour — rust or green?

assets/tokens.css sets --accent: #2d543c (green). apps/store/app/globals.css sets --accent: #b4471f (rust), and its --ok: #2d543c is exactly the design's accent — so adopting the mockup as drawn repaints every button, eyebrow, active filter and cart badge, and collides with the in-stock colour.

Options: (a) keep rust, treat the mockup green as illustrative; (b) adopt green and pick a new --ok; (c) keep rust for actions, green for the service/install story.
Recommendation: (a) — the rebrand is not what the design was reviewed for. Answer needed before #45.

3. Typography

Mockups load Archivo (display) + IBM Plex Sans (body) from Google Fonts; the store ships Inter via --font-sans in app/layout.tsx. Two families is two font payloads on a static site.

Recommendation: adopt Archivo for headings/prices only, keep Inter for body, or stay on Inter entirely. Answer needed before #45.

4. Invented product facts

The mockup spec table shows Posisi: Depan, kanan / kiri, Tipe: Excel-G, gas oil, Garansi: 6 bulan, klaim lewat toko, and Berat kirim: 2,4 kg (volumetrik 3 kg). None of these exist in the data model, and apps/store/lib/services.ts carries an explicit note that warranty terms are not claimed until the shop confirms them. docs/store-overhaul-spec.md also still has open questions 4 and 5 (payment/shipping/retur terms, couriers).

Needed from the shop: does a warranty policy exist and in what words; is Posisi/Tipe per-item data worth entering, or does it belong in the description; is volumetric weight ever quoted. Nothing here becomes a schema column on a mockup's authority — #41 deliberately excludes them.

Acceptance

Each of the four answered in a comment. #45 and #47 stay blocked until 1–3 are settled; #41 is unblocked by 4 only in the negative sense that it must not grow fields.

The approved storefront mockups live at `/home/yuris/.od/projects/garage/` (OpenDesign project `garage`): `beranda.html`, `produk.html`, `produk-shockbreaker-avanza.html`, `checkout-whatsapp.html`, `layanan.html`, `kontak.html`, plus `assets/tokens.css` and `assets/app.js`. #39 already shipped the overhaul (#33–#38), so the remaining work is the delta between those mockups and the code — but four items in the mockups cannot be implemented as drawn. They are decisions, not tasks. ### 1. Public stock counts The mockup's product detail renders `Ready · 8 pcs`. `docs/store-prd.md` lists exact stock counts as a non-goal, and `packages/catalog/index.ts` pins `inStock` with the comment *"Boolean, never a count… renders Ready/Habis only"*. A count also goes stale between deploys, since the catalog is a build-time snapshot. **Recommendation:** drop the count, keep `Ready`. Answer needed before #47. ### 2. Accent colour — rust or green? `assets/tokens.css` sets `--accent: #2d543c` (green). `apps/store/app/globals.css` sets `--accent: #b4471f` (rust), and its `--ok: #2d543c` is *exactly* the design's accent — so adopting the mockup as drawn repaints every button, eyebrow, active filter and cart badge, and collides with the in-stock colour. **Options:** (a) keep rust, treat the mockup green as illustrative; (b) adopt green and pick a new `--ok`; (c) keep rust for actions, green for the service/install story. **Recommendation:** (a) — the rebrand is not what the design was reviewed for. Answer needed before #45. ### 3. Typography Mockups load Archivo (display) + IBM Plex Sans (body) from Google Fonts; the store ships Inter via `--font-sans` in `app/layout.tsx`. Two families is two font payloads on a static site. **Recommendation:** adopt Archivo for headings/prices only, keep Inter for body, or stay on Inter entirely. Answer needed before #45. ### 4. Invented product facts The mockup spec table shows `Posisi: Depan, kanan / kiri`, `Tipe: Excel-G, gas oil`, `Garansi: 6 bulan, klaim lewat toko`, and `Berat kirim: 2,4 kg (volumetrik 3 kg)`. None of these exist in the data model, and `apps/store/lib/services.ts` carries an explicit note that warranty terms are not claimed until the shop confirms them. `docs/store-overhaul-spec.md` also still has open questions 4 and 5 (payment/shipping/retur terms, couriers). **Needed from the shop:** does a warranty policy exist and in what words; is `Posisi`/`Tipe` per-item data worth entering, or does it belong in the description; is volumetric weight ever quoted. Nothing here becomes a schema column on a mockup's authority — #41 deliberately excludes them. ### Acceptance Each of the four answered in a comment. #45 and #47 stay blocked until 1–3 are settled; #41 is unblocked by 4 only in the negative sense that it must not grow fields.
yuris commented 2026-08-27 06:58:38 +00:00
Author
Owner
Copy link

Decisions

All four answered; #45 and #47 are unblocked.

1. Public stock counts — drop the count, keep Ready

The mockup's Ready · 8 pcs loses the number. docs/store-prd.md's non-goal stands, and packages/catalog's "boolean, never a count" comment stays true in spirit under the tri-state: availability carries state, never quantity. The raw stock integer remains internal — getPublicCatalog keeps stripping it.

2. Accent — adopt the design green #2d543c

apps/store/app/globals.css moves --accent from rust #b4471f to #2d543c. This is a real repaint: every .button, .eyebrow, .product-filter[aria-pressed="true"], .cart-button, .cart-count, .category-tile:hover, .product-type, .gallery-thumb.is-active, the checked .fulfilment-choice, and .product-card:has(a:hover). --accent-hover and --accent-soft must be re-derived from the new hue, not carried over from rust.

The --ok collision resolves itself. --ok is already #2d543c — the exact colour the accent is becoming — so it needs no new value. The design's own answer (assets/tokens.css) is that availability chips separate by tinted background and border, not by hue against a shared field:

--ok:   #2d543c;  /* ready  */
--warn: #8a5a12;  /* indent */
--off:  #8c3a32;  /* habis  */

.tag--ready  { color: var(--ok);   background: var(--accent-soft); }
.tag--indent { color: var(--warn); background: oklch(0.95 0.05 75); }
.tag--habis  { color: var(--off);  background: oklch(0.95 0.03 25); }

So: keep --ok, add --warn and --off, and let the three chips from #47 carry the distinction.

One trap for #45: .stock-badge.is-out currently reuses --accent as its out-of-stock colour. Once the accent is green that reads as available — it must move to --off. A green "Habis" must not ship.

3. Typography — adopt both Archivo and IBM Plex Sans

Archivo for display (h1–h4, .price, .brand-name, buttons), IBM Plex Sans for body, replacing Inter. Two families, so in #45 load them through next/font and self-host rather than copying the mockups' <link> to fonts.googleapis.com — this is a static export and a render-blocking third-party stylesheet on every page is the avoidable cost. Subset to latin; keep font-variant-numeric: tabular-nums on prices.

4. Invented product facts — none are real, drop all four

Posisi, Tipe, Garansi and volumetric weight are mockup fiction and get no schema fields. #41 stays exactly as scoped: fitment, oemNumbers, priceUpdatedAt, availability. #47 renders weightGrams plainly with no volumetric figure, and no warranty row appears anywhere until the shop states a policy. docs/store-overhaul-spec.md open questions 4 and 5 stay open and block nothing in this batch.

## Decisions All four answered; #45 and #47 are unblocked. ### 1. Public stock counts — **drop the count, keep `Ready`** The mockup's `Ready · 8 pcs` loses the number. `docs/store-prd.md`'s non-goal stands, and `packages/catalog`'s *"boolean, never a count"* comment stays true in spirit under the tri-state: `availability` carries state, never quantity. The raw `stock` integer remains internal — `getPublicCatalog` keeps stripping it. ### 2. Accent — **adopt the design green `#2d543c`** `apps/store/app/globals.css` moves `--accent` from rust `#b4471f` to `#2d543c`. This is a real repaint: every `.button`, `.eyebrow`, `.product-filter[aria-pressed="true"]`, `.cart-button`, `.cart-count`, `.category-tile:hover`, `.product-type`, `.gallery-thumb.is-active`, the checked `.fulfilment-choice`, and `.product-card:has(a:hover)`. `--accent-hover` and `--accent-soft` must be re-derived from the new hue, not carried over from rust. **The `--ok` collision resolves itself.** `--ok` is already `#2d543c` — the exact colour the accent is becoming — so it needs no new value. The design's own answer (`assets/tokens.css`) is that availability chips separate by *tinted background and border*, not by hue against a shared field: ```css --ok: #2d543c; /* ready */ --warn: #8a5a12; /* indent */ --off: #8c3a32; /* habis */ .tag--ready { color: var(--ok); background: var(--accent-soft); } .tag--indent { color: var(--warn); background: oklch(0.95 0.05 75); } .tag--habis { color: var(--off); background: oklch(0.95 0.03 25); } ``` So: keep `--ok`, add `--warn` and `--off`, and let the three chips from #47 carry the distinction. **One trap for #45:** `.stock-badge.is-out` currently reuses `--accent` as its out-of-stock colour. Once the accent is green that reads as *available* — it must move to `--off`. A green "Habis" must not ship. ### 3. Typography — **adopt both Archivo and IBM Plex Sans** Archivo for display (`h1–h4`, `.price`, `.brand-name`, buttons), IBM Plex Sans for body, replacing Inter. Two families, so in #45 load them through `next/font` and self-host rather than copying the mockups' `<link>` to `fonts.googleapis.com` — this is a static export and a render-blocking third-party stylesheet on every page is the avoidable cost. Subset to latin; keep `font-variant-numeric: tabular-nums` on prices. ### 4. Invented product facts — **none are real, drop all four** `Posisi`, `Tipe`, `Garansi` and volumetric weight are mockup fiction and get no schema fields. #41 stays exactly as scoped: `fitment`, `oemNumbers`, `priceUpdatedAt`, `availability`. #47 renders `weightGrams` plainly with no volumetric figure, and no warranty row appears anywhere until the shop states a policy. `docs/store-overhaul-spec.md` open questions 4 and 5 stay open and block nothing in this batch.
yuris closed this issue 2026-08-27 06:58:38 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
feat/remove-supplier-category-and-terms
fix/suppliers-table-single-line
feat/phase-5-batch-price-update
feat/phase-4-supplier-catalog-pricing
feat/phase-3-supplier-directory
feat/phase-2-admin-auth-nav
feat/phase-1-supplier-schema
ci/166-prune-container-images
store/services-order
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
yuris/garage#40
No description provided.