shop-design-taste

Design-taste rules for building storefront UIs on this platform that look custom-made, not AI-generic — layout variance, typographic hierarchy, spacing rhythm, color discipline mapped to the global tokens, scroll-motion via the built-in data-anim convention, and an anti-slop checklist. Apply to EVERY visual build/redesign/section task ON TOP of shop-core-rules (this skill never overrides the §F/§G/§H contract — it tells you what to do WITHIN it). Distilled from leonxlnx/taste-skill + greensock/gsap-skills (MIT), adapted to the Liquid + CSS-token contract.

These rules raise the LOOK of what you build. They never override the platform contract: copy stays in {% schema %} settings (§F), colors/fonts flow through the global tokens (§G — var(--accent), var(--font-display)…) whether written in a <style> block or via the token-mapped Tailwind utilities (§G.2 — bg-accent, font-display, py-section, md:grid-cols-3), data binds live (§H), mobile is mandatory (§L). Taste is HOW you use that contract.

0. ONE design system, settings-driven — the consistency contract (read first)

Every section on the store is the SAME design language. Don't let any one drift:

Same tokens everywhere — colors var(--accent/--ink/--paper/--line…) or the token utilities bg-accent/text-ink/bg-paper/border-line, fonts var(--font-display/--font-sans) or font-display/font-sans. A section with an off-palette color or a different font is wrong. Every visual choice must survive a merchant palette change (tokens only — never a literal hex/font, and never a default-palette utility like bg-blue-600, §G/§G.2).
Same rhythm & detail values — section padding var(--section-y) / py-section, gutters var(--gutter) / px-gutter, radius var(--radius/-lg) / rounded-lg, borders 1px var(--line) / border border-line. Don't invent ad-hoc padding:37px / border:2px #ccc / p-[37px] per section — pull from the tokens or the standard Tailwind scale (or the section's Style-group settings, below) so spacing, corners and borders are uniform site-wide.
Same component anatomy across pages — a "related products" row on the PDP, a "you may also like" on the cart, and a "related posts" strip in the blog must share the SAME card style (image ratio, padding, title size, border/shadow, hover). Reuse the base data sections (product-blocks, new-arrivals) rather than re-styling a near-duplicate; a blog related-strip styled differently from the PDP related row is a defect.
Expose + honor the canonical Style group (§F) on every section — bg_color, text_color, padding_top/padding_bottom, border_color/border_width/border_radius — and DEFAULT each from the token (e.g. padding: {{ section.settings.padding_top | default: 'var(--section-y)' }}). So the look is both consistent AND merchant-editable; text padding, borders and spacing are settings, not baked literals.

1. Infer a direction before styling anything

Read the brief/industry and commit to ONE visual direction — then keep every section on it. Examples: logistics/industrial → confident, dense, strong rules and stats; fashion → editorial serif, huge imagery, whitespace; SaaS → crisp grid, generous radius, soft surfaces; restaurant → warm tones, photography-led. Set the direction ONCE via set_global_settings (palette, font_heading, font_body, radius, space_section) and let sections inherit it. Never restyle per-section against the direction.

2. Layout variance — kill the default grid

The #1 AI tell is "three equal cards, centered, repeat". Per page, vary the recipe:

Alternate section rhythms: full-bleed hero → asymmetric 2-col (60/40, image offset) → stat strip → zig-zag feature rows (image left, then right) → bento grid (one 2×2 cell + small cells) → wide CTA band.
Use AT MOST one equal-card grid per page; lists of 4+ items prefer zig-zag, bento, or a single row with a horizontal scroll on mobile.
Break symmetry deliberately: offset a heading column left while content sits right; let one image bleed off the container edge (negative margin); overlap a card onto the previous section (margin-top: -3rem).
⚠️ Overlap is DECOR-ONLY — it must NEVER cover functional text. An oversized display numeral/keyword may sit BEHIND content only at low opacity (aria-hidden). A stat's big number and its caption/label each get their own RESERVED space: size the box to the glyph's real line-height and let the caption flow BELOW it in normal document flow — never absolute-position or negative-margin a display numeral so it swallows the label/caption/body line beside it. If the number and its caption visually collide at any viewport, the layout is wrong — stack them with real spacing.
Section padding comes from var(--section-y) — don't stack two padded sections of the same background color without a divider, tint shift (var(--cream) vs var(--paper)), or overlap.

2b. THE SECTION LAYOUT LIBRARY — the world's section patterns, use them

The web's section vocabulary is far bigger than hero/grid/CTA. Pick per ROLE, vary per page, never repeat one archetype twice in a row. (The variant seed may ASSIGN some of these — honor it; adapt the recipe to the content.)

HEROES (pick a SHAPE, not just a photo+headline):

Split-screen — hard 50/50 or 60/40; type block one side, full-bleed media the other; grid md:grid-cols-2 min-h-[90vh].
Full-bleed cinematic — media edge-to-edge, one statement, scroll cue; dark scrim for legibility.
Editorial masthead — huge display line over a ruled grid; eyebrow/dateline; asymmetric columns under.
Offset asymmetric — headline pushed to one column, media bleeding off the opposite edge (negative margin).
Collage/layered — 2-3 overlapping images, slight rotate, floating badge; z-layers, DECOR only over media.
Type-only manifesto — font-size:clamp(3rem,10vw,9rem); line-height:.95, zero/tiny imagery, maybe an outlined word.
Product-centered spotlight — one large centered subject; orbiting labels/stats pinned around it.
Marquee hero — kinetic repeated headline band(s) as the device; content sits between bands.
Stacked magazine cover — centered masthead, cover image below, a credits/specs row like a printed cover.
Grid-peek — hero text, then the content grid PEEKS above the fold (top halves of cards visible).
Diagonal split — a hard diagonal divides color-block from media (clip-path: polygon(...)).
Framed poster — a thick inset border/frame around the viewport; hero composed inside like print.
Video wall — bg video + oversized OUTLINED type (-webkit-text-stroke), tiny UI elsewhere.
Sidebar hero — brand/nav in a sticky side rail (desktop), hero fills the remaining column.

FEATURE / SERVICE / CONTENT sections:

Zig-zag rows — media/text alternating sides; vary media size between rows.
Bento — mixed tile sizes (2x2 feature + small tiles); tiles differ in CONTENT TYPE (stat, quote, image, list).
Numbered index — 01/02/03 ruled full-width rows; hover reveals a floating image; great for services/menu.
Sticky-media split — media column position:sticky while text steps scroll past it.
Horizontal snap rail — overflow-x-auto snap-x cards with edge peek; arrows optional.
Tabbed panels — segmented control swaps content in place (schedule days, service groups).
Accordion + media — expanding rows left, media swaps right on open.
Overlap cards — cards straddle a full-bleed band boundary (margin-top:-4rem).
Masonry/broken grid — varied heights via grid-auto-flow:dense + row spans.
Timeline spine — a connected vertical/horizontal line with nodes; process/history.
Full-bleed bands — each item its own edge-to-edge tinted band; alternate cream/paper/dark.
Icon matrix + featured cell — a tight grid of small tiles where ONE is enlarged as the lead.
Comparison split — two columns contrasted (before/after, us/them, plan A/B) with a center rule.
Diorama hotspots — one wide scene image; absolutely-positioned callout dots with labels.

PROOF / DATA: stat band on dark (huge numerals + captions BELOW, never overlapped); quote wall (staggered sizes); single spotlight pull-quote + portrait; logo marquee; results ticker (metric + one-line story); rating cluster.

GALLERY / SHOWCASE: full-bleed mosaic (mixed spans); filmstrip row (h-scroll + captions); one-hero-cell lightbox grid; polaroid scatter (rotate + shadow); split slider (paired images); pinned showcase (media fixed, captions cycle).

CTA: dark/accent full-bleed band; oversized-type CTA (button inline in the sentence); split CTA (message | form panel); framed ticket (dashed border, corner notches); floating card straddling two sections; marquee CTA.

PAGE RHYTHM RULES (hard):

≥4 DISTINCT archetypes per page; adjacent sections never share archetype OR background tint.
At most ONE plain equal-card grid per page — every other list uses an archetype above.
Alternate contained ↔ full-bleed, light ↔ dark/tinted, symmetric ↔ asymmetric down the page.
Sub-pages must NOT clone the homepage's section shapes — same tokens/fonts, DIFFERENT archetypes.

Repeated items must be EQUAL & BALANCED (the uneven-content trap)

