Fizook Style Guide

1. Brand & Personality

Fizook flips the auction model on its head — vendors compete to lower their price for everyday meals. The product needs to feel alive, fast, and friendly: bidders are dropping prices in real time, and users should always feel they are catching a deal.

Personality pillars

• Energetic — saturated brand blue with a green "save" accent; pulses, flashes, drifting blobs, and falling-coin confetti reinforce momentum.
• Trustworthy — clean Inter sans-serif, generous whitespace, soft shadows. Money words (price, savings) are bold and unambiguous; tabular numerals lock digits in place so prices don't shimmy.
• Plain-spoken — short sentences, sentence case for body, action verbs on buttons. Never jargon.
• Mobile-first — every layout works at 360px wide and scales up; touch targets are at least 36 × 36 px.
• Ambient motion — gradient meshes drift, blobs float, sparkles shimmer. Motion is decorative and calm, never distracting. Always respects prefers-reduced-motion.

Voice in one line

2. Color Palette

Every color is defined as a CSS custom property on :root. Reference the token name (e.g. var(--primary)) — never hard-code the hex.

Brand & surface

⚠️ --surface-3 currently lives only in auction-details.html — it's a setup-flow extension for nested summary rows. Don't paint other pages with it unless the rest of the suite adopts the token.

Text

Semantic

Color usage rules

• Primary blue = identity + active CTA gradient.
• Success green = price drops, savings, "live" status, BEST DEAL.
• Danger red = auction ended, destructive actions, the "Live" word flash.
• Warn orange = paused state, mid-action toasts.
• Accent purple = standout secondary stat (Biggest savings); also one stop in nearly every brand gradient.

Gradient-accent palette (no token, used in compositions)

These hexes only appear inside gradients (hero banner, gradient text, scroll bar, animated held ring). They are not tokens — never reach for them in flat fills.

2b. Brand Gradients

Gradients are first-class brand assets in v3. Six canonical recipes show up across every page; pick the one that fits the surface and don't invent new ones.

Ambient mesh background

Page backgrounds use multi-layer radial gradients on body plus a slowly-drifting overlay on body::before (animated via fzMeshShift, 22 s loop). Replaces the old full-page background image — same depth, no asset weight.

/* body */
background:
  radial-gradient(900px 500px at 10% -10%, rgba(124,58,237,.10), transparent 60%),
  radial-gradient(900px 500px at 110% 0%, rgba(36,129,188,.12), transparent 60%),
  radial-gradient(700px 400px at 50% 110%, rgba(22,163,74,.06), transparent 70%),
  #f8fafc;
background-attachment: fixed;

Composite tints (for cards on the mesh)

• Status / feed cards — overlay radial-gradient(160% 80% at 0% 0%, rgba(36,129,188,.04), transparent 60%) to blend onto the mesh without flattening.
• Stat tiles — linear-gradient(180deg, rgba(36,129,188,.05), rgba(124,58,237,.05)) with a 14 % border tint.
• Feed-row hover — linear-gradient(90deg, rgba(36,129,188,.06), rgba(124,58,237,.06)) swept in plus a 2 px translateX.

Scroll-progress bar

Fixed 3-px stripe at the top of every page (z-index: 90). JS scales width from 0 % to 100 % as the user scrolls. Same gradient as the held-tray ring so the two read as a family.

3. Typography

Fizook uses Inter as the single UI typeface — loaded via Google Fonts at five weights (400 / 500 / 600 / 700 / 800). Code samples use JetBrains Mono. Set the base via the html, body font-family.

Font stack

font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

Weight scale

Type scale

Capitalization rules

• Title Case for buttons, statuses, and CTA copy ("Hold Offer", "Pick the Best Deal!").
• UPPERCASE + letter-spacing for tiny eyebrow labels (stat keys, ribbons, BEST DEAL).
• Sentence case for descriptions and toasts ("Auction reset", "You can hold at most 6 offers").

4. Spacing & Radius

Spacing follows multiples of 4 px. Radius is tokenized so cards, buttons, and pills feel consistent.

Border-radius tokens

Spacing rhythm

5. Shadows & Elevation

Three discrete elevation levels. Hover lifts elements by 1–4 px and bumps to the next shadow.

6. Buttons

All buttons use .btn as the base, then layer a variant. Border-radius is locked at 6 px. Padding is 10px 14px; icons live to the left with a 6 px gap.

Primary & success (CTAs)

Ghost (neutral actions)

Destructive

Disabled

Muted (series limit)

Success with shimmer sweep (v3)

In v3 the dock's Start button (and every btn-success on the marketing pages) gets a white-gradient gloss that sweeps left-to-right on hover via a ::after pseudo-element. Hover this to see it.

Light-on-dark ghost (over hero gradient)

btn-ghost-light replaces btn-ghost when the surface is dark (hero, final CTA, live-peek). 16 % white fill, 30 % white border.

Sizing

• Default — 10–11 px / 14–16 px padding, .88–.95 rem font.
• .btn-lg — 13 px / 20 px padding, 1 rem font. Used for hero CTAs.
• .btn-block — full-width inside its container; standard for the login form.

Social sign-in

Same base button, branded fill colors. Hover lifts 2 px and scales the icon 1.15.

7. Chips & Filters

Chips drive filter / sort selection. The active chip switches to the primary gradient. Same 6 px radius as buttons for visual consistency.

8. Form Controls

Inputs are minimal: 1 px border, 8 px radius, 8–10 px padding, white surface. No focus ring is custom-styled — rely on the browser's default outline.

9. Badges, Pills & Status

Tiny pills communicate state in-line: feed kind, savings, trend direction, ribbons. They share the 999 px pill radius.

Feed badges

Trend & savings pills

Ribbons

Live status indicator

The status text in the Fizook Auction card has four shapes — empty before first start, the running composition with a flashing red word + flashing red hand, paused, and the multi-part ended composition.

Headline stat tiles

10. Cards

Cards are the primary container pattern. White surface, 14 px radius, 1 px border, soft shadow. Hover lifts and tightens the border.

Bidder card (default)

Bidder card (best deal)

Held card

10b. Marketing Patterns

v3 introduces a family of high-energy marketing surfaces — used on the live auction (a slim banner above the status card) and on the homepage (a full split hero, animated counters, a live peek demo, value-prop and audience cards, a green final CTA, and a dark footer). All share the same gradient + ambient-motion language.

Live-auction hero banner (fzk-new v8)

Gradient block with two floating colored blobs (cyan + pink, blurred 48 px), 5 falling-coin emoji and 3 drifting sparkles. The status card below it is lifted with a -40 px bottom margin so it floats over the banner edge — creates a single composition. The headline and sub copy are the v8 "battle" framing; the marketing homepage uses a different hero (see below).

Marketing homepage hero (index.html)

The homepage uses a split hero — left pitch + right glass login card — and softer copy. The tag pill swaps to "Live · restaurants are bidding right now" and the headline reads "Restaurants compete for your business.". The lead paragraph below it is: "Fizook is a reverse auction for everyday meals. Tell us what you want, when you want it — hundreds of restaurants drop their prices in real time until your wallet wins." (The homepage demo widget renders 6 tiles as a sample; the marketing claim is the full marketplace, and the live auction itself runs the 19-bidder pool per series.)

Animated stat strip (homepage)

Four tiles with gradient-text counters that animate 0 → target on scroll-into-view (IntersectionObserver). Color-coded: blue/purple (default), green, cyan, amber.

Feature card (icon rotates on hover)

Used on the homepage "Why Fizook" grid. Hover lifts the card 4 px and rotates the gradient icon -8° + scale(1.08). A radial blue blob sits in the upper-left corner inside ::before.

Audience-picker card

Three cards on the homepage segment users into Diner / Vendor / Returning user. Same hover lift as the feature card; arrow icon nudges right 4 px on hover.

Final CTA block

