# AI Guide — Recipe page

- **Slug:** `recipe-page`
- **Category:** Articles & Editorial · Specialized Formats
- **Tags:** Articles & Editorial, Specialized Formats, Recipe
- **Source:** library import
- **Preview:** `preview.png`

## Agent brief

> Use “Recipe page” as the visual direction for this interface. It belongs to Articles & Editorial / Specialized Formats. Study the reference for its hierarchy, typography, color system, spacing, density, border treatment, and interaction vocabulary. Adapt those principles to my product and content—do not copy the sample brand or wording. If I provide an HTML export of the reference, inspect its inline computed CSS, embedded fonts, and asset data for exact visual values; treat it as an implementation reference, not production-ready source. Keep the result responsive, accessible, and production-ready.

## Design tokens (auto-extracted from this category's source JSX)

### Colors

| Hex | Occurrences |
| --- | --- |
| `#fff` | 15 |
| `#d8456e` | 14 |
| `#7a5af8` | 11 |
| `#5a6a64` | 10 |
| `#181410` | 8 |
| `#1a1f3a` | 8 |
| `#5b5bd6` | 7 |
| `#7a7a86` | 7 |
| `#6aa8ff` | 7 |
| `#ecebef` | 6 |
| `#2f6a4a` | 6 |
| `#445a50` | 6 |

### Shape

Border radii (px): 2, 3, 4, 5, 6, 7, 8, 12, 14, 16, 22

## Where the design lives

- Full-size preview: `preview.png` (720px, lossless)
- Detail page: `index.html`

## How to reproduce this design

1. Open the full-size preview (`preview.png`) and study the layout.
2. Apply the token values above (colors, fonts, sizes, radii) as the design system.
3. Rebuild the screen in your target stack (HTML/CSS, React, React Native, etc.),
   keeping the hierarchy, density, spacing, and interaction vocabulary of the reference.
4. Do not copy the sample brand or wording — adapt to the product's real content.
5. Verify: canvas background, type sizes/weights, spacing rhythm, and the do/don't
   principles from the agent brief above.