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

# Fallen Grape · Design System

> Natural wine in a sun-warmed editorial landscape

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.fallengrape.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._

Fallen Grape pairs warm, earthy page surfaces with a storybook illustrated wine hero and tactile product photography. Editorial serif headlines and compact uppercase labels give the online shop a relaxed, considered rhythm.

## North star

Keep the shop feeling like a warm editorial wine journal: parchment canvas, expressive Romie typography, vivid imagery, and restrained brown-and-orange controls.

## Overview

The page uses a parchment-like #ece0d2 canvas throughout, so the illustrated hero and product images supply most of the visual variation. Deep brown #573d21 anchors navigation, headings, product names, and rules; muted brown #7c664d softens secondary text. Warm orange accents, especially #e3a36e and #efa164, identify shop actions and echo the wine imagery. Romie supplies the expressive display and body voice, while bold Arial Narrow in uppercase creates compact section labels and product titles. The opening is a full-bleed illustrated landscape with centered messaging and a clear shop action. Below it, centered product collections use image-led grids, followed by an asymmetric about section and a broad peach contact panel. Sections have generous breathing room despite compact internal spacing. Product cards remain square-cornered and mostly flat; thin borders and restrained navigation shadow provide definition without making the page feel polished or corporate.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Parchment Canvas | `#ece0d2` | `--color-parchment-canvas` | brand | Dominant page canvas, hero surroundings, and footer ground; let its warm cream tone unify the long page. |
| Apricot Signal | `#efa164` | `--color-apricot-signal` | accent | Measured button accent; a warm shop-action color that echoes the wine artwork. |
| Grape Brown | `#573d21` | `--color-grape-brown` | brand | Primary text, navigation, product links, button labels, and defining hairline borders. |
| Muted Cellar | `#7c664d` | `--color-muted-cellar` | neutral | Secondary copy and footer text where softer contrast supports the primary brown. |
| Soft Chalk | `#f3f3f3` | `--color-soft-chalk` | surface | Light card and navigation surface in measured UI; secondary to the parchment page canvas. |
| Oat Border | `#ddcfc0` | `--color-oat-border` | surface | Subtle section surface and border tone, separating areas without introducing a hard contrast. |
| Harvest Orange | `#e3a36e` | `--color-harvest-orange` | accent | Primary shop button fill and skip-link accent, paired with Grape Brown text. |
| Browser Link Blue | `#0000ee` | `--color-browser-link-blue` | semantic | Measured link-color outlier; not a defining brand color and should not be promoted as a visual accent. |
| Blush Sand | `#e1c6ab` | `--color-blush-sand` | neutral | Minor measured button and footer color; use only for subtle supporting details, not as a dominant surface. |

### Semantic aliases

`--color-canvas` → `#ece0d2` (Parchment Canvas) · `--color-surface` → `#f3f3f3` (Soft Chalk) · `--color-surface-2` → `#ddcfc0` (Oat Border) · `--color-text` → `#573d21` (Grape Brown) · `--color-text-muted` → `#7c664d` (Muted Cellar) · `--color-border` → `#ddcfc0` (Oat Border) · `--color-accent` → `#e3a36e` (Harvest Orange) · `--color-accent-2` → `#efa164` (Apricot Signal) · `--color-accent-3` → `#0000ee` (Browser Link Blue) · `--color-on-accent` → `#573d21` (Grape Brown)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#573d21` | `#ece0d2` | 7.71:1 | AAA |
| `#573d21` | `#f3f3f3` | 9.03:1 | AAA |
| `#573d21` | `#ddcfc0` | 6.57:1 | AA |
| `#7c664d` | `#ece0d2` | 4.18:1 | AA-large |
| `#7c664d` | `#f3f3f3` | 4.9:1 | AA |
| `#7c664d` | `#ddcfc0` | 3.56:1 | AA-large |
| `#e3a36e` | `#ece0d2` | 1.66:1 | fail |
| `#e3a36e` | `#f3f3f3` | 1.95:1 | fail |
| `#e3a36e` | `#ddcfc0` | 1.41:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Romie | `--font-body` | webfont | 400, 700 | Display headlines, large editorial links, and body copy. | Cormorant Garamond |
| Arial Narrow | `--font-display` | webfont | 700, 400 | Uppercase section headings, product titles, navigation labels, captions, and compact UI. | Barlow Condensed |