When you DO use a row/grid of items that share a structure (cards, tiles, process steps, feature columns, pricing plans, stat blocks), they have to read as ONE even set even though each item's content differs in length. A ragged row — stubby card beside a tall one, a title broken mid-word, dangling whitespace — is the most common "looks amateur" defect. Design for uneven content on purpose:

No AI-tell copy or chrome — this is what makes a build scream "made by AI". Write like the real business, not like a generic AI landing-page template. BANNED unless it is the merchant's OWN real wording:
- Buzzword eyebrow/pill badges: "Next-gen / new-generation …", "AI-powered", "Powered by AI", "The future of …", "Revolutionary", "Reimagined", a lone "✨ AI" chip. An eyebrow labels the section topic in the brand's plain words ("Book a table", "Services" — in the site's language) — it is NOT a hype sticker.
- Empty hype superlatives in headlines/subcopy: "unleash / supercharge / elevate / seamless / game-changing / cutting-edge / effortless / transform your …", and the template hero "Build/Create X faster than ever with AI". Write a concrete, specific headline about what the business actually does.
- Decorative sparkles / "AI glow": no ✨ or sparkle-star icon as ornament on buttons, eyebrows, or headings (also an emoji-rule FAIL). Icons must be meaningful pictographs, not AI garnish.
- The chatbot-prompt placeholder cliché: an input whose placeholder is "Try: … / e.g. … / Ask anything …" next to a sparkle — do NOT put this on a normal business site. Only a site that GENUINELY is an AI chat/generator product may have a prompt box, and even then label it in the brand's plain voice. Litmus test: if the same line could sit on ANY AI startup's page unchanged, rewrite it to name this business's real offer.
Balance the copy you write first. You author the text, so make siblings comparable: titles ≈ same length (cap ~2–3 words / one line), bodies within ±1 line of each other. Never pair a 2-word stub next to a 20-word paragraph — even the wording out. This is the root cause; fix it before any CSS.
Equal height + aligned footers. Make each card display:flex; flex-direction:column; height:100% and pin its CTA/footer with margin-top:auto, so every card matches height and every button sits on one baseline. Let the grid stretch siblings (default align-items:stretch); never set fixed pixel heights.
Never break a word mid-way. A title splitting as "Configurati/on" is broken. No word-break:break-all; let long words wrap at spaces, and if one long word is too wide shrink the title with clamp(), add text-wrap:balance or hyphens:auto, or widen the column.
Reserve line counts. Give repeated titles a fixed line budget (min-height for ~2 lines or -webkit-line-clamp:2) and clamp variable bodies to a set number of lines, so a 1-line vs 2-line title doesn't misalign the icons/text/CTAs below across the row.
One media aspect. Every thumbnail in the set shares ONE aspect-ratio box + object-fit:cover; same icon size, padding, gap, and text alignment on every sibling.

3. Typography carries the design

Scale: display headings clamp(2.2rem, 5vw, 3.8rem) with line-height:1.1 and slight negative tracking (letter-spacing:-0.02em); section headings ~1.8–2.2rem; body 1rem/1.6–1.75. Use var(--font-display) for headings, var(--font-sans) for body — NEVER hard-code a family.
Hierarchy needs ≥3 distinct type levels per section (e.g. heading → subhead → body, or a big display number → label → note) — but do NOT achieve it with an eyebrow on every section. Eyebrows are default-OFF: use one ONLY where the section is genuinely numbered/chaptered or needs a kicker (aim ≤2–3 per page); an eyebrow on every section is a templated tell. Eyebrow style when used: 12–13px, uppercase, letter-spacing:.08em, accent color.
NEVER a "hanging" two-column section head — eyebrow/label in a LEFT column, heading in a RIGHT column. Stack eyebrow → heading → subhead VERTICALLY in one column. The tag-left / heading-right split is one of the most reliable AI-templated tells.
Paragraph measure ≤ 65ch (max-width:62ch). Sentence case headings, not Title Case. No orphan single-word last lines on display text (text-wrap:balance).
Mix weights (500/600/700), not just bold; consider an italic accent word in a display heading for editorial direction.

4. Color & surface discipline