Closes every long-form marketing page. Green-to-teal gradient with a soft white halo radial in the upper-left.

Dark footer with social orbs

Sits flush at the bottom of every marketing page. #0b1220 background, white headings, 86 % opacity links. Social icons are 34 px circles that lift 2 px and switch to a cyan-tinted background on hover.

10c. Glassmorphic Surfaces

Cards that sit on top of the gradient hero use frosted-glass styling — semi-transparent white background, backdrop blur, subtle white border, and a soft halo behind the panel. Two patterns: a light glass card for forms (homepage login) and a dark glass pill for inline stats on the hero.

Light glass card (login)

Dark glass pill (pitch stat)

10d. Live Auction v8

The v8 live auction (fzk-new.html) doubled the bidder pool and added two new spectator-mode surfaces on top of the v3 chrome: a battle ticker that scrolls live commentary across the screen, and a Live Top 3 podium that surfaces the cheapest three bidders at any moment. The status hero also grew from 4 stats to 6.

Bidder-pool distribution

• Pool size: 19 restaurants total.
• Distribution: auction 1 renders 8 cards (2 rows of 4), auction 2 renders 8 more, auction 3 renders the remaining 3 (partial row).
• Grid: repeat(4, 1fr) at ≥ 560 px; logo-only collapse at < 560 px (taps open the bottom sheet for detail).
• Headline-card title: "Your Fizook Auction" (the live status text appends after it).
• Round label (top-right of the status card): "Round 1 of 3" — drives off the same series counter as the Start-button mute.

Battle ticker

A sportscaster-style strip that sits between the hero banner and the status card. The left chip is a red "ON THE WIRE" label with a pulsing dot; the right belt is a CSS-driven horizontal scroll (.fz-ticker-belt with a 30 s linear-infinite translateX, duplicated content for seamless wrap). JS rewrites the belt with the latest 8–12 events every few seconds.

Live Top 3 podium

Three glassmorphic tiles sit on the gradient hero. Grid order is silver — gold — bronze so the tallest gold tile lives in the middle (classic podium). Each tile shows medal pill → square logo → vendor → meal → live price. When a rank changes hands the tile flips and the medal glows briefly.

6-stat headline strip

The status card's stat row carries six tiles (was four in v2). On phone they restack to 3-up, then 2-up at ≤ 419 px. After the auction ends, Best price now and Biggest savings become clickable shortcuts that open the offer sheet.

Controls dock — buttons

Five buttons in fixed order: Start (success), Pause (ghost, disabled at rest), Reset (ghost), Settings toggle (ghost, phone-only — opens the Rounds / Speed panel), Clear All (red ghost fa-undo). On phone the five spread to equal width with a 10 px gap. The settings panel is always visible on desktop and toggled on phone via the sliders icon.

10e. Setup & Account Patterns

The setup flow (auction-details.html), signup pages (fizook-register.html, fizook-vendor.html), and account suite (fizook-profile.html, fizook-history.html) share a family of form patterns that aren't used on the auction or marketing pages. They follow the same tokens and motion language; only the components are new.

Pill toggle group

Mutually-exclusive segmented control — Delivery vs. Pickup, Solo vs. Group, Daily vs. One-off. Each pill is a .toggle wrapping a hidden radio plus .toggle-bg and .toggle-label. Active pill swaps to the primary gradient. Six-pixel radius and small padding keep them compact.

Day-of-week row

Used by the vendor signup form for "what days are you bidding". Each button is a 46 px minimum-width 10 px-radius pill. Three labels per button: .day-abbr (Mon — default), .day-full (Monday — wider viewports), .day-off-mobile/-desktop (the offset state).

Hour grid

Auto-fill grid (minmax(64px, 1fr)) of 60-minute slots. Selected hours flip to the success gradient (green = "yes, bidding open").

Upload preview boxes

Square (14 px radius) for cover images, circle (.is-circle) for logos/avatars. Dashed 2 px border, surface-2 fill, hover lifts and turns the border brand-blue. Replaces native <input type="file"> chrome.

