Cookpad DESIGN.md

Overview

Visual Theme & Atmosphere

Cookpad (クックパッド) is Japan's dominant recipe-sharing platform — used by more than half the country's population at least once a month — and its visual identity is built to feel like a warm, well-lit home kitchen, not a glossy food magazine. The single most important atmospheric decision is the background: Cookpad does not sit on pure white. The working surface is a warm off-white (#F8F6F2, a soft cream), which immediately softens the whole interface and makes the food photography (the real star) feel like it's resting on a clean wooden countertop rather than a clinical screen. Recipe cards float on that cream as crisp white tiles, and the brand's friendly orange (#FF9933) appears on the primary action and brand mark like a pop of carrot or persimmon.

The mood is homey, appetizing, and unintimidating. Cookpad's premise is that everyday home cooking — not chef-grade technique — should be fun, so the design avoids anything that reads as elite or fussy. There are no dark moody food-blog aesthetics, no celebrity-chef polish; instead, generous warm neutrals, rounded 8px corners that feel soft and approachable, and large, mouth-watering recipe photos. Text is a near-black (#0F0F0F) for crisp readability against the cream, with a charcoal gray (#4A4A4A) for chrome and secondary UI. The primary button is a confident solid orange with white text and semibold (600) weight — friendly but clear.

Typography leads with Noto Sans backed by a system-font chain (system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial), rendering Japanese and alphanumerics cleanly without a bespoke webfont. Body sits at a comfortable 16px. The overall effect is a platform that feels like it's rooting for you in the kitchen — approachable, warm, photo-forward, and built so a tired parent on a Tuesday night can find dinner in three taps.

Key Characteristics:

• Warm off-white background #F8F6F2 (cream) — never pure white; the signature "home kitchen" canvas
• Friendly orange #FF9933 (verified live) as the primary action + brand color — appetizing, not corporate
• White recipe tiles floating on the cream base for crisp food-photo presentation
• Near-black text #0F0F0F for readability; charcoal #4A4A4A for chrome/secondary
• Soft, approachable 8px border-radius on buttons, cards, and category tiles
• Photo-forward: large, mouth-watering recipe images are the primary content
• Noto Sans-led system font stack; comfortable 16px body
• Primary button: solid orange, white text, 16px weight 600 — friendly but clear
• Warm accent neutrals (e.g. #FEF9EE cream tint, #ECEBE9 warm gray) keep the palette cozy
• Homey, unintimidating mood — everyday cooking made fun, never chef-elite

Primary tasks

• Search for a recipe by an ingredient you already have
• Browse ingredient and category tiles when nothing comes to mind
• Cook from a recipe's ingredient list and steps at the stove
• Save a recipe to find it again later
• Post your own recipes and read the made-it reports left on them

Brand Narrative

Cookpad was founded in Japan in 1997 by Akimitsu Sano (佐野陽光), an engineer trained in neural computing at Keio University who had been selling produce for local farmers on the side. Sano saw a decline in home cooking eroding people's connection to food, and believed technology could make everyday cooking fun again. The service launched in 1998 as "Kitchen@coin," was renamed Cookpad in 1999, and — after Sano dropped a paid-subscription model and made it free — grew into a vast community of user-submitted recipes long before social networks existed. By 2003 it had a million users in Japan; today more than half the Japanese population uses it monthly.

The design language flows directly from the mission "make everyday cooking fun." One, it must feel homey and unintimidating — hence the warm cream background, the friendly orange, the soft 8px corners, and the deliberate refusal of chef-elite polish. Cooking dinner on a Tuesday is the use case, not plating for Instagram. Two, food must look appetizing — hence the photo-forward recipe cards and the warm neutral canvas that makes images pop like food on a clean countertop. Three, it is fundamentally a community product — recipes come from millions of home cooks, and the "つくれぽ" made-it-report culture means the design celebrates ordinary people cooking for the people they love.

What Cookpad refuses: the moody dark aesthetics of premium food blogs, the celebrity-chef gloss of TV cooking brands, and the cold utility of a pure-white app. It chooses warmth, approachability, and community every time — software that feels like a friend cheering you on in the kitchen.

Principles

1. Make everyday cooking fun. The founding mission and the lens for every decision. UI implication: Warmth over polish, encouragement over instruction, approachable over elite. The cream background, friendly orange, and soft radius all serve this.

2. Food is the hero. Recipes exist to be cooked, and appetizing photos drive that. UI implication: Recipe cards are photo-forward; chrome stays out of the way; the warm canvas makes images pop. Don't clutter a card.

3. Never make the cook feel inadequate. Cookpad's user is a home cook, not a chef. UI implication: Plain helpful copy, no jargon, blameless errors, low-pressure CTAs. The voice roots for the user.

4. Community first. The platform is built on user recipes and made-it reports (つくれぽ). UI implication: Surface and celebrate contributors; make posting and reporting easy and warm; treat the community as the product, not an add-on.

5. Warm, not clinical. The whole interface should feel like a home kitchen. UI implication: Warm off-white #F8F6F2 instead of pure white; warm-neutral accents; soft corners; gentle (never dramatic) depth.

Personas

Personas are fictional archetypes informed by Cookpad's publicly-described user base (Japanese home cooks, majority of the population uses it monthly), not real individuals.

高橋 由美 (Yumi Takahashi), 36, Saitama. Working parent of two. Opens Cookpad on her phone in the supermarket and again at the stove. Searches by the ingredient she already has ("鶏むね肉"), wants a 3-tap path to a doable weeknight recipe. Posts an occasional つくれぽ when something works. Has zero patience for fussy or chef-grade instructions.

中村 健 (Ken Nakamura), 27, Tokyo. Lives alone, learning to cook to save money and eat better. Browses category tiles (麺 / ごはんもの) for ideas. Appreciates that Cookpad doesn't make him feel like a beginner — the warm, encouraging tone keeps him cooking instead of ordering delivery.

小林 さち (Sachi Kobayashi), 58, Hiroshima. Experienced home cook who contributes recipes and reads つくれぽ on her dishes. Cookpad is her community and her recipe box. Values the warmth and the recognition of fellow home cooks far more than any slick feature.

Colors

Values below are observed live from cookpad.com/jp computed styles (2026-05-19), supplemented by warm-neutral tints visible in the same render.

Brand

• Cookpad Orange (#FF9933): RGB rgb(255, 153, 51). The primary brand color — primary buttons, brand mark, key accents. Friendly, appetizing orange.
• Orange on white: primary button uses #FF9933 bg with #FFFFFF text.

Surface

• Warm Off-White / Cream (#F8F6F2): RGB rgb(248, 246, 242). The signature page background — soft cream, never pure white.
• Card White (#FFFFFF): Recipe cards and content tiles float on the cream.
• Cream Tint (#FEF9EE): RGB rgb(254, 249, 238). Subtle warm fill for highlighted/promoted regions.
• Warm Gray Surface (#ECEBE9): RGB rgb(236, 235, 233). Dividers, subtle fills.

Text

• Near-Black Text (#0F0F0F): RGB rgb(15, 15, 15). Primary text — recipe titles, body, on the cream and on white cards.
• Charcoal (#4A4A4A): RGB rgb(74, 74, 74). Chrome, secondary text, icon default, input text.
• White (#FFFFFF): Text on the orange primary button.

Accent / Misc

• Warm Yellow (#E9B83F): RGB rgb(233, 184, 63). Secondary warm accent (ratings/highlights), observed in the render.
• Pale Yellow Tint (#FAF5D7): RGB rgb(250, 245, 215). Light highlight fill.
• Scrim (rgba(0,0,0,0.2)): Image/overlay darkening on photo tiles.

Typography

Font Stack

noto-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, arial, sans-serif

Cookpad leads with Noto Sans for clean Japanese + alphanumeric rendering, then falls back to each platform's system font. No bespoke brand webfont — recipes load fast on every device.

Size Scale (observed)

Conventions

• 16px is the comfortable body default — readable for long recipe steps and ingredient lists.
• Weight 600 (semibold) carries buttons and titles; 700 for stronger headings. Hierarchy from size + weight + the warm background contrast.
• Body weight 400 for ingredient lists and step text — easy on the eye while cooking.
• Always carry the Noto Sans + system fallback chain; never hardcode a Latin-only font.

Layout

Density

Cookpad is medium density, photo-forward. The grid of recipe cards packs efficiently, but each card gives its food photo room to look appetizing. The warm #F8F6F2 background provides separation between white cards without heavy borders or shadows.

Spacing & Structure

• Top search bar is the hero — recipe discovery is the core loop
• Category tiles (large 64px, 8px radius, 16px padding) form a tappable navigation grid
• Recipe cards in a responsive grid float on the cream base
• Generous padding inside category tiles makes them comfortable tap targets

Responsive Behavior

Touch & Mobile

• Category tiles (~64px) and primary buttons (~48px) clear touch minimums comfortably
• Recipe photos crop responsively; titles stay readable at 16px
• Cookpad's core usage is mobile (cooking with a phone propped in the kitchen) — touch targets are generous by design

Elevation & Depth

Cookpad reads soft and mostly flat. Depth comes from the warm cream background separating white cards, plus the food photography itself. Shadows, where present, are gentle.

• Recipe cards: minimal shadow; cream-vs-white contrast + 8px radius separates them
• Photo tiles: a subtle rgba(0,0,0,0.2) scrim over images supports white overlay text
• Dropdowns / modals: light shadow + scrim
• The brand never goes heavy/glossy — the kitchen should feel calm, not dramatic

Values kept in prose

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

• shadow.soft: none — depth via warm cream background separating white cards

Motion & Easing

Cookpad's motion is gentle and warm — it supports a calm, fun cooking experience and never feels mechanical or aggressive. Motion clarifies and delights lightly; it doesn't dominate.

Durations:

Easings:

Spring stance. A single soft overshoot is permitted on the save / made-it-report interaction (the emotional, community moment), matching the warm brand register. Everywhere else, motion stays calm and standard — no bouncy chrome, no kinetic flourish on navigation.

Signature motions.

1. Recipe card image fade-in. Food photos fade in opacity 0→1 over motion-standard / ease-standard as they load — appetizing reveal, no slide.
2. Save-recipe heart. On tap, the heart icon scales 1.0 → 1.15 → 1.0 over motion-standard / ease-warm and fills orange — the one warm overshoot, fitting an emotional community moment.
3. Category tile press. Subtle background tint + motion-fast / ease-standard on press; tappable and immediate.
4. Modal enter. Scrim fades in; dialog appears with opacity + slight translate over motion-modal / ease-enter. Calm.

Reduce motion. Under prefers-reduced-motion: reduce, all motion-* collapse to motion-instant; the heart overshoot flattens to a simple fill; image fade-ins become immediate. Warmth never costs accessibility.

Verified: 2026-05-19 (omd:add-reference — JP batch) Tier 1 sources: https://cookpad.com/jp (live computed styles — primary orange #FF9933 [rgb 255,153,51], cream page bg #F8F6F2, text #0F0F0F, chrome #4A4A4A, 8px radius, primary button 16px/600 8px·24px, ~64px category tiles, Noto Sans system stack); https://info.cookpad.com (Cookpad corporate site, first-party). Tier 2 sources: medium.com/cookpadteam + Crunchbase (founding 1997 / Akimitsu Sano / mission "make everyday cooking fun"); getdesign.md / refero not separately fetched. Conflicts unresolved: Brief-supplied #FF7F33 corrected to live-verified #FF9933.

Components

Buttons

Primary

• Background: #FF9933 (Cookpad Orange)
• Text: #FFFFFF
• Radius: 8px
• Padding: 8px 24px
• Height: ~48px
• Font: 16px / 600
• Use: The main action — search, post a recipe, sign up

Secondary / Outline (inferred from palette)

• Background: #FFFFFF
• Text: #FF9933
• Border: 1px solid #FF9933
• Radius: 8px
• Use: Lower-emphasis action beside a primary

Text / Quiet

• Background: transparent
• Text: #4A4A4A (charcoal)
• Use: Tertiary/navigation actions

Disabled (inferred)

• Background: #ECEBE9 (warm gray)
• Text: #4A4A4A at reduced emphasis
• Use: Unavailable actions

Category Tiles

Category Button

• Background: transparent
• Text: #0F0F0F
• Radius: 8px
• Padding: 16px
• Height: ~64px
• Font: 16px / 400
• Use: Ingredient/category navigation (野菜 / お肉 / 魚介 / たまご …) — large, tappable, icon + label

Cards

Recipe Card

• Background: #FFFFFF
• Text: #0F0F0F
• Radius: 8px
• Padding: 0 (image-led; title strip below)
• Use: Recipe tile — large food photo on top, title (16px 600) + meta below, floating on the #F8F6F2 cream page

Promoted / Highlight Card (inferred from cream tints)

• Background: #FEF9EE (cream tint)
• Radius: 8px
• Use: Featured/promoted recipe regions

Inputs

Search Field (inferred from chrome)

• Background: #FFFFFF
• Text: #4A4A4A (placeholder), #0F0F0F (typed)
• Radius: 8px
• Padding: ~12px 16px
• Focus: border/ring in #FF9933
• Use: The central recipe search — the front door of the product

Badges

Rating / Highlight Badge (inferred)

• Background: #FAF5D7 (pale yellow) or #E9B83F
• Text: #4A4A4A / #0F0F0F
• Radius: 8px or full
• Use: Ratings, "つくれぽ" counts, promoted labels

States

Do's and Don'ts

• DO put the interface on the warm cream #F8F6F2, not pure white. DON'T use a clinical pure-white canvas — the warmth is the brand.
• DO reserve Cookpad Orange (#FF9933) for the primary action and brand mark. DON'T flood the UI with orange — it's a pop, not a wash.
• DO let food photography dominate the recipe cards. DON'T clutter cards with chrome that competes with the photo.
• DO use the soft 8px radius everywhere. DON'T use sharp corners or huge pill radii — 8px is the approachable signature.
• DO use near-black #0F0F0F text for readability on cream. DON'T use low-contrast gray for primary recipe text.
• DO keep copy warm, plain, and encouraging. DON'T adopt a chef-elite or fussy tone — everyday cooking is the point.
• DO make category tiles large and tappable (64px). DON'T shrink navigation into tiny dense rows — cooks browse with thumbs.
• DO lead with Noto Sans + system fallback. DON'T load a heavy brand webfont — recipes must load fast on every phone.

Voice & Tone

Cookpad's voice is warm, encouraging, and refreshingly unpretentious — the brand's mission is literally to make everyday cooking fun, and the copy embodies that. It speaks to the home cook who is tired, busy, and not a professional chef, and it never makes them feel inadequate. The register is friendly polite Japanese (です・ます調) with a homey, peer-to-peer warmth — closer to a helpful friend sharing a recipe than an authoritative cookbook. Community is central: Cookpad is built on user-submitted recipes and "つくれぽ" (made-it reports), so the voice celebrates the contributors and the act of cooking-for-others.

Forbidden patterns. Chef-elite condescension, fussy/technical jargon that intimidates home cooks, hype superlatives (究極の, プロ級), pressure/FOMO copy, exclamation-mark-button shouting, and anything that makes a tired parent feel they're cooking wrong. Cookpad roots for the cook.

Voice samples.

• レシピを投稿 — post-a-recipe action; community-celebrating.
• 検索 — the central recipe-search action.
• "Make everyday cooking fun" — Cookpad's stated mission.

Agent Prompt Guide

Quick Color Reference

• Primary / brand: Cookpad Orange #FF9933
• Page bg: warm cream #F8F6F2; card bg #FFFFFF
• Text: #0F0F0F; chrome/secondary #4A4A4A
• Warm accents: #E9B83F (yellow), #FEF9EE (cream tint), #FAF5D7 (pale yellow)
• Radius: 8px everywhere

Example Component Prompts

• "Create a Cookpad primary button: solid #FF9933 bg, white text, 8px radius, 8px 24px padding, height ~48px, 16px weight 600. Place it on a warm #F8F6F2 page background."
• "Build a Cookpad recipe card: white bg, 8px radius, large food photo filling the top, recipe title below at 16px weight 600 #0F0F0F, meta row in #4A4A4A. Float it on the #F8F6F2 cream page with minimal shadow."
• "Design a Cookpad category grid: large tappable tiles (~64px, 8px radius, 16px padding), transparent bg, icon + label at 16px #0F0F0F (野菜 / お肉 / 魚介 / サラダ …)."
• "Create a Cookpad search bar: white field, 8px radius, #4A4A4A placeholder, focus ring in #FF9933, pinned at top of a #F8F6F2 page. It's the front door of the product."

Iteration Guide

1. Warm cream #F8F6F2 background, never pure white — this is the brand's home-kitchen feel.
2. Orange (#FF9933) is a pop, not a wash — primary action + brand mark only.
3. Photos are the content — recipe cards exist to showcase appetizing food images.
4. 8px radius everywhere — soft and approachable.
5. Text #0F0F0F on cream/white for crisp readability; chrome #4A4A4A.
6. 16px body, weight 600 for buttons/titles — friendly but clear.
7. Large tappable navigation (64px category tiles) — cooks browse with thumbs.
8. Noto Sans + system fallback; never a heavy webfont.

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #ff9933 measures 2.13:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-secondary. Text #ff9933 on #ffffff measures 2.13:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.