- **Romie:** Use regular weight for expressive headings and body; keep the voice refined and natural rather than formal.
- **Arial Narrow:** Use bold condensed lettering for labels and product names; uppercase is common, with modest tracking on small captions.

### Type scale — Perfect Fifth (ratio ≈ 1.474, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.3 | 0 | — | Romie | Large editorial statement, especially the hero headline. |
| h1 | 48px | 400 | 1.3 | 0 | — | Romie | Primary page or section-level editorial heading. |
| h2 | 24px | 700 | 1.3 | 0 | uppercase | Arial Narrow | Bold uppercase section titles such as product collection headings. |
| body | 20px | 400 | 1.3 | 0.03em | — | Romie | Brand story and descriptive copy, with gently open tracking. |
| caption | 16px | 700 | 1.5 | 0.063em | — | Arial Narrow | Compact bold labels and supporting metadata. |
| button | 15px | 400 | 1.2 | 0 | — | Romie | Short shop-action and utility button text. |
| nav | 13px | 700 | 1.3 | 0 | uppercase | Arial Narrow | Compact uppercase navigation items. |
| link | 24px | 700 | 1.3 | 0 | uppercase | Arial Narrow | Prominent uppercase product names and collection links. |
| eyebrow | 14px | 400 | 1.3 | 0.043em | uppercase | Arial Narrow | Small uppercase introductory or category labels. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 5, 7, 8, 10, 17, 20, 24, 30, 36, 48, 50, 60, 110 px.
- Section rhythm 36px · element gap 10px · card padding 6px · max content width 1240px.

The desktop page uses a wide canvas, with measured content capped at 1240px and a compact underlying spacing scale. A full-bleed, two-column hero gives way to centered intro copy and product areas arranged in three-, four-, and five-column grids. The about section switches to a two-column image-and-copy composition; contact and footer blocks follow. Most section headings are centered, while story and contact copy align left. Keep the vertical rhythm open between sections and the spacing tighter within product groups.

## Shape & elevation

- Radius: button `50%` · badge `9999px`
- Shadow `lg` (nav): `rgba(0, 0, 0, 0.1) 0px 4px 30px 0px`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The composition is mostly flat: square-cornered product cards, no prominent card shadows, and simple section surfaces. Use brown hairlines to distinguish selected content areas. The navigation is the main measured elevated element, with a restrained soft shadow; avoid stacking multiple shadow treatments.

## Imagery

The hero is a full-bleed, storybook-style illustration with a central bottle, layered hills, foliage, and small insects. Product and merch areas rely on close, colorful photographs presented in straightforward square-cornered cards. A smaller bottle illustration supports the about story. Image colors can be more saturated than the interface palette; treat those hues as artwork, not additional brand tokens.

## Components

### Announcement strip

A narrow warm-orange message band sits above the hero with a small centered uppercase announcement.

### Navigation

Compact shop and about links sit over the hero, with the centered wordmark and account/cart utilities; use brown text and a subtle shadow where needed.

### Shop CTA

Use a warm orange rectangular button with brown text; the measured shop button uses uppercase condensed type.

### Product cards

Show square-cornered product imagery first, then compact uppercase condensed titles and understated price copy.

### Product carousels

Collection rows use image-led cards, restrained side arrows, and small centered pagination indicators.

### About split

Pair a brand illustration with a left-aligned story block separated by a thin brown rule.

### Wholesale contact panel

Set a large editorial contact prompt inside a broad peach-toned rectangular panel.

### Footer

Use a parchment ground, small uppercase link groups, a centered hand-drawn mark, and muted legal details.

### Measured component styles

- **Primary button** (“Skip to content”): background #e3a36e · text #573d21 · radius 0px · padding 0px · 400 15px Romie
- **Secondary button**: background #efa164 · text #573d21 · border 1px solid #efa164 · radius 50% · padding 0px · 400 20px Romie
- **Link** (““MOTHER” - SKIN CONTACT ORANGE WINE”): transparent background · text #573d21 · radius 0px · padding 0px · 700 24px Arial Narrow · uppercase
- **Card** (“ABOUT US At Fallen Grape we work with ge”): transparent background · text #573d21 · border 1px solid #573d21 · radius 0px · padding 24px 0px 0px 0px · 400 20px Romie
- **Badge**: background #573d21 · text #ece0d2 · border 1px solid #573d21 · radius 40px · padding 5px 13px 6px 13px · 700 12px Romie
- **Navigation item** (“SHOP ALL SHOP MERCH ABOUT US”): transparent background · text #573d21 · radius 0px · padding 0px · 400 20px Romie

## Do

- Use #ece0d2 as the dominant page canvas.
- Set primary copy and navigation in #573d21.
- Reserve warm orange fills for clear shop actions.
- Pair Romie display copy with condensed uppercase labels.
- Let product photography and the illustrated hero provide visual color.
- Keep product cards square-cornered and largely flat.

## Don't

- Do not turn illustration-only hues into interface colors.
- Do not use browser-blue links as a signature accent.
- Do not add rounded product-card corners.
- Do not crowd the page with heavy shadows or gradients.
- Do not apply uppercase condensed styling to all body copy.
- Do not replace the warm canvas with a stark white page.

## Agent prompt

Build a new Fallen Grape page as a warm, editorial wine-shop experience. Use Parchment Canvas (#ece0d2) as the dominant ground, Grape Brown (#573d21) for navigation, headings, copy, and rules, and Harvest Orange (#e3a36e) for primary shop actions; Apricot Signal (#efa164) is a related measured accent. Use Romie or a close editorial serif such as Cormorant Garamond for expressive headings and body copy, paired with bold condensed uppercase labels in Barlow Condensed. Keep the layout image-led, with a wide illustrated or photographic feature followed by centered collection grids, a story split, and a spacious footer. Favor square corners, thin borders, and minimal shadow. Treat saturated colors inside product images as artwork rather than interface tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed two-column illustrated hero with centered headline and shop action. | Shop all CTA, top announcement, overlay navigation | layered landscape illustration, centered wordmark, warm orange button, serif headline |
| 2 | other | Single-column centered statement on the continuing canvas. | brand positioning | large serif copy, open whitespace |
| 3 | product-showcase | Centered section heading above three product images and a shop action. | bundle discovery, direct shop CTA | three-column image row, compact button, centered heading |
| 4 | product-grid | Centered title with a four-column wine product collection. | product browsing, carousel arrows, pagination indicators | square product photos, uppercase product names, price labels |
| 5 | product-grid | Centered title above a five-column merchandise collection. | merchandise discovery, carousel arrows, pagination indicators | apparel photography, compact product labels, price labels |
| 6 | feature-split | Two-column split with an illustration beside left-aligned story copy. | brand storytelling | illustration and text, thin brown rule, editorial body copy |
| 7 | contact | Broad peach panel containing a left-aligned editorial contact prompt. | wholesale inquiry link | large serif prompt, contrasting panel |
| 8 | footer | Four-column footer with sign-up message, central mark, and grouped links. | newsletter prompt, support navigation, social links | uppercase small headings, hand-drawn mark, muted legal row |

## Source CSS custom properties (selected)

```css
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--color-base-text: 87, 61, 33;
--color-shadow: 87, 61, 33;
--color-base-background-1: 236, 224, 210;
--color-base-background-2: 243, 243, 243;
--color-base-solid-button-labels: 87, 61, 33;
--color-base-outline-button-labels: 87, 61, 33;
--color-base-accent-1: 227, 163, 110;
--color-base-accent-2: 239, 161, 100;
--payment-terms-background-color: #ece0d2;
--gradient-base-background-1: #ece0d2;
--gradient-base-background-2: #f3f3f3;
--gradient-base-accent-1: #e3a36e;
--gradient-base-accent-2: #efa164;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
--collection-card-corner-radius: 0.0rem;
--collection-card-text-alignment: left;
--collection-card-border-width: 0.0rem;
```

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