--- version: alpha name: melt-design description: "A warm cream canvas (#fff7ef) with deep chocolate ink (#3d2a20), a terracotta coral (#c94327) and a deep pistachio green (#2f6b4c) as the two brand accents. Fredoka carries every headline at weight 600, round and full; Inter carries anything meant to be read quickly. The homepage's hero is one cone, actually being built, scoop by scoop, as you scroll." --- ## Brand Positioning Melt exists because gelato shop sites either go full artisanal-italic-script cliché or full ice-cream-truck primary-color chaos, and neither is what gelato actually is: a specific, denser, less-aerated product that behaves differently from ice cream, made by people who care about that difference. So the homepage's hero is one cone, actually built in front of you, scoop by scoop, in the real order a counter person would stack it, not four static product photos. If a component can't be traced to a real flavor, a real ingredient, or a real fact about how gelato is made, it doesn't belong here. colors: accent: "#c94327" accent-alt: "#2f6b4c" ink: "#3d2a20" ink-muted: "#7a5c4e" canvas: "#fff7ef" ## Logo / Wordmark System The mark is a single scoop on a cone, drawn as two shapes: a rounded-top circle (the scoop) sitting in a downward wedge (the cone), with one short horizontal drip line at the scoop's base, the moment right before it starts to run. It is not a generic ice-cream-cone emoji shape, the drip is specific: it's there because the brand is named for it. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then "Melt" in Fredoka 600, mark always left of the wordmark. - **Minimum size**: mark not smaller than `18px` tall, below that the drip line disappears into the cone outline. Wordmark not smaller than `0.9rem`. - **Clearspace**: empty margin equal to the mark's own height on all four sides. - **Don't**: don't drop the drip line, without it the mark is a generic cone icon, not this brand's own. Don't recolor the scoop, it's always `--accent`. Don't add a second scoop to the mark, one scoop, the homepage's own stack is where multiples happen. Don't use it as a bullet or divider. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#fff7ef` | Page background | | Surface | `--panel` | `#fffbf6` | Nav, flavor cards, form fields | | Surface raised | `--raised` | `#ffece0` | Hover state, input focus fill | | Border | `--border` | `#ffdec8` | Card edges, dividers, input outlines | | Ink | `--ink` | `#3d2a20` | Primary text, headlines | | Ink muted | `--dim` | `#7a5c4e` | Secondary text, meta lines, placeholders | | Coral | `--accent` | `#c94327` | Primary button fill, focus ring, the mark's scoop, "in stock" | | Pistachio | `--accent-alt` | `#2f6b4c` | Secondary confirmations, "seasonal" status | **The four scoops in the hero are illustrative, not tokens**, the same exception Harborview's sky and Pearl & Pop's drinks already establish for this gallery: pistachio, strawberry, lemon, and chocolate are real, specific gelato colors, not a brand color describing itself. `--accent` and `--accent-alt` never appear inside a scoop. ### Contrast (computed from the hex values above via WCAG relative luminance, this is a warm cream canvas, every pairing below is text-on-light) | Pairing | Ratio | Passes | |---|---|---| | `--ink` on `--bg` | 12.77:1 | AAA | | `--dim` on `--panel` | 5.88:1 | AA | | `--dim` on `--raised` | 5.28:1 | AA | | `--accent` on `--panel` | 4.72:1 | AA | | `--accent-alt` on `--panel` | 6.12:1 | AA | | white label on `--accent` fill | 4.87:1 | AA | | white label on `--accent-alt` fill | 6.31:1 | AA | | `--ink` label on `--accent` fill | untested, don't use | Fill labels are always white here, not `--ink`, both accents are dark enough that white clears AA cleanly, matching Tumble Town's rule, not Pearl & Pop's | Every palette in this batch computes its own fill/label rule rather than assuming one, this is the third distinct answer in four systems: Second Hand and Rink & Roll use `--bg`-dark labels (dark-canvas convention), Pearl & Pop uses `--ink`-dark labels on a light canvas because its accents are too light-toned for a white label, and Melt and Tumble Town use white labels on a light canvas because their accents are dark enough to carry it. Read the computed numbers before assuming which one applies. typography: display: fontFamily: Fredoka fontWeight: 600 body: fontFamily: Inter fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.25rem, 5.5vw, 3.75rem)` | 600 | Fredoka | 1.1 | 0 | Homepage H1 only | | `--text-h2` | `1.5rem` | 600 | Fredoka | 1.2 | 0 | Section headings | | `--text-h3` | `1.15rem` | 600 | Fredoka | 1.25 | 0 | Flavor names | | `--text-body` | `1rem` | 400 | Inter | 1.65 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Inter | 1.5 | 0 | Nav, footer, helper text, meta lines | | `--text-label` | `0.75rem` | 600 | Inter | 1 | 0.06em, uppercase | Kickers, badges, form labels | Same rule as every other display/body pairing in this gallery: Fredoka's round terminals carry headlines and flavor names, the moments meant to feel full and soft, Inter carries anything read as a sentence or clicked as a control, including ingredient lists, which need to be scanned accurately. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape `--radius: 18px` on cards, panels, and inputs. `--radius-pill: 999px` on buttons and badges. Round enough to echo a scoop without every element literally being a circle. ## Iconography No icon library. The only non-text graphics are the logo mark and the hero's own cone-and-scoops stack (hand-built). Allergen notes are plain text ("contains dairy, contains nuts"), not icon badges, a misread icon is a worse failure mode than a sentence. ## Motion Principles One cone is built from the bottom up as you scroll: four scoops drop into place in sequence, each one's own local progress window fading and sliding down from above into its resting position on the stack. The moment a scoop lands, that flavor's card slides in below. This uses the same overlapping-window technique as Second Hand, Pearl & Pop, and Rink & Roll (see those systems for the pattern), arranged as one vertical stack instead of four side-by-side elements, because a real scoop stack is built vertically, one on top of the last. One-shot reveal, nothing loops, every flavor is written out in plain markup at all times regardless of scroll or script state. Scroll trigger bounds checked to verify `0` progress at scroll position `0`. `prefers-reduced-motion: reduce` renders the full four-scoop stack already built and every card already visible. ## Voice & Tone Quietly confident, specific about ingredients and process, a little dry about the "melt" premise. In practice: - **Button label**: "Order a cup", not "Treat yourself to happiness!" - **Flavor description**: "Real pistachios, not almond-and-green-dye. Churns denser than ice cream, less air, so it melts slower than you'd expect.", not "A nutty delight!" - **Allergen note**: "Contains dairy and tree nuts, made in a kitchen that also handles peanuts.", not a vague "may contain allergens" - **Empty state**: "Nothing on the counter right now, back in about twenty minutes.", not "Oops, all out!" ## Accessibility Baseline - Focus ring: `2px solid var(--accent)`, `2px` offset, applied via `:focus-visible` on every interactive element. - Reduced motion: every scoop drop and card reveal checks `prefers-reduced-motion: reduce` and renders the finished state immediately. - Minimum tap target: `44px` in the smallest dimension for every button and input. - Color is never the only signal: a seasonal flavor's badge pairs "Seasonal" with the word, never color alone. - Every flavor the scoop stack can reveal is also written out in plain markup at all times, see Motion Principles. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: the mark + wordmark lockup. Right: a "Flavors" link plus one primary button ("Order a cup"). ### Buttons Three variants, one radius (`--radius-pill`): - **Primary**: `--accent` fill, white label, used once per view for the real action ("Order a cup"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. - **Ghost**: text-only, `--dim` label, `--ink` on hover. All variants define `:hover`, `:active` (`transform: scale(0.97)`), `:disabled` (`opacity: .45`), and `:focus-visible`. ### The stack (signature interaction) Documented in full under Motion Principles. Structurally: one cone SVG shape and four scoop circles stacked directly above it, each scroll-driven from `opacity: 0`/offset-above to resting in place, in sequence, permanently stacked once landed. ### Flavor card A flat `.panel`: `--panel` background, `1px solid --border`, `--radius`, no shadow. Holds the flavor name (Fredoka), a real ingredient-and-process description, an allergen note, and an availability badge. Revealed by its scoop landing above, present in the DOM at all times. ### Badge `--radius-pill`, `1px solid` the semantic color, semantic-color text on transparent fill: `--accent` for "In stock," `--accent-alt` for "Seasonal." Never filled solid. ### Footer One row: shop name/tagline on the left, real page links on the right (Flavors, back to gallery). ## Do's and Don'ts ### Do - Let the stack build bottom-up, one scoop at a time, the real order a counter person builds a cone in. - Use each flavor's own real color inside its scoop, never `--accent`/`--accent-alt`. - Label any accent-filled surface in white, both accents are dark enough to carry it here, see Contrast. - Write every flavor the stack can reveal into plain markup at all times. - Keep allergen and ingredient copy specific and real, never a vague disclaimer. ### Don't - Don't use italic artisanal script anywhere, Fredoka's round weight carries the warmth instead. - Don't fill a scoop with the brand's own accent color, that's a UI color describing itself, not the flavor. - Don't add a cartoon mascot or a melting-face graphic, the real stack and real copy carry the brand. - Don't replay the stack-building animation on every scroll pass, it plays once, like a cone actually being built. - Don't invent a third accent for a flavor state, "in stock" and "seasonal" are the only two, reuse coral/pistachio by role. ## Known Constraints - Two routes exist (homepage, flavors). There is no checkout and no authenticated state, "Order a cup" is not wired to anything real, this is a concept demo. - The stack holds exactly four scoops because that's the current homepage lineup. A fifth flavor means a fifth scoop on the shared stack, not a separate list. - No responsive breakpoint table beyond a single-column mobile collapse of the stack and flavor cards. ## Process Built through the impeccable-audited anti-slop workflow: never-list written before any HTML, page structure derived from the signature interaction (one real cone, actually built) rather than a template, mechanical detector run clean, and the scroll trigger's start/end bounds checked to verify `0` progress at scroll position `0` before this system was considered done.