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

# arte* · Design System

> Fresh greens, bold type, and a warm, earthy canvas

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

arte* pairs fresh-food imagery with oversized, expressive typography and a warm neutral canvas. Its homepage moves from an immersive farm film into concise brand storytelling and a deep-green product showcase.

## North star

Let expressive lowercase type and real food-and-farm imagery lead, with warm canvas, deep-green contrast, and generous breathing room.

## Overview

The visual identity balances a warm, pale oat canvas (#e5dccd) with dark greens and vivid yellow-green accents. The opening is cinematic: full-bleed farm footage provides a textured, leafy backdrop for a large lime wordmark and centered campaign line. Below, generous uninterrupted canvas space gives the centered introductory statement room to breathe, followed by a lifestyle photograph and compact brand copy. Parafina supplies the distinctive oversized, lowercase display voice; the measured headings and body copy share its unusual, rounded character. Poppins is reserved for compact uppercase navigation, links, and controls. Product storytelling shifts into a dark green band, where pale product lettering and package photography stand out against the field. The composition is spacious and vertically paced, with centered hero messaging, a left-aligned editorial section, and a multi-item product presentation. Rounded pill controls provide the clearest UI accents; the page otherwise feels flat and open.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Oat Canvas | `#e5dccd` | `--color-oat-canvas` | neutral | Main page canvas and pale text on dark imagery; the broad, warm background across editorial content. |
| Harvest Ochre | `#ab5700` | `--color-harvest-ochre` | brand | Primary foreground and CTA color; used for skip control and warm-toned brand copy. |
| Citrus Glow | `#e8e359` | `--color-citrus-glow` | accent | Bright navigation and button fill, plus high-contrast campaign lettering over farm footage. |
| Harvest Blue | `#3d549c` | `--color-harvest-blue` | accent | Blue emphasis for the centered introductory statement on the oat canvas. |
| Periwinkle Link | `#7997ff` | `--color-periwinkle-link` | accent | Editorial inline emphasis and the small uppercase “MORE ON US” link. |
| Forest Green | `#103d26` | `--color-forest-green` | surface | Measured dark-green section surface; supports the product showcase’s high-contrast presentation. |
| Soft Guava | `#e99686` | `--color-soft-guava` | semantic | Measured alternate section surface; not prominent in the supplied screenshots. |
| Olive Detail | `#9c9c38` | `--color-olive-detail` | semantic | Measured section color; treat as secondary rather than a defining page surface. |
| Tangerine Detail | `#ff8200` | `--color-tangerine-detail` | semantic | Measured section color; not a dominant brand color in the visible page. |
| Tomato Detail | `#c42331` | `--color-tomato-detail` | semantic | Measured section color; likely secondary content color, not a core canvas tone. |
| Deep Leaf | `#214534` | `--color-deep-leaf` | surface | Dark navigation and button text color, with measured inverse-surface use. |
| Spice Detail | `#d99623` | `--color-spice-detail` | semantic | Measured text color for secondary product or ingredient details. |
| Herb Detail | `#568037` | `--color-herb-detail` | semantic | Measured text color for secondary product or ingredient details. |

### Semantic aliases

`--color-canvas` → `#e5dccd` (Oat Canvas) · `--color-surface` → `#3d549c` (Harvest Blue) · `--color-surface-2` → `#103d26` (Forest Green) · `--color-surface-3` → `#e99686` (Soft Guava) · `--color-surface-4` → `#214534` (Deep Leaf) · `--color-text` → `#ab5700` (Harvest Ochre) · `--color-text-muted` → `#e5dccd` (Oat Canvas) · `--color-accent` → `#ab5700` (Harvest Ochre) · `--color-accent-2` → `#e8e359` (Citrus Glow) · `--color-accent-3` → `#3d549c` (Harvest Blue) · `--color-on-accent` → `#e5dccd` (Oat Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ab5700` | `#e5dccd` | 3.77:1 | AA-large |
| `#ab5700` | `#3d549c` | 1.39:1 | fail |
| `#ab5700` | `#103d26` | 2.38:1 | fail |
| `#ab5700` | `#e99686` | 2.24:1 | fail |
| `#e5dccd` | `#3d549c` | 5.24:1 | AA |
| `#e5dccd` | `#103d26` | 9:1 | AAA |
| `#e5dccd` | `#e99686` | 1.68:1 | fail |
| `#ab5700` | `#e5dccd` | 3.77:1 | AA-large |
| `#ab5700` | `#3d549c` | 1.39:1 | fail |
| `#ab5700` | `#103d26` | 2.38:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Parafina | `--font-body` | webfont | 500 | Display, headings, and prominent lowercase brand messaging | Bricolage Grotesque |
| ExposureTrial | `--font-exposuretrial` | webfont | 500 | Secondary display or decorative text | Bodoni Moda |
| Poppins | `--font-poppins` | webfont | 500 | Navigation, buttons, and uppercase links | Poppins |

- **Parafina:** Weight 500; distinctive rounded display character. Keep headings and prominent copy lowercase, with compact line-height.
- **ExposureTrial:** Measured as a smaller share of page text; use selectively for contrasting editorial accents, not general body copy.
- **Poppins:** Weight 500, compact uppercase labels, regular tracking; clear functional contrast with Parafina.

### Type scale — Custom (ratio ≈ 1.758, base 56px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 173px | 500 | 0.8 | 0 | lowercase | Parafina | Oversized lowercase brand or campaign display lettering. |
| h1 | 104px | 500 | 0.9 | 0 | lowercase | Parafina | Large lowercase introductory and section headings. |
| body | 56px | 500 | 0.9 | 0 | lowercase | Parafina | Prominent lowercase supporting statements and editorial copy. |
| caption | 30px | 500 | 1.4 | 0 | lowercase | Parafina | Smaller lowercase product and ingredient descriptions. |
| button | 16px | 500 | 1.4 | 0 | uppercase | Poppins | Uppercase pill-button labels. |
| nav | 16px | 500 | 1.4 | 0 | uppercase | Poppins | Uppercase menu control text. |
| link | 16px | 500 | 1.4 | 0 | uppercase | Poppins | Uppercase editorial links such as “MORE ON US”. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 6, 10, 20, 24, 30, 40, 46, 56, 64, 143 px.
- Section rhythm 64px · element gap 40px · card padding — · max content width 1380px.

Use a spacious, vertically stacked page with a measured desktop max width of 1380px and a base spacing unit of 8px. The hero is full-bleed imagery, followed by a large, centered statement on the uninterrupted canvas. Keep the editorial image and copy left-aligned, then give the product showcase its own full-width dark band. Product content can form a multi-item grid; avoid dense framing and preserve large areas of open canvas between sections.

## Shape & elevation

- Radius: button `9999px` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The measured interface has no shadows or gradients. Keep surfaces visually flat, using broad canvas and color-block transitions rather than cards with elevation. No measured border color defines the system; rely on clean edges and rounded pill controls for UI shape. Layer campaign lettering directly over video and product photography.

## Imagery

Lead with immersive farm or greenhouse footage, framed edge to edge and dark enough for vivid lettering to remain legible. Pair it with candid food-and-people photography, then switch to clean product-package imagery on the deep-green showcase surface. Favor real produce, meals, farms, and packaging over illustrations; the package art itself may carry extra colors.

## Components

### Hero wordmark

Large, lowercase lime arte* lettering over full-bleed farm imagery; center the campaign message and keep a compact scroll cue near the bottom.

### Menu pill

Uppercase Poppins label on a Citrus Glow (#e8e359) pill, with Deep Leaf (#214534) text.

### Skip control

Harvest Ochre (#ab5700) pill with Oat Canvas (#e5dccd) uppercase Poppins text.

### Intro statement

Centered, lowercase Parafina headline in Harvest Blue (#3d549c) over the warm canvas.

### Editorial story

Food-and-people photograph followed by left-aligned, multicolor brand copy and a small Periwinkle Link (#7997ff) text link.

### Product showcase

Full-width dark-green band, oversized pale product naming, package image, and small ingredient or benefit labels.

### Measured component styles

- **Primary button** (“SKIP TO CONTENT”): background #ab5700 · text #e5dccd · radius 31px · padding 0px 24px · 500 16px Poppins · uppercase
- **Secondary button** (“MENU”): background #e8e359 · text #214534 · radius 31px · padding 0px 24px · 500 16px Poppins · uppercase
- **Link** (“MORE ON US”): transparent background · text #7997ff · radius 31px · padding 0px · 500 16px Poppins · uppercase
- **Navigation item** (“MENU”): transparent background · text #e8e359 · radius 0px · padding 0px · 500 16px Poppins

## Do

- Use Oat Canvas (#e5dccd) as the main editorial background.
- Set prominent messaging in lowercase Parafina or a close expressive substitute.
- Make the hero footage full-bleed and let the wordmark dominate it.
- Reserve Poppins uppercase for compact navigation, links, and controls.
- Use Citrus Glow (#e8e359) and Deep Leaf (#214534) together on the menu pill.
- Separate product storytelling with a broad dark-green surface and package imagery.

## Don't

- Don't introduce unmeasured brand colors.
- Don't add gradients or decorative shadows.
- Don't turn the open canvas into a dense card layout.
- Don't use uppercase display headlines as the primary brand voice.
- Don't let package-art colors redefine the page palette.
- Don't place functional labels in the oversized display typeface.

## Agent prompt

Build a food-brand page in arte*’s spacious, editorial style. Use Oat Canvas (#e5dccd) for the main background, Harvest Ochre (#ab5700) for selected copy and the primary CTA, and Citrus Glow (#e8e359) for vivid controls or campaign text. Open with full-bleed farm footage and a large lowercase Parafina-style wordmark; overlay centered messaging with strong contrast. Follow with a roomy centered statement, then a left-aligned food photograph and short editorial copy. Introduce a full-width dark-green product band using Forest Green (#103d26) or Deep Leaf (#214534), with large pale product lettering and package imagery. Keep display typography lowercase and expressive; use Poppins-style uppercase labels for navigation and links. Favor flat color fields, rounded pill controls, clean section transitions, and generous whitespace over cards, borders, and shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video with oversized wordmark, centered campaign copy, and a top-corner menu pill. | scroll cue, persistent menu access | video backdrop, lime wordmark, rounded menu button |
| 2 | other | Centered statement with extensive open space on the warm canvas. | single-message focus | centered headline, warm neutral field |
| 3 | feature-split | Editorial food photograph paired with concise left-aligned copy and a small link. | brand explanation, learn-more link | lifestyle photography, colored text emphasis, text link |
| 4 | product-showcase | Dark-green full-width band with a product image layered over large centered product naming. | product discovery, benefit labels | deep-green surface, package photography, oversized product title |
| 5 | product-grid | Multi-item product presentation with centered names, product imagery, and supporting details. | browse product range, compare varieties | six-item measured content grid, product imagery, compact descriptions |

## Source CSS custom properties (selected)

```css
--color-background: 229,220,205;
--color-foreground: 171,87,0;
--color-accent: 121,151,255;
--color-button: 171,87,0;
--color-button-text: 229,220,205;
--color-secondary-button: 229,220,205;
--color-secondary-button-text: 171,87,0;
--font-body-family: Poppins, sans-serif;
--font-body-style: normal;
--font-heading-family: 'Parafina', sans-serif;
--font-heading-style: normal;
--font-heading-weight: 500;
--font-body-scale: 1;
--font-heading-scale: 1;
--alpha-button-background: 1;
--alpha-button-border: 1;
--grid-desktop-vertical-spacing: 2.4rem;
--grid-desktop-horizontal-spacing: 2.4rem;
--grid-mobile-vertical-spacing: 2.4rem;
--grid-mobile-horizontal-spacing: 2.4rem;
--column-gap: 2.4rem;
--row-gap: 2.4rem;
--duration-short: .1s;
--duration-default: .2s;
--duration-announcement-bar: .25s;
--duration-medium: .3s;
--duration-long: .5s;
--duration-extra-long: .8s;
--duration-extended: 3s;
--ease-out-slow: cubic-bezier(0, 0, .3, 1);
```

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