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

# Intra · Design System

> A graphic-led canvas for coffee, food, and place.

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

Intra’s homepage pairs an austere monochrome palette with oversized typography and a compact, magazine-like grid. A bold graphic mark and vivid coffee-bag artwork provide contrast without displacing the page’s quiet, functional character.

## North star

Keep the interface monochrome and flat, letting oversized typography and the editorial grid do the visual work.

## Overview

The page is built from a tight monochrome vocabulary: #e4e4e4 fills the canvas, while #212121 anchors text, graphic fields, outlines, and dividers. There is no measured accent colour, so the bright pink and yellow visible on the coffee packaging should be treated as image content, not as interface colour. Whyte supplies a single, consistent sans-serif voice. The display treatment is exceptionally large and uppercase, while body copy stays readable and conversational. A three-column composition creates distinct editorial zones: a dominant logo panel, a central cafe introduction and hours, and a narrow stack of product artwork. Hairline-like dark rules define the columns and product rows; the layout relies on boundaries and contrast rather than shadows or rounded cards. Generous canvas areas around the large marks balance the relatively dense text and image content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Grey | `#e4e4e4` | `--color-gallery-grey` | brand | Main page canvas and light field behind typography, copy, and image panels. |
| Roast Ink | `#212121` | `--color-roast-ink` | neutral | Primary text, large logo field, graphic mark, column dividers, and product-panel frames. |

### Semantic aliases

`--color-canvas` → `#e4e4e4` (Gallery Grey) · `--color-surface` → `#212121` (Roast Ink) · `--color-text` → `#212121` (Roast Ink) · `--color-text-muted` → `#e4e4e4` (Gallery Grey) · `--color-border` → `#212121` (Roast Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#212121` | `#e4e4e4` | 12.66:1 | AAA |
| `#e4e4e4` | `#212121` | 12.66:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Whyte | `--font-body` | webfont | 400 | Used throughout for the oversized display lettering, cafe description, hours, and compact labels. | Manrope |

- **Whyte:** One regular weight throughout; display text is uppercase and oversized, with restrained tracking.

### Type scale — Custom (ratio ≈ 5.429, base 17.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 95px | 400 | 1 | 0 | uppercase | Whyte | Oversized uppercase wordmarks and section labels, including CAFE and INTRA. |
| body | 17.5px | 400 | 1.5 | 0 | — | Whyte | Cafe introduction and supporting descriptive paragraphs. |
| caption | 16px | 400 | 1.5 | 0 | uppercase | Whyte | Hours labels and compact uppercase utility text. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 10, 15, 20, 40, 50 px.
- Section rhythm 50px · element gap — · card padding — · max content width —.

A full-width editorial grid divides the page into three vertical zones: a broad brand panel, a central information column, and a slim product-art column. The central column stacks the cafe introduction, a staff photograph, and hours; the right column repeats framed product panels. Alignment is firm and mostly flush to column edges, with dark rules separating content. Preserve the measured comfortable density and open canvas; no maximum width was measured, so do not impose one.

## Shape & elevation

- No box shadows measured: the page is flat.

The design is flat, with no measured shadows or rounded corners. Dark outlines and column boundaries provide separation, and the large dark logo panel creates contrast through colour blocking rather than elevation. Maintain crisp edges and avoid floating-card effects.

## Imagery

Photography is documentary and direct: a staff portrait appears within the central column, while the large left panel contains a stark eye-like graphic mark. Repeated coffee-package images form the right-hand strip; their pink, yellow, and muted colours belong to the packaging artwork rather than the interface palette. Keep image crops rectangular and treatments unembellished.

## Components

### Brand panel

Large dark rectangular field containing a light graphic mark, paired with oversized INTRA lettering on the light canvas.

### Cafe introduction

Central text block led by an oversized uppercase CAFE label, followed by short, left-aligned paragraphs.

### Staff photograph

Rectangular documentary-style team image placed beneath the introduction in the central column.

### Hours block

Large uppercase HOURS heading with compact weekday and weekend labels beneath it.

### Coffee artwork rail

Stacked product images in the narrow right column, separated by crisp dark horizontal rules.

### Utility strip

Compact dark top and bottom bars with light uppercase labels such as NOW and BUY IN-STORE.

### Measured component styles

- **Link**: transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Whyte
- **Card**: transparent background · text #212121 · border 2px solid #212121 · radius 0px · padding 0px · 400 16px Whyte

## Do

- Use #e4e4e4 as the primary canvas.
- Use #212121 for type, graphic fields, and rules.
- Build a firm, asymmetrical column grid.
- Make display lettering large and uppercase.
- Keep photography rectangular and editorial.
- Use dark dividers instead of card shadows.

## Don't

- Do not introduce an interface accent colour.
- Do not round panel or image corners.
- Do not add gradients or decorative shadows.
- Do not treat packaging colours as brand UI colours.
- Do not center all content into a single column.
- Do not use multiple type families or heavy weights.

## Agent prompt

Build a new Intra-style page with the same restrained editorial character. Use Gallery Grey (#e4e4e4) for the canvas and Roast Ink (#212121) for text, graphic blocks, and dividers; do not add interface accent colours. Set type in Whyte or a close free alternative such as Manrope, using regular weight, very large uppercase display labels, and clear conversational body copy. Organize content in a strong asymmetrical multi-column grid, with a dominant visual panel, a central information area, and a narrower image or product rail where useful. Keep photography rectangular and documentary. Separate areas with crisp dark rules rather than shadows, rounded cards, or gradients. Allow breathing room around large graphics while keeping supporting information compact and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Three-column editorial composition: large brand panel, central cafe information, and narrow stacked product-art rail. | Concise venue introduction, Hours presented beneath staff image, In-store purchasing prompt | Monochrome canvas, Oversized uppercase labels, Hard column dividers, Rectangular imagery |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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