Live preview card (vendor signup)

A right-rail card that mirrors a real bidder card in miniature so the vendor sees how their listing will appear. Updates as they edit menu / pricing fields.

Tips card

Dark gradient block with a soft cyan radial in the upper-right corner. Always carries an icon-titled h4 and a bulleted list. Used on auction-details and fizook-vendor to coach the user mid-form.

Connected accounts list (profile)

One row per OAuth provider — icon tile, name + sub-label, and a pill that shows the connection state. .conn-state.on uses the success-light pill; .off uses the muted-fill pill.

Danger zone

Soft-red bordered block that holds destructive actions (delete account, leave vendor program). Heading + explanation + a single red button. Always last on the profile page so it's hard to hit by accident.

Sticky save bar

A floating bar that slides in from the bottom the moment the user edits any field (and out when they save or revert). Carries a one-line summary on the left and the action buttons on the right.

Receipt tile (auction history)

Dark gradient card that summarizes a closed auction — eyebrow ("Auction #1842"), meal name, vendor, then a row stack of "Was / Now / Saved" with a totaled "You paid" at the bottom. Used inside the history detail sheet.

11. Sheets & Toasts

Long-form detail uses a bottom sheet on phone (full-screen feel) and a centered modal at ≥ 900 px. Brief feedback uses a top-center toast that auto-dismisses after 1.7 s.

Bottom sheet preview

Bidder 1 Restaurant

×

Cravings Combo

Two seasoned tacos paired with golden fries and a chilled drink — bold spices, familiar comfort.

$6.49$9.99 35% off

Accept this offer Hold offer

In-sheet hold flash (v3)

When the user clicks Hold offer from inside the bottom sheet, a centered green pill fades in over the sheet body for ~3 s ("Deal N of 8 Held"), then fades out. The sheet stays open so the user can immediately hold another offer. Implemented as .sheet-hold-flash.show; uses role="status" + aria-live="polite" for screen readers.

Toasts

Series-limit popup

Triggered when the user clicks the muted Start button after running 3 auctions in a series. The "Yes" button wipes every held deal, resets the series counter, and starts a brand-new auction; "Cancel" (or the backdrop / × ) closes the dialog and leaves everything intact.

11b. Activity Feed

A live, prepended list of price drops and system events sits inside a card titled "Live activity". Drop rows are clickable shortcuts into the offer sheet; info rows are read-only.

v3 enhancements

• Hover sweep — drop rows now fade in linear-gradient(90deg, rgba(36,129,188,.06), rgba(124,58,237,.06)) on hover and slide right 2 px. Makes the row read like a button without changing the markup.
• Card halo — the feed card itself gains a soft purple radial in the upper-right corner so it doesn't read as a flat white tile against the gradient mesh.
• Bolt shimmer — the section heading's fa-bolt icon pulses its drop-shadow from 4 px to 12 px every 2.4 s (fzBoltShimmer keyframe) so the "Live activity" header always reads as alive.

12. Motion

v2 motion communicates state (live, paused, ended, best). v3 layers on a second class of ambient motion — slow, calm, looping — that says "this product is alive" without demanding attention. State-motion is fast (≤ 1 s); ambient motion is slow (1.6 s – 22 s). Every long-running animation is gated by prefers-reduced-motion.

State motion (v2 — communicates a moment)

Ambient motion (v3 — sets the mood)

All v3 keyframes are namespaced with the fz prefix to avoid collisions with v2 animations. They drift, breathe, and shimmer; none of them snap or bounce.

Marketing-only (homepage)

• @keyframes slideInL · 0.7s — hero pitch fades in from -24 px on the X axis.
• @keyframes slideInR · 0.7s — login card mirrors the same motion from +24 px.
• @keyframes cardIn · 0.6s — every section.block fades up 20 px on first paint.
• @keyframes coinFall, floatA, floatB, gradShift, pulse — unprefixed twins of the auction-page fz-* versions, used inside the homepage hero.
• Counter animation (JS) — data-count-to tiles tween 0 → target on IntersectionObserver entry. No CSS.

