iCook DESIGN.md

Overview

Visual Theme & Atmosphere

iCook (愛料理) is Taiwan's largest recipe and cooking community platform, built by Polydice Inc. since 2011. Its design language radiates the warmth and approachability of home cooking — warm neutrals, a coral-red brand accent, and generous food photography take center stage. The canvas defaults to a clean warm white (#ffffff) accented by gentle off-white surfaces (#fbfaf8) and light grey cards (#f0f0f0), all of which are deliberately understated so that rich food photography remains the hero of every page.

The dominant personality signal is a vivid coral-red (#f04646) — warm enough to evoke the heat of the kitchen rather than alarm-signal red. It appears on the "下載APP" (Download App) nav CTA and the "在 iCook App 開啟" recipe button, keeping the brand color functionally purposeful. A softer coral-warm tone (#f06354) handles interactive secondary actions: section "更多" links and ghost-style circular carousel navigation buttons. A muted amber orange (#f0993c) surfaces on seasonal or special-event badges, extending the warm-food palette without becoming a competing primary.

Typography leans entirely on the system font stack — system-ui, -apple-system, PingFang TC, Microsoft JhengHei — ensuring maximum CJK legibility across macOS, iOS, and Windows. There is no custom display typeface; instead, weight and size do all the hierarchy work: category nav tabs run at 16px/700, recipe card titles at 20px/700, section headers at 24px/600, and body copy at 14px/400. The approach is deliberately utilitarian — the cooking content, not the interface chrome, earns the user's attention.

Key Characteristics:

• Warm coral-red (#f04646) as the single CTA/brand accent — evokes kitchen warmth, not urgency
• Secondary interactive coral (#f06354) for ghost buttons and text-links
• System CJK font stack (PingFang TC / Microsoft JhengHei) — no custom typeface, maximum legibility
• Pure warm-white canvas (#ffffff) with soft surface layers (#fbfaf8, #f0f0f0) for card separation
• Warm ink-brown (#564e4a) instead of black for body text — cozy, food-forward
• Zero drop-shadows — flat depth via background shifts and subtle border radius
• Recipe cards use generous 16px radius for a modern, friendly container feel
• Amber accent (#f0993c) for seasonal/event badges — keeps warm-food palette cohesive

Primary tasks

• Search for a recipe and try other keywords when nothing matches
• Browse everyday recipe categories like quick-and-simple or low-calorie
• Save a recipe to your collection to cook later
• Plan weekday dinners in the app while commuting
• Post your own recipe for the rest of the community

Brand Narrative

iCook (愛料理) — literally "love cooking" — was founded in 2011 by Polydice Inc. in Taipei, Taiwan, as a recipe-sharing community built around the belief that cooking is an act of love and self-expression accessible to anyone. The name "愛料理" (ài liào lǐ) pairs "love" (愛) with "cooking" (料理) to signal that the platform's mission is emotional, not merely functional.

Over fifteen years, iCook grew into Taiwan's leading food platform: 300,000+ recipes shared by home cooks, food professionals, and passionate community members ("每天都有新食譜" — new recipes every day). The ecosystem expanded from recipes into a lifestyle magazine (生活誌), a food marketplace (市集), cooking video content (愛料理 TV), and the iGood product recommendation service. Together they reflect a vision of cooking as a complete lifestyle practice.

The brand holds a deliberately non-intimidating visual identity: warm colors, system fonts, flat design — all signaling that cooking is for everyone, not just for experts. Polydice's choice to build the platform as a community (anyone can post a recipe) rather than a curated editorial voice is reflected in the design's openness and warmth.

Principles

1. Cooking is for everyone. iCook removes barriers rather than gatekeeping expertise. UI implication: category labels use casual language; beginner-friendly categories like "簡單快速" (Quick & Simple) have equal visual weight as advanced ones.
2. Food photography leads. The interface exists to surface beautiful food, not to showcase UI sophistication. UI implication: flat, warm neutrals keep the visual focus on food imagery; no shadows compete with photography.
3. Warmth over precision. The brand accent is coral-red (warm) rather than a pure red or orange precisely because warmth is the priority signal. UI implication: every color decision skews warm — ink brown over black, warm hairlines over cold grey.
4. Community-built authenticity. Recipes come from real home cooks, not chefs with credentials. UI implication: no gatekeeping visual hierarchy — all recipes presented equivalently; community contributors are the content heroes.
5. Everyday life, not special occasions. "300,000 道食譜，每天都有新食譜！" — the promise is daily, not seasonal. UI implication: the navigation surfaces everyday categories (簡單快速, 低卡瘦身) as prominently as seasonal features.

Personas

Personas below are fictional archetypes informed by iCook's publicly observable user segments (Taiwanese home cooks, food enthusiasts, health-conscious eaters), not individual people.

陳小雯, 28, 台北. A young professional cooking for herself after moving out. Doesn't identify as a "real cook" but wants to eat well. Gravitates to "簡單快速" and "都丟給電鍋" categories. Uses the app to plan weekday dinners while commuting.

林媽媽, 45, 台中. A home cook who has been on iCook since 2014. Shares her own recipes, collects others' rice cooker favorites, and browses seasonal ingredient features. The community aspect — seeing comments and bookmarks — is central to her experience.

黃阿志, 35, 高雄. Health-conscious professional who filters by "低卡瘦身" (low-calorie/slimming). Values the specific calorie/nutrition labeling on recipes and uses the iGood marketplace for kitchen tools. Trusts iCook as a credible source for health-oriented cooking.

王同學, 21, 台南. A university student making their first attempts at cooking. Drawn by humorous category labels and short-form video content on 愛料理 TV. App is the primary surface; mobile UX is the core experience.

Colors

Primary Brand

• iCook Coral-Red (#f04646): Primary brand color. The "下載APP" header button and "在 iCook App 開啟" recipe CTA button — the system's single decisive action color. Warm, approachable, kitchen-evoking.
• Coral Light (#ff6060): A brighter variant appearing on hover/active or banner overlays; softer adaptation of primary.

Interactive Accent

• Warm Coral (#f06354): Secondary interactive color for ghost circular buttons and section "更多" text links. Close enough to primary to feel cohesive, distinct enough to signal "secondary."
• Amber Orange (#f0993c): Seasonal event label and special-category badge; the warm-food orange that extends the palette without competing with coral-red.

Neutral & Surface

• Canvas White (#ffffff): Page background, card interiors, search bar, header.
• Warm Surface (#fbfaf8): Alternate warm-white section backgrounds; subtle differentiation from canvas.
• Surface Warm (#efeee8): Deeper warm surface, used for alternating content zones.
• Surface Mid (#f0f0f0): Homepage story card backgrounds — light neutral grey for recipe photo containers.
• Hairline (#e0d9d5): Dividers, fine borders — warm-tinted to avoid cold grey.

Text Hierarchy

• Ink Brown (#564e4a): Primary text and heading color — a warm dark brown used instead of pure black.
• Muted Brown (#89817d): Secondary copy, metadata, captions, placeholders.
• Muted Light (#706860): Tertiary labels.
• Faint (#a39b97): Disabled states, least-emphasis copy.

Typography

Font Family

iCook uses a pure system font stack — no custom or hosted typeface. On macOS/iOS: PingFang TC. On Windows: Microsoft JhengHei. Fallbacks: system-ui, -apple-system, emoji sets, sans-serif. This ensures zero font-loading latency for Chinese readers on every platform.

Hierarchy

Principles

• System-first: No Google Fonts or custom web fonts — the full hierarchy is expressed through size and weight alone.
• Weight as voice: Headlines use 600–700 to convey warmth and directness; body stays at 400 for comfortable readability of Chinese text.
• Ink brown over black: Body color is #564e4a — a warm dark brown that softens the interface and matches the food-forward personality.

Layout

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 15px, 16px, 24px, 32px, 48px
• Search bar uses 15px horizontal padding (measured live)

Grid & Container

• Full-width header with centered search bar
• Homepage features large story card blocks at 16px radius in a grid layout
• Recipe browse uses a 2-column list with thumbnail + metadata on desktop
• Category nav tabs run horizontally below the search bar at 40px height

Whitespace Philosophy

• Food photography first: whitespace and neutral surfaces are intentionally minimal so food imagery fills attention
• Flat but warm: surfaces differentiate via warm tints (#fbfaf8, #f0f0f0) rather than shadows
• Generous card radius: 16px on story cards gives a soft, modern container feel

Border Radius Scale

• None (0px): search input, certain nav elements
• Small (4px): buttons, badges, event cards — workhorse interactive radius
• Medium (8px): inline containers, info boxes
• Large (16px): story cards, photo containers
• Full (50% / 9999px): circular icon ghost buttons

Responsive Behavior

Breakpoints

Touch Targets

• Search bar: 44px height — comfortably tappable
• Primary CTA button: 32px height, padded for thumb reach
• Category nav tabs: 40px height with 16px horizontal padding
• Ghost icon buttons: 32px (8px padding all sides on icon)

Collapsing Strategy

• Category nav tabs: horizontal scroll on mobile; no wrapping
• Story cards: grid collapses to single column
• Header: burger menu or icon-only nav on small breakpoints

Elevation & Depth

iCook is a shadow-free design system. All depth is communicated through background tint changes and thin warm hairlines — consistent with a fast, image-first consumer app.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none
• shadow.card: 0 1px 4px rgba(0,0,0,0.08)

Motion & Easing

Durations:

Easings:

Motion rules: Motion is quiet and functional — this is a content-heavy food platform where the UI should get out of the way. Carousel slides transition at motion-standard / ease-enter; tab switches are nearly instant (motion-fast). No bounce or spring effects — food browsing should feel calm and comfortable. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the experience remains fully functional without any animation.

Components

Buttons

Primary Download CTA

• Background: #f04646
• Text: #ffffff
• Radius: 4px
• Padding: 1px 6px
• Font: 14px weight 500
• Height: 32px
• Use: "下載APP" in the global navigation header

App Open CTA

• Background: #f04646
• Text: #ffffff
• Radius: 4px
• Padding: 8px 16px
• Font: 14px weight 500
• Use: "在 iCook App 開啟" recipe page persistent CTA

More-link Text Button

• Text: #f06354
• Font: 16px weight 400
• Padding: 1px 6px
• Use: Section "更多" text-link buttons for browsing more recipes/events

Ghost Circle Icon Button

• Text: #f06354
• Border: 1px solid #f06354
• Radius: 50%
• Padding: 8px
• Height: 32px
• Use: Carousel/slider prev-next navigation buttons

Inputs & Forms

Global Search Bar

• Background: #ffffff
• Text: #564e4a
• Padding: 0px 15px
• Height: 44px
• Font: 14px weight 400
• Placeholder: #89817d
• Radius: 0px
• Use: Recipe keyword and ingredient search field in nav

Cards & Containers

Homepage Story Card

• Background: #f0f0f0
• Radius: 16px
• Shadow: none
• Use: Featured recipe cards on homepage with food photography

Event / Activity Card

• Background: #ffffff
• Text: #564e4a
• Radius: 4px
• Shadow: none
• Use: Activity/event cards in featured sections

Badges & Tags

Seasonal/Special Badge

• Background: #f0993c
• Text: #ffffff
• Radius: 4px
• Use: Seasonal ingredient highlight or special event label

Category Chip

• Text: #f06354
• Border: 1px solid #f06354
• Radius: 4px
• Use: Browse category with image overlay (e.g. "醬料運用", "排骨湯")

Tabs

Category Navigation Tabs

• Text (inactive): #564e4a
• Font: 16px / 700
• Padding: 0px 16px
• Height: 40px
• Active: text #f04646 + 2px bottom border #f04646
• Use: Main recipe browse tabs ("最新食譜", "人氣食譜", "低卡瘦身", "簡單快速", "飲料冰品")

Verified: 2026-06-22 Tier 1 sources: https://icook.tw, https://icook.tw/recipes/popular Tier 2 sources: getdesign.md/icook — 0 results (not listed); styles.refero.design/?q=icook — no matching entries Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use coral-red (#f04646) exclusively for primary CTAs (app download, recipe-open)
• Use warm coral (#f06354) for secondary interactive elements and text links
• Keep body text in ink-brown (#564e4a) — never pure black, never cold grey
• Rely on the system font stack — no custom fonts needed for CJK legibility
• Use warm background tints (#fbfaf8, #f0f0f0) to separate sections without shadows
• Apply 16px radius on recipe photo containers for a friendly, food-forward feel
• Show amber orange (#f0993c) only for seasonal or special occasion badges

Don't

• Spread coral-red across non-CTA elements — it must remain the clear action signal
• Use cold greys or blues for neutral surfaces — the palette stays warm throughout
• Add drop shadows — this is a flat system; depth comes from tint and hairlines
• Use a custom web font — PingFang TC/Microsoft JhengHei are the authoritative CJK stack
• Apply square corners to photo cards — the 16px radius is core to the friendly identity
• Use pure black (#000000) for body text — always use ink-brown #564e4a
• Introduce a second saturated color — amber and coral are the only accents

Voice & Tone

iCook's voice is warm, inclusive, and encouraging — the tone of a knowledgeable friend who loves food and wants everyone to cook with confidence. The homepage title "開啟美好生活，愛料理" ("Begin a beautiful life with iCook") frames cooking not as a chore but as a lifestyle practice. Content tone is conversational and inviting — category labels like "都丟給電鍋" ("Just throw it all in the rice cooker") use casual, humorous Chinese that lowers the barrier for beginners.

Voice samples (verbatim from live surface):

• "開啟美好生活，愛料理" — site tagline/logo caption. (verified live 2026-06-22)
• "都丟給電鍋" — category tab label (casual humor). (verified live 2026-06-22)
• "300,000 道食譜，每天都有新食譜！" — page title meta (scale + freshness promise). (verified live 2026-06-22)

Forbidden register: cold technical language, urgent/fear-based CTAs, overly formal Chinese (書面語).

Agent Prompt Guide

Quick Color Reference

• Primary CTA: iCook Coral-Red (#f04646)
• Secondary action / links: Warm Coral (#f06354)
• Seasonal badge: Amber Orange (#f0993c)
• Canvas: White (#ffffff)
• Surface tint: Warm White (#fbfaf8), Mid Grey (#f0f0f0)
• Heading / body: Ink Brown (#564e4a)
• Muted text: Muted Brown (#89817d)
• Hairlines: Warm Hairline (#e0d9d5)

Example Prompts

• "Create a recipe card: #f0f0f0 background, 16px radius, no shadow. Recipe title 20px PingFang TC weight 700 #564e4a. Metadata 14px weight 400 #89817d."
• "Design a category nav tab row: background #ffffff, 40px height, 16px horizontal padding, 16px/700 PingFang TC, text #564e4a. Active tab: text #f04646, 2px bottom border #f04646."
• "Build a download CTA button: #f04646 background, white text, 4px radius, 1px 6px padding, 14px/500. Place right-aligned in a white 56px header."
• "Create a section layout: white background, 24px/600 heading #564e4a, followed by a 2-column recipe card grid with #f0f0f0 card backgrounds at 16px radius."

Iteration Guide

1. Coral-red (#f04646) is the action color — keep it exclusive to CTAs
2. Warm coral (#f06354) handles secondary interactions, never competing with primary
3. Ink brown (#564e4a) is the text color — warmer than black, cozier than dark grey
4. System font stack for everything — weight (400/600/700) does the hierarchy work
5. No shadows — warm background tints and hairlines create the structure
6. 16px radius on photo containers; 4px on interactive buttons and badges

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #f04646 measures 3.70:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-app-open. Text #ffffff on #f04646 measures 3.70:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-amber. Text #ffffff on #f0993c measures 2.25:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.