Design System
Visual reference for design tokens, typography, spacing, shadows, and components used across the storefront. All values come directly from tailwind.config.js.
Colors
Brand palette
#C4923D#D4A85C#7A5D10#2E2A24#F7F5F2#C87A5C#F7F5F2Grey scale
05102030405060708090Typography
Type scale — Outfit
Source Serif 4 — editorial / quotes
“Power, precision and elegance — designed for those who demand more.”
Families
Border Radius
rounded-none0pxrounded-soft2pxrounded-base4pxrounded-rounded8pxrounded-large16pxrounded-circle9999pxShadows
0 1px 3px rgba(0,0,0,0.06)0 4px 16px rgba(0,0,0,0.08)0 8px 24px rgba(0,0,0,0.12)Components
Buttons
Primary uses bg-primary with !important overrides where @medusajs/ui preset takes precedence.
Form inputs
Badges & tags
Cards
Checkout Components
Tab cards — selection toggle
Used in checkout for delivery method and payment method selection. Pattern: border-2 + aria-pressed + focus-visible:ring-2.
Phone input — country code dropdown
common/components/phone-input— EU country code selector + national number. Stores full phone with prefix (e.g. "+34 612345678"). 27 EU countries.
Bank transfer info card
Conditional card shown in checkout, confirmation page, and email when payment method is Bank Transfer. Data fetched from Strapi CMS bank-transfer single type.
Transfer Details
Shipping speed radios
Radio cards for shipping method selection. Selected state uses border-primary bg-primary/5.
Address card — radio selection
checkout/components/address-card — Replaces the address dropdown in checkout. Shows alias (or street summary), full address with country, phone. Radio selection with default badge.
Form validation states
Input states for address validation feedback. Used when Google Address Validation returns different verdicts.
Please review the highlighted address fields
Suggested correction: Calle Gran Vía 123
Address verified
012 345 678
Phone input — with format validation
Updated phone-input now validates on blur against eu-countries.ts phone format regex. Shows format hint and error state.
012 345 678
Expected format: 012 345 678
Address validation modal
common/components/address-validation-modal — Shown when Google Address Validation returns verdict: "confirm". User picks suggested or original.
Verify address
We found a possible correction for your address.
VAT format hint
Shows example VAT format based on billing country. Updates dynamically when country changes. Uses eu-countries.ts vatExample data.
Format: ESA12345678
Modal — base pattern
common/components/modal — Used for address add/edit, validation confirmation. Structure: Title → Body (scrollable) → Footer with Cancel/Save.
Add address
Form fields go here (scrollable area with max-h).
Inline messages — error, warning, success, info
Inline feedback messages used throughout checkout and forms. Semantic colors: text-error, text-warning, text-success.
reCAPTCHA — v2 challenge fallback
common/components/recaptcha/use-recaptcha— v3 runs invisibly. If score < 0.5, v2 checkbox challenge renders in a centered container. Used in register, login, forgot-password.
reCAPTCHA v2 challenge
Rendered here when v3 score is too low
Modules
layout/templates/navTop navigation bar with logo, category bar, search, cart, account, and language switcher.
layout/templates/footerFooter with brand tagline, category links, store links, and developer section.
layout/components/cart-dropdownCart flyout panel. Shows line items with quantity controls, a draggable Embla carousel for recommended products, total, and checkout CTA. Auto-opens on item add.
home/components/heroFull-width CMS-driven hero section. Fetches from Strapi. Wrapped in Suspense with SkeletonHero fallback.
home/components/category-cardsCMS-driven category grid (desktop) / horizontal scroll (mobile). Fetches from Strapi. Wrapped in Suspense with SkeletonCategoryCards fallback.
home/components/hero/skeletonSkeletonHero — animated pulse placeholder matching the 80vh hero layout. Used as Suspense fallback while Strapi CMS data loads.
home/components/category-cards/skeletonSkeletonCategoryCards — animated pulse placeholder matching 4-col desktop / scroll mobile grid.
products/componentsProduct card (ProductPreview), Thumbnail (supports priority + lazy loading), image gallery, price, variants selector, rating stars, and tabs.
products/components/product-previewProduct card with image (lazy-loaded), badge, WishlistButton (shown when wishlistIds prop provided), color swatches, price, and quick-view overlay.
account/components/wishlist-buttonWishlistButton — client component. Receives productId + isWishlisted. Calls toggleWishlist server action on click with optimistic state update. Heart icon fills accent when wishlisted.
cart/templatesCart page with line items, quantity controls, and order summary.
checkout/components/single-page-checkoutSingle-page checkout: Contact → Delivery (tabs) → AddressForm → Shipping → Invoice opt-in + Company/VAT → Payment (tabs) → Place Order.
order/templatesOrder confirmation and order details templates.
account/templatesAccount dashboard with profile, addresses, orders, and wishlist sections.
common/components/address-formReusable address form: Name, Surname, Street, Street No, Additional info, Postal Code, City, Province, Country, Phone. Supports alias, Google Autocomplete, and field prefix.
common/components/google-autocompleteGoogle Places Autocomplete using PlaceAutocompleteElement (new API). Loads script dynamically, parses address components into form fields.
common/components/address-validation-modalModal for Google Address Validation corrections. Shows suggested vs original address with radio selection and confirmation checkbox.
common/components/recaptchareCAPTCHA v3 + v2 fallback. useReCaptcha hook loads v3 invisibly, shows v2 challenge widget if score is too low. Used in register and forgot password.
account/components/pickup-pointsPickup Points placeholder section with 'Coming soon' dummy card.
common/componentsShared primitives: Input, PhoneInput, NativeSelect, Modal, Checkbox, LineItem, CartTotals, LocalizedClientLink.
common/iconsCustom SVG icons: BankTransfer, Spinner, Trash, FastDelivery, MapPin, etc.
Pages
/Homepage — hero, trust bar, and product grid./storeProduct listing page with filters, sorting, and view modes./products/[handle]Product detail page with gallery, variants, and add-to-cart./category/[slug]Category listing — filtered PLP./cartCart page with summary and checkout CTA./checkoutSingle-page checkout: contact, delivery tabs, address + phone, shipping speed, billing + VAT, payment tabs, Place Order./order/confirmed/[id]Order confirmation page./accountAccount dashboard overview./account/@dashboard/profileProfile: Access Data (email, password) → Delivery Methods (address book with alias/default + pickup points placeholder) → Billing Address (invoice opt-in + Company/VAT)./account/@dashboard/addressesSaved addresses book (also accessible from profile)./account/@dashboard/ordersOrder history list./account/@dashboard/orders/details/[id]Order detail view./account/@dashboard/wishlistWishlist page. Fetches wishlisted product IDs from customer.metadata.wishlistIds, loads full product data, renders product grid. Shows empty state with store CTA./page/design-systemThis page — design token and component reference.