Wine Chips

Brand guidelines · winechips v1 · stable

Building something for this brand? Read /agent.md — it is the machine-readable contract an agent or a build tool applies. Machine-readable siblings: effective.json, brand.css, tokens.tailwind.css, tokens.dtcg.json, .well-known/styleguide.json.

Wine Chips — The Wine Chips Style Guide

Wine Chips

Modes are carried on data-theme — Storefront (light). Switch it in the bar above; every value on this page follows.

Identity

What the brand is

Wine Chips is a premium lattice-cut potato chip engineered for one job: to be eaten with wine. Invented in 2017 in Paw Paw, Michigan by people who wanted cheese and wine in the same hand, it is sold direct on winechips.com, through the Private Reserve Club subscription, through the Rally fundraising programme, and through wholesale and partner channels.

The emotion

Simply delicious, paired perfection.

The tension

Vinous

premium · considered · cellar-dark · grown-up

Snackable

bold · cheesy · loud · unserious

Personality

Warm and unpretentious — a wine brand that refuses to be precious about wine
Bold in flavour language: boldest, cheesiest, most satisfying
Founder-voiced — the story is told in the first person plural, with the joke left in
Appetite-first: the product is food before it is a lifestyle
Generous — clubs, fundraisers and partners are all invitations, not funnels
Confident about craft (lattice-cut, small batch) without a tasting-note vocabulary

It feels

Appetising
Warm
Convivial
Premium but relaxed
Handmade
Bold
Celebratory
Midwestern-direct

It never feels

Clinical
Corporate-beige
Sommelier-snobbish
Cold or minimal for its own sake
Diet-food
Like a generic Shopify theme with a logo dropped in

The customer

Wine drinkers who entertain — home hosts, club members, tasting rooms, gift buyers, and the fundraising organisers and sellers who move the product through Rally. They are buying a moment with a bottle open, not a nutrition panel.

Visual references

The plum wordmark on white — a single-ink lettering mark, never recoloured outside the two shipped cuts
A white page with a plum-tinted wash and one cream band, punctuated by a wine-red announcement rail
The wine → plum horizontal gradient behind a testimonial or club band
Arvo slab headings in caps over Montserrat body copy — the storefront's own pairing
Product photography of tubes and lattice chips against warm neutral grounds

Signatures — the moves only this brand makes

The wine rail

A full-bleed wine-red (#A6192E) announcement bar at the top of every page, white 16px Arvo, that carries the current flavour or offer. It is the only place the brand shouts.

The wine-to-plum gradient

linear-gradient(90deg, rgba(166,25,46,1) 0%, rgba(81,42,68,1) 100%) — the horizontal band behind a club, testimonial or partner section. Wine on the left, plum on the right, always 90deg, never reversed.

The cream band

A #FBF3DA section ground used for logo lists, press strips and 'as seen on' rails — the only warm ground in the system and the only alternative to white.

Caps with air

Section headings are Arvo 400 in uppercase at 0.1em tracking; nav and buttons are Montserrat with 1px letter-spacing. Nothing in the brand is set in sentence case above body size.

The plum ink

Body copy, links, footer text and the wordmark are all one colour — plum #512A44. The brand reads as a single ink, not as a grey ramp.

The 2px corner

Buttons, inputs and cards carry a 2px radius — almost square. Roundness in this brand is a 25px pill or a full circle, never a soft 8px corner.

Assets

Served from the live bundle

Every mark below is loaded from this project’s own /api/styleguide/assets/<sha256> — the same content-addressed path <BrandLogo/> resolves to everywhere else on the site. Publish a new mark at the master and this page changes with the rest of the estate.

Logo

Wine Chips wordmark

logo.wordmarkLogoLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
inverse	inverse	dark	`png`	2489 × 267	White knockout — for a plum block, the wine rail, a photograph or a dark email · inverse · on --wc-plum · web`e58cfc39f891b7ce…`
wordmark	one-color	light	`png`	2489 × 267	Plum on light — the highest-resolution cut in the fleet · one-color · on --wc-surface · web`594a90e197add1f8…`
wordmark	one-color	light	`png`	313 × 72	Plum on light, 313 px — the exact file the storefront header serves today · one-color · on --wc-surface · web`b6ca1c68caf6609d…`

Licence

Minimum width

120px on screen. The lockup is a raster, so it is never scaled above its natural width — 2489px for the Rally cut, 313px for the storefront cut.

Never

Never recolour. Plum on light and white on dark are the only two cuts that exist.
Never outline, emboss, add a shadow or place it on a busy photograph without a plum scrim.
Never stretch, condense, rotate or set at an angle.
Never rebuild it in live type — it is custom lettering, and no font in this guide draws it.
Never scale a raster above its natural width; ask for the vector master instead (D-WC1).

App icon

Favicon

appicon.faviconApp iconLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
favicon	one-color	any	`png`	32 × 32	32 x 32 — the only icon the live site serves · one-color · on --wc-white · web`a3d80a524426be27…`

Licence

Never

Never the only icon a platform is given: 32px is below every modern requirement.
Never upscaled to fill a 180px or 512px slot.

Share image

Social share image

og.socialShare imageTunable

A project may replace this within the constraint the brand declared.

Role	Cut	Theme	Format	Size	As served
og	—	any	`jpg`	1707 × 1028	The og:image and twitter:image the storefront serves — a seasonal product photograph, not a designed card · social`479ee7100685561a…`

Licence

Never

Never treated as a designed social card: it carries no wordmark and its 1.66:1 ratio crops unpredictably at 1.91:1.

Font

Arvo

font.displayFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Arvo Regular 400 — the exact WOFF2 the storefront serves (arvo_n4) · web`af9a85531f3f742a…`

Licence

Anton Koovit · The binary's own name table records 'Copyright (c) 2010 Anton Koovit.' and a licence URL of http://www.korkork.com/license/arvo/; the upstream Google Fonts distribution of Arvo is SIL Open Font License 1.1, and OS/2 fsType is 0 (installable embedding, no restriction). Confirm the licence line with the owner — D-WC1, item 5. · redistributable yes

Montserrat

font.sansFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Montserrat Regular 400 — the exact WOFF2 the storefront serves (montserrat_n4) · web`c0ec39d77c456f49…`

Licence

The Montserrat Project Authors · SIL Open Font License 1.1, declared in the binary's own name table; OS/2 fsType is 0. Free to use, embed and redistribute with the licence. · redistributable yes

Montserrat Bold

font.sans-boldFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Montserrat Bold 700 (montserrat_n7). Declared under its own family name because the master's emitter writes one weightless @font-face per font asset — see drift. · web`2ede5e0c613d1682…`

Licence

The Montserrat Project Authors · SIL Open Font License 1.1, declared in the binary's own name table; OS/2 fsType is 0. · redistributable yes

Montserrat Italic

font.sans-italicFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Montserrat Italic 400 (montserrat_i4), italic angle -11.3 degrees · web`ef5d0ee539ba1931…`

Licence

The Montserrat Project Authors · SIL Open Font License 1.1, declared in the binary's own name table; OS/2 fsType is 0. · redistributable yes

Montserrat Bold Italic

font.sans-bold-italicFontLocked

The brand owns this. A project override is refused at the master and fails the checker.

Role	Cut	Theme	Format	Size	As served
font	—	any	`woff2`	—	Montserrat Bold Italic 700 (montserrat_i7) · web`50062f6aa45cb51f…`

Licence

The Montserrat Project Authors · SIL Open Font License 1.1, declared in the binary's own name table; OS/2 fsType is 0. · redistributable yes

Voice

How the brand speaks

Principles

Lead with appetite. Flavour and occasion come before provenance, and provenance before process.
Favour: bold · cheesy · satisfying · lattice-cut · paired · snackable · dip-able · designed exclusively for wine · try every bold flavour.
Avoid: tasting-note vocabulary, sommelier register, diet and wellness claims, and any health or nutrition claim the label does not carry.
Keep the joke in. The founder story is funny on purpose and the copy does not edit the humour out.
Second person for the shopper, first person plural for the company. 'We made Wine Chips because we love wine and we love cheese.'
Never imply an award, rating or press mention the brand does not hold; the press strip names only real placements.
American spelling throughout — the storefront, the labels and the fundraising platform are all US.

Microcopy, as shipped

Context	What it says
Home hero headline	THE BOLDEST, CHEESIEST, EASIEST, MOST SATISFYING WINE SNACK YOU'LL EVER HAVE
Meta description / search snippet	The Boldest, Easiest, Most Satisfying Potato Chip You'll Ever Have. Wine Chips are the Only Chip Designed Exclusively for Wine. Try Every Bold Flavor!
Announcement rail	⏰ OUR NEW FLAVOR: HAWAIIAN LUAU 🏝️
Product category heading	PREMIUM LATTICE-CUT CHIPS
Merchandising heading	TODAY'S POPULAR ITEMS & GIFTABLES
Collections heading	COLLECTIONS
Press / event band	THE ASPEN FOOD & WINE CLASSIC
Our Story eyebrow	SIMPLY DELICIOUS, PAIRED PERFECTION.
Our Story heading	MADE WITH LOVE, WHILE DRINKING WINE
Our Story heading (second)	BOLD, CHEESY & SATISFYING!
Founder story, opening	We made Wine Chips because we love wine and we love cheese (who doesn't?) but realized that putting the cheese IN the wine was a bad idea for both.
Founder story, the wish	So one evening in 2017, over a glass of wine (ok maybe two), we wished for something simple, portable, dip-able, endlessly snack-able, cheese-ladened and delicious.
Founder story, the payoff	And just like that (ok, it took a lot of work, a lot of samples, a lot of wine and the dedication of more than a few passionate oenophiles, exuberant chip connoisseurs and mildly lazy party guests) the wine chip was born.
Primary CTA	SHOP NOW
Secondary CTA	OUR STORY
Newsletter heading	JOIN THE COMMUNITY
Newsletter submit	Subscribe
Primary navigation	OUR STORY · PARTNERS · SHOP · PRIVATE RESERVE CLUB
Cart drawer heading	Just added to your cart
Cart drawer actions	View cart · Continue shopping
Support address	hello@winechips.com
Registered address	Wine Chips, Inc. · 61675 M 40 · Paw Paw, MI 49079
Rally fundraising tagline (wc-fundraiser-platform email templates)	Premium snacks. Real fundraising.
Slideshow assistive text	Use left/right arrows to navigate the slideshow or swipe left/right if using a mobile device
Variant select assistive text	Choosing a selection results in a full page refresh. Press the space key then arrow keys to make a selection.

Capitalization

Section headings (h2–h6) are UPPERCASE with 0.1em tracking — that is a type rule, not a copy rule, and the copy is written in sentence case in the CMS.
The hero headline is typed in caps in the source and stays that way.
Buttons and navigation are uppercase with 1px letter-spacing.
Product and flavour names are Title Case: Hawaiian Luau, Private Reserve Club.
The brand is two words with a capital C: Wine Chips. Never WineChips outside a file name, a handle (@winechips) or a domain.
Body copy is sentence case. h1 is the one heading level that is NOT transformed to uppercase by the stylesheet.

Colour

The palette, as declared

Every value below is documented in the one mode this guide declares and then read back off the live stylesheet. A token that no longer matches what is written here says so, in the row where it happens.

Storefront

The white page the shop, the story, the club and the campaign pages are built on: one plum ink, one wine-red signal, a plum-tinted wash and a cream band.

Storefront declared at :root

Live checkreading the stylesheet…

Brand identity

--wc-plum

The brand ink and the wordmark colour

The single most-attested Wine Chips value: it is --color-text and --color-body-text on the storefront, the one colour in the wordmark PNG the storefront serves, the one colour in both Rally logo cuts (there rounded to #522A44), and the anti-aliasing hue of the favicon. Provenance: https://winechips.com/ inline :root.

Storefront#512A44

—

--wc-wine

The single signal accent

The announcement rail, the primary button fill, the newsletter submit, the active nav item and the left stop of the signature gradient. 13 occurrences in the storefront's theme.css, every one a signal. Provenance: https://winechips.com/cdn/shop/t/1/assets/theme.css.

Storefront#A6192E

—

--wc-wine-bright

The wine at hover

The announcement rail's hover ground. Provenance: storefront section settings, .announcement-bar__link:hover.

Storefront#DA213C

—

--wc-plum-light

Plum at focus

--color-text-focus on the storefront: the colour a plum link takes on focus/hover. Provenance: storefront inline :root.

Storefront#83446E

—

--wc-cream

The warm ground

The section band behind logo lists, press strips and 'as seen on' rails. Provenance: storefront theme.css, four section rules.

Storefront#FBF3DA

—

--wc-white

Paper

--color-body / --color-bg. Provenance: storefront inline :root.

Storefront#FFFFFF

—

--wc-graphite

The shipped neutral action fill

--color-btn-primary, and the value of the storefront's own <meta name="theme-color">. A neutral, not a brand colour — see decision W-8 and drift.

Storefront#3A3A3A

—

--wc-graphite-deep

Graphite pressed

--color-btn-primary-darker. Provenance: storefront inline :root.

Storefront#212121

—

Grounds

--wc-surface

The page

--color-bg / --color-body.

Storefront#FFFFFF

—

--wc-surface-alt

The wash — feature rows, the footer, alternating sections

A plum-tinted near-white (hue 330). Provenance: storefront theme.css .site-footer and four #shopify-section rules.

Storefront#F6F4F5

—

--wc-surface-warm

The cream band — logo lists, press strips, 'as seen on'

On the inverted surface this role becomes the wine band, because a plum block's warm ground is wine, not cream.

Storefront#FBF3DA

—

Ink

--wc-ink

Body copy, headings, links, the wordmark

--color-text / --color-body-text.

Storefront#512A44

—

--wc-ink-muted

The footer's secondary ink

Shipped as the footer's default colour. It is a warm-neutral graphite rather than a plum, which is the one place the brand's single-ink rule is broken on the live site — see drift.

Storefront#333232

—

--wc-ink-dim

Footer link hover, meta text

Shipped as .site-footer a:hover.

Storefront#5A5858

—

--wc-on-ink

Ink on a plum or graphite fill

Storefront#FFFFFF

—

Accent and action

--wc-accent

The signal — announcement rail, primary button, active nav

On the inverted surface this resolves to the cream, because wine on plum is 1.9:1 and cannot carry a signal.

Storefront#A6192E

—

--wc-accent-hover

The signal at hover

Storefront#DA213C

—

--wc-on-accent

Label on the signal

Storefront#FFFFFF

—

--wc-link

A link at rest — the same plum as body copy

The storefront sets a { color: var(--color-text) }: links are not a different colour, they are the same ink.

Storefront#512A44

—

--wc-link-hover

A link at hover and focus

Storefront#83446E

—

--wc-action

The neutral button fill the theme still ships

--color-btn-primary. theme.css overrides a.btn to the wine, so the graphite survives mainly on secondary and tertiary buttons — recorded as drift.

Storefront#3A3A3A

—

--wc-action-hover

The neutral button at hover

--color-btn-primary-focus.

Storefront#606060

—

--wc-on-action

Label on the neutral fill

Storefront#FFFFFF

—

Lines and fills

--wc-border

The default hairline

--color-border.

Storefront#EBEBEB

—

--wc-border-form

A control edge

--color-border-form.

Storefront#CCCCCC

—

--wc-border-strong

A control edge, emphasised

--color-border-form-darker.

Storefront#B3B3B3

—

--wc-hairline-footer

The footer rule

A plum-tinted hairline. Provenance: storefront footer section settings.

Storefront#DFD8DC

—

--wc-fill-subtle

The lightest plum wash

--color-bg-alt.

Storefrontrgba(81, 42, 68, 0.05)

—

--wc-fill-soft

A plum wash — empty states, chips

--color-blankstate-background.

Storefrontrgba(81, 42, 68, 0.10)

—

--wc-fill-strong

A plum wash, emphasised

--color-bg-currency-selector / --color-blankstate-border.

Storefrontrgba(81, 42, 68, 0.20)

—

--wc-focus-ring

The focus halo

The storefront spends it as box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25) (3px on dense controls).

Storefrontrgba(81, 42, 68, 0.25)

—

Status

--wc-positive

Success fill and rule

Shipped as .form-message--success border and ink.

Storefront#1F873D

—

--wc-positive-ink

Success as small text

Storefront#1D7E39

—

--wc-positive-bg

Success message ground

Shipped as .form-message--success background.

Storefront#F8FFF9

—

--wc-negative

Error fill, rule and ink

Shipped as .input--error / .form-message--error. Measures 5.61 / 5.13 / 5.06 : 1 — it needs no accessible variant.

Storefront#D20000

—

--wc-negative-ink

Error message body copy

Shipped as .form-message--error colour: a deep wine-brown, 11.80:1 on the error ground.

Storefront#651818

—

--wc-negative-bg

Error message ground

Shipped as .input--error / .form-message--error background.

Storefront#FFF8F8

—

--wc-sale

The sale price

--color-sale-text.

Storefront#EA0606

—

--wc-sale-ink

The sale price as small text

Storefront#DD0606

—

--wc-in-stock

The in-stock mark

Shipped as .icon-in-stock fill.

Storefront#00730B

—

Type roles (root-scoped)

--font-display

The heading face — Arvo

The emitter writes this into :root, so a consumer sets font-family: var(--font-display) on a heading and needs nothing else; the bundled @font-face supplies Arvo from the content-addressed store. The storefront's own --font-stack-header alias is untouched.

StorefrontArvo, Rockwell, 'Roboto Slab', Georgia, serif

—

--font-sans

The UI and body face — Montserrat

The grammar-legal equivalent of the storefront's --font-stack-body.

StorefrontMontserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif

—

Plum block

A section that deliberately runs dark on a light site: the plum ground, the wine band and the wine-to-plum gradient the club, testimonial and partner sections are built on. Mount .wc-on-plum and every role token remaps; no component is recoloured by hand.

Plum block declared at .wc-on-plum
Inherits from editorial

Live checkreading the stylesheet…

Grounds

--wc-surface

The plum block

Plum block#512A44

—

--wc-surface-alt

One step out of the block

Same hue and saturation as the plum (320 deg, 0.32), lightness 0.24 -> 0.28.

Plum block#5E314F

—

--wc-surface-warm

The wine band — the right-hand stop of the signature gradient

In the editorial register this role is the cream; on a plum block the warm ground IS the wine. Provenance: storefront #shopify-section-lander-testimonial-1 and the 90deg wine-to-plum gradient.

Plum block#A6192E

—

Ink

--wc-ink

Body copy and headings on a plum block

A plum-tinted near-white rather than pure white: 11.12 / 9.67 / 7.01 : 1 across the three inverted grounds.

Plum block#FAF6F9

—

--wc-ink-muted

Secondary ink on a plum block

8.33 / 7.25 / 5.25 : 1 across the plum, the plum step and the wine band — the wine band is the binding ground for every ink on this surface.

Plum block#E2D4DE

—

--wc-ink-dim

Meta ink on a plum block

7.48 / 6.51 / 4.71 : 1.

Plum block#DAC8D4

—

--wc-on-ink

Ink on a light fill inside a plum block

Plum block#512A44

—

Accent and action

--wc-accent

The signal on a plum block — the cream, not the wine

Wine on plum measures 1.90:1 and cannot carry meaning. The brand's own warm light does: 10.73 / 9.34 / 6.76 : 1. This is the inverted register's single most important remap (decision W-3).

Plum block#FBF3DA

—

--wc-accent-hover

The signal at hover

Plum block#FFFFFF

—

--wc-on-accent

Label on the cream signal

Plum block#512A44

—

--wc-link

A link on a plum block

Plum block#FAF6F9

—

--wc-link-hover

A link at hover on a plum block

Plum block#FBF3DA

—

--wc-action

The outline button the storefront ships on dark art

On a hero or a plum block the storefront's button is background: 0 0; color: #fff; border: 2px solid #fff — a knockout outline, not a fill.

Plum block#FFFFFF

—

--wc-action-hover

That outline at hover

Plum block#FBF3DA

—

--wc-on-action

Ink inside a knocked-out button once it fills

Plum block#512A44

—

Lines and fills

--wc-border

Hairline on a plum block

Plum blockrgba(250, 246, 249, 0.16)

—

--wc-border-form

Control edge on a plum block

Plum blockrgba(250, 246, 249, 0.32)

—

--wc-border-strong

Emphasised edge on a plum block

Plum blockrgba(250, 246, 249, 0.55)

—

--wc-hairline-footer

Rule on a plum block

Plum blockrgba(250, 246, 249, 0.20)

—

--wc-fill-subtle

Lightest wash on a plum block

Plum blockrgba(250, 246, 249, 0.05)

—

--wc-fill-soft

Wash on a plum block

Plum blockrgba(250, 246, 249, 0.10)

—

--wc-fill-strong

Emphasised wash on a plum block

Plum blockrgba(250, 246, 249, 0.20)

—

--wc-focus-ring

The focus halo on a plum block

Cream at 55%: the plum halo is invisible against a plum ground.

Plum blockrgba(251, 243, 218, 0.55)

—

Status

--wc-positive-ink

Success as text on a plum block

Plum block#8FE6A8

—

--wc-negative

Error on a plum block

Plum block#FFBDBD

—

--wc-negative-ink

Error body copy on a plum block

Plum block#FFE1E1

—

--wc-negative-bg

Error ground on a plum block

Opaque rather than a translucent red: an alpha ground over a plum block cannot be measured for contrast without knowing what is behind it, and an error message is the last place to guess.

Plum block#531313

—

--wc-sale-ink

The sale price on a plum block

Plum block#FFBEBE

—

--wc-in-stock

The in-stock mark on a plum block

Plum block#8FE6A8

—

Typography

Set live, at natural size

The three faces

Arvo

--font-display400 only on the storefront (arvo_n4). The packaging toolchain also loads a 700 cut, which the web does not. · upright only

Every heading level, the announcement rail, and nothing else. Arvo is the brand's voice at size; it never sets body copy, UI labels or a data value.

Served by the Shopify font CDN at //winechips.com/cdn/fonts/arvo/arvo_n4.cf5897c91bef7f76bce9d45a5025155aa004d2c7.woff2 and declared in the storefront's inline @font-face block. The binary's own name table records 'Copyright (c) 2010 Anton Koovit.' and a licence URL of http://www.korkork.com/license/arvo/; the upstream Google Fonts distribution of Arvo is SIL Open Font License 1.1, and the file's OS/2 fsType is 0 (installable, no embedding restriction). Independently corroborated as the brand's display face by the packaging toolchain, which loads Arvo Regular and Bold alongside the label artwork.

Arvo, Rockwell, 'Roboto Slab', Georgia, serif

h1 is Arvo 400 at 48px desktop / 45px mobile, line-height 1.2, letter-spacing 0, case untransformed.
h2–h6 are Arvo 400 UPPERCASE at 0.1em tracking, line-height 1.2.
Never below 17px — the smallest heading the storefront sets is h6 mobile at 17px, and the slab serifs close up below that.
Never italic: no italic cut is licensed, loaded or drawn, so an italic Arvo on screen is a synthesised oblique.
The operator register carries no Arvo at all — a dense tool is Montserrat throughout (decision W-6).

Montserrat

--font-sans400 and 700. --font-weight-body is 400; --font-weight-body--bold and --font-weight-body--bolder are both 700, so the storefront has no 500 or 600 cut loaded and the nav's font-weight: 600 renders as a synthesised weight. · roman + italic

Body copy, product copy, buttons, navigation, form fields, prices, legal text, and every word of the operator register.

Served by the Shopify font CDN at //winechips.com/cdn/fonts/montserrat/ in five cuts (n4, n7, i4, i7 and a duplicate n7) and declared in the storefront's inline @font-face block. Each binary's own name table records 'Copyright 2011 The Montserrat Project Authors' and 'This Font Software is licensed under the SIL Open Font License, Version 1.1'; OS/2 fsType is 0.

Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif

Base size 14px at line-height 1.5. Rich text runs 16px large / 12px small.
Buttons and navigation are 700 uppercase with 1px letter-spacing.
Type floor is 12px in both registers.
Only two weights are loaded. A 500 or 600 declaration is a synthesised weight, not a cut — see drift.
Italic is available in both weights and is used for a transcript or an aside, never for emphasis inside a heading.

The scale

Token	Value	Spent by
`--wc-text-base`	`14px`	body, button, input, select, textarea — the storefront's --font-size-base, at line-height 1.5
`--wc-text-h1`	`48px / 45px`	h1 and .h1 — desktop / below 750px. Arvo 400, line-height 1.2, letter-spacing 0, case untransformed
`--wc-text-h2`	`28px / 25px`	h2 and .h2 — the section heading. Arvo 400 UPPERCASE, 0.1em tracking, line-height 1.2
`--wc-text-h3`	`36px / 28px`	h3 — --font-size-header desktop, --font-h3-mobile below 750px
`--wc-text-h4`	`24px / 22px`	h4 — the newsletter and footer column headings
`--wc-text-h5`	`20px / 18px`	h5
`--wc-text-h6`	`19px / 17px`	h6 — the smallest heading in the system, and the type floor for Arvo
`--wc-text-mega`	`90px`	--font-mega-title-large-desktop — the slideshow's largest headline cut, desktop only
`--wc-text-lead`	`16px`	--font-rich-text-large, and the announcement rail message
`--wc-text-small`	`12px`	--font-rich-text-small, legal and meta copy — the type floor
`--wc-text-pagination`	`15px`	.pagination
`--wc-tracking-heading`	`0.1em`	h2–h6 uppercase headings
`--wc-tracking-ui`	`1px`	.btn, #SiteNav — uppercase buttons and navigation
`--wc-leading-body`	`1.5`	body, input, textarea, select
`--wc-leading-heading`	`1.2`	h1–h6
`--wc-space-heading`	`17.5px`	the bottom margin of every heading
`--wc-space-paragraph`	`19.444px`	the bottom margin of a paragraph

Specimens

Hero headline

THE BOLDEST, CHEESIEST, EASIEST, MOST SATISFYING WINE SNACK YOU'LL EVER HAVE

Arvo 400 · 48px desktop / 45px mobile · line-height 1.2 · tracking 0 · case untransformed (the copy is typed in caps)

Mega slideshow headline

SIMPLY DELICIOUS

Arvo 400 · 90px · desktop only · the slideshow's largest cut

Section heading

PREMIUM LATTICE-CUT CHIPS

Arvo 400 · 28px desktop / 25px mobile · UPPERCASE · tracking 0.1em · line-height 1.2

Sub-section heading

MADE WITH LOVE, WHILE DRINKING WINE

Arvo 400 · 36px desktop / 28px mobile · UPPERCASE · tracking 0.1em

Column heading

JOIN THE COMMUNITY

Arvo 400 · 24px desktop / 22px mobile · UPPERCASE · tracking 0.1em

Smallest heading

COLLECTIONS

Arvo 400 · 19px desktop / 17px mobile · UPPERCASE · tracking 0.1em — the heading floor

Announcement rail

OUR NEW FLAVOR: HAWAIIAN LUAU

Arvo 400 · 16px · white on wine · padding 11px 22px (55px inline above 750px)

Body copy

We made Wine Chips because we love wine and we love cheese (who doesn't?) but realized that putting the cheese IN the wine was a bad idea for both.

Montserrat 400 · 14px · line-height 1.5 · plum · 19.444px bottom margin

Lead / rich text large

So one evening in 2017, over a glass of wine (ok maybe two), we wished for something simple, portable, dip-able, endlessly snack-able, cheese-ladened and delicious.

Montserrat 400 · 16px · line-height 1.5

Button label

SHOP NOW

Montserrat 700 · 14px · UPPERCASE · tracking 1px · padding 10px 18px · radius 2px

Navigation

OUR STORY · PARTNERS · SHOP · PRIVATE RESERVE CLUB

Montserrat · 14px · UPPERCASE · tracking 1px · padding 4px 15px 5px. The theme asks for weight 600, which is not a loaded cut — see drift.

Price

$14.00

Montserrat 400 · 14px · plum; a sale price is --wc-sale-ink and the regular price is struck through

Meta and legal

Wine Chips, Inc. · 61675 M 40 · Paw Paw, MI 49079

Montserrat 400 · 12px · --wc-ink-dim — the type floor

Form message

Please enter a valid email address.

Montserrat 400 · 14px · --wc-negative-ink on --wc-negative-bg inside a 1px --wc-negative rule, padding 1rem 1.3rem

Rules

Two families, two jobs. Arvo sets every heading; Montserrat sets every other word. There is no third face and no display alternate.
Type floor is 12px in both registers; the heading floor is 17px.
Uppercase is the default for headings h2–h6, for buttons and for navigation — with tracking (0.1em on headings, 1px on buttons and nav). Uppercase without tracking is never correct.
h1 is the only heading the stylesheet leaves untransformed; the hero copy is typed in caps instead.
Body copy is Montserrat 400 at 14px / 1.5 in plum; a paragraph's bottom margin is 19.444px and a heading's is 17.5px.
Numerals in the operator register are tabular; a price in the editorial register is not.
Never set an order number, a SKU, an email address or a customer name in uppercase.

Iconography

A system, not a folder

Library

Editorial: the Shopify Debut icon sprite (a small closed set drawn to a 20 × 20 box, filled with currentColor). Operator: Lucide, the icon set the wc-gorgias design system installs alongside shadcn/ui.

Style

One weight, one metaphor per concept, no duotone and no filled-and-outlined pairs of the same glyph. An icon carries a label unless the control is one of the six the whole web already knows (search, cart, account, close, back, menu); an icon alone is never the only carrier of an action's meaning.

Grid

Editorial 20 × 20 (.icon is width: 20px; height: 20px). Operator 24 × 24 on a 2px keyline, rendered at 16px in a table row and 20px in a toolbar.

Stroke

Editorial icons are FILLED (fill: currentColor) and carry no stroke. Operator icons are stroked at 1.5px with round caps and joins, and are never filled.

Corner

2px on a stroked terminal in the operator set, matching the brand's 2px corner; nothing in either set is drawn with a radius above 2px except a true circle.

Sizes, at true size

Editorial — the storefront default (.icon)

20px

Operator — inside a table row, a chip or a dense button

16px

Operator — toolbar, sidebar rail and empty-state

20px

Operator — the drawing grid, and an empty-state or error illustration

24px

Rules

Colour comes from currentColor. An icon is never given a colour of its own; it inherits the ink of the thing it labels.
The two sets are never mixed on one surface: a storefront page uses the Debut sprite, an operator screen uses Lucide.
A social platform's own mark keeps that platform's colour and is exempt from currentColor (.icon--full-color).
No brand mark is ever redrawn as an icon; the wordmark is an asset, not a glyph.
An icon-only control carries a visually-hidden label (.icon__fallback-text) — the storefront already ships the pattern.

Layout

Three breakpoints, everything else fluid

Spacing, at true size

--wc-space-gutter

The page's inline padding above 750px, and the vertical rhythm between sections

—

--wc-space-gutter-sm

The page's inline padding below 750px

—

--wc-space-grid

The grid gutter above 750px (.grid margin-left: -30px)

—

--wc-space-grid-sm

The grid gutter below 750px

—

--wc-space-block

Feature-row inner padding, and the bottom margin of a product card

—

--wc-space-control

Button padding above 750px (8px 15px below)

—

--wc-space-field

Input and textarea padding

—

Declared: 55px · 22px · 30px · 22px · 35px · 10px 18px · 8px 15px

Structure

Token	Value	Role
`--wc-page-max`	`1200px`	.page-width — the only content measure in the system
`--wc-header-logo-max`	`250px`	.site-header__logo-image, the shop's own setting
`--wc-header-pad`	`0 55px`	.site-header above 750px
`--wc-announce-pad`	`11px 22px`	.announcement-bar__message (55px inline above 750px)
`--wc-field-min-height`	`42px / 46px`	.input-group__field — below / above 750px
`--wc-footer-pad`	`45px 0 55px`	.site-footer (35px bottom below 750px)
`--wc-radius`	`2px`	Buttons, inputs, cards, the input group's outer corners
`--wc-radius-pill`	`25px`	The one pill in the system
`--wc-radius-circle`	`50%`	Avatars, dots, the cart count, the scroll-to-top control
`--wc-border-width`	`1px`	Every hairline; a knockout button on dark art is 2px
`--wc-focus-width`	`4px`	The focus halo (3px on dense controls)

The breakpoint canon

Width	Meaning	Note
`749px`	Small — the single-column phone layout	@media only screen and (max-width: 749px) — 90 rules
`750px`	Medium — the page opens to 55px gutters and the 30px grid	@media only screen and (min-width: 750px) — 133 rules, the system's real hinge
`990px`	Large — the desktop navigation and multi-column feature rows	@media only screen and (min-width: 990px) — 11 rules
`1400px`	Widescreen — one slideshow refinement only	@media only screen and (min-width: 1400px) — 1 rule

Container queries — the other axis

Container	Declared on	Arms

Max widths

Width	Used by
`1200px`	.page-width — every page
`500px`	A feature-row image
`400px`	The cart popup and the predictive-search panel
`300px`	A drawer column
`160px`	A payment-icon row

The z stack

z-index	Used by
`1–5`	In-flow content: slideshow layers, product media, overlay captions
`8`	Drawer contents
`9`	The drawer itself
`10`	The announcement bar
`11`	The sticky site header
`999–1000`	The cart popup and the predictive-search overlay
`9999–10000`	Third-party app layers (scroll-to-top, review widgets). Not the brand's own scale — see drift.

Policies

One measure: 1200px. There is no second container width and no full-bleed exception except a slideshow, a feature row's image and the announcement rail.
The gutter is 55px above 750px and 22px below. The grid gutter is 30px / 22px on the same hinge.
750px is the layout's only real hinge; 990px and 1400px are refinements, not layouts.
Sections stack at a 55px rhythm. A section never sets its own top and bottom margin independently.
The brand's own z-index scale ends at 11. Anything above 999 is a third-party layer the brand does not own.
Nothing is sticky except the header. There is no sticky CTA, no sticky filter bar and no sticky footer.

Motion

Curves, durations, and what is banned

Easings

--wc-ease

The storefront's default — every hover, reveal and slideshow transition

cubic-bezier(0.29, 0.63, 0.44, 1)

--wc-ease-quick

A dense control: the quantity stepper, a disclosure toggle

cubic-bezier(0.44, 0.13, 0.48, 0.87)

--wc-ease-inout

A background-colour change on a button or a rail

ease-in-out

--wc-ease-linear

The loading spinner only

linear

Durations

Token	Value	Spent on
`--wc-duration-instant`	`100ms`	A background-colour change (button, announcement rail)
`--wc-duration-quick`	`200ms`	A small hover: icon, chip, nav item
`--wc-duration-base`	`450ms`	The default — image reveals, slideshow slides, drawer open
`--wc-duration-spin`	`500ms`	One rotation of the loading spinner

Keyframes

Name	Definition	Use
`spin`	`0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }`	The button spinner while a form or an add-to-cart is in flight. 500ms infinite linear, and the ONLY looping animation in the editorial register.
`image-loader`	`0% { background-color: var(--wc-fill-subtle); } 50% { background-color: var(--wc-fill-soft); } 100% { background-color: var(--wc-fill-subtle); }`	The plum-tinted placeholder wash behind a lazy-loading product image. The shipped keyframe holds one colour at all three stops, so it does not actually animate — see drift.

Choreography

Reveal

An image or a section fades and lifts into place once, over 450ms on --wc-ease. It never replays on scroll-back.

Hover lift

A product card raises its border to --wc-border-strong and its image scales to at most 1.04 over 450ms. It never translates more than 2px and it never adds a shadow.

Rail hover

The announcement rail crossfades wine to --wc-accent-hover over 100ms. Nothing moves.

Drawer

The cart and mobile-nav drawers slide in over 450ms on --wc-ease, dimming the page behind them. Focus moves into the drawer and returns to the trigger on close.

The guide's own chrome, in the hand

Hover me

The kit’s hover contract — dims in 140ms, restores in 280ms

The kit’s waiting mark — a hairline breathing 0.35↔0.75 over 2s

Banned

Bounce and elastic easing
Spring overshoot
Parallax on a product image
Auto-playing video with sound
Carousels that advance without the reader asking
Blinking or flashing text
Motion that is the only carrier of a state change
Decorative loops inside a cart, a checkout, a form or an operator table

Reduced motion

Under prefers-reduced-motion: reduce, the image-loader pulse and the button spinner stop; the slideshow does not auto-advance and exposes its arrows and dots; hover lifts do not translate and keep only their colour and border transitions; the cart drawer and the search overlay appear at their final position rather than sliding. Nothing in either register is communicated by motion alone (decision W-7).

Components

Rendered against the live stylesheet

Chrome

Announcement rail

The full-bleed wine rail at the very top of every page. One line, Arvo 400 at 16px, white on --wc-accent, optionally a link.

.announcement-bar.announcement-bar__message.announcement-bar__link

State	Specification
Rest	--wc-accent ground, --wc-on-accent ink, padding 11px 22px (55px inline above 750px), 1px transparent bottom border, z-index 10
Hover (link)	ground crossfades to --wc-accent-hover over 100ms ease-in-out; the ink does not change
Dismissed	the rail is removed from flow; nothing collapses under it

One message at a time. The rail never stacks and never scrolls its content.
It is the only element in the system allowed to be a full-bleed field of --wc-accent.
Never set below 16px and never in Montserrat — this is Arvo's one non-heading job.

Site header

A white header with the wordmark centred, 250px maximum, over a navigation row.

.site-header.site-header__logo.site-header__logo-image.logo-align--center

State	Specification
Rest	--wc-surface ground, padding 0 55px above 750px, logo margin 15px 0, z-index 11
Small	below 750px a 1px --wc-border bottom rule appears and the padding drops to the 22px gutter

The wordmark is an image asset, never live type.
The header carries no shadow — a hairline is the whole separation.
The logo never exceeds 250px wide on the storefront, and never scales above the shipped asset's natural width.

Primary navigation

Four uppercase Montserrat items with 1px tracking; the third (Private Reserve Club) carries a wine ground as a permanent highlight.

#SiteNav.site-nav__link

State	Specification
Rest	--wc-ink, padding 4px 15px 5px, uppercase, tracking 1px
Hover / focus	--wc-link-hover with a 1px underline
Highlighted item	--wc-accent ground with --wc-on-accent ink — the club item only
Focus-visible	a 4px --wc-focus-ring halo

At most one highlighted item. A second wine ground in the nav is a second accent.
The theme asks for font-weight 600, which is not a loaded Montserrat cut; use 700 (drift).

Site footer

A --wc-surface-alt block with link columns, a newsletter, social marks and the registered address.

.site-footer.site-footer__hr.site-footer__linklist.site-footer__copyright-content

State	Specification
Rest	--wc-surface-alt ground, --wc-ink-muted default ink, padding 45px 0 55px, 55px top margin
Links	--wc-ink at rest, --wc-ink-dim on hover with a 1px underline
Rule	a 1px --wc-hairline-footer border-bottom

The footer is the one region where the ink is a neutral rather than the plum — a shipped inconsistency recorded as drift, not a licence to add greys elsewhere.
Social marks are --wc-ink, not the platforms' own colours, in the footer row.

Social marks

A row of platform marks at 20px, filled with currentColor.

.social-icons__link.icon--full-color

State	Specification
Rest	--wc-ink
Hover	--wc-ink-dim
Share buttons	.btn--share keeps each platform's own brand colour and is exempt from currentColor

A footer social row is monochrome. A share button is not.

Actions

Button — primary

The wine action. Montserrat 700 uppercase with 1px tracking on a 2px corner.

.btn

State	Specification
Rest	--wc-accent ground, --wc-on-accent label, 1px transparent border, radius 2px, padding 10px 18px (8px 15px below 750px)
Hover / focus	ground --wc-accent-hover over 100ms ease-in-out
Focus-visible	a 4px --wc-focus-ring halo outside the border
Disabled	--wc-fill-strong ground, --wc-ink-dim label, cursor default, no hover
Busy	the label is replaced by the spin keyframe at 500ms linear; the button keeps its width

White on wine measures 7.50:1 — the primary button is the brand's most accessible surface and should not be softened.
Never full-width above 750px except inside an input group.
One primary button per view. A second wine fill competes with the rail.

Button — secondary

A transparent button with a --wc-action border and label. The theme's neutral action, still shipped alongside the wine primary.

.btn--secondary.btn--secondary-accent

State	Specification
Rest	transparent ground, --wc-action border and label, radius 2px
Hover / focus	border and label move to --wc-action-hover; the ground stays transparent
On an image	.btn--secondary-accent swaps the ground to --wc-surface so the label stays readable

Secondary never fills on hover — it is a border button in every state.
The neutral graphite here is the storefront's shipped value, not a brand colour (decision W-8).

Button — knockout

The button the storefront ships on a hero image or a plum block: transparent, 2px white border, white uppercase label.

.btn.slideshow__btn.wc-on-plum .btn

State	Specification
Rest	transparent ground, 2px --wc-action border, --wc-action label
Hover / focus	fills to --wc-action with a --wc-on-action label
Focus-visible	a cream --wc-focus-ring halo

The border is 2px here and 1px everywhere else — a knockout needs the weight against photography.
Never place a wine fill on a plum block; the knockout is the dark-ground primary.

Editorial

Hero / slideshow

A full-bleed image with a left-aligned text box, a headline and up to two buttons. Separate desktop and mobile art.

.slideshow.slideshow__image.slideshow__text-box.slideshow__text-content

State	Specification
Rest	text-align left, an image overlay at 0.17 opacity (0.57 on hover) over --wc-image-overlay
Small	the mobile image replaces the desktop image below 750px
Advancing	450ms on --wc-ease; arrows and dots are always present

Art direction: keep focal subjects right of centre — the left is where the headline lands.
The slideshow never auto-advances under prefers-reduced-motion.
A headline over photography is always --wc-on-ink over the overlay, never plum.

Feature row

A two-column image-and-text band, alternating side, on white or --wc-surface-alt.

.feature-row.feature-row__text.feature-row__image

State	Specification
Rest	text padding 35px block, 35px inline on the inner edge; image max-width 500px
Small	stacks, image first, text padding-bottom 0

Alternate the image side down the page; never two rows the same way running.
The band's ground alternates white / --wc-surface-alt and never uses the cream — the cream is for logo and press strips.

Cream band

The one warm section ground: a --wc-surface-warm band carrying a logo list, a press strip or an 'as seen on' rail.

#shopify-section-lander-logo-list#shopify-section-lander-as-seen-on

State	Specification
Rest	--wc-surface-warm ground, --wc-ink copy, 30px block padding

Only for third-party marks and press. Never a product band, never a CTA band.
Third-party logos keep their own colour; they are not knocked back to plum.
At most one cream band per page.

Wine-to-plum band

The signature dark band: linear-gradient(90deg, rgba(166,25,46,1) 0%, rgba(81,42,68,1) 100%), carrying a testimonial, a club pitch or a partner message.

.wc-on-plum

State	Specification
Rest	mount .wc-on-plum; every role token remaps, the accent becomes the cream and the button becomes a knockout
Flat variant	a solid --wc-surface-warm (#A6192E) band where the gradient would fight the content

The gradient is always 90deg and always wine on the left. It is never rotated, reversed or animated.
One dark band per page. Two turn a light brand into a dark one.
Never place cream type on the wine end or wine type on the plum end — use --wc-ink.

Rich text

CMS-authored prose: paragraphs at 14px, large at 16px, small at 12px, headings on the Arvo scale.

.rte.rte-setting

State	Specification
Rest	--wc-ink at line-height 1.5; a link is --wc-ink with a 1px underline
Link hover	--wc-link-hover

A rich-text block never introduces a colour. Everything it can render is already a role token.
Lists and blockquotes stay inside the 1200px measure; a blockquote is a 2px --wc-accent left rule.

Commerce

Product card

An image, a plum title and a price in a 30px grid. No card ground, no border, no shadow.

.grid-view-item.grid-view-item__title.grid-view-item__image

State	Specification
Rest	transparent ground, --wc-ink title, 35px bottom margin
Hover	the image scales to at most 1.04 over 450ms on --wc-ease; the title takes --wc-link-hover
Sold out	a --wc-fill-soft badge with --wc-ink-muted label; the image drops to 60% opacity
On sale	the regular price is struck through in --wc-ink-dim and the sale price is --wc-sale-ink

The card is the image. No panel, no border, no shadow.
The title is never uppercase — a product name is Title Case.

Price

Montserrat 400 at 14px in plum; on sale the regular price is struck and the sale price takes the sale ink.

.price.price--on-sale.price-item--sale.price-item--regular

State	Specification
Rest	--wc-ink
On sale	.price--on-sale hides the regular price row and shows .price__sale; .price-item--sale is --wc-sale-ink
Unit price	--wc-ink-dim at 12px beneath the price

A sale price is small text, so it uses --wc-sale-ink (5.12:1), not the shipped --wc-sale (4.64:1) — decision W-9.
Never colour a regular price. Only a sale price carries a hue.

Cart drawer and popup

A right-hand drawer (z-index 9, contents at 8) and a lighter 400px popup confirming an add-to-cart.

.drawer.cart-popup

State	Specification
Opening	slides in over 450ms on --wc-ease; the page behind dims
Rest	--wc-surface ground, 1px --wc-border hairlines, padding 0.2rem 1.5rem 1rem in the popup
Reduced motion	appears at its final position with no slide

Focus moves into the drawer on open and returns to the trigger on close.
Escape closes. The dim behind is a click target that also closes.
The popup heading is 'Just added to your cart' and the two actions are 'View cart' and 'Continue shopping'.

Forms

Input and textarea

Montserrat 400 at 14px, 8px 15px padding, a 1px --wc-border-form edge and a 2px corner.

inputtextareaselect.disclosure__toggle.input--error

State	Specification
Rest	--wc-surface ground, --wc-ink text, 1px --wc-border-form edge
Hover	edge to --wc-border-strong
Focus	a 3px --wc-focus-ring halo; the edge stays
Error	--wc-negative edge and text on a --wc-negative-bg ground; the placeholder is --wc-negative at 0.5 opacity
Disabled	--wc-fill-subtle ground, --wc-ink-dim text, no halo

Font-size is 16px on touch to stop iOS zooming; 14px above 750px.
An error state always carries a message as well as the colour.
Placeholder text is never the label.

Input group

A field and a button welded into one control: the field takes the left 2px corners, the button the right.

.input-group.input-group__field.input-group__btn

State	Specification
Rest	min-height 42px below 750px, 46px above; field radius 2px 0 0 2px, button radius 0 2px 2px 0
Small	the pair stacks and each half regains all four corners

The button inside an input group is always the primary wine.
The field's flex-basis is 15rem and it grows; the button never does.

Form message

A full-width message block above a form: a 1px rule, a tinted ground and a matching ink.

.form-message.form-message--success.form-message--error

State	Specification
Success	1px --wc-positive rule, --wc-positive-bg ground, --wc-positive-ink text, padding 10px
Error	1px --wc-negative rule, --wc-negative-bg ground, --wc-negative-ink text, padding 1rem 1.3rem

A link inside an error message is underlined and stays --wc-negative-ink.
The message names what to do next, not only what went wrong.

An email field and a wine Subscribe button under a JOIN THE COMMUNITY heading, inside the footer.

.site-footer__item-inner--newsletter.btn.newsletter__submit

State	Specification
Rest	an input group on --wc-surface-alt; the submit is --wc-accent
Submitted	the group is replaced by a success form-message

The consent line sits under the field, at 12px in --wc-ink-dim, and is never hidden behind a link.

Navigation

Pagination

Centred inline page numbers at 15px with 55px of space above.

.pagination

State	Specification
Rest	--wc-ink numbers
Current	--wc-ink at 700, not a fill
Hover	--wc-link-hover
Disabled	--wc-ink-dim, no pointer

The current page is a weight change, not a wine chip. Wine is reserved for actions.

States

Empty, error and loading

The three states every commerce surface owes a shopper.

.blankstate.image-loader.btn .icon-spinner

State	Specification
Empty	--wc-fill-soft ground, 1px --wc-fill-strong rule, --wc-ink-muted copy, and one primary action
Loading	a --wc-fill-subtle placeholder block for an image; a 500ms linear spinner inside a busy button. No shimmer.
Error	a form-message error block, or a page-level message with a way back to the shop

An empty state always offers the next action.
A loading state never blocks the whole page.
No skeleton shimmer anywhere in the editorial register.

Hard rules

Not a matter of taste

Colour

storefront :root --color-text / --color-body-text; the wordmark PNG is one colour, #512A44

Plum #512A44 is the brand's single ink. Body copy, links, footer text, social marks and the wordmark are all plum; the brand does not run a grey text ramp.

storefront theme.css — 13 occurrences, every one a signal

Wine red #A6192E is the ONE signal accent: the announcement rail, the primary button, the newsletter submit, the active nav item. There is never a second accent hue.

storefront theme.css — #shopify-section-lander-logo-list, -as-seen-on, -collections-as-seen-on, -firstleaf-as-featured

Cream #FBF3DA is a GROUND, never an ink and never a fill on a control. It is the section band for logo lists, press strips and 'as seen on' rails.

decision W-1

Burgundy #7C2D3E, #722F37 and #7F1D1D are NOT Wine Chips. Three internal tools independently invented them; no artwork, no packaging and no live storefront surface uses any of the three (decision W-1).

decision W-1

Gold #C5943A / #C9A84C is not a Wine Chips brand colour. It appears only inside two internal tools and has no storefront or packaging source (decision W-1).

decision W-3

A dark region is entered by mounting .wc-on-plum (or the operator register's dark mode), which remaps every role token. Components are never recoloured by hand for a plum ground.

decision W-3

On a plum or wine ground the signal is CREAM, not wine — wine on plum is 1.9:1 and cannot carry meaning. --wc-accent resolves to #FBF3DA on the inverted surface for exactly this reason.

storefront .form-message--success / --error, which pair colour with an icon and a sentence

Status colour is never the only channel. A success, a warning or an error carries an icon or a word as well as its hue.

Typography

decision W-6

Arvo sets every heading and nothing else. Montserrat sets every other word in both registers.

storefront critical CSS .h2,h2 and theme.css .btn / #SiteNav

Headings h2–h6 are uppercase at 0.1em tracking; buttons and navigation are uppercase at 1px. Uppercase without tracking is never correct.

storefront --font-rich-text-small: 12; --font-h6-mobile: 17

Type floor 12px, heading floor 17px, in both registers.

storefront @font-face block — n4 and n7 only

Only Montserrat 400 and 700 are loaded. Declaring 500 or 600 produces a synthesised weight, which is a bug, not a style.

Shape

storefront theme.css — .btn, .input-group__field, .grid-view-item

The brand corner is 2px. A pill is 25px, a circle is 50%, and nothing else is rounded in the editorial register.

decision W-5

The operator register's corner is 0.5rem (8px), inherited from the wc-gorgias design system, and it is a register difference rather than a drift — a dense tool needs a softer corner than a 14px storefront (decision W-5).

wc-gorgias UI-DESIGN-SYSTEM.md — 'Subtle borders everywhere, never heavy borders'; the storefront ships no card shadow

Structure comes from hairlines, not from shadow. The only two shadows in the system are the overlay pair; a card, a row, a panel and a table never carry one.

Layout

storefront theme.css .page-width, .grid

The editorial page is 1200px maximum with 55px gutters above 750px and 22px below; the grid gutter is 30px desktop / 22px mobile.

wc-gorgias UI-DESIGN-SYSTEM.md § master layout

The operator shell is three panels — 288px sidebar, fluid main, 384px context — above 1280px, and the context panel becomes a sheet below it.

Motion

storefront theme.css transitions; decision W-7

Meaningful motion is 450ms or less; the storefront's own easing is cubic-bezier(0.29, 0.63, 0.44, 1). The operator register caps at 250ms.

Assets

decision W-4

The wordmark ships in exactly two colourways — plum on light, white on dark. It is never recoloured, never outlined, never given a shadow and never set in live type.

decision W-4

No vector master exists. Every shipped mark is a raster, so a lockup is never scaled above its natural width (2489px for the Rally cut, 313px for the storefront cut) — the gap is decision W-4 and gate D-WC1.

Voice

winechips.com/pages/our-story

The founder story keeps its jokes. Product copy does not make health, diet or wellness claims, and the press strip names only real placements.

Governance

decision W-1, W-4; STYLEGUIDE-PLATFORM-PLAN §9

This guide is DESCRIPTIVE and PROVISIONAL: it documents what the live storefront and the internal tools ship today. Nothing here is ratified brand law until the owner closes gate D-WC1.

decision W-2

Rally, the Private Reserve Club and DaVinci are not yet decided sub-brands. Until D-WC2 is ruled they are consumers of this brand, not brands of their own.

decision W-4

Print builds are unspecified. No Pantone, CMYK or RAL value exists anywhere in the fleet for any Wine Chips colour, and none has been invented here.

Wine Chips · The Wine Chips Style Guide · a living document — the colour section reads the stylesheet on every load

Version 1 · pointer 1 · manifest c41cd892512feab6… · published 2026-09-07T21:52:11Z · winechips.com · Admin

The Wine Chips Style Guide

The tension

Personality

The customer

Visual references

Signatures — the moves only this brand makes

Logo

Wine Chips wordmark

App icon

Favicon

Share image

Social share image

Font

Arvo

Montserrat

Montserrat Bold

Montserrat Italic

Montserrat Bold Italic

Principles

Microcopy, as shipped

Capitalization

Storefront

Plum block

The three faces

The scale

Specimens

Rules

Sizes, at true size

Rules

Spacing, at true size

Structure

The breakpoint canon

Container queries — the other axis

Policies

Easings

Durations

Keyframes

Choreography

The guide's own chrome, in the hand

Banned

Reduced motion

Chrome

Announcement rail

Site header

Primary navigation

Site footer

Social marks

Actions

Button — primary

Button — secondary

Button — knockout

Editorial

Hero / slideshow

Feature row

Cream band

Wine-to-plum band

Rich text

Commerce

Product card

Price

Cart drawer and popup

Forms

Input and textarea

Input group

Form message

Newsletter

Navigation

Pagination

States

Empty, error and loading