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

# Ghia · Design System

> A sun-warmed apéritif world in bold, playful contrast.

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

Ghia’s homepage pairs a warm, restrained canvas with oversized condensed headlines, vivid product imagery, and confident burgundy accents. The result feels like an editorial Mediterranean drinks campaign shaped into a shoppable storefront.

## North star

Let warm editorial restraint frame vivid product imagery, with burgundy typography and small, decisive pink or yellow accents.

## Overview

The visual system is built around a creamy canvas (#fef6ee) and deep burgundy (#651c32), letting large condensed uppercase headlines carry the editorial voice. A vivid pink CTA (#ef6079) and lemon-yellow labels (#f0e87b) provide compact moments of emphasis without diluting the restrained base. The opening hero is an immersive, full-bleed product photograph with light navigation and headline overlays; below it, product cards return to a consistent shop grid. Sections alternate between open cream layouts and art-directed feature panels, including blue cookbook imagery and a deep green newsletter footer. FHA Condensed French NC gives display copy a tall, poster-like silhouette, while Vivey 22 Positive keeps navigation and product details approachable. Deliberate image-led color variation is allowed inside campaigns and product photography, while the burgundy, cream, and pink remain the recognizable interface anchors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Apéritif Burgundy | `#651c32` | `--color-ape-ritif-burgundy` | brand | Primary display and body text, links, inverse product strips, and strong badges. |
| Cream Canvas | `#fef6ee` | `--color-cream-canvas` | surface | Main page canvas and light text on dark sections and buttons. |
| Citrus Label | `#f0e87b` | `--color-citrus-label` | accent | Small bestseller and founder badges; a limited highlight inside product storytelling. |
| Bottle Black | `#000000` | `--color-bottle-black` | surface | Dark product-card and media backgrounds, especially behind bottle photography. |
| Fizz Pink | `#ef6079` | `--color-fizz-pink` | accent | Primary SHOP NOW button and occasional navigation or campaign emphasis. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Clean button and card surfaces, including selected light content panels. |
| Olive Footer | `#3e4938` | `--color-olive-footer` | surface | Large closing newsletter and footer section background. |
| Campaign Blue | `#3a7bc8` | `--color-campaign-blue` | semantic | Blue campaign and illustrated card areas; not a core interface color. |
| Riviera Blue | `#4a7cbe` | `--color-riviera-blue` | semantic | Cookbook feature panel and promotional artwork, rather than a site-wide surface. |
| Sky Type | `#abd2eb` | `--color-sky-type` | accent | Light blue navigation and footer text, including oversized footer brand lettering. |
| Rose Hairline | `#c09ea3` | `--color-rose-hairline` | neutral | Measured button-border tone and subtle outlined control detailing. |
| Sea Glass | `#b6cfd0` | `--color-sea-glass` | semantic | Small card and graphic details; secondary to the main palette. |
| Herb Green | `#6a8248` | `--color-herb-green` | semantic | Green product-card and flavor artwork, not a general page background. |
| Blood Orange | `#e2503b` | `--color-blood-orange` | semantic | Occasional flavor-card artwork accent, not a standard CTA color. |

### Semantic aliases

`--color-canvas` → `#fef6ee` (Cream Canvas) · `--color-surface` → `#651c32` (Apéritif Burgundy) · `--color-surface-2` → `#000000` (Bottle Black) · `--color-surface-3` → `#ffffff` (Studio White) · `--color-surface-4` → `#3e4938` (Olive Footer) · `--color-text` → `#651c32` (Apéritif Burgundy) · `--color-text-muted` → `#fef6ee` (Cream Canvas) · `--color-text-subtle` → `#abd2eb` (Sky Type) · `--color-border` → `#c09ea3` (Rose Hairline) · `--color-accent` → `#651c32` (Apéritif Burgundy) · `--color-accent-2` → `#ef6079` (Fizz Pink) · `--color-accent-3` → `#f0e87b` (Citrus Label) · `--color-on-accent` → `#fef6ee` (Cream Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#651c32` | `#fef6ee` | 11.12:1 | AAA |
| `#651c32` | `#000000` | 1.77:1 | fail |
| `#651c32` | `#ffffff` | 11.89:1 | AAA |
| `#fef6ee` | `#651c32` | 11.12:1 | AAA |
| `#fef6ee` | `#000000` | 19.63:1 | AAA |
| `#fef6ee` | `#ffffff` | 1.07:1 | fail |
| `#abd2eb` | `#fef6ee` | 1.49:1 | fail |
| `#abd2eb` | `#651c32` | 7.45:1 | AAA |
| `#abd2eb` | `#000000` | 13.15:1 | AAA |
| `#abd2eb` | `#ffffff` | 1.6:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Vivey 22 Positive | `--font-body` | webfont | 400 | Navigation, body copy, captions, buttons, and product details. | DM Sans |
| FHA Condensed French NC | `--font-display` | webfont | 400 | Display headlines, section titles, and prominent editorial links. | Oswald |

- **Vivey 22 Positive:** Regular weight; sentence case for utility copy, uppercase buttons with slight tracking.
- **FHA Condensed French NC:** Regular-weight condensed serif display; uppercase, tightly stacked, with compact line height.

### Type scale — Perfect Fifth (ratio ≈ 1.479, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 92px | 400 | 1 | 0 | uppercase | FHA Condensed French NC | Oversized uppercase campaign headlines and prominent editorial statements. |
| h1 | 88px | 400 | 1 | 0 | uppercase | FHA Condensed French NC | Primary hero headline, set in a tall condensed display face. |
| h2 | 83.5px | 400 | 1 | 0 | uppercase | FHA Condensed French NC | Major section headings such as product and category titles. |
| h3 | 80px | 400 | 0.95 | 0 | uppercase | FHA Condensed French NC | Secondary campaign or feature headings with close line stacking. |
| h4 | 64px | 400 | 0.95 | 0 | uppercase | FHA Condensed French NC | Smaller editorial feature titles and product bundle headings. |
| body | 13px | 400 | 1.35 | 0 | — | Vivey 22 Positive | Product descriptions, supporting copy, and explanatory text. |
| caption | 12px | 400 | 1.3 | 0 | — | Vivey 22 Positive | Compact reviews, product notes, and image-related details. |
| button | 11px | 400 | 1.5 | 0.025em | uppercase | Vivey 22 Positive | Uppercase calls to action and compact shop controls. |
| nav | 14px | 400 | 1.43 | 0 | — | Vivey 22 Positive | Utility navigation, category tabs, and footer links. |
| link | 22px | 400 | 1 | 0 | uppercase | FHA Condensed French NC | Prominent uppercase editorial and product links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 32, 48, 56 px.
- Section rhythm 56px · element gap 4px · card padding — · max content width 1328px.

The page uses a wide, image-led canvas, with the measured content max width at 1328px and a comfortable overall density. The hero runs edge to edge; subsequent sections mix product grids, two-column editorial features, and wider campaign or review compositions. Alignment shifts between left-led shopping sections and centered promotional blocks. Sections share a measured 56px rhythm, while small component gaps keep labels, buttons, and product details compact. Keep the cream canvas continuous where possible, using colored bands as deliberate campaign or footer moments.

## Shape & elevation

- Radius: button `2px` · input `2px` · card `2px` · media `10px` · badge `50%` · nav `50%` · xs `2px` · sm `10px`
- Shadow `md` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.2) 0px 4px 12px 0px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 18px 40px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat and editorial, with square-edged card and button treatments rather than conspicuous elevation. Use the measured subtle button shadow sparingly and reserve stronger media shadow for foregrounded imagery. Thin, muted rose borders can distinguish controls; layering comes mainly from text over photography, product artwork, and overlapping campaign compositions.

## Imagery

Use tactile, close-cropped beverage and packaging photography as the primary visual material: bottles, cans, glasses, and flavor compositions should feel naturally lit and art-directed. The hero photo fills its section and supports overlaid white display copy. Product cards use dark image fields for contrast, while campaign artwork may introduce blue, green, or citrus hues. Customer review imagery includes candid video portraits; avoid treating those image colors as core interface tokens.

## Components

### Hero campaign

Full-bleed product photograph with small supporting copy, large condensed uppercase headline, and a pink SHOP NOW CTA.

### Announcement strip

Slim contrasting message band at the top, with concise sale copy and an inline shop link.

### Product card

Dark-backed product photography, compact uppercase product name, brief description, price, and yellow bestseller label when needed.

### Category tabs

Compact uppercase filter controls beside a section heading; active option uses burgundy fill and cream text.

### Campaign split feature

Two-column editorial promotion with bold condensed title, supporting copy, CTA, and art-directed cookbook or flavor imagery.

### Newsletter footer

Olive-green closing section with light blue heading and oversized brand lettering, signup form, and grouped link columns.

### Measured component styles

- **Primary button** (“SHOP NOW”): background #ef6079 · text #fef6ee · radius 2px · padding 0px 32px · 400 14px Vivey 22 Positive · uppercase
- **Secondary button** (“GHIA SODA”): background #ffffff · text #651c32 · radius 2px · padding 0px · 400 16px Vivey 22 Positive
- **Link** (“ORANGE BLOSSOM MEETS STRAWBERRY LE FIZZ ”): transparent background · text #651c32 · radius 0px · padding 0px · 400 16px Vivey 22 Positive
- **Input**: transparent background · text #651c32 · radius 2px · padding 0px 44px 0px 16px · 400 14px Vivey 22 Positive
- **Card** (“GHIA SODA”): background #651c32 · text #651c32 · radius 2px · padding 0px · 400 16px Vivey 22 Positive
- **Badge** (“BESTSELLER”): background #f0e87b · text #651c32 · radius 0px · padding 0px 15.8px 0px 8px · 400 9px Vivey 22 Positive · uppercase
- **Navigation item** (“Bestsellers”): transparent background · text #abd2eb · radius 0px · padding 0px · 400 14px Vivey 22 Positive

## Do

- Anchor the interface with Cream Canvas (#fef6ee) and Apéritif Burgundy (#651c32).
- Use condensed uppercase display type for major editorial headlines.
- Keep primary shopping actions visibly pink and concise.
- Let product photography carry flavor, texture, and campaign color.
- Use Citrus Label yellow for small badges rather than large text blocks.
- Vary section composition while preserving clear shopping hierarchy.

## Don't

- Do not turn campaign blues or flavor colors into the global interface palette.
- Do not use generic geometric display type in place of the condensed editorial face.
- Do not crowd the cream canvas with decorative borders or shadows.
- Do not make every section a uniform product grid.
- Do not use pink as a large background field across the page.
- Do not obscure product labels or key copy with image overlays.

## Agent prompt

Build a new Ghia-style page as an image-led, editorial storefront. Use Cream Canvas (#fef6ee) for the main ground and Apéritif Burgundy (#651c32) for primary text, links, and dark bands. Set large campaign headlines in a condensed uppercase display face similar to Oswald, and use an approachable sans-serif like DM Sans for navigation, copy, and controls. Make the main CTA Fizz Pink (#ef6079), with Citrus Label (#f0e87b) reserved for small badges. Favor tactile beverage photography, full-bleed campaign imagery, and flexible product grids over decorative UI. Keep components mostly flat, use compact square-edged controls, and introduce campaign-specific blue or green only within feature artwork. End with an Olive Footer (#3e4938) and light-blue accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed hero image with left-aligned headline and CTA overlay. | Shop now CTA, campaign message | full-bleed photography, condensed display headline, announcement bar |
| 2 | product-grid | Multi-column product carousel with category tabs and compact card details. | category filtering, carousel navigation, quick product discovery | dark image cards, yellow badges, compact price and review text |
| 3 | feature-split | Two-column cookbook promotion with text and feature artwork. | shop feature CTA, email signup prompt | blue campaign panel, yellow badge, editorial headline |
| 4 | feature-split | Two-column build-your-own promotion with colorful flavor artwork. | build-your-own CTA, mix-and-match offer | stacked flavor graphics, centered display title, pink button |
| 5 | testimonials | Centered brand statement above a horizontal row of review media and quote cards. | review proof, video play controls, testimonial carousel | mixed media cards, rating copy, alternating color panels |
| 6 | product-showcase | Three-part promotional composition with large bundle imagery and overlaid offer labels. | bundle comparison, discount promotion | photographic backgrounds, white oval labels, product group imagery |
| 7 | product-grid | Horizontal row of four product cards under a left-aligned heading. | browse all link, carousel navigation | dark image cards, flavor badges, compact product details |
| 8 | category-nav | Open two-column category menu with large display links and short descriptors. | shop by category, shop all CTA | oversized uppercase links, small illustrated icons, cream background |
| 9 | footer | Dark green newsletter and footer split across signup and grouped link columns. | email signup, social links, back-to-top | olive background, light blue display type, oversized brand lettering |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 90px;
--oke-starRating-spaceAbove: 5px;
--oke-starRating-spaceBelow: 5px;
--oke-button-backgroundColor: #ef6079;
--oke-button-backgroundColorHover: #f3ede6;
--oke-button-backgroundColorActive: #f3ede6;
--oke-button-textColor: #f3ede6;
--oke-button-textColorHover: #651c32;
--oke-button-textColorActive: #651c32;
--oke-button-borderColor: #ef6079;
--oke-button-borderColorHover: #f3ede6;
--oke-button-borderColorActive: #f3ede6;
--oke-button-borderRadius: 25px;
--oke-button-borderWidth: 0;
--oke-button-fontWeight: 700;
--oke-button-fontSize: 14px;
--oke-button-fontFamily: inherit;
--oke-border-color: #e2cebc;
--oke-border-width: 1px;
--oke-text-primaryColor: #651c32;
--oke-text-secondaryColor: #651c32;
--oke-text-small: 14px;
--oke-text-regular: 14px;
--oke-text-large: 14px;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: undefined;
--oke-avatar-placeholderTextColor: undefined;
--oke-highlightColor: #651c32;
--oke-shadingColor: #e8e2da;
--oke-attributeBar-shadingColor: #651c32;
--oke-attributeBar-borderColor: #651c32;
--oke-attributeBar-backgroundColor: #d3d4dd;
--oke-attributeBar-markerColor: #651c32;
--oke-filter-backgroundColor: #fff;
--oke-filter-backgroundColorActive: #fff;
--oke-filter-borderColor: #dbdde4;
--oke-filter-borderColorActive: #262929;
--oke-filter-textColor: #262929;
```

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