Page-scoped (setup & account suite)

These keyframes live on a single page each and are intentionally not fz-prefixed — they're local flourishes, not part of the shared design language. Treat them as one-offs; promote a name into the fz namespace before reusing it on a second page.

• auction-details.html — welcomeShift (gradient eyebrow drift), greetSwap (rotating greeting), wave (waving hand), beamDrift (light beam across stepper), sparkleDrift, startRipple / startWiggle (Start-button attention), bidderBounce (preview tiles), fadeIn.
• fizook-demo.html — pricePop (number flash on price drop), hypeScroll (testimonial belt), perkIn (perk-card stagger), sparkBurst, beamDrift.
• fizook-history.html / fizook-profile.html — avatarPulse (profile avatar halo), bounceX (page-tab indicator).

Defined but currently unused

• @keyframes endedFlash — green ↔ light-green color/opacity loop. Defined in CSS; .ended-flash intentionally renders solid right now. Re-enable by adding animation:endedFlash 1s ease-in-out infinite to .ended-flash.

Hover micro-interactions

• Buttons / chips — translateY(-1 to -2 px) on hover, transition 150 ms ease.
• btn-success (v3) — white-gradient gloss sweeps left → right via a ::after pseudo, 600 ms ease.
• Bidder cards — non-best cards lift 4 px, gain a translucent purple 0 0 0 2px ring, and bump to a 0 16px 30px shadow.
• Feature / audience cards — lift 4 px, swap to --shadow, and rotate the gradient icon -8° + scale(1.08); arrow icon nudges 4 px right.
• Sheet open — slide from bottom (mobile) or scale-in (desktop), 300 ms ease.
• Activity feed drop rows — gradient sweep + translateX(2 px), hand-pointer cursor.
• Top-nav dropdowns — submenu fades in on hover; an invisible 6 px bridge keeps it open while the cursor crosses the gap.
• Footer social orbs — lift 2 px and switch background to rgba(34,211,238,.25) on hover.

13. Iconography

Fizook uses Font Awesome 4.7 (the classic CSS-class API). Icons are sized via parent font-size and inherit color via currentColor.

Decorative emoji (banners only)

Used only as drifting confetti/sparkle inside the marketing hero (and the v3 in-auction banner). Always wrapped in aria-hidden="true". Do not use emoji inside body copy, toasts, or buttons.

→ Browse alternatives in the Floating Emoji Picker — preview swaps live on a hero banner and copy the snippet.

14. Voice & Tone

Fizook talks like a calm but excited friend who just saw a great deal. Always present-tense, always plain English. Punctuation can be expressive but doesn't need to be loud.

Reference copy library — live auction (v8)

Reference copy library — marketing (index.html)

14b. Auction Series Logic

A "series" is up to 3 sequential auction runs. Held deals carry across runs so the user can stockpile favorites before deciding. After three runs, the Start button mutes and a popup gates a fresh start. v8 widened the bidder pool to 19 restaurants split across the series — 8 / 8 / 3 — while keeping the hold tray at 8 slots.

• Auction 1 — Start → run → end. Eight bidders compete. User can hold up to 8 deals.
• Auction 2 — Start again → run → end. Eight new bidders compete; held deals from auction 1 remain in their slots; new ones can be added.
• Auction 3 — Start again → run → end. The final three bidders compete (partial row in the grid). Same hold rules.
• Series limit hit — Start button gets the .btn-muted style (gray-on-gray, no shadow) but stays clickable. Clicking it opens the series-limit popup.
• Yes in the popup — wipes state.heldIds, resets state.auctionCount to 0, un-mutes Start, then immediately runs auction 1 of a fresh series.
• Cancel / × / backdrop — closes the popup; nothing changes.
• Reset button — only resets the current auction's progress. auctionCount is preserved, so once you've burned 3 you can't restart by pressing Reset.
• Clear All button (red fa-undo in the dock) — full wipe: feed, held deals, auction state, AND auctionCount. Returns the page to its just-loaded state.
• In-sheet hold flash (v3) — every successful Hold from inside the sheet shows "Deal N of 8 Held" centered over the sheet body for 3 s; the sheet stays open so the user can hold another offer immediately.

