---
version: alpha
name: sunsplit-design
description: "A warm cream canvas (#fffaf0) with dark-brown ink (#2b1d0f), a bright tangerine (#ff6a1a) and a kelly lime (#37a621) as the two brand accents, each paired with a darker text-safe tier for small text and links. Fredoka carries every headline, Inter carries anything meant to be read quickly. The homepage's hero is one shaved-ice mound, actually filling, four syrup flavors pouring into it in sequence as you scroll, in their own real color."
---

## Brand Positioning

Sunsplit runs a single shave-ice cart, and it exists because most frozen-treat sites either bury a genuinely simple, fast product under a wall of "artisanal small-batch" copy, or go full theme-park mascot and forget to say what's actually in the cup. Sunsplit's bet: show the ice actually filling with real syrup, in real color, and stay plain everywhere else, a real flavor list, a real price, a real line-wait estimate. If a component performs "tropical vacation" without being tied to a real flavor, a real price, or the ice itself, it doesn't belong here.

colors:
  accent: "#ff6a1a"
  accent-text: "#c23e00"
  accent-alt: "#37a621"
  accent-alt-text: "#1f7a12"
  ink: "#2b1d0f"
  ink-muted: "#6b5a45"
  canvas: "#fffaf0"

## Logo / Wordmark System

The mark is a single shave-ice cup in cross-section, the ice line drawn jagged (never smooth, real shaved ice is never a smooth dome), with one drip escaping the rim, the exact silhouette of the cart's own paper cup.

```svg
<svg width="22" height="24" viewBox="0 0 22 24" aria-hidden="true">
  <path d="M3 9 L19 9 L16 22 L6 22 Z" fill="none" stroke="var(--ink)" stroke-width="1.4" stroke-linejoin="round"/>
  <path d="M4.5 9 L7 5 L9.5 8 L12 4 L14.5 8 L17.5 9 Z" fill="var(--accent)"/>
  <circle cx="9" cy="11.5" r="1.6" fill="var(--accent-alt)"/>
  <circle cx="14" cy="13" r="1.3" fill="var(--accent-alt)"/>
  <path d="M16 22 L17 24" stroke="var(--accent)" stroke-width="1.4" stroke-linecap="round"/>
</svg>
```

- **Lockup**: mark, then a `0.5rem` gap, then "Sunsplit" in Fredoka, mark always left of the wordmark.
- **Minimum size**: mark not smaller than `18px` tall, below that the jagged ice line and the drip both read as noise.
- **Clearspace**: empty margin equal to the mark's own height on all four sides.
- **Don't**: don't smooth the ice line into a dome, that's a snow-cone competitor's shape, not this cart's. Don't drop the drip, without it the mark is just a cup. Don't recolor the ice line itself, it's always outlined in `--ink`, never filled.

## Color System

### Roles

| Role | Token | Value | Used for |
|---|---|---|---|
| Canvas | `--bg` | `#fffaf0` | Page background |
| Surface | `--panel` | `#ffffff` | Nav, flavor cards, form fields |
| Surface raised | `--raised` | `#fff1e0` | Hover state, input focus fill |
| Border | `--border` | `#f2ddc4` | Card edges, dividers, input outlines |
| Ink | `--ink` | `#2b1d0f` | Primary text, headlines |
| Ink muted | `--dim` | `#6b5a45` | Secondary text, meta lines, placeholders |
| Tangerine | `--accent` | `#ff6a1a` | Primary button fill (ink label), the mark's drizzle, "today" status |
| Tangerine text | `--accent-text` | `#c23e00` | Links, small accent text, focus states needing text-weight contrast |
| Lime | `--accent-alt` | `#37a621` | Secondary button fill (ink label), the mark's seeds, "in stock" status |
| Lime text | `--accent-alt-text` | `#1f7a12` | Secondary links, small accent text |

**The mound's four syrup stripes are illustrative, not tokens**, the same exception every other system in this batch already establishes: real shave-ice syrup is a real flavor color, mango orange, lime green, watermelon pink, blueberry violet, not a two-token gradient wearing a cup shape. `--accent` and `--accent-alt` never appear as syrup fills in the hero, they're reserved for the interface.

### Contrast (computed from the hex values above via WCAG relative luminance)

| Pairing | Ratio | Passes |
|---|---|---|
| `--ink` on `--bg` | 15.7:1 | AAA |
| `--dim` on `--bg` | 6.36:1 | AA |
| `--accent-text` on `--bg` (links) | 5.07:1 | AA |
| `--accent-alt-text` on `--bg` (links) | 5.24:1 | AA |
| `--ink` label on `--accent` fill | 5.7:1 | AA |
| `--ink` label on `--accent-alt` fill | 5.16:1 | AA |

Both raw accents are too bright to carry white text or to pass as body-size text directly on canvas, so this system needed the same three-tier answer Pearl & Pop's palette required: a bright illustrative/fill tone plus a separate darker text-safe tone, with fills always labeled in `--ink` rather than white. Confirms this is a genuine per-palette computation, not a copy-pasted answer, since Confetti Club's rose and violet landed on white-label-on-fill with no separate text tier at all.

typography:
  display:
    fontFamily: Fredoka
    fontWeight: 500
  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.1rem` | 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 |

Fredoka's rounded weight matches a paper cup and a plastic spoon, not a knife edge, reserved for headlines, section headings, and flavor names, the moments meant to feel handheld. Inter carries anything read as a sentence or clicked as a control, including every price and every wait-time note.

## 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: 16px` on cards, panels, and inputs. `--radius-pill: 999px` on buttons and badges. The mound itself is hand-drawn (a jagged path, not a border-radius shape), the only element in the system exempt from the two-shape scale, because shaved ice is never geometrically round.

## Iconography

No icon library. The only non-text graphics are the logo mark and the hero's own mound (hand-built SVG path). Wait-time and stock notes are plain text, not a clock or checkmark icon next to unrelated words.

## Motion Principles

Scroll pours syrup into a shave-ice mound: four flavors fill in sequence as horizontal color bands rising inside the mound's own jagged silhouette, each in its own real flavor color. The moment a band finishes rising, the flavor card it represents slides in below. 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 mound already full and every card already visible.

## Voice & Tone

Warm, plainspoken, a little proud of how fast the line moves. In practice:
- **Button label**: "See today's flavors", not "Escape to paradise!"
- **Flavor description**: "Mango, real puree, not syrup concentrate, tastes like the fruit.", not "A TROPICAL taste sensation!"
- **Wait note**: "Line's currently about six minutes, we make each cup to order.", not "Fast service guaranteed!"
- **Empty state**: "Watermelon's out for today, back Thursday.", not "Oops, out of stock!"

## Accessibility Baseline

- Focus ring: `2px solid var(--accent-alt-text)`, `2px` offset, applied via `:focus-visible` on every interactive element.
- Reduced motion: the syrup-fill sequence and every card reveal check `prefers-reduced-motion: reduce` and render the finished state immediately.
- Minimum tap target: `44px` in the smallest dimension for every button and input.
- Color is never the only signal: a flavor's badge pairs "In stock" or "Out today" with the word, never color alone.
- Every flavor the mound 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 ("See today's flavors").

### Buttons
Three variants, one radius (`--radius-pill`):
- **Primary**: `--accent` fill, `--ink` label, used once per view for the real action.
- **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 mound (signature interaction)
Documented in full under Motion Principles. Structurally: one jagged SVG path used as an outer clip, four colored `<rect>` bands scroll-driven from `height: 0` to their allotted band height in sequence, real flavor colors (mango, lime, watermelon, blueberry).

### Flavor card
A flat `.panel`: `--panel` background, `1px solid --border`, `--radius`, no shadow. Holds the flavor name (Fredoka), a real ingredient note, the price, and a stock badge. Revealed by its syrup band finishing above, present in the DOM at all times.

### Badge
`--radius-pill`, `1px solid` the semantic color, semantic-color text on transparent fill: `--accent-text` for "In stock," `--dim` for "Out today." Never filled solid.

### Footer
One row: cart name/tagline on the left, real page links on the right (Flavors, back to gallery).

## Do's and Don'ts

### Do
- Let the mound's syrup be a real flavor rainbow, not a two-token gradient wearing a cup shape.
- Keep the ice line jagged, never round it into a smooth dome.
- Label any accent-filled surface in `--ink`, both accents are too bright to carry white here.
- Write every flavor the mound can reveal into plain markup at all times.
- Say the real wait time, not a vague "fast service" claim.

### Don't
- Don't use a mascot, a beach scene, or a palm-tree icon anywhere.
- Don't perform "paradise" or "escape" copy, name the actual fruit and the actual price instead.
- Don't replay the syrup fill on every scroll pass, it plays once, like a real cup being made.
- Don't invent a third accent for a flavor state, "in stock" and "out today" are the only two.

## Known Constraints

- Two routes exist (homepage, flavors). There is no checkout and no authenticated state, "See today's flavors" and the order form are not wired to anything real, this is a concept demo.
- The mound holds exactly four syrup bands because that's the current flavor lineup for a given day. A fifth flavor rotates one out, it doesn't add a fifth band.
- No responsive breakpoint table beyond a single-column mobile collapse of the mound 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 mound, actually filling) 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.