ONE OR TWO accents — and USE them. Everything saturated routes through var(--accent) / var(--accent-soft) (and, for a bolder two-color brand, an optional var(--accent-2) / var(--accent-2-soft) as a complementary or contrast hue); neutrals via var(--ink), var(--mute), var(--paper), var(--cream), lines via var(--line). Discipline means stay ON these tokens with high contrast — it does NOT mean a near-white page with one tiny accent button (that's the "1 màu" monotone failure). Paint section bands with the accent / accent-2 / accent-soft / cream / a dark accent-ink band, and color headings/eyebrows/CTAs. Just don't invent a THIRD accent role or hard-code hex (the lint rejects literals anyway).
No purple-blue "AI gradient". If a gradient is needed, keep it within one hue (accent → transparent), or blend accent → accent-2 for a branded duotone, or use a soft radial tint, plus imagery.
Depth without noise: prefer a 1px var(--line) border OR a soft tinted shadow OR a background tint shift — not all three on one card.
Dark band sections are fine (1 per page max) — use the accent-ink/ink token family, and verify text contrast on it.
Accent DISCIPLINE — don't box the chrome in accent. The accent FILL (bg-accent / a solid pill) is for the ONE primary CTA + active/selected/hover states — NOT a background box behind every nav link, the logo, or each eyebrow. Plain nav links sit directly on the header in its foreground color (light text on a dark header, text-ink on a light header); hover = a color/underline change, not a permanent fill. A whole nav row of accent pills (or a logo pill) makes everything shout and kills the CTA's emphasis — spend the accent in ONE place per view.
On a DARK surface (dark header/band, bg-ink, a dark --paper): body + nav + labels use the LIGHT foreground token (text-ink where ink is light, or text-paper/white on bg-ink) — never a dark ink (--accent-ink) as body/link text, and never a mid-tone accent as body on a dark --accent-soft (it vanishes).
Contrast has NUMBERS, not vibes (§G.1, measured by the platform's checks): body/small text ≥ 4.5:1, large headings (≥24px, or bold ≥19px) ≥ 3:1 against the background BEHIND them. --ink on --paper/--cream and --accent-ink on --accent must each pass 4.5:1; --mute is microcopy-only (≥3:1 on --paper). This floor holds in BOTH directions — light-on-dark and dark-on-light.
Fonts follow §G.1's bans: never the Fraunces + Space Grotesk cliché pairing, never Inter/Poppins/Montserrat/DM Sans/Sora/Plus Jakarta Sans/Space Grotesk as the DISPLAY face by default — pick a distinctive display family (with the store's language subset) and pair it with a quieter body face.

5. Imagery

Real photos per §C (Pexels search terms = subject + treatment, in English). Match the direction: industrial = wide desaturated shots; food = close-up warm. Don't mix obviously different photo treatments on one page.
Crop intentionally: aspect-ratio boxes (16/10, 4/5) with object-fit:cover; vary the ratio across a page instead of all-16/9.
Image-light pages need texture: a tinted band, an oversized outlined numeral/keyword behind content (low-opacity, aria-hidden), or a thin accent rule — not flat text-on-white for six sections straight.

6. Motion — the built-in `data-anim` convention (GSAP)

The web theme runtime auto-wires scroll reveals; NEVER inline <script src> GSAP into a section (it ships once at theme level). Just mark elements:

data-anim="fade-up" (default) | fade-in | slide-left | slide-right | zoom — reveals once when scrolled into view.
data-anim-stagger="0.08" on a CONTAINER → its direct children cascade in.
data-anim-delay="0.15" for secondary elements (subcopy after heading). Restraint rules: 1–2 effect kinds per page; hero gets the richest entrance (heading fade-up + media zoom); lists/grids use container stagger; body prose gets NOTHING. prefers-reduced-motion and no-JS fallbacks are handled by the runtime — never re-implement them. Custom GSAP timelines in a section are a LAST resort (window.gsap is available after theme.js loads) — guard with if (window.gsap).

Signature interactions (build-time twin of shop-design-concept §2.5) — the approved mockup often carries these; the BUILT sections must keep them at the same richness, not flatten them to static bands. Where the content calls for it, use: a carousel / horizontal-scroll row via CSS scroll-snap (overflow-x-auto snap-x snap-mandatory + snap-start shrink-0 cards — no JS, never breaks page width); hover-reveal / flip cards (a group wrapper + group-hover: caption slide/overlay); sticky/pinned columns; a marquee logo strip; count-up stats (organic numbers); accordion/tabs for specs and FAQs. Pick 2–4 per page, matched to the direction from §1 — and if the mockup shows one, porting it is NOT optional (§B: the mockup is the spec).

7. Anti-slop checklist (run before §D verify)

No page of stacked equal-card grids; layout rhythm varies section to section.
Every row of repeated items is an even set: balanced copy length, equal card heights with aligned footers, no title broken mid-word, no ragged last card.
Headings use the display font + tight tracking; ≥3 type levels per section; body measure ≤65ch.
One accent color; no purple-blue gradient; surfaces use the token tints.
Real, specific copy in the merchant's language (no lorem, no "Elevate/Seamless/Unleash"-style filler, no exclamation marks in UI). Numbers look organic (12+ years, 4,800+ trips), not 100%/99.99%.
Hover/active states on every interactive element (background shift or translateY, 200ms transition); focus styles intact.
data-anim applied with restraint; hero has an entrance; nothing animates below-the-fold body text.
Responsive pass per §L at desktop + TABLET (≤1024px) + mobile: no overflow at any width, grids step 3-4→~2→1 cols (no orphan col on tablet), paddings compress (--section-y scales), burger nav works.
Every visual choice survives a merchant palette change (tokens only).

shop-design-taste

0. ONE design system, settings-driven — the consistency contract (read first)

Every section on the store is the SAME design language. Don't let any one drift:

Same tokens everywhere — colors var(--accent/--ink/--paper/--line…) or the token utilities bg-accent/text-ink/bg-paper/border-line, fonts var(--font-display/--font-sans) or font-display/font-sans. A section with an off-palette color or a different font is wrong. Every visual choice must survive a merchant palette change (tokens only — never a literal hex/font, and never a default-palette utility like bg-blue-600, §G/§G.2).
Same rhythm & detail values — section padding var(--section-y) / py-section, gutters var(--gutter) / px-gutter, radius var(--radius/-lg) / rounded-lg, borders 1px var(--line) / border border-line. Don't invent ad-hoc padding:37px / border:2px #ccc / p-[37px] per section — pull from the tokens or the standard Tailwind scale (or the section's Style-group settings, below) so spacing, corners and borders are uniform site-wide.
Same component anatomy across pages — a "related products" row on the PDP, a "you may also like" on the cart, and a "related posts" strip in the blog must share the SAME card style (image ratio, padding, title size, border/shadow, hover). Reuse the base data sections (product-blocks, new-arrivals) rather than re-styling a near-duplicate; a blog related-strip styled differently from the PDP related row is a defect.
Expose + honor the canonical Style group (§F) on every section — bg_color, text_color, padding_top/padding_bottom, border_color/border_width/border_radius — and DEFAULT each from the token (e.g. padding: {{ section.settings.padding_top | default: 'var(--section-y)' }}). So the look is both consistent AND merchant-editable; text padding, borders and spacing are settings, not baked literals.

1. Infer a direction before styling anything

2. Layout variance — kill the default grid

The #1 AI tell is "three equal cards, centered, repeat". Per page, vary the recipe:

Alternate section rhythms: full-bleed hero → asymmetric 2-col (60/40, image offset) → stat strip → zig-zag feature rows (image left, then right) → bento grid (one 2×2 cell + small cells) → wide CTA band.
Use AT MOST one equal-card grid per page; lists of 4+ items prefer zig-zag, bento, or a single row with a horizontal scroll on mobile.
Break symmetry deliberately: offset a heading column left while content sits right; let one image bleed off the container edge (negative margin); overlap a card onto the previous section (margin-top: -3rem).
⚠️ Overlap is DECOR-ONLY — it must NEVER cover functional text. An oversized display numeral/keyword may sit BEHIND content only at low opacity (aria-hidden). A stat's big number and its caption/label each get their own RESERVED space: size the box to the glyph's real line-height and let the caption flow BELOW it in normal document flow — never absolute-position or negative-margin a display numeral so it swallows the label/caption/body line beside it. If the number and its caption visually collide at any viewport, the layout is wrong — stack them with real spacing.
Section padding comes from var(--section-y) — don't stack two padded sections of the same background color without a divider, tint shift (var(--cream) vs var(--paper)), or overlap.

2b. THE SECTION LAYOUT LIBRARY — the world's section patterns, use them

HEROES (pick a SHAPE, not just a photo+headline):