15. Layout & Breakpoints

All pages center inside a max-width:1280px container with 16 px gutters. The grid uses display:grid with explicit column counts at each breakpoint. v8 holds the bidder grid at repeat(4, 1fr) on tablet+: auction 1 and 2 each render 8 cards (2 rows of 4) and auction 3 renders the remaining 3 (partial row) from the 19-restaurant pool. The held tray stays 8-up on tablet+.

Breakpoints

Container rules

• Page-level wrappers: max-width:1280px; margin:0 auto; padding:0 16px;
• Section vertical rhythm: 14–32 px gap between sections, 24 px inside cards.
• .wrap on marketing pages uses margin:-40px auto 0 to lift the first section over the gradient hero edge — same depth trick as the v3 banner.
• Smooth scroll: scroll-behavior:smooth on html,body for in-page anchor links.

Z-index stack

• z-index: 50 — sticky topbar.
• z-index: 60 — sticky bottom dock.
• z-index: 90 — scroll-progress bar (sits above everything except modals).
• z-index: 100+ — sheet backdrop and modal panels.
• z-index: -1 — body::before animated mesh overlay (so it sits behind every painted element).

16. Accessibility

Ambient motion and gradient text are pretty, but they have to fail gracefully for users who can't or don't want them. v3 adopted these baselines on every new surface — apply them to anything new.

Reduced motion

Every long-running ambient animation is wrapped in a prefers-reduced-motion media query that sets animation:none. Users keep the colors and layouts; they lose the looping movement.

@media (prefers-reduced-motion: reduce) {
  body::before,
  .fz-hero-banner::before, .fz-hero-banner::after,
  .fz-coin, .fz-spark,
  .chip.active, .feed-head h3 i,
  .held .held-grid, .held-counter,
  .fz-hero-banner h1 .grad {
    animation: none !important;
  }
}

• State-motion (live pulse, ended bounce, BEST ring) also opts out so an ended auction looks like a static red title.
• Gradient text falls back to flat color when its position-shift is killed — verify contrast still passes WCAG AA.

ARIA & semantics

• Sheet hold flash — wraps the badge in role="status" + aria-live="polite" so screen readers announce "Deal 3 of 8 held" without interrupting.
• Decorative emoji + blobs — every coin, spark, and pulse-dot is aria-hidden="true". Same for the floating ::before/::after blobs (no markup needed).
• Banner regions — every marketing section uses aria-label ("Welcome to Fizook", "Live auction welcome", "Sign in", etc.) so the page outline is meaningful.
• Active nav — the current top-nav link uses aria-current="page" in addition to the visual .active class.
• Forms — every input has a <label>; the password reveal toggle uses aria-label="Show password"; autocomplete is set on email + password.
• Inputs gain a 3 px focus ring in the brand blue (0 0 0 3px rgba(36,129,188,.18)) — never override the browser's default outline without supplying one of your own.

Color contrast

• Body text on white surface: #0f172a / #fff — 17:1, well above AA.
• Muted text on white: #64748b / #fff — 4.7:1, AA-passing for body but not for headlines. Keep --muted at ≥ 14 px.
• White text on the hero gradient: paint the darkest stop (#0b1220) where the headline sits — never let h1 land on the brightest violet stop.
• Don't rely on red-vs-green to communicate state alone — pair every color cue with text or an icon (already done for live / paused / ended).

Touch targets

• Buttons, chips, sheet-close, password toggle — all ≥ 36 × 36 px.
• Activity-feed drop rows — full-width row is the hit area; the inline link inside isn't relied on.
• Footer social orbs — 34 × 34 px circles inside an inline-flex hit area.