Andrea redesign 1: shared foundation¶
Historical Step 2 record. Transitional routes and pending steps below describe that stage, not today's release. See the redesign story for the completed experience and local operations for startup.
Date: 2026-09-24 (America/Bogota). Branch: jm/andrea-redesign-1.
This is the Step 2 handoff for later landing, architecture, Guanza browsing, and localization work. Read the redesign plan and the baseline route contract first. Nothing here authorizes a VPS deployment or a production catalog change.
Public navigation contract¶
| Destination | Spanish | English | Owner |
|---|---|---|---|
| AZ. home | / |
/en |
Portfolio |
| Arquitectura / Architecture | /arquitectura |
/en/arquitectura |
Portfolio |
| Guanza | /guanza |
/en/guanza |
Storefront |
| Diario / Journal | https://journal.andreazambrano.co |
Same current Journal destination | External |
Normal anchors cross the portfolio/storefront boundary so one client router
does not claim the other's route. Language is separate from Medusa's Colombia
market (co) and COP. Later route-preserving language switching must use the
route builders rather than string replacement. The old country-prefixed
commerce routes remain transitional until the new product/cart/account paths
are ready and the cutover redirects have been reviewed.
The apps are independently built and deployed. Each keeps a small local public brand/contact/route module with the same contract; importing code from the other app would break the storefront's isolated Docker build. Keep the values in sync when editing both apps and avoid a third cross-app runtime dependency for these few stable facts.
Visual tokens and fonts¶
Both apps use the same CSS custom-property names and values at their root:
| Token | Value | Intent |
|---|---|---|
--az-paper |
#f0efec |
Catalog outer-paper color, sampled from Andrea's reference screenshot; inset product-image fields use #e9e7e5 |
--az-ink |
#30312f |
Primary text and dark panels |
--az-accent |
#835b4a |
Restrained terracotta accent |
--az-muted |
#5b5d59 |
Secondary text |
--az-line |
#c8c3bb |
Thin dividers |
--az-font-display |
Cinzel Variable, serif fallback | Major titles and AZ. wordmark |
--az-font-body |
Sofia Sans Condensed Variable, sans-serif fallback | Body, navigation and secondary titles |
The font packages are self-hosted within each app bundle, so navigation does
not require a Google Fonts request. Use font-display: swap through the font
package's CSS and keep fallback fonts available. The two separate artifacts may
each include a copy of the font files; avoid loading multiple weights/faces
within a single page when one variable face suffices. The font packages are
distributed under SIL Open Font License 1.1; see Fontsource's
Cinzel and
Sofia Sans Condensed
records. Do not substitute Cinzel Decorative or a different Sofia width.
Both apps pin @fontsource-variable/cinzel and
@fontsource-variable/sofia-sans-condensed at 5.3.0 and import their weight
stylesheets from the app root layout.
Shared frame and transition¶
The header stays visible while scrolling. AZ. is the localized home link;
Arquitectura/Architecture and Guanza sit beside it on the left. The language
control remains visible at narrow widths, with accessible names and focus
styles. The store additionally displays cart access and an item count. Footer
copy retains Bogotá, Colombia and the current year, with a quiet Journal link.
Do not add decorative search, a non-working account entry, or a prominent
WhatsApp logo merely to fill the frame.
For this foundation step the portfolio root still renders its prior content;
Step 3 replaces it with the two-tile landing. The new architecture paths may
reuse the prior portfolio content as a temporary alias. Likewise /guanza
still displays the existing Medusa catalog; Step 4 introduces the collection
carousel. Header links must work throughout this transition, but no redirect
from the old URLs is activated yet.
The Guanza header's cart link currently bridges to the working legacy
/co/cart route. It is intentionally not a claim that /guanza/carrito is
implemented. The latter is reserved by the route builder for Step 5. Existing
store catalog text on the English Guanza route is not yet translated; Step 5
owns that work. Local .env.local may still set the old /cementos base path,
so run the Step 1 integration overlay or explicitly clear that local base path
when previewing the new top-level routes. The production proxy and deploy
configuration remain unchanged.
Contact boundary¶
The public architecture email is andrea@andreazambrano.co, shopping email
remains cementos@andreazambrano.co until Andrea chooses otherwise, and the
approved LinkedIn profile is
https://www.linkedin.com/in/andreaczambranog/. The Journal remains at its
current journal.andreazambrano.co host. These are public destinations; they
are not secrets.
The approved business WhatsApp destination is deliberately not in a client bundle or rendered phone link. Store inquiry handoff continues to read its ignored runtime configuration. The architecture contact handoff will need its own server-side configured destination and origin-validated endpoint in Step 3 or Step 5; do not infer it from the public contact module. Server-side configuration limits casual scraping but cannot conceal the number from a user who follows the redirect.
Still owned by later steps¶
- Route-preserving language toggle for product, collection, cart, and account;
translated copy and metadata; locale cache isolation and root
<html lang>. - Verified Medusa collection identities and assignments, public deep routes, product detail fix, and working filter/cart continuity.
- Account readiness and prominence, contact handoff, and release redirects.
- Browser visual review at phone/tablet/desktop sizes, including focus and reduced motion, before any deployment.
Step 2 verification¶
On 2026-09-24 the portfolio /arquitectura and storefront /guanza were
rendered locally at a real 375 px mobile viewport. Both showed the AZ. mark,
architecture and Guanza navigation, language control, and no horizontal page
overflow. The store rendered real Medusa catalog products with the existing
local PostgreSQL, Redis, Garage, and Medusa services; /en/guanza also returned
HTTP 200. The portfolio and storefront footers were checked in rendered HTML.
This is local verification only, not a production release or final visual
approval. Re-run the integrated mobile, desktop, keyboard, and reduced-motion
checks after Steps 3–5 change the page content.
Both app production builds passed. The portfolio had 11 passing rendered-HTML
tests; the storefront had 25 passing tests, including its public route builder.
Repository lint passed with no errors; seven existing portfolio <img>
optimization warnings remain. The local commerce containers used for this
check were stopped afterward without removing their persistent volumes.