Split-screen — hard 50/50 or 60/40; type block one side, full-bleed media the other; grid md:grid-cols-2 min-h-[90vh].
Full-bleed cinematic — media edge-to-edge, one statement, scroll cue; dark scrim for legibility.
Editorial masthead — huge display line over a ruled grid; eyebrow/dateline; asymmetric columns under.
Offset asymmetric — headline pushed to one column, media bleeding off the opposite edge (negative margin).
Collage/layered — 2-3 overlapping images, slight rotate, floating badge; z-layers, DECOR only over media.
Type-only manifesto — font-size:clamp(3rem,10vw,9rem); line-height:.95, zero/tiny imagery, maybe an outlined word.
Product-centered spotlight — one large centered subject; orbiting labels/stats pinned around it.
Marquee hero — kinetic repeated headline band(s) as the device; content sits between bands.
Stacked magazine cover — centered masthead, cover image below, a credits/specs row like a printed cover.
Grid-peek — hero text, then the content grid PEEKS above the fold (top halves of cards visible).
Diagonal split — a hard diagonal divides color-block from media (clip-path: polygon(...)).
Framed poster — a thick inset border/frame around the viewport; hero composed inside like print.
Video wall — bg video + oversized OUTLINED type (-webkit-text-stroke), tiny UI elsewhere.
Sidebar hero — brand/nav in a sticky side rail (desktop), hero fills the remaining column.

FEATURE / SERVICE / CONTENT sections:

Zig-zag rows — media/text alternating sides; vary media size between rows.
Bento — mixed tile sizes (2x2 feature + small tiles); tiles differ in CONTENT TYPE (stat, quote, image, list).
Numbered index — 01/02/03 ruled full-width rows; hover reveals a floating image; great for services/menu.
Sticky-media split — media column position:sticky while text steps scroll past it.
Horizontal snap rail — overflow-x-auto snap-x cards with edge peek; arrows optional.
Tabbed panels — segmented control swaps content in place (schedule days, service groups).
Accordion + media — expanding rows left, media swaps right on open.
Overlap cards — cards straddle a full-bleed band boundary (margin-top:-4rem).
Masonry/broken grid — varied heights via grid-auto-flow:dense + row spans.
Timeline spine — a connected vertical/horizontal line with nodes; process/history.
Full-bleed bands — each item its own edge-to-edge tinted band; alternate cream/paper/dark.
Icon matrix + featured cell — a tight grid of small tiles where ONE is enlarged as the lead.
Comparison split — two columns contrasted (before/after, us/them, plan A/B) with a center rule.
Diorama hotspots — one wide scene image; absolutely-positioned callout dots with labels.

PAGE RHYTHM RULES (hard):

≥4 DISTINCT archetypes per page; adjacent sections never share archetype OR background tint.
At most ONE plain equal-card grid per page — every other list uses an archetype above.
Alternate contained ↔ full-bleed, light ↔ dark/tinted, symmetric ↔ asymmetric down the page.
Sub-pages must NOT clone the homepage's section shapes — same tokens/fonts, DIFFERENT archetypes.

Repeated items must be EQUAL & BALANCED (the uneven-content trap)

No AI-tell copy or chrome — this is what makes a build scream "made by AI". Write like the real business, not like a generic AI landing-page template. BANNED unless it is the merchant's OWN real wording:
- Buzzword eyebrow/pill badges: "Next-gen / new-generation …", "AI-powered", "Powered by AI", "The future of …", "Revolutionary", "Reimagined", a lone "✨ AI" chip. An eyebrow labels the section topic in the brand's plain words ("Book a table", "Services" — in the site's language) — it is NOT a hype sticker.
- Empty hype superlatives in headlines/subcopy: "unleash / supercharge / elevate / seamless / game-changing / cutting-edge / effortless / transform your …", and the template hero "Build/Create X faster than ever with AI". Write a concrete, specific headline about what the business actually does.
- Decorative sparkles / "AI glow": no ✨ or sparkle-star icon as ornament on buttons, eyebrows, or headings (also an emoji-rule FAIL). Icons must be meaningful pictographs, not AI garnish.
- The chatbot-prompt placeholder cliché: an input whose placeholder is "Try: … / e.g. … / Ask anything …" next to a sparkle — do NOT put this on a normal business site. Only a site that GENUINELY is an AI chat/generator product may have a prompt box, and even then label it in the brand's plain voice. Litmus test: if the same line could sit on ANY AI startup's page unchanged, rewrite it to name this business's real offer.
Balance the copy you write first. You author the text, so make siblings comparable: titles ≈ same length (cap ~2–3 words / one line), bodies within ±1 line of each other. Never pair a 2-word stub next to a 20-word paragraph — even the wording out. This is the root cause; fix it before any CSS.
Equal height + aligned footers. Make each card display:flex; flex-direction:column; height:100% and pin its CTA/footer with margin-top:auto, so every card matches height and every button sits on one baseline. Let the grid stretch siblings (default align-items:stretch); never set fixed pixel heights.
Never break a word mid-way. A title splitting as "Configurati/on" is broken. No word-break:break-all; let long words wrap at spaces, and if one long word is too wide shrink the title with clamp(), add text-wrap:balance or hyphens:auto, or widen the column.
Reserve line counts. Give repeated titles a fixed line budget (min-height for ~2 lines or -webkit-line-clamp:2) and clamp variable bodies to a set number of lines, so a 1-line vs 2-line title doesn't misalign the icons/text/CTAs below across the row.
One media aspect. Every thumbnail in the set shares ONE aspect-ratio box + object-fit:cover; same icon size, padding, gap, and text alignment on every sibling.

