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#FDFCFA#2E2A24#F7F5F2#C87A5C#F7F5F2#1F1B16#FDFCFA#EDE8DF#E0D9CDSemantic colors
#3a9e6a#e07b0a#d93333#2a7fd4#C87A5CGrey 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 — variants
Buttons — sizes
Buttons — states
Inputs — states
Inputs — sizes
Badges — semantic
Badges — product labels
Checkboxes & Radios
Select / Dropdown
Cards
Avatar
Counter / Notification dot
Inline feedback messages
Skeleton loaders
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
Product Components
Price display
Rating stars
Option select — variant picker
Breadcrumb
Product tabs — accordion
Procesador A16 Bionic, pantalla Super Retina XDR de 6,1 pulgadas, cámara de 48 MP con modo fotográfico.
Navigation & Layout
Pagination
Stepper — checkout progress
Step list — onboarding
Crea tu cuenta
Regístrate con tu email o accede con Google.
Añade tu dirección
Guarda una dirección de envío para agilizar el checkout.
Realiza tu primer pedido
Explora el catálogo y añade productos al carrito.
Cart & Checkout
Discount code input
Free shipping nudge
Te faltan € 18.00 para el envío gratuito.
Spacing scale
0.52px14px1.56px28px2.510px312px416px520px624px832px1040px1248px1664pxAnimation & Transitions
Search
Search dropdown — states
Empieza a escribir para buscar
- € 999.00
Apple iPhone 15
Smartphones · 3 colores
- € 1.199.00
Apple iPhone 15 Pro
Smartphones · 4 colores
- € 799.00
Apple iPhone 14
Smartphones · 5 colores
Sin resultados para "xyzproducto123"
Account Components
Order card
Address card
Account navigation
Reviews & Ratings
Rating summary bar
Review card
Excelente producto
Llegó antes de lo previsto y el embalaje estaba perfecto. La calidad es mejor de lo esperado, lo recomiendo totalmente.
Great value
Really happy with this purchase. Only minor issue was the packaging, but the product itself is excellent.
Review form
Deja tu reseña
Cart
Cart item — full & preview
Apple iPhone 15
Negro · 128GB
Apple iPhone 15
Negro · 128GB
Cart totals
Empty cart state
Tu carrito está vacío
Explora el catálogo y añade productos para empezar.
Sign-in prompt
¿Ya tienes cuenta?
Accede para ver tus pedidos y tus datos.
Auth Components
Social login buttons
Password strength indicator
Layout Chrome
Announcement bar
Trust bar
Envío gratis +50 €
Compra segura
Devolución 30 días
Entrega en 24h
Cookie consent (external)
El banner de cookies lo gestiona cookie-script.com — se inyecta vía script externo condicionado a la config de Strapi. No tiene estilos propios en este sistema de diseño.
integrations.cookie_consent.active = trueCart toast notification
Añadido al carrito
Apple iPhone 15 · Negro · 128GB
Geo / language modal
Selecciona tu región e idioma
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.