Last StLiquid error (sections/main-style-guide line 20): Could not find asset snippets/brand-star.liquidStyle guide

Style Guide

The site’s colours, type, spacing and parts, drawn with its own CSS. Build new pages from these rather than new values. To change the look everywhere, change src/css/01-settings/variables.css.

The numbers are this window’s; type and spacing grow between a phone (390px) and a wide screen (1600px). Press Tab to see the focus ring.

Colour

  • Ink --color-primary Text, primary buttons, chosen states
  • Cream --color-neutral-light The page
  • Cream 2 --color-neutral-dark Product wells, panels, tiles
  • Cream 3 --color-neutral-darker Hover and pressed tiles
  • White --color-white Fields, cards on cream
  • Border --color-border Hairlines between rows
  • Border dark --color-border-dark Outlines of buttons, fields and chips
  • Muted --color-muted Secondary text
  • Gold --color-gold Stars, stickers, rules, text on ink. Not text on cream
  • Gold text --color-gold-text Gold text on cream
  • Portello --color-portello Isabella’s purple
  • Red --color-red Sale, errors, a saved heart

Type styles

Put one of these on a heading or a paragraph (<h2 class="t-heading">), and leave the component’s own class to place it.

.t-displayA page’s big heading
Cordials
.t-headingA section’s heading
Customer reviews
.t-titleA product’s or recipe’s name; a page title
Portello Cordial
.t-subtitleA block’s heading
Made with
.t-bodyParagraphs
Our best-selling flavour, the traditional Portello Cordial. It’s a rich, smooth grape and berry-flavoured masterpiece, handcrafted in Beechworth with water from our 1872 well.
.t-smallInterface text, notes under things
Free/discounted shipping over $99.00
.t-labelA small uppercase label
Ingredients
.t-scriptOne gold word in a heading, at most one a page
Quality, craftsmanship & commitment
.kickerThe brand lockup over a page heading

Isabella’sLiquid error (sections/main-style-guide line 110): Could not find asset snippets/brand-star.liquidBeechworth

.t-linkA text link
All recipes

Sizes

  • --text-xs Last St
  • --text-sm Last St
  • --text-base Last St
  • --text-md Last St
  • --text-lg Last St
  • --text-xl Last St
  • --text-2xl Last St
  • --text-3xl Last St

Spacing

  • --space-2xs
  • --space-xs
  • --space-sm
  • --space-md
  • --space-lg
  • --space-xl
  • --space-section
  • --gutter

Corners

  • --radiusButtons, fields, cards
  • --radius-lgSheets, dialogs
  • --radius-pillChips, badges, toggles

Buttons

.btn
.btn--outline
.btn--with-icon
.btn--quiet for a secondary action
.btn--sm-row inside a list
.btn--lg the main purchase
.btn[disabled]

Chips and fields

.facet-chip, and chosen
Lolly shop Liquid error (sections/main-style-guide line 217): Could not find asset snippets/recipe-icon.liquid
.browse-pill a choice that’s on
.browse-search a field, 44px tall
.facet__options--segmented

Cards

A recipe card is a product card’s sibling: the same well, corners and type.

Gold - 2026 Australian Food AwardsPortello CordialPortello Cordial
Isabella's
Filled star 4.9 (92)

Portello Cordial

From $9.99 Sold Out
Feijoa SyrupFeijoa Syrup
Isabella's
Filled star 4.9 (87)

Feijoa Syrup

From $14.99 Sold Out
Liquid error (sections/main-style-guide line 250): Could not find asset snippets/recipe-card.liquidLiquid error (sections/main-style-guide line 250): Could not find asset snippets/recipe-card.liquid