3. Typography carries the design

Scale: display headings clamp(2.2rem, 5vw, 3.8rem) with line-height:1.1 and slight negative tracking (letter-spacing:-0.02em); section headings ~1.8–2.2rem; body 1rem/1.6–1.75. Use var(--font-display) for headings, var(--font-sans) for body — NEVER hard-code a family.
Hierarchy needs ≥3 distinct type levels per section (e.g. heading → subhead → body, or a big display number → label → note) — but do NOT achieve it with an eyebrow on every section. Eyebrows are default-OFF: use one ONLY where the section is genuinely numbered/chaptered or needs a kicker (aim ≤2–3 per page); an eyebrow on every section is a templated tell. Eyebrow style when used: 12–13px, uppercase, letter-spacing:.08em, accent color.
NEVER a "hanging" two-column section head — eyebrow/label in a LEFT column, heading in a RIGHT column. Stack eyebrow → heading → subhead VERTICALLY in one column. The tag-left / heading-right split is one of the most reliable AI-templated tells.
Paragraph measure ≤ 65ch (max-width:62ch). Sentence case headings, not Title Case. No orphan single-word last lines on display text (text-wrap:balance).
Mix weights (500/600/700), not just bold; consider an italic accent word in a display heading for editorial direction.

4. Color & surface discipline

