--- id: funnow name: FunNow country: TW category: consumer-tech homepage: "https://www.myfunnow.com" primary_color: "#ff5537" logo: type: favicon slug: "https://cdn.myfunnow.com/web/images/funnow_favicon.svg" verified: "2026-06-10" added: "2026-06-10" omd: "0.1" tokens: source: live-extract extracted: "2026-06-10" note: "primary = live CTA / urgency orange-red (#ff5537, matches the official favicon SVG fill); teal #4dcbcb is the secondary outline accent; flash-sale tags run indigo #5a69eb. Vuetify/Material chrome — flat v-cards, 4px radius everywhere." colors: primary: "#ff5537" teal: "#4dcbcb" flash-indigo: "#5a69eb" amber: "#ffb107" ink: "#252729" ink-pure: "#000000" muted: "#a7a7a9" canvas: "#f4f4f5" surface: "#ffffff" tint-peach: "#ffd8d1" tint-blush: "#ffeeeb" on-primary: "#ffffff" typography: family: { sans: "Helvetica Neue", tc: "PingFang TC, Microsoft JhengHei" } display-hero: { size: 36, weight: 500, lineHeight: 1.22, use: "Hero H1 headline on homepage" } page-title: { size: 24, weight: 700, lineHeight: 1.50, use: "Category / listing page H1" } section: { size: 18, weight: 400, lineHeight: 1.50, use: "Category page H2 intro" } subtitle: { size: 17, weight: 400, lineHeight: 1.41, use: "Hero H2 subtitle, section heads, filter tabs" } body: { size: 15, weight: 400, lineHeight: 1.50, use: "Standard reading text, header buttons" } button: { size: 14, weight: 400, lineHeight: 1.00, use: "Primary CTA / control labels" } badge: { size: 12, weight: 500, lineHeight: 1.30, use: "Urgency and flash-sale tags" } spacing: { xs: 2, sm: 8, md: 12, base: 16 } rounded: { sm: 4, md: 5 } shadow: flat: "none" raised: "Material elevation stack rgba(0,0,0,0.2) / rgba(0,0,0,0.14) on raised search CTA only" components: button-primary: { type: button, bg: "#ff5537", fg: "#ffffff", radius: "4px", padding: "0px 16px", height: "40px", font: "14px / 400", use: "Search submit / primary CTA — the single solid-fill button on the page" } button-outline-teal: { type: button, fg: "#4dcbcb", border: "1px solid #4dcbcb", radius: "4px", padding: "0px 8px", height: "36px", font: "15px / 400", use: "Download App header CTA, outlined teal" } button-text: { type: button, fg: "#000000", radius: "4px", padding: "0px 8px", height: "36px", font: "15px / 400", use: "Login / Sign Up quiet header action" } badge-available-now: { type: badge, bg: "#ff5537", fg: "#ffffff", radius: "4px", padding: "2px 8px", font: "12px / 500", use: "'Available now' urgency tag on product cards" } badge-flash-sale: { type: badge, bg: "#5a69eb", fg: "#ffffff", radius: "4px", padding: "0px 8px", font: "12px / 400", use: "'Flash Sales Now' / timed-deal countdown tag" } card-product: { type: card, bg: "#ffffff", radius: "4px", use: "Flat v-card product tile sitting on the #f4f4f5 canvas, image-led, no shadow" } tab-filter: { type: tab, fg: "#252729", active: "text #ff5537", height: "48px", font: "17px / 400", use: "Category scope tabs (All / Beitou Hot Spring Hotel / ...)" } input-search: { type: input, fg: "#000000", radius: "0px", padding: "8px 16px", height: "40px", font: "16px / 400", use: "Hero search field inside the white booking toolbar" } components_harvested: true --- # Design System Inspiration of FunNow ## 1. Visual Theme & Atmosphere FunNow is Taiwan's on-demand "go out tonight" booking platform, and its web surface looks exactly like what it is: a fast, inventory-dense marketplace built on Material Design plumbing. The page sits on a cool light-grey canvas (`#f4f4f5`) with flat white product cards (`#ffffff`) stacked edge to edge — no drop shadows, no decorative depth — so hundreds of restaurant, hot-spring, and massage listings scan like a clean catalog. Text is a near-black charcoal (`#252729`) over the Material 87%-black default, and every interactive element shares one conservative 4px corner radius. The framework is visibly Vuetify (`v-card--flat` tiles, Material ripple buttons), which gives the product a utilitarian, app-like crispness rather than an editorial mood. What makes it unmistakably FunNow is the urgency accenting. The brand's orange-red (`#ff5537`) — the same hue as the official favicon mark — is rationed to the moments that mean "act now": the solid search CTA, the "Available now" tag, active filter tabs, price links, and the merchant-facing "Reach Out to Us" buttons. Around it orbit two cooler signals: a teal (`#4dcbcb`) used for the outlined "Download App" action, and an indigo (`#5a69eb`) reserved for "Flash Sale" countdown tags. An amber (`#ffb107`) appears across rating and promotional elements. The result is a traffic-light economy of color on an otherwise neutral page: orange-red = book it, indigo = deal expiring, teal = get the app. Typography is deliberately unprecious. The stack is Helvetica Neue with PingFang TC / Microsoft JhengHei fallbacks for Traditional Chinese, body at a compact 15px/1.5, the hero H1 at a modest 36px/500, and category-page titles at 24px/700. Nothing is set in a display face; hierarchy comes from weight, the orange accent, and photography. FunNow's pages feel like a tool you operate at 9pm while deciding where to go at 9:30 — speed-first, spontaneity-flavored, zero friction. **Key Characteristics:** - Material/Vuetify chassis — 4px radius everywhere, ripple buttons, flat `v-card` tiles - Urgency-rationed orange-red (`#ff5537`) as the lone solid-fill action color - Traffic-light accent economy: indigo (`#5a69eb`) flash sales, teal (`#4dcbcb`) app download, amber (`#ffb107`) ratings/promos - Flat catalog depth: light-grey canvas (`#f4f4f5`) + white cards, no shadows on tiles - Helvetica Neue + PingFang TC stack — utilitarian, bilingual-ready, no display font - Compact 15px body with 1.5 line-height for dense listing scans - Photography-led cards: imagery carries the appetite appeal, chrome stays neutral - Time-anchored microcopy ("Available now", "Book For 06:00") baked into the component system ## 2. Color Palette & Roles ### Primary - **FunNow Orange-Red** (`#ff5537`): The brand mark color (official favicon SVG fill) and the system's single solid action color — search CTA, "Available now" urgency tags, active tab text, price/link accents, merchant CTAs. - **On-Primary White** (`#ffffff`): Text on orange-red and indigo fills; also the card surface color. ### Secondary Accents - **Teal** (`#4dcbcb`): The secondary accent, used as outlined-button color ("Download App" — 1px teal border, teal label) and occasional link/icon highlights. Cool counterweight to the hot primary. - **Flash Indigo** (`#5a69eb`): Reserved exclusively for flash-sale / timed-deal tags ("Flash Sales Now", "06:00 Flash Sale"). A deliberate hue break so deals read differently from availability. - **Amber** (`#ffb107`): Rating and promotional accent observed across listing surfaces — the warm "star" note in the catalog. ### Neutrals & Surfaces - **Ink Charcoal** (`#252729`): Body text, inactive tab labels, section headings — the workhorse text color. - **Pure Black** (`#000000`): Header buttons and high-emphasis labels; Material's 87%-black (`rgba(0,0,0,0.87)`) covers default headings and inputs. - **Muted Grey** (`#a7a7a9`): Disabled/tertiary text, metadata, placeholder-level emphasis. - **Canvas Grey** (`#f4f4f5`): Page background — the cool light grey the whole catalog sits on. - **Surface White** (`#ffffff`): Product cards, toolbar, nav, dialogs. ### Tints - **Peach Tint** (`#ffd8d1`): Soft orange-red tint for promotional highlight surfaces. - **Blush Tint** (`#ffeeeb`): Lightest orange-red tint, used as a subtle brand-warm background wash. ## 3. Typography Rules ### Font Family - **Primary stack**: `"Helvetica Neue", Helvetica, Tahoma, Arial` with Traditional Chinese fallbacks `"PingFang TC", "Microsoft JhengHei", PMingLiU` (and WenQuanYi for Linux). Latin-first, TC-ready — no custom webfont. ### Hierarchy | Role | Size | Weight | Line Height | Notes | |------|------|--------|-------------|-------| | Display Hero (H1) | 36px | 500 | 1.22 (44px) | Homepage hero headline | | Page Title (H1) | 24px | 700 | 1.50 | Category/listing page title | | Section Intro (H2) | 18px | 400 | 1.50 | Category page descriptive intro | | Subtitle / Section (H2) | 17px | 400 | 1.41 | Hero subtitle, section heads, filter tabs | | Body | 15px | 400 | 1.50 (22.5px) | Default document text, header buttons | | Control / CTA | 14px | 400 | 1.00 | Primary button, small controls | | Badge / Tag | 12px | 400–500 | 1.30 | Urgency and flash-sale tags | ### Principles - **System type, zero ceremony**: no display font, no negative tracking games — hierarchy is carried by weight (400 vs 500 vs 700) and the orange accent. - **Bilingual parity**: the Helvetica-then-PingFang stack keeps Latin and Traditional Chinese visually consistent at identical sizes; nothing in the scale assumes Latin-only line lengths. - **Modest display sizes**: even the hero tops out at 36px — the photography and inventory density are the visual event, not the type. - **Compact body for scanning**: 15px/1.5 keeps long listing pages dense but legible. ## 4. Component Stylings ### Buttons **Primary (Search / CTA)** - Background: `#ff5537` - Text: `#ffffff` - Radius: 4px - Padding: 0px 16px - Height: 40px - Font: 14px / 400 - Shadow: Material elevation stack (rgba(0,0,0,0.2) / rgba(0,0,0,0.14) layers) - Use: Search submit in the booking toolbar — the page's single solid-fill action **Outline Teal (Download App)** - Background: transparent - Text: `#4dcbcb` - Border: 1px solid `#4dcbcb` - Radius: 4px - Padding: 0px 8px - Height: 36px - Font: 15px / 400 - Use: Header "Download App" CTA — the only outlined button in the chrome **Text (Login / Sign Up)** - Background: transparent - Text: `#000000` - Radius: 4px - Padding: 0px 8px - Height: 36px - Font: 15px / 400 - Use: Quiet header actions (Login / Sign Up, city selector at 17px, Category/Now/Date/Time/Pax toolbar toggles) ### Badges **Available Now (Urgency)** - Background: `#ff5537` - Text: `#ffffff` - Radius: 4px - Padding: 2px 8px - Font: 12px / 500 - Use: Real-time availability tag on product cards ("Available now", "Book For 06:00") **Flash Sale** - Background: `#5a69eb` - Text: `#ffffff` - Radius: 4px - Padding: 0px 8px - Font: 12px / 400 - Use: Timed-deal tags ("Flash Sales Now", "06:00 Flash Sale") — indigo so deals read distinctly from availability ### Cards & Containers **Product Tile** - Background: `#ffffff` - Radius: 4px - Shadow: none (flat `v-card--flat`) - Use: Listing tile on the `#f4f4f5` canvas — photo on top, name, rating, price; measured at 360×135 (list) and 233×146 (carousel) ### Tabs **Category Filter Tab** - Text: `#252729` (inactive) - Active: `#ff5537` text - Height: 48px - Padding: 0px 16px - Font: 17px / 400 - Use: Listing scope tabs ("All" / "Beitou Hot Spring Hotel" / "Jiaoxi Hot Spring Hotel" ...) ### Inputs **Hero Search Field** - Background: transparent (sits inside the white booking toolbar) - Text: `#000000` (87% black) - Radius: 0px - Padding: 8px 16px - Height: 40px - Font: 16px / 400 - Use: "Search for products or locations" field, paired with the orange submit button ### Navigation - White toolbar on the grey canvas; brand logotype left in orange-red `#ff5537` - City selector button at 17px / 400, black text, Material ripple - Right cluster: outlined teal Download App, text-style Login / Sign Up - Booking parameter bar (Category / Now / Date / Time / Pax) as a row of 40px text buttons over the hero --- **Verified:** 2026-06-10 **Tier 1 sources:** https://www.myfunnow.com/en (homepage, live computed-style inspect); https://www.myfunnow.com/en/regions/1/categories/10265 (category listing surface, live inspect); https://www.events.myfunnow.com/booking-en (FunNow Booking merchant surface, live inspect); https://blog.myfunnow.com (official FunNow blog); https://www.events.myfunnow.com/whyfunnow-zh (official Why FunNow brand page) **Tier 2 sources:** none available (getdesign.md/funnow → 404 "No designs found"; styles.refero.design/?q=funnow → not listed, search returned unrelated brands only) **Conflicts unresolved:** none ## 5. Layout Principles ### Spacing System - Base unit: 4px Material grid - Observed scale: 2px, 8px, 12px, 16px (button paddings 0 8px / 0 12px / 0 16px, badge 2px 8px, input 8px 16px) - Component heights are the real rhythm: 36px header buttons, 40px toolbar controls and inputs, 48px filter tabs ### Grid & Container - Full-width white toolbar over a centered content column on the `#f4f4f5` canvas - Hero: headline + booking parameter bar (Category/Now/Date/Time/Pax) + search field — the booking funnel IS the hero - Inventory below as horizontal carousels ("Top Brands", "Trending Themes") and vertical card lists - Category pages: title + intro, horizontally scrollable filter tab bar, then the card grid ### Whitespace Philosophy - **Density over air**: this is a marketplace — cards pack tightly so a screen shows maximum bookable inventory. - **Canvas does the separating**: the grey `#f4f4f5` gutter between flat white cards replaces borders and shadows. - **Chrome stays thin**: a single 64px-class toolbar and slim tab bars; vertical space is spent on listings, not branding. ### Border Radius Scale - Standard (4px): buttons, cards, badges, dialogs — the universal Material radius - Slightly relaxed (5px): CTAs on the events/merchant surfaces - No pills, no large rounding anywhere in the core product ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Product tiles (`v-card--flat`), canvas, tab bars | | Raised (Level 1) | Material elevation stack `rgba(0,0,0,0.2)` / `rgba(0,0,0,0.14)` layers | Raised search CTA, city-selector button ripple chrome | | Overlay | `rgba(0,0,0,0.4)` scrim | Image overlays / gradient bottoms on photo cards | **Shadow Philosophy**: FunNow inverts the usual Material habit — the framework ships elevation, but the product flattens it. Listing tiles are explicitly `v-card--flat`; separation comes from the grey canvas showing between white cards. The only elevation that survives is the default Material button shadow on a handful of raised controls. Photography supplies all perceived depth: cards are image-led, and a 40%-black scrim carries text over photos. Keeping chrome flat makes the orange urgency tags and indigo deal tags the highest-contrast objects on screen, which is exactly the booking-funnel priority. ## 7. Do's and Don'ts ### Do - Reserve solid `#ff5537` fills for "book/act now" moments — one solid button per view - Use indigo `#5a69eb` only for time-limited deals so urgency types stay distinguishable - Keep teal `#4dcbcb` as an outlined secondary (border + label), never as a fill competing with orange - Keep every radius at 4px — Material conservatism is part of the utilitarian read - Let photography carry appeal; keep card chrome flat and white on the `#f4f4f5` canvas - Anchor microcopy in time ("Available now", "Book For 06:00") — immediacy is the brand promise - Use the Helvetica Neue + PingFang TC stack so EN/TC render at parity ### Don't - Spread orange-red across decorative elements — it must keep meaning "bookable right now" - Add drop shadows to product tiles — the catalog is flat by design - Introduce display fonts or oversized hero type — 36px/500 is the ceiling - Use pill or large-radius buttons — nothing rounder than 5px exists in the system - Mix the deal color and the availability color — indigo and orange-red have separate jobs - Dress up empty space — density is a feature of a spontaneity marketplace ## 8. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single-column cards, booking bar collapses, app-download banner prominent | | Tablet | 600–960px | 2-up card grids, condensed toolbar | | Desktop | 960–1440px | Full toolbar with city selector + booking parameters, multi-column carousels | ### Touch Targets - 40px toolbar controls and 48px filter tabs — comfortably tappable - Card tiles are full-surface tap targets linking to the booking flow - Header actions at 36px height with ripple feedback ### Collapsing Strategy - The booking parameter bar (Category/Now/Date/Time/Pax) folds into stacked sheet pickers on mobile - Carousels keep horizontal scroll at every width — inventory rows never stack into long verticals - The web experience funnels mobile users toward the app (teal Download App CTA persists) ### Image Behavior - Card photos crop to fixed tile ratios; text sits on a bottom scrim where overlaid - Tags ("Available now", flash sale) stay pinned to consistent card corners at all sizes ## 9. Agent Prompt Guide ### Quick Color Reference - Primary CTA / urgency: FunNow Orange-Red (`#ff5537`) - Flash-sale tag: Indigo (`#5a69eb`) - Secondary outline CTA: Teal (`#4dcbcb`) - Rating/promo accent: Amber (`#ffb107`) - Page background: Canvas Grey (`#f4f4f5`) - Card surface: White (`#ffffff`) - Body text: Ink Charcoal (`#252729`) - Muted text: Grey (`#a7a7a9`) - Brand tints: Peach (`#ffd8d1`), Blush (`#ffeeeb`) ### Example Component Prompts - "Create a booking toolbar: white bar on #f4f4f5 page. Text buttons (transparent, black text, 4px radius, 40px height, 17px Helvetica Neue) for Category / Now / Date / Time / Pax, a 16px search input, and an orange submit button: #ff5537 background, white text, 4px radius, 0 16px padding, 40px height, subtle Material elevation." - "Design a product tile: white #ffffff card, 4px radius, NO shadow, on #f4f4f5 canvas. Photo top with a 12px/500 'Available now' tag (#ff5537 bg, white text, 4px radius, 2px 8px padding) pinned to the corner. Name at 15px/400 #252729, amber #ffb107 rating row, price accent in #ff5537." - "Build a flash-sale tag: #5a69eb background, white text, 4px radius, 0 8px padding, 12px/400 — label '06:00 Flash Sale'." - "Create a filter tab bar: horizontal scroll, 48px tall tabs, 17px/400 labels, inactive #252729, active #ff5537, 0 16px padding, white background." - "Header actions: outlined Download App button (transparent bg, 1px solid #4dcbcb border, #4dcbcb text, 4px radius, 36px height, 15px) next to a quiet text button 'Login / Sign Up' (black text, no border)." ### Iteration Guide 1. One solid orange button per view — everything else is text or outline style 2. 4px radius universally; 36/40/48px control heights are the vertical rhythm 3. Flat cards on grey canvas; never add tile shadows 4. Indigo = timed deal, orange-red = available/book, teal = app/secondary — don't swap jobs 5. Helvetica Neue + PingFang TC, 15px body, hero capped at 36px/500 6. Write time into the UI copy ("now", "tonight", "06:00") — urgency is verbal as well as visual --- ## 10. Voice & Tone FunNow's voice is **spontaneous, friendly, and deal-smart** — a fun-loving local friend who knows where you can get in *tonight* and what it should cost. Copy is short, imperative, and time-anchored: the product speaks in "now" ("Available now", "Book For 06:00"). In Traditional Chinese the register is upbeat and benefit-led, comfortable with exclamation marks ("線上一鍵預訂，線下即刻出發！") in a way the system's Western peers are not — energy is part of the brand. English copy stays casual and second-person: "Enjoy your life the way you want." | Context | Tone | |---|---| | Hero headlines | Invitation to act tonight. "Explore & book your fun activities in Taipei｜Taoyuan now". | | Subtitles / mission lines | Lifestyle permission. "Enjoy your life the way you want." | | Urgency tags | Telegraphic, time-stamped. "Available now", "06:00 Flash Sale", "Book For 06:00". | | Deal copy (TC) | Energetic, benefit-first, exclamatory. "尖峰有優惠，離峰更划算！" | | Merchant surfaces | Confident B2B plain talk. "Help you stay on top", "Grow with Us". | | Help / FAQ | Practical and procedural — booking, refund, and arrival mechanics. | **Voice samples (verbatim):** - "Explore & book your fun activities in Taipei｜Taoyuan now" — homepage hero H1 *(verified live 2026-06-10)* - "Enjoy your life the way you want." — homepage hero H2 *(verified live 2026-06-10)* - "Book motel & hotel, massage & spa, restaurants & bars and more in Taipei within a few clicks!" — homepage section heading *(verified live 2026-06-10)* - "線上一鍵預訂，線下即刻出發！" ("One-click booking online, head out instantly offline!") — official Why FunNow page *(fetched 2026-06-10)* - "尖峰有優惠，離峰更划算！" ("Deals at peak, even better off-peak!") — official Why FunNow page *(fetched 2026-06-10)* **Forbidden register**: luxury-travel formality, slow "plan your itinerary" OTA language, guilt or FOMO-shaming, jargon about inventory/yield (that's merchant-side vocabulary only). ## 11. Brand Narrative FunNow was founded in **Taipei in November 2015** by **TK Chen (陳庭寬)** and co-founders under the company Zoek (the "© Zoek" still in the site footer). Chen, a former ING investment analyst who had lived in the Netherlands, took a yield-management insight personal: the moment a plane takes off, an empty seat is worth nothing — and across Asia's cities the same was true of the 8pm massage slot, the un-booked hot-spring room, the empty bar table. FunNow positioned itself as 亞洲首款主打「最後一分鐘」的預訂平台 — Asia's first booking platform built around the last minute — with the tagline **"Last minute unlimited"**. The model is urban spontaneity as infrastructure: 即時預訂都會享樂的第一選擇 ("the first choice for instant booking of urban pleasures"), spanning restaurants, bars, massage & spa, hotels and motels, hot springs, and activities — bookable in a few taps for *right now*, with dynamic off-peak pricing that fills merchants' dead hours ("尖峰有優惠，離峰更划算！"). The company raised a **$5M Series A in 2018** and a **$15M Series B in 2021** (both covered by TechCrunch), expanded to Hong Kong, Malaysia, Japan and Southeast Asia, and in **September 2023 merged with Eatigo**, one of SEA's largest O2O booking platforms, forming the FunNow Group. What FunNow refuses: the plan-ahead solemnity of traditional OTAs, phone-call reservations and queues ("免排隊、免打電話"), and any UI ornamentation that slows the catalog down. What it embraces: a flat, fast Material marketplace where photography sells the experience, an orange-red mark that always means "you can have this now", and a stated mission of 隨心所欲享受生活 — letting people enjoy life on their own terms through simple, reliable booking. ## 12. Principles 1. **Now is the product.** The platform's entire reason to exist is the last minute. *UI implication:* surface real-time availability ("Available now") and time-stamped deals ("06:00 Flash Sale") as first-class card elements; default the booking flow to "Now". 2. **One color means go.** Orange-red `#ff5537` is rationed to bookable/act-now moments. *UI implication:* one solid orange element per view; deals get indigo, secondary actions get teal outline — never blur the jobs. 3. **Catalog speed over chrome.** Spontaneous users decide in seconds. *UI implication:* flat cards, 4px radii, dense grids, no shadows or decorative depth that slows scanning. 4. **Photography sells, UI serves.** The experience photo is the persuasion layer. *UI implication:* image-led tiles with thin neutral chrome; text over photos rides a scrim, not a styled panel. 5. **Off-peak is a win, not a discount bin.** Dynamic pricing reframes empty hours as smart deals. *UI implication:* deal tags read energetic and positive (indigo + exclamatory copy), never apologetic clearance styling. ## 13. Personas *Personas below are fictional archetypes informed by publicly observable FunNow user segments (urban last-minute bookers in Taiwan and SEA, deal-driven diners, merchant partners), not individual people.* **林佳穎, 27, 台北.** A marketing exec whose plans start at 7pm when the group chat decides tonight is the night. Opens FunNow for a bar or late-night hot spring, filters by "Now", and books in under a minute. Trusts the "Available now" tag literally — if it lies once, she's gone. **Marcus Tan, 33, Kuala Lumpur.** A deal-savvy foodie who plans dinner around flash sales. Watches the indigo timed-deal tags, compares off-peak prices, and treats FunNow as a game he wins. Came via the Eatigo merger and expects the same discount clarity. **張媽媽 & family, 45, 宜蘭.** Weekend spontaneity with kids: a same-day Jiaoxi hot-spring room without phone calls. Values real reviews and refund clarity over aesthetics; books the family slot from the sofa at 10am for 1pm. **Kenji, 38, Okinawa restaurant owner.** A merchant using FunNow Booking to fill weekday-afternoon dead hours. Cares about the dashboard ("Help you stay on top"), upfront deposits cutting no-shows, and Reserve with Google traffic — the B2B face of the same urgency engine. ## 14. States | State | Treatment | |---|---| | **Empty (no results in filter)** | White card area on `#f4f4f5` canvas, one Ink (`#252729`) line stating no venues match this time/category, plus a text-button suggestion to switch to "Now" or clear filters. No illustration clutter. | | **Empty (no flash sales running)** | Muted (`#a7a7a9`) single line; next scheduled sale time shown if known — time-anchored even when empty. | | **Loading (listing fetch)** | Flat skeleton tiles at final card dimensions (4px radius) on the grey canvas — no shimmer theatrics, consistent with the shadowless catalog. | | **Loading (availability check)** | Inline spinner replacing the orange CTA label; card stays in place, previous price visible. | | **Error (booking failed)** | Inline message above the CTA in plain language: what failed (slot taken / payment) and the next action (pick another time). Never a bare "Error occurred". | | **Error (slot just sold out)** | The honest marketplace case: tag flips from "Available now" to a muted sold-out state, with nearest alternative times offered immediately. | | **Success (booking confirmed)** | Confirmation screen with time, venue, and party size restated — the reservation is the receipt. Calm, factual; the excitement already happened. | | **Skeleton** | `#ffffff` blocks at final tile dimensions on `#f4f4f5`, 4px radius, flat pulse. | | **Disabled** | Muted grey (`#a7a7a9`) labels on flat surfaces; orange CTAs fade in opacity rather than turning grey, preserving the "go" color's meaning. | ## 15. Motion & Easing **Durations**: | Token | Value | Use | |---|---|---| | `motion-fast` | 100ms | Ripple feedback, tab switches, tag appearance | | `motion-standard` | 200ms | Card hover, sheet/picker open, carousel snap | | `motion-slow` | 300ms | Page-level transitions, dialog entry | **Easings**: | Token | Curve | Use | |---|---|---| | `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Material standard — most transitions | | `ease-decelerate` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Entering elements (sheets, dialogs) | | `ease-accelerate` | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits and dismissals | **Motion rules**: FunNow inherits Material motion and keeps it functional — ripple on every tap, fast tab transitions, carousels that snap. Urgency elements may pulse subtly (flash-sale countdowns), but listing tiles never animate on scroll: catalog scanning speed outranks delight. No spring or bounce — the energy lives in the copy and color, not in physics. Under `prefers-reduced-motion: reduce`, ripples and pulses collapse to instant state changes; the booking flow remains fully functional. --- Source: https://oh-my-design.kr/design-systems/funnow · Raw twin of references/funnow/DESIGN.md Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills