---
title: "Alison Roman design system"
variant: extended
source: https://www.alisoneroman.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/alisoneroman-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Alison Roman · Design System

> Warm editorial storytelling, grounded in food and everyday life.

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.alisoneroman.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Alison Roman’s homepage pairs an understated cream-and-ink editorial shell with immersive cooking videos, recipe photography, and large literary headlines. A muted olive category interlude and dark footer add strong color punctuation without disrupting the calm, content-led rhythm.

## North star

Let warm editorial typography and tactile food imagery lead, keeping interface decoration quiet and the cream canvas continuous.

## Overview

The visual identity is built around a warm cream canvas (#fffaec), dark brown-black text (#290a08), and real food imagery rather than decorative interface effects. A slim, restrained navigation sits above a full-bleed video hero, where a large, light serif headline overlays the cooking footage and a simple contrasting CTA. Below, generous cream space gives recipe cards, product recommendations, and newsletter content room to breathe; thin warm-gray hairlines quietly separate editorial groupings. The full-width olive category section creates a deliberate pause, using oversized cream serif links as a typographic directory. Photography stays natural and tactile, with food, cookware, and candid lifestyle scenes carrying most of the color. Two newsletter/video moments and a quote feature add variety while preserving a clear vertical reading flow. The overall effect is personal, literary, and approachable: typography and imagery lead, while UI chrome remains minimal.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Kitchen Cream | `#fffaec` | `--color-kitchen-cream` | brand | Default page canvas and pale text on dark olive or image-backed areas. |
| Cocoa Taupe | `#826e65` | `--color-cocoa-taupe` | neutral | Muted supporting copy and secondary recipe descriptions. |
| Roasted Ink | `#290a08` | `--color-roasted-ink` | brand | Primary text, navigation, dark CTA fills, links, and the footer background. |
| Warm Hairline | `#d5ccc0` | `--color-warm-hairline` | neutral | Fine dividers and understated section or control outlines. |
| Olive Grove | `#827a04` | `--color-olive-grove` | accent | Full-width More to Explore category section and its background. |
| Custard Paper | `#fff3cc` | `--color-custard-paper` | surface | Quote feature and pale newsletter/card surfaces. |
| Clean Porcelain | `#ffffff` | `--color-clean-porcelain` | surface | Video-content section, card areas, and light CTA surfaces. |
| Slate Detail | `#15171a` | `--color-slate-detail` | semantic | Occasional product-card heading color; not the dominant brand text tone. |
| Tomato Red | `#810c00` | `--color-tomato-red` | accent | Accent within the newsletter promotional graphic, not a general page-wide color. |
| Oat Linen | `#f3ebdf` | `--color-oat-linen` | surface | Subtle media or button surface detail; secondary to the cream canvas. |

### Semantic aliases

`--color-canvas` → `#fffaec` (Kitchen Cream) · `--color-surface` → `#827a04` (Olive Grove) · `--color-surface-2` → `#290a08` (Roasted Ink) · `--color-surface-3` → `#fff3cc` (Custard Paper) · `--color-surface-4` → `#ffffff` (Clean Porcelain) · `--color-text` → `#290a08` (Roasted Ink) · `--color-text-muted` → `#826e65` (Cocoa Taupe) · `--color-text-subtle` → `#fffaec` (Kitchen Cream) · `--color-border` → `#d5ccc0` (Warm Hairline) · `--color-accent` → `#827a04` (Olive Grove) · `--color-accent-2` → `#810c00` (Tomato Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#290a08` | `#fffaec` | 17.65:1 | AAA |
| `#290a08` | `#827a04` | 4.15:1 | AA-large |
| `#290a08` | `#fff3cc` | 16.6:1 | AAA |
| `#826e65` | `#fffaec` | 4.61:1 | AA |
| `#826e65` | `#827a04` | 1.08:1 | fail |
| `#826e65` | `#290a08` | 3.83:1 | AA-large |
| `#826e65` | `#fff3cc` | 4.34:1 | AA-large |
| `#fffaec` | `#827a04` | 4.25:1 | AA-large |
| `#fffaec` | `#290a08` | 17.65:1 | AAA |
| `#fffaec` | `#fff3cc` | 1.06:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Modale Antique | `--font-body` | webfont | 400, 300, 500 | Navigation, body copy, buttons, captions, and many recipe links and headings. | DM Sans |
| Jannon Neo | `--font-display` | webfont | 400, 300 | Display headlines, editorial headings, and prominent recipe links. | Cormorant Garamond |

- **Modale Antique:** Mostly regular weights; use restrained tracking, compact body leading, and uppercase, widely tracked eyebrow labels.
- **Jannon Neo:** Light, literary serif display; large headings use tight negative tracking and natural mixed case.

### Type scale — Perfect Fifth (ratio ≈ 1.461, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 300 | 1 | -0.03em | — | Jannon Neo | Oversized hero or category display headlines. |
| h1 | 80px | 300 | 1 | -0.03em | — | Jannon Neo | Primary hero and major editorial headlines. |
| h2 | 48px | 300 | 1 | -0.03em | — | Modale Antique | Section headings such as recipe and newsletter titles. |
| h3 | 32px | 400 | 1.1 | -0.02em | — | Jannon Neo | Recipe names and prominent editorial card titles. |
| h4 | 25.5px | 400 | 1.5 | 0 | — | Modale Antique | Supporting feature and content headings. |
| body | 18px | 400 | 1.2 | -0.01em | — | Modale Antique | Introductory copy, descriptions, and editorial text. |
| caption | 14px | 400 | 1.3 | 0 | — | Modale Antique | Dates, short image captions, and fine supporting notes. |
| button | 18px | 500 | 1.5 | 0 | — | Modale Antique | Compact navigation and action labels. |
| nav | 18px | 400 | 1.2 | -0.01em | — | Modale Antique | Header and footer navigation links. |
| link | 32px | 400 | 1.1 | -0.02em | — | Jannon Neo | Large linked recipe or category titles. |
| eyebrow | 20px | 400 | 1.4 | 0.24em | uppercase | Jannon Neo | Small uppercase labels above section content. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 36, 80, 160 px.
- Section rhythm 32px · element gap 24px · card padding — · max content width 1200px.

A comfortable, vertically flowing editorial page uses a measured maximum content width of 1200px, with full-bleed media and selected full-width color bands breaking out of the contained sections. Navigation distributes links around a centered wordmark. Recipe and newsletter feeds use four-column card layouts, while feature sections center their headings and media. The category directory is a single centered column of oversized links. Thin rules mark transitions, and broad intervals between major blocks keep the long page from feeling crowded.

## Shape & elevation

- Radius: button `50%` · card `5px` · xs `5px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no meaningful shadow language. Warm hairlines separate editorial groups, and image or video panels provide their own depth through photography rather than card elevation. Cards remain mostly open and unboxed; only a slight measured card radius appears on selected product content, while buttons look visually square in the screenshot.

## Imagery

Food photography and cooking video are the main visual content, presented as large, natural-looking images with little interface framing. The hero and newsletter feature use full-width video with overlaid text; recipe and product feeds use neatly aligned image cards. Lifestyle and cookware imagery adds variety. The quote panel includes delicate botanical line art, while the newsletter graphic uses a distinct red illustrated pattern.

## Components

### Split-link navigation

A slim cream header places small dark links on both sides of a centered Alison Roman wordmark, with Subscribe as a dark button.

### Video hero

Full-bleed cooking footage carries a large light serif headline and a compact white Order here CTA.

### Recipe card feed

A four-column image-led row pairs food photography with serif recipe titles, quiet descriptions, and a centered dark See more button.

### Olive category directory

A full-width #827a04 panel stacks oversized cream serif category links in one centered column, divided into two groups.

### Newsletter feature

A centered video callout and a separate red illustrated subscription panel provide distinct editorial and signup moments.

### Quote feature

A #fff3cc band presents a prominent recipe quotation with attribution and faint botanical line art.

### Multi-column footer

A #290a08 footer combines the handwritten-style AR mark with grouped cream navigation links.

### Measured component styles

- **Primary button** (“See more”): background #290a08 · text #ffffff · radius 0px · padding 8px 32px · 500 18px Modale Antique
- **Secondary button** (“Order here”): background #ffffff · text #290a08 · radius 0px · padding 8px 32px · 500 18px Modale Antique
- **Link** (“Grilled Zucchini with Garlic and Dill If”): transparent background · text #290a08 · radius 0px · padding 0px · 400 25.6px Modale Antique
- **Card** (“Subscribers Only”): background #fff3cc · text #290a08 · radius 0px · padding 0px · 400 25.6px Modale Antique
- **Navigation item** (“Newsletters”): transparent background · text #290a08 · radius 0px · padding 2px 6px · 400 18px Modale Antique

## Do

- Keep the warm cream canvas continuous across most sections.
- Use Jannon Neo-style serif typography for large editorial statements.
- Let food photography and cooking footage dominate feature areas.
- Reserve olive green for a clear, full-width category interlude.
- Use dark brown-black for primary copy and prominent CTA fills.
- Separate content groups with fine, warm hairlines.
- Keep card treatments open, with generous surrounding space.

## Don't

- Do not introduce gradients or decorative interface shadows.
- Do not turn every section into a boxed card grid.
- Do not use bright red as a page-wide brand color.
- Do not replace the large serif headlines with heavy geometric display type.
- Do not crowd the long-scroll layout with dense UI controls.
- Do not add extra colored bands that compete with the olive section.
- Do not treat colors seen only in food photos as interface tokens.

## Agent prompt

Build a new food-editorial page in Alison Roman’s visual language. Use Kitchen Cream (#fffaec) as the dominant canvas, Roasted Ink (#290a08) for text and dark actions, and Cocoa Taupe (#826e65) for secondary copy. Use Olive Grove (#827a04) sparingly for one strong full-width category band; keep Tomato Red (#810c00) confined to an illustrated promotional asset. Pair light, literary serif display headlines with restrained sans-serif navigation and body copy. Organize the page as a calm vertical story: slim split navigation, immersive food media, image-led editorial cards, a category directory, newsletter content, and a quiet footer. Prefer natural food photography, thin warm dividers, open card layouts, and ample breathing room. Avoid gradients, heavy shadows, and unnecessary ornamental UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cooking video beneath the navigation, with centered-left headline and CTA. | Overlay headline, Order CTA | Full-bleed video, Light serif title, White button |
| 2 | product-grid | Editorial introduction followed by a four-column recipe row. | Recipe discovery, See more action | Cream canvas, Image cards, Fine divider |
| 3 | category-nav | Full-width olive section with two centered stacks of large links. | Browse by category, Grouped destinations | Olive band, Oversized serif links, Uppercase eyebrows |
| 4 | video | Wide video panel with a small centered text overlay. | Newsletter discovery, In-video message | Full-width footage, Centered overlay copy |
| 5 | newsletter | Centered illustrated subscription panel within the cream page. | Email signup, Subscribe action | Red striped graphic, Large serif heading, Light input surface |
| 6 | product-grid | One-row cookware and kitchen-tool recommendations. | Product discovery, See more action | Four product images, Serif labels, Thin top rule |
| 7 | content-feed | Four-column newsletter and editorial card feed. | Browse past newsletters, See more action | Image cards, Small dates, Serif titles |
| 8 | testimonials | Wide quote panel with text above botanical line art. | Featured quotation, Source attribution | Custard background, Editorial quote, Faint line illustration |
| 9 | other | Continuation of the pale illustrated quote area. | Visual breathing space | Pale background, Botanical line art |
| 10 | video | White feature area with text, video, and a separate viewing link. | Watch video, Read feature introduction | Three-part horizontal composition, White surface |
| 11 | footer | Dark full-width footer with brand mark and three link columns. | Secondary navigation, Social and policy links | Roasted Ink background, Cream links, Brand monogram |

## Source CSS custom properties (selected)

```css
--color-primary-text: #15171a;
--color-secondary-text-dark: rgba(0,0,0,.4);
--color-secondary-text-light: hsla(0,0%,100%,.64);
--color-secondary-text: rgba(0,0,0,.4);
--color-white: #fff;
--color-lighter-gray: #f6f6f6;
--color-light-gray: #e6e6e6;
--color-mid-gray: #ccc;
--color-dark-gray: #444;
--color-darker-gray: #15171a;
--color-black: #000;
--color-border: rgba(0,0,0,.08);
--font-sans: "Modale Antique",sans-serif;
--font-serif: "Jannon Neo",serif;
--font-mono: Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;
--gap: clamp(2rem,1.82vw + 1.27rem,3.6rem);
--head-nav-gap: 28px;
--header-spacing: 80px;
--ghost-accent-color: #290A08;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/alisoneroman-com