ONE OR TWO accents — and USE them. Everything saturated routes through var(--accent) / var(--accent-soft) (and, for a bolder two-color brand, an optional var(--accent-2) / var(--accent-2-soft) as a complementary or contrast hue); neutrals via var(--ink), var(--mute), var(--paper), var(--cream), lines via var(--line). Discipline means stay ON these tokens with high contrast — it does NOT mean a near-white page with one tiny accent button (that's the "1 màu" monotone failure). Paint section bands with the accent / accent-2 / accent-soft / cream / a dark accent-ink band, and color headings/eyebrows/CTAs. Just don't invent a THIRD accent role or hard-code hex (the lint rejects literals anyway).
No purple-blue "AI gradient". If a gradient is needed, keep it within one hue (accent → transparent), or blend accent → accent-2 for a branded duotone, or use a soft radial tint, plus imagery.
Depth without noise: prefer a 1px var(--line) border OR a soft tinted shadow OR a background tint shift — not all three on one card.
Dark band sections are fine (1 per page max) — use the accent-ink/ink token family, and verify text contrast on it.
Accent DISCIPLINE — don't box the chrome in accent. The accent FILL (bg-accent / a solid pill) is for the ONE primary CTA + active/selected/hover states — NOT a background box behind every nav link, the logo, or each eyebrow. Plain nav links sit directly on the header in its foreground color (light text on a dark header, text-ink on a light header); hover = a color/underline change, not a permanent fill. A whole nav row of accent pills (or a logo pill) makes everything shout and kills the CTA's emphasis — spend the accent in ONE place per view.
On a DARK surface (dark header/band, bg-ink, a dark --paper): body + nav + labels use the LIGHT foreground token (text-ink where ink is light, or text-paper/white on bg-ink) — never a dark ink (--accent-ink) as body/link text, and never a mid-tone accent as body on a dark --accent-soft (it vanishes).
Contrast has NUMBERS, not vibes (§G.1, measured by the platform's checks): body/small text ≥ 4.5:1, large headings (≥24px, or bold ≥19px) ≥ 3:1 against the background BEHIND them. --ink on --paper/--cream and --accent-ink on --accent must each pass 4.5:1; --mute is microcopy-only (≥3:1 on --paper). This floor holds in BOTH directions — light-on-dark and dark-on-light.
Fonts follow §G.1's bans: never the Fraunces + Space Grotesk cliché pairing, never Inter/Poppins/Montserrat/DM Sans/Sora/Plus Jakarta Sans/Space Grotesk as the DISPLAY face by default — pick a distinctive display family (with the store's language subset) and pair it with a quieter body face.

5. Imagery

Real photos per §C (Pexels search terms = subject + treatment, in English). Match the direction: industrial = wide desaturated shots; food = close-up warm. Don't mix obviously different photo treatments on one page.
Crop intentionally: aspect-ratio boxes (16/10, 4/5) with object-fit:cover; vary the ratio across a page instead of all-16/9.
Image-light pages need texture: a tinted band, an oversized outlined numeral/keyword behind content (low-opacity, aria-hidden), or a thin accent rule — not flat text-on-white for six sections straight.

6. Motion — the built-in `data-anim` convention (GSAP)

The web theme runtime auto-wires scroll reveals; NEVER inline <script src> GSAP into a section (it ships once at theme level). Just mark elements:

data-anim="fade-up" (default) | fade-in | slide-left | slide-right | zoom — reveals once when scrolled into view.
data-anim-stagger="0.08" on a CONTAINER → its direct children cascade in.
data-anim-delay="0.15" for secondary elements (subcopy after heading). Restraint rules: 1–2 effect kinds per page; hero gets the richest entrance (heading fade-up + media zoom); lists/grids use container stagger; body prose gets NOTHING. prefers-reduced-motion and no-JS fallbacks are handled by the runtime — never re-implement them. Custom GSAP timelines in a section are a LAST resort (window.gsap is available after theme.js loads) — guard with if (window.gsap).

7. Anti-slop checklist (run before §D verify)

No page of stacked equal-card grids; layout rhythm varies section to section.
Every row of repeated items is an even set: balanced copy length, equal card heights with aligned footers, no title broken mid-word, no ragged last card.
Headings use the display font + tight tracking; ≥3 type levels per section; body measure ≤65ch.
One accent color; no purple-blue gradient; surfaces use the token tints.
Real, specific copy in the merchant's language (no lorem, no "Elevate/Seamless/Unleash"-style filler, no exclamation marks in UI). Numbers look organic (12+ years, 4,800+ trips), not 100%/99.99%.
Hover/active states on every interactive element (background shift or translateY, 200ms transition); focus styles intact.
data-anim applied with restraint; hero has an entrance; nothing animates below-the-fold body text.
Responsive pass per §L at desktop + TABLET (≤1024px) + mobile: no overflow at any width, grids step 3-4→~2→1 cols (no orphan col on tablet), paddings compress (--section-y scales), burger nav works.
Every visual choice survives a merchant palette change (tokens only).

shop-design-taste

0. ONE design system, settings-driven — the consistency contract (read first)

1. Infer a direction before styling anything

2. Layout variance — kill the default grid

2b. THE SECTION LAYOUT LIBRARY — the world's section patterns, use them

Repeated items must be EQUAL & BALANCED (the uneven-content trap)

3. Typography carries the design

4. Color & surface discipline

5. Imagery

6. Motion — the built-in data-anim convention (GSAP)

7. Anti-slop checklist (run before §D verify)

shop-design-taste

0. ONE design system, settings-driven — the consistency contract (read first)

1. Infer a direction before styling anything

2. Layout variance — kill the default grid

2b. THE SECTION LAYOUT LIBRARY — the world's section patterns, use them

Repeated items must be EQUAL & BALANCED (the uneven-content trap)

3. Typography carries the design

4. Color & surface discipline

5. Imagery

6. Motion — the built-in data-anim convention (GSAP)

7. Anti-slop checklist (run before §D verify)

6. Motion — the built-in `data-anim` convention (GSAP)

6. Motion — the built-in `data-anim` convention (GSAP)