flowmanceRecipa Design System
Recipa is a cheerful personal food blog. It feels fresh and homemade: a white page with mint bands, black Inter 600 headlines, forest green #00693D for every action, and cartoon vegetable doodles (beetroot, cheese, tomato, carrot, chard, broccoli) scattered around warm, natural-light kitchen photos. Shapes are soft (circles, pills, 10px cards) and the only buttons are thin green outlines.
Four signatures make it recognisable:
- The green last word with a sparkle. Headlines end in green, followed by a small hand-drawn three-stroke sparkle: Come, let's savor the goodness of my nutritious., Recipes categories., Latest recipes., My insight.
- Hollow-dot eyebrow. A 10px green ring (2px border, no fill) and a 16px green label: Welcome to Recipa, About me.
- Mint category circles. Four large #E8FCF1 circles, each with a green line icon and a green label (Breakfast, Lunch, Drink, Dessert).
- Frosted recipe meta. Every recipe photo carries a white pill chip top-right and a frosted white strip at the bottom with green clock 20min · person 4 Servings · bars Easy.
Colors
Surfaces
#FFFFFFPage background, recipe cards, chips, tabs
#EEFFF6Mint bands (latest recipes, Instagram), dropdown link hover
#E8FCF1Category circles
#F7F8FCNewsletter field in the footer
#FFFFFF#00693DGreen testimonial/shop panel
Ink
#FFFFFFText on green
#020202Headlines, nav links, card titles
#26272BTabs, chips, footer links
#555555Category text on blog cards
#858585Paragraphs (base p), hero lead, card descriptions
#8A8A8AGrey text links
#FFFFFF#FFFFFFText on inverse-canvas
Action
#00693DOutline buttons, links, eyebrows, the green half of headlines, recipe meta, active tab, footer titles
#009C5BOutline button fill on hover
Lines & effects
#00693D · 22%1px input border
#E1E1E1#00693D · 15%Light green fills (9 uses)
#FFFFFF · 80%Recipe meta strip over photos
#00693D · 10%Tab and chip shadow 0 4px 10px
Typography
Inter · display-hero
The quick brown fox jumpsHero h1, three lines. 63px · 600 · 1.1 · -1px
Inter · headline-lg
The quick brown fox jumpsSection titles (8 uses). 50px · 600 · 1.2 · -1px
Inter · title-lg
The quick brown fox jumpsBlog card titles. 26px · 600 · 1.3
Inter · body-xl
The quick brown fox jumpsHero lead in ink-muted. 21px · 500 · 1.3 · -0.5px
Inter · label-category
The quick brown fox jumpsCategory circle labels. 18px · 500 · 1.11
Inter · eyebrow
The quick brown fox jumpsEyebrow labels. 16px · 500 · 1.1
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | .section is 150px top and bottom with 5% side padding (72px at 1440) |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768, 1440 and 1920px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 25px | |
md | 30px | |
lg | 50px | |
xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 25px | |
section-logo-bottom | 60px | |
section-band | 65px | |
section-logo-top | 70px | |
gutter | 72px | |
section-about | 95px | |
section | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Scroll fade-in | Opacity 0 → 1, 1000ms outQuart |
| Doodle drift | On mouse move, doodles shift y ±10px, x ±10px or x ±4px over 500ms, returning with 1000ms outQuart |
| Icon and social hover | scale 1 → 1.1, 100ms ease (icons) or 200ms (social links) |
| Outline button hover | Fill and border to #009C5B, text to white, 200ms cubic-bezier(0.645, 0.045, 0.355, 1) |
| Tabs | transition: all 0.2s |
| Nav and footer links | Colour to green, 300ms |
| Dropdown | Caret rotation 400ms swingTo, size 300ms ease |
Do’s and don’ts
- End every headline with its last word in #00693D followed by the sparkle doodle.
- Use the green outline button (2px #00693D, 5px radius, 52px) for actions; it fills #009C5B on hover.
- Open sections with the hollow green ring eyebrow (10px, 2px border) and a 16px 500 label.
- Put recipe meta in a frosted strip (#FFFFFF at 80%, blur 8px) with green icon + value pairs.
- Alternate white sections with #EEFFF6 mint bands, 150px padding.
- Scatter a few cartoon vegetable doodles in the margins.
- Add a solid filled green button as the default action; filled green is only for the active tab and the green panel.
- Use ink-muted #858585 or ink-subtle #8A8A8A for small or long text; they are low contrast. Keep them at 16px+ for 1–3 lines.
- Set button labels below 16px 600: white on the #009C5B hover is about 3.6:1.
- Use grey shadows; the only shadow is green at 10%.
- Use Finger Paint or a second font family; it is loaded but unused.
- Use sharp corners on photos or tight square cards.
Example prompt
Any page in the Recipa style
More design systems like this
Restaurant design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Recipa design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/recipa.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows