--- version: alpha name: confetti-club-design description: "A near-white canvas (#fffdfa) with near-black ink (#1c1a24), a rose pink (#d42a7d) and a violet purple (#7c3aed) as the two brand accents. Lilita One carries every headline as a full poster-weight shout, Inter carries anything meant to be read quickly. The homepage's hero is one balloon arch, actually inflating, four balloons popping into place in a real rainbow sequence as you scroll." --- ## Brand Positioning Confetti Club installs balloon arches and full-room decor for events, and it exists because most party-decor sites either drown a real, skilled installation trade under stock clip-art balloons and confetti GIFs, or overcorrect into a sterile "premium event styling" tone that hides what the company actually does. Confetti Club's bet: be loud about the thing itself, an actual arch, actually inflating, in real colors, and be plain and specific about scope everywhere else ("we only do the big stuff," a real price, a real lead time). If a component performs "celebration" without being tied to a real install, a real price, or a real balloon, it doesn't belong here. colors: accent: "#d42a7d" accent-alt: "#7c3aed" ink: "#1c1a24" ink-muted: "#5c5866" canvas: "#fffdfa" ## Logo / Wordmark System The mark is three balloons of decreasing size, tied to one knot at the base, the exact cluster shape used at the start of every real arch this company installs. It is not a single balloon or a party-popper icon, it's a literal miniature of the install technique. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then "Confetti Club" in Lilita One, mark always left of the wordmark. - **Minimum size**: mark not smaller than `18px` tall, below that the three balloons merge. Wordmark not smaller than `0.9rem`. - **Clearspace**: empty margin equal to the mark's own height on all four sides. - **Don't**: don't recolor the balloons, front-center is always `--accent`, left is always `--accent-alt`, right stays an outline, never a third fill color. Don't drop the knot, without it the mark is three floating circles, not a cluster. Don't use it as a bullet or divider. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#fffdfa` | Page background | | Surface | `--panel` | `#ffffff` | Nav, package cards, form fields | | Surface raised | `--raised` | `#faf3f8` | Hover state, input focus fill | | Border | `--border` | `#f0dce8` | Card edges, dividers, input outlines | | Ink | `--ink` | `#1c1a24` | Primary text, headlines | | Ink muted | `--dim` | `#5c5866` | Secondary text, meta lines, placeholders | | Rose | `--accent` | `#d42a7d` | Primary button fill, focus ring, the mark's center balloon, "available" status | | Violet | `--accent-alt` | `#7c3aed` | Secondary confirmations, the mark's left balloon, "custom quote" status | **The arch's four balloons are illustrative, not tokens**, the same exception every other system in this five-part batch already establishes: a real balloon arch is a real rainbow, not a two-color UI gradient wearing balloon shapes. `--accent` and `--accent-alt` never appear as balloon 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` | 16.92:1 | AAA | | `--dim` on `--bg` | 6.8:1 | AA | | `--accent` on `--bg` (links, status) | 4.67:1 | AA | | `--accent-alt` on `--bg` (links, status) | 5.61:1 | AA | | white label on `--accent` fill | 4.74:1 | AA | | white label on `--accent-alt` fill | 5.7:1 | AA | Both accents clear AA as text on canvas and as a fill with a white label, no separate text-safe tint tier needed here, closer to Tumble Town and Melt's answer than Pearl & Pop's. A filled accent surface always labels itself in white, never `--ink`, matching the rest of this batch's light-canvas systems that computed the same way. typography: display: fontFamily: Lilita One fontWeight: 400 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)` | 400 | Lilita One | 1.1 | 0 | Homepage H1 only | | `--text-h2` | `1.5rem` | 400 | Lilita One | 1.2 | 0 | Section headings | | `--text-h3` | `1.15rem` | 400 | Lilita One | 1.25 | 0 | Package 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 | Lilita One is a poster-weight shout, one weight, always loud, reserved for the headline, section headings, and package names, the moments meant to be felt from across the room the way a real arch is. Inter carries anything read as a sentence or clicked as a control, including every price and every lead-time note, which need to be scanned accurately, not shouted. ## 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, badges, and the balloons themselves (a balloon is a circle, `--radius-pill` at a square aspect ratio reads as one). One scale, applied consistently, the loudness lives in color and type, not an inconsistent shape system. ## Iconography No icon library. The only non-text graphics are the logo mark and the hero's own arch (hand-built circles). Lead-time and scope notes are plain text, not a calendar or truck icon next to unrelated words. ## Motion Principles Scroll inflates a balloon arch: four balloons pop into place in sequence along a real arc path, each scaling from a point to full size with a slight overshoot (the "pop") as it lands, in its own real rainbow color. The moment a balloon lands, the install package it represents slides in below. One-shot reveal, nothing loops, every package 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 arch already inflated and every card already visible. ## Voice & Tone Confident, specific about scope and price, a little wry about what they don't do. In practice: - **Button label**: "Get a quote", not "Let's make magic happen!" - **Package description**: "12-foot arch, one color family, delivered and installed, torn down same night if it's an evening event.", not "A STUNNING statement piece!" - **Scope note**: "We only do the big stuff, arches, ceiling clusters, full-room installs. For a dozen balloons on a mailbox, a party store is cheaper and faster.", not silence about what's out of scope - **Empty state**: "No install slots left that weekend, the next one opens up in nine days.", not "So sorry, we're all booked!" ## Accessibility Baseline - Focus ring: `2px solid var(--accent-alt)`, `2px` offset, applied via `:focus-visible` on every interactive element. - Reduced motion: the balloon pop 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 package's badge pairs "Available" or "Custom quote" with the word, never color alone. - Every package the arch 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 "Packages" link plus one primary button ("Get a quote"). ### Buttons Three variants, one radius (`--radius-pill`): - **Primary**: `--accent` fill, white label, used once per view for the real action ("Get a quote"). - **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 arch (signature interaction) Documented in full under Motion Principles. Structurally: a dashed static arc path and four balloon circles positioned along it, each scroll-driven from `scale(0)`/`opacity: 0` to full size with a brief overshoot, in sequence. ### Package card A flat `.panel`: `--panel` background, `1px solid --border`, `--radius`, no shadow. Holds the package name (Lilita One), a real scope description, the price, and an availability badge. Revealed by its balloon 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 "Available," `--accent-alt` for "Custom quote." Never filled solid. ### Footer One row: company name/tagline on the left, real page links on the right (Packages, back to gallery). ## Do's and Don'ts ### Do - Let the arch be a real rainbow, not a two-token gradient wearing balloon shapes. - Say what the company doesn't do, right in the hero, a party store is cheaper for a dozen balloons on a mailbox. - Label any accent-filled surface in white, both accents are dark enough to carry it here. - Write every package the arch can reveal into plain markup at all times. - Give the "pop" a real overshoot, a balloon landing softly isn't a balloon landing. ### Don't - Don't use stock confetti GIFs, clip-art balloons, or a party-popper emoji anywhere. - Don't perform "magic" or "STUNNING" copy, name the actual size, color family, and price instead. - Don't replay the arch inflation on every scroll pass, it plays once, like a real install. - Don't invent a third accent for a package state, "available" and "custom quote" are the only two. ## Known Constraints - Two routes exist (homepage, packages). There is no checkout and no authenticated state, "Get a quote" is not wired to anything real, this is a concept demo. - The arch holds exactly four balloons because that's the current package lineup. A fifth package means a fifth balloon on the shared arch, not a separate list. - No responsive breakpoint table beyond a single-column mobile collapse of the arch and package 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 arch, actually inflating) 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.