Grain System Grain System is the design system for Anton Doll Holzmanufaktur: a single source of truth, monochrome (black/white), for the full e-commerce rebuild, built on the real antondoll.de catalog (104 products, 10 collections, 444 images). Foundations approved in black and white before introducing any accent color. Showcase architecture ported from Virtual Stripes (Zebra): accordion sidebar, numbered specimens, detail drawer, light/dark theme, keyboard shortcuts.Grain System ist das Design System von Anton Doll Holzmanufaktur: eine einzige verbindliche Quelle, monochrom (schwarz/weiß), für den kompletten E-Commerce-Neuaufbau auf Basis des echten antondoll.de-Katalogs (104 Produkte, 10 Kollektionen, 444 Bilder). Grundlagen in Schwarz-Weiß freigegeben, bevor eine Akzentfarbe eingeführt wird. Die Showcase-Architektur stammt von Virtual Stripes (Zebra): Sidebar mit Akkordeon, nummerierte Specimens, Detail-Drawer, Hell-/Dunkel-Modus, Tastaturkürzel.
Grain System documenta cada fundación y componente usado para reconstruir antondoll.de , tienda Shopify alemana de muebles y tablas de madera maciza hechos a mano, con mejor UI/UX. Fundaciones aprobadas en blanco y negro (PCB R34) antes de introducir cualquier acento de color.
104 productos · 10 colecciones · 444 imágenes scrapeadas vía la API JSON de Shopify. Navega con ←/→, cambia tema con t.
Monochrome system: accent = black (#0A0A0A), never pure #000. The ink ramp runs from 50 to 900. ink-500 is the minimum legible as text (AA). Reserved for once the client approves a brand accent: today hierarchy is built with type, weight and spacing alone (PCB R34).Monochromes System: Akzent = Schwarz (#0A0A0A), niemals reines #000. Die Ink-Rampe reicht von 50 bis 900. ink-500 ist das Minimum für lesbaren Text (AA). Reserviert für den Moment, in dem der Kunde eine Markenakzentfarbe freigibt: heute entsteht Hierarchie ausschließlich über Typografie, Schriftgewicht und Abstand (PCB R34).
Rampa invertida en dark: los neutros se aclaran al subir el número (espejo de la light) para mantener legibilidad sobre el fondo oscuro.
La única excepción al monocromo: las estrellas de rating usan mostaza para destacar la prueba social. La escala vacía va en gris (star-empty), nunca mostaza tenue.
A single family (Inter) for everything: UI, headings and product body copy. Body at 16px for long product descriptions (readability), UI chrome at 15px. text-wrap:balance on headings and pretty on paragraphs, applied globally instead of per element.Eine einzige Schriftfamilie (Inter) für alles: UI, Überschriften und Produkttext. Fließtext in 16px für lange Produktbeschreibungen (Lesbarkeit), UI-Chrome in 15px. text-wrap:balance auf Überschriften und pretty auf Absätzen, global statt pro Element gesetzt.
pretty se aplica a todos los párrafos del sitio, incluidas las descripciones largas de producto, para evitar viudas: la última línea nunca queda con una sola palabra suelta.
All spacing lives in multiples of 4px: 4/8/12/16/24/32/48/64/96. Main container max-width 1280px. Cards: 32px padding compact, 40px feature. Product grids: 20-24px gap.Alle Abstände folgen Vielfachen von 4px: 4/8/12/16/24/32/48/64/96. Haupt-Container max-width 1280px. Cards: 32px Padding kompakt, 40px bei Feature-Cards. Produktraster: 20-24px Abstand.
"Very subtle" scale (same anatomy as Virtual Stripes): chip 6px, control 8px, input and button 10px, card 12px, pill 999px only for genuinely circular elements or status capsules. Concentric radii where nested (PCB R63)."Sehr dezente" Skala (gleiche Anatomie wie Virtual Stripes): Chip 6px, Control 8px, Input und Button 10px, Card 12px, Pill 999px nur für wirklich runde Elemente oder Status-Kapseln. Konzentrische Radien bei Verschachtelung (PCB R63).
5-level scale: sm (subtle cards), md (dropdowns), lg (modals), xl (drawers), 2xl (critical floating elements). Every token is layered: the first layer 0 0 0 1px mimics the border and adapts to any background; the rest add depth with vertical offset and blur ~2x distance. In dark mode the border layer is faint white and depth is dampened.5-stufige Skala: sm (dezente Cards), md (Dropdowns), lg (Modals), xl (Drawer), 2xl (kritische schwebende Elemente). Jedes Token ist mehrschichtig: die erste Schicht 0 0 0 1px imitiert den Rand und passt sich jedem Hintergrund an; die weiteren Schichten addieren Tiefe mit vertikalem Versatz und ~2x Distanz-Blur. Im Dark Mode ist die Randschicht schwach weiß, die Tiefe wird gedämpft.
sm como reposo por defecto · subir un nivel completo por salto de elevación
One easing for everything: cubic-bezier(0.16, 1, 0.3, 1). Reveals last 0.8s with 0.08s stagger, card-lift 0.5s, img-zoom 0.9s. The scroll observer always runs; under prefers-reduced-motion movement is disabled but content is never left invisible (opacity:1 is forced).Ein einziges Easing für alles: cubic-bezier(0.16, 1, 0.3, 1). Reveals dauern 0,8s mit 0,08s Staffelung, card-lift 0,5s, img-zoom 0,9s. Der Scroll-Observer läuft immer; unter prefers-reduced-motion wird die Bewegung deaktiviert, aber Inhalt bleibt nie unsichtbar (opacity:1 wird erzwungen).
Desactiva shimmer de skeletons, img-zoom y el movimiento de reveals/card-lift. Los reveals fuerzan opacity:1; transform:none, así el catálogo nunca queda invisible para quien pidió menos movimiento.
Inline linear icon library: viewBox 24×24, fill none, stroke currentColor, stroke-width 2, aria-hidden. Icon container: bg-ink-50/text-ink at rest, inverts to bg-ink/text-white on group hover (used for product benefits: solid wood, handmade, antibacterial).Inline-Icon-Bibliothek im linearen Stil: viewBox 24×24, fill none, stroke currentColor, stroke-width 2, aria-hidden. Icon-Container: bg-ink-50/text-ink im Ruhezustand, kehrt sich bei Gruppen-Hover zu bg-ink/text-white um (genutzt für Produktvorteile: Massivholz, handgefertigt, antibakteriell).
Label always above the field (never placeholder-as-label). ink-200 border at rest, ink-300 on hover, ink + 2px ring on focus. Validate on blur, not on every keystroke. Persistent error with message and color, never border color alone.Label immer oberhalb des Feldes (nie Placeholder als Label). ink-200-Rand im Ruhezustand, ink-300 bei Hover, ink + 2px Ring bei Fokus. Validierung beim Verlassen des Feldes (blur), nicht bei jedem Tastendruck. Dauerhafter Fehler mit Meldung und Farbe, nie nur über die Randfarbe.
For product size/dimension (e.g. 55×50cm, 60×60cm on the "Berta" board): buttons that expose every option at once, not a select element. Reduces cognitive effort (Baymard/Polaris) and lets sold-out variants show struck through instead of hidden, avoiding the false impression of a smaller catalog.Für Produktgröße/-maß (z. B. 55×50cm, 60×60cm beim Brett "Berta"): Buttons, die alle Optionen sofort zeigen, kein Select-Element. Reduziert kognitiven Aufwand (Baymard/Polaris) und zeigt ausverkaufte Varianten durchgestrichen statt versteckt, ohne den falschen Eindruck eines kleineren Katalogs zu erwecken.
Square 18px checkbox with a 44px hit area; equivalent circular radio. Checked state is communicated by shape (check/dot) and color, never by a tone change alone that would fail for colorblind users.Quadratische 18px-Checkbox mit 44px Trefferfläche; entsprechendes rundes Radio. Der markierte Zustand wird über Form (Haken/Punkt) und Farbe kommuniziert, nie nur über einen Tonwechsel, der für farbenblinde Nutzer unsichtbar wäre.
For immediate binary preferences (e.g. "Newsletter for new collections"). Unlike a checkbox, the state change applies instantly with no save button. Track ink-200 to ink when on, white thumb with a subtle shadow.Für sofortige binäre Einstellungen (z. B. "Newsletter für neue Kollektionen"). Anders als bei einer Checkbox greift die Zustandsänderung sofort, ohne Speichern-Button. Track ink-200 zu ink bei "an", weißer Thumb mit dezentem Schatten.
Short, non-interactive labels: "Last 2 left", "New", "Handmade". When several compete, a fixed precedence order applies: active offer, then low stock, then new, showing only the highest-ranked one per card so they do not compete for attention.Kurze, nicht-interaktive Labels: "Nur noch 2 Stück", "Neu", "Handgefertigt". Konkurrieren mehrere, gilt eine feste Rangfolge: aktives Angebot, dann geringer Bestand, dann neu, sodass pro Card nur das ranghöchste gezeigt wird und keine Aufmerksamkeitskonkurrenz entsteht.
Unlike a badge, the tag is interactive: active catalog filters (e.g. "Oak", "Walnut", "Size M") that can be removed with an X. Used in the collection filter bar.Anders als ein Badge ist der Tag interaktiv: aktive Katalogfilter (z. B. "Eiche", "Nussbaum", "Größe M"), die per X entfernt werden können. Verwendet in der Filterleiste der Kollektion.
Page- or section-level message blocks: subscription confirmation, low-stock notice, contact form error. Always icon plus text plus color; semantics never rely on tone alone for those who cannot distinguish colors.Nachrichtenblöcke auf Seiten- oder Abschnittsebene: Abo-Bestätigung, Hinweis auf geringen Bestand, Fehler im Kontaktformular. Immer Icon plus Text plus Farbe; die Bedeutung hängt nie allein vom Farbton ab.
Appears on hover/focus over a technical catalog term (e.g. "certified oil", "antibacterial from tannic acid") without needing to navigate elsewhere. Must be keyboard-accessible (focus), not mouse-only.Erscheint bei Hover/Fokus über einem technischen Katalogbegriff (z. B. "zertifiziertes Öl", "antibakteriell durch Gerbsäure"), ohne zu einer anderen Seite navigieren zu müssen. Muss per Tastatur (Fokus) erreichbar sein, nicht nur per Maus.
Determinate bar for processes with known steps: order shipping progress, multi-step contact form. Never indeterminate when real progress is knowable.Bestimmter Balken für Prozesse mit bekannten Schritten: Versandfortschritt der Bestellung, mehrstufiges Kontaktformular. Nie unbestimmt, wenn der reale Fortschritt bekannt ist.
For short waits with no knowable progress (form submit, add to cart). Lives inside the button that triggered it, never as a full-page overlay for quick actions.Für kurze Wartezeiten ohne bekannten Fortschritt (Formular senden, in den Warenkorb legen). Lebt innerhalb des auslösenden Buttons, nie als ganzseitiges Overlay für schnelle Aktionen.
Loading placeholder for product grids and gallery images while the Shopify CDN delivers the real asset. Subtle shimmer, disabled under reduced-motion (shown static instead).Lade-Platzhalter für Produktraster und Galeriebilder, während das Shopify-CDN das echte Asset liefert. Dezentes Shimmer, deaktiviert unter reduced-motion (dann statisch dargestellt).
Circle with initials or photo for product reviews ("Verified purchase, M.K."). Falls back to initials on an ink-50 background when no photo is available.Kreis mit Initialen oder Foto für Produktbewertungen ("Verifizierter Kauf, M.K."). Fällt auf Initialen vor ink-50-Hintergrund zurück, wenn kein Foto vorliegt.
Dividing line, always 1px. Emphasis state is communicated by color (ink-300 instead of ink-200), never by thickness: thickening causes layout shift and looks heavy.Trennlinie, immer 1px. Der Betonungszustand wird über Farbe kommuniziert (ink-300 statt ink-200), nie über Dicke: eine dickere Linie verursacht einen Layout-Sprung und wirkt schwer.
Fixed order following the decision process: image (evaluate), name (identify), price (decide), CTA (act). Rating/availability are secondary metadata. ink-200 border plus flat background, no floating shadow, more consistent with the material than a soft elevation.Feste Reihenfolge entlang des Entscheidungsprozesses: Bild (bewerten), Name (identifizieren), Preis (entscheiden), CTA (handeln). Bewertung/Verfügbarkeit sind sekundäre Metadaten. ink-200-Rand plus flacher Hintergrund, kein schwebender Schatten, passender zum Material als eine weiche Erhebung.
Alternative to the accordion when 2-4 sections must all appear simultaneously available without collapsing: "Specifications", "Care", "Shipping & returns" on the product page. Roving tabindex, only one tab with tabindex=0.Alternative zum Accordion, wenn 2-4 Abschnitte gleichzeitig verfügbar bleiben sollen, ohne einzuklappen: "Spezifikationen", "Pflege", "Versand & Rückgabe" auf der Produktseite. Roving Tabindex, nur ein Tab mit tabindex=0.
Roble macizo, aceite de linaza con cera dura certificado apto para alimentos. Canto tope reversible, uso en ambas caras. Tamaños: 55×50cm, 60×50cm, 60×60cm, 62×52cm.
Lava a mano y seca de inmediato. Trata periódicamente con aceite certificado apto para alimentos para conservar la protección antibacteriana natural del ácido tánico del roble.
2-4 días hábiles para piezas en stock. Tamaños a medida: aproximadamente 3 meses. Los productos a medida no admiten devolución; los tamaños estándar sí, dentro de 30 días.
Used on the FAQ page (wood care, shipping, returns) and for collapsible product details. Exclusive: opening one item closes the previous one, avoiding long cognitive scroll.Verwendet auf der FAQ-Seite (Holzpflege, Versand, Rückgabe) und für einklappbare Produktdetails. Exklusiv: Das Öffnen eines Punkts schließt den vorherigen, das vermeidet langes kognitives Scrollen.
For collections with more products than fit on one screen. Numbers plus previous/next, with the current state announced to screen readers.Für Kollektionen mit mehr Produkten, als auf einen Bildschirm passen. Nummern plus Zurück/Weiter, aktueller Zustand wird Screenreadern mitgeteilt.
For real tabular data: board dimension guide by size, oak vs. walnut comparison (hardness, tone, price). Numbers right-aligned, tabular-nums.Für echte tabellarische Daten: Maßtabelle der Bretter nach Größe, Vergleich Eiche vs. Nussbaum (Härte, Farbton, Preis). Zahlen rechtsbündig, tabular-nums.
| Tamaño | Material | Precio |
|---|---|---|
| 55×50cm | Roble macizo | €199 |
| 60×50cm | Roble macizo | €310 |
| 60×60cm | Roble macizo | €320 |
| 62×52cm | Roble macizo | €380 |
| Madera | Dureza (Janka) | Tono | Desde |
|---|---|---|---|
| Roble | 6.0 kN | Claro, veta marcada | €199 |
| Nogal | 4.5 kN | Oscuro, veta fina | €249 |
Clicking/tapping a gallery image opens a higher-resolution version, not a simple upscale of the thumbnail, which pixelates. Closes with X, click outside, or Escape.Klick/Tap auf ein Galeriebild öffnet eine höher aufgelöste Version, kein einfaches Hochskalieren der Miniatur, das pixelig wirkt. Schließt mit X, Klick außerhalb oder Escape.
Brief, non-blocking confirmation after adding a product to the cart or submitting the contact form. Auto-dismiss after 5s, with a manual close option.Kurze, nicht blockierende Bestätigung nach dem Hinzufügen eines Produkts zum Warenkorb oder dem Absenden des Kontaktformulars. Automatisches Ausblenden nach 5s, mit manueller Schließoption.
For filtered collections with no results or an empty cart. Illustration/icon plus clear message plus recovery action ("View all products", "Browse collections").Für gefilterte Kollektionen ohne Treffer oder einen leeren Warenkorb. Illustration/Icon plus klare Nachricht plus Recovery-Aktion ("Alle Produkte ansehen", "Kollektionen durchsuchen").
Prueba a quitar algún filtro de madera o tamaño. Tenemos más de 100 productos en 7 colecciones.
Explora nuestras tablas de madera maciza, mesas y bancos hechos a mano.
Visible progress in the checkout flow for a store with a custom-size configurator: cart, shipping details, payment, confirmation. Reduces anxiety by showing how many steps remain.Sichtbarer Fortschritt im Checkout-Ablauf für einen Shop mit Maßkonfigurator: Warenkorb, Versanddaten, Zahlung, Bestätigung. Reduziert Unsicherheit, indem gezeigt wird, wie viele Schritte noch fehlen.
Sticky header with Anton Doll's real collections (Tables, Cutting boards, Stools, Benches, Shelves, B-Ware, Sale), language selector (DE/EN/FR), account, search and cart. Fixed height, background blur on scroll.Sticky Header mit den echten Anton-Doll-Kollektionen (Tische, Schneidebretter, Hocker, Bänke, Regale, B-Ware, Sale), Sprachauswahl (DE/EN/FR), Konto, Suche und Warenkorb. Feste Höhe, Hintergrundunschärfe beim Scrollen.
On mobile viewports, the navbar collapses into a full-screen overlay menu with the same collections, language, and account/cart access. Closes with X, click outside, or Escape.Auf mobilen Viewports klappt die Navbar zu einem Vollbild-Overlay-Menü mit denselben Kollektionen, Sprache und Konto-/Warenkorbzugriff zusammen. Schließt mit X, Klick außerhalb oder Escape.
Dark footer with real scraped data: contact, legal policies (GDPR/CCPA/LGPD/PIPEDA/APPI), business lines (Einzelhandel, B2B, OEM, Dropshipping), blog (Lexikon, wood types), social media, and payment methods (SEPA, Klarna, PayPal, Apple/Google Pay).Dunkler Footer mit echten gescrapten Daten: Kontakt, rechtliche Richtlinien (DSGVO/CCPA/LGPD/PIPEDA/APPI), Geschäftsbereiche (Einzelhandel, B2B, OEM, Dropshipping), Blog (Lexikon, Holzarten), Social Media und Zahlungsarten (SEPA, Klarna, PayPal, Apple/Google Pay).
Holzmanufaktur alemana: mesas, tablas de corte y muebles de madera maciza hechos a mano.
Anton Doll Holzmanufaktur
Alemania
kontakt@antondoll.de
Einzelhandel
B2B
OEM
Dropshipping
Lexikon de maderas
Cuidado de la madera
Guía de tamaños
Privacidad (GDPR)
CCPA
LGPD
PIPEDA
APPI
AGB / Términos
Impressum
Price is the most decisive data point on the PDP: largest size, heaviest weight, close to the CTA. "From €199" before choosing a variant (board size), exact price after selection. tabular-nums so digits do not jitter when switching variants.Der Preis ist der entscheidendste Wert auf der PDP: größte Schrift, höchstes Gewicht, nah am CTA. "Ab 199 €" vor der Variantenwahl (Brettgröße), exakter Preis nach der Auswahl. tabular-nums, damit Ziffern beim Variantenwechsel nicht springen.
Each gallery image answers a purchase question, in order: clean shot on neutral background, scale (size reference), finish detail (wood grain), use context (set table), packaging. The real catalog brings 4-14 images per product; avoid repeating the same angle with a different background.Jedes Galeriebild beantwortet eine Kauffrage, in dieser Reihenfolge: sauberes Foto vor neutralem Hintergrund, Maßstab (Größenreferenz), Detail der Oberfläche (Holzmaserung), Anwendungskontext (gedeckter Tisch), Verpackung. Der echte Katalog liefert 4-14 Bilder pro Produkt; denselben Winkel nicht nur mit anderem Hintergrund wiederholen.
These five elements must be visible without scrolling: name, price, variant selector, availability, buy button. Anything additional (long description, reviews, shipping) comes after.Diese fünf Elemente müssen ohne Scrollen sichtbar sein: Name, Preis, Variantenauswahl, Verfügbarkeit, Kaufbutton. Alles Zusätzliche (lange Beschreibung, Bewertungen, Versand) folgt danach.
On mobile, the "Add to cart" button leaves the viewport within seconds. A sticky bottom bar (thumbnail, short name, price, CTA) appears once the original fold is crossed, keeping purchase intent alive while reading description/reviews.Auf Mobilgeräten verlässt der "In den Warenkorb"-Button den Viewport innerhalb von Sekunden. Eine fixierte untere Leiste (Miniaturbild, Kurzname, Preis, CTA) erscheint, sobald der ursprüngliche Fold überschritten wird, und hält die Kaufabsicht beim Lesen von Beschreibung/Bewertungen aufrecht.
The average rating sits immediately below the product name, visible from the very first moment. Buyer photos build more trust than text-only reviews; filterable by star rating.Die Durchschnittsbewertung steht direkt unter dem Produktnamen, vom ersten Moment an sichtbar. Käuferfotos schaffen mehr Vertrauen als reine Textbewertungen; filterbar nach Sternebewertung.
"La calidad es excelente, se nota el trabajo artesanal."
Narrative description (2-4 benefit bullets: "solid wood", "antibacterial", "reversible") kept separate from technical specifications (dimensions, weight, care) in an accordion or tabs. Mixing both in one long paragraph penalizes whoever just wants one data point.Erzählende Beschreibung (2-4 Vorteils-Bullets: "Massivholz", "antibakteriell", "wendbar") getrennt von technischen Spezifikationen (Maße, Gewicht, Pflege) in Accordion oder Tabs. Beides in einem langen Absatz zu mischen benachteiligt, wer nur einen einzelnen Wert sucht.
Madera: roble macizo · Tamaños: 55×50, 60×50, 60×60, 62×52cm · Peso: 4kg · Acabado: aceite de linaza certificado con cera dura.
Lavar a mano, secar de inmediato y tratar periódicamente con aceite certificado apto para alimentos. Ver instrucciones completas de cuidado.
Envío a toda Alemania y la UE. 30 días para devoluciones sin usar.
Opening pattern for collection pages (e.g. "Wooden boards"): large image of the material/product, brief editorial copy about the craft, CTA to browse the catalog.Eröffnungsmuster für Kollektionsseiten (z. B. "Holzbretter"): großes Bild von Material/Produkt, kurzer editorialer Text über das Handwerk, CTA zum Durchstöbern des Katalogs.
Applying a filter (wood, size, price) updates the result count in real time without reloading the page. Active filters removable individually as chips.Das Anwenden eines Filters (Holz, Größe, Preis) aktualisiert die Trefferzahl in Echtzeit, ohne die Seite neu zu laden. Aktive Filter einzeln als Chips entfernbar.
Trust seals (shipping, 30-day returns, secure payment) placed close to the buy button, not in the footer, since the signal's context must match the user's moment of anxiety.Vertrauenssiegel (Versand, 30 Tage Rückgabe, sichere Zahlung) nah am Kaufbutton platziert, nicht im Footer, da der Kontext des Signals mit dem Moment der Unsicherheit des Nutzers übereinstimmen muss.
Dedicated section with featured reviews and photos of customers using the boards/tables in their real kitchen, reinforcing the brand's craft perception.Eigener Bereich mit hervorgehobenen Bewertungen und Fotos von Kunden, die die Bretter/Tische in ihrer echten Küche nutzen, verstärkt die handwerkliche Wahrnehmung der Marke.
Closing band for a page (PDP footer or end of collection) with a single clear CTA: browse more products or subscribe to updates.Abschlussleiste einer Seite (PDP-Fuß oder Ende einer Kollektion) mit einem einzigen klaren CTA: weitere Produkte entdecken oder Neuigkeiten abonnieren.
Roble y nogal, hechas a mano, tratadas con aceite certificado apto para alimentos.
Ver catálogoReusable block with the real care copy pulled from the catalog: hand-wash, dry immediately, treat periodically with certified food-safe oil. Appears on the PDP (tab/accordion) and on the FAQ page.Wiederverwendbarer Block mit dem echten Pflegetext aus dem Katalog: von Hand waschen, sofort trocknen, regelmäßig mit zertifiziertem, lebensmittelechtem Öl behandeln. Erscheint auf der PDP (Tab/Accordion) und auf der FAQ-Seite.
Nunca: lavavajillas ni remojo prolongado, reseca y agrieta la madera maciza.
Quick-reference view of every live token (color, spacing, radius, shadow, motion) in one place, to copy exact values without hunting through the source CSS.Schnellreferenz aller aktiven Tokens (Farbe, Abstand, Radius, Schatten, Bewegung) an einem Ort, um exakte Werte zu kopieren, ohne im Quell-CSS zu suchen.
| Token | Valor |
|---|---|
| --ink | #0A0A0A |
| --ink-900 | #171717 |
| --ink-700 | #262626 |
| --ink-500 | #737373 |
| --ink-400 | #A3A3A3 |
| --ink-300 | #CBD5E1 |
| --ink-200 | #E5E5E5 |
| --ink-100 | #F5F7FA |
| --ink-50 | #F9FAFB |
| --surface | #FFFFFF |
| --surface-2 | #F9FAFB |
| --text-muted | #737373 |
| Token | Valor |
|---|---|
| --r-chip | 6px |
| --r-control | 8px |
| --r-input | 10px |
| --r-btn | 10px |
| --r-card | 12px |
| --r-pill | 999px |
| Token | Valor |
|---|---|
| --shadow-sm | 0 0 0 1px rgba(10,10,10,.04), 0 1px 2px rgba(10,10,10,.06) |
| --shadow-md | 0 0 0 1px rgba(10,10,10,.04), 0 2px 4px -1px rgba(10,10,10,.08) |
| --shadow-lg | 0 0 0 1px rgba(10,10,10,.04), 0 4px 8px -2px rgba(10,10,10,.10) |
| --shadow-xl | 0 0 0 1px rgba(10,10,10,.04), 0 8px 16px -4px rgba(10,10,10,.12) |
| --shadow-2xl | 0 0 0 1px rgba(10,10,10,.04), 0 16px 32px -8px rgba(10,10,10,.16) |
| Token | Valor |
|---|---|
| 4 | 0.25rem |
| 8 | 0.5rem |
| 16 | 1rem |
| 24 | 1.5rem |
| 32 | 2rem |
| 48 | 3rem |
| 64 | 4rem |
| Token | Valor |
|---|---|
| --ease-standard | cubic-bezier(0.2, 0, 0, 1) |
| reveal | 0.8s, stagger 0.08s |
| card-lift | 0.5s cubic-bezier(.16,1,.3,1) |
| img-zoom | 0.9s cubic-bezier(.16,1,.3,1) |
Documented brand decisions: product description body copy at 16px (PCB R2) while UI chrome (nav, buttons, labels) uses 14-15px for density. Not to be corrected without approval.Dokumentierte Markenentscheidungen: Produktbeschreibungstext in 16px (PCB R2), während UI-Chrome (Nav, Buttons, Labels) aus Dichtegründen 14-15px nutzt. Nicht ohne Freigabe korrigieren.
| Regla base | Estado en Grain System | Razón |
|---|---|---|
| PCB R2 · body ≥16px de forma consistente | Descripción de producto 16px, UI chrome (nav, botones, labels) 14-15px | Densidad de la interfaz de compra vs. lectura larga de descripción de producto. Decisión de marca documentada. |
| S07 · sombra O borde, nunca ambos | Cards de producto usan border ink-200 + fondo plano, sin sombra en reposo | Más consistente con el material (madera maciza, plana) que una elevación blanda. card-lift añade sombra solo en hover. |
| Selector de variante: dropdown por default | Siempre botones visibles, nunca <select> nativo | Reduce esfuerzo cognitivo (Baymard/Polaris) y permite mostrar tamaños agotados tachados en vez de ocultarlos. |
Condensed do/avoid: variant selector always as buttons (never a dropdown), price always visible without scrolling, red reserved for errors, spacing in multiples of 4px, focus always visible.Verdichtetes Do/Avoid: Variantenauswahl immer als Buttons (nie ein Dropdown), Preis immer ohne Scrollen sichtbar, Rot ausschließlich für Fehler, Abstände in Vielfachen von 4px, Fokus immer sichtbar.
Cada tarjeta corresponde a un specimen del sistema (ver Fundaciones, Componentes base, Producto). Este grid es un condensado de referencia rápida: para el detalle completo y ejemplos en vivo, abre el drawer de detalle del componente correspondiente.
Minimum checklist before publishing any e-commerce view: visible focus, AA contrast, 44px targets, respecting prefers-reduced-motion, native semantics (correct ARIA roles on tabs/accordion/dialog).Mindest-Checkliste vor Veröffentlichung jeder E-Commerce-Ansicht: sichtbarer Fokus, AA-Kontrast, 44px-Zielflächen, Beachtung von prefers-reduced-motion, native Semantik (korrekte ARIA-Rollen bei Tabs/Accordion/Dialog).