The Wine Chips Style Guide

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

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

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

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

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.

The faces

The scale

Specimens

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.

The system

Sizes, drawn at the declared value

Rules

Not a matter of taste

• 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.

Spacing, drawn at the declared value

Structure

The breakpoint canon

Container queries — the other axis

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.

Easings

Durations

Keyframes

Choreography

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).

Chrome

Actions

Editorial

Commerce

Forms

Navigation

States

Colour

• 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.
• 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.
• 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.
• 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).
• 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).
• 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.
• 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.
• 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

• Arvo sets every heading and nothing else. Montserrat sets every other word in both registers.
• Headings h2–h6 are uppercase at 0.1em tracking; buttons and navigation are uppercase at 1px. Uppercase without tracking is never correct.
• Type floor 12px, heading floor 17px, in both registers.
• Only Montserrat 400 and 700 are loaded. Declaring 500 or 600 produces a synthesised weight, which is a bug, not a style.

Shape

• The brand corner is 2px. A pill is 25px, a circle is 50%, and nothing else is rounded in the editorial register.
• 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).
• 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

• The editorial page is 1200px maximum with 55px gutters above 750px and 22px below; the grid gutter is 30px desktop / 22px mobile.
• The operator shell is three panels — 288px sidebar, fluid main, 384px context — above 1280px, and the context panel becomes a sheet below it.

Motion

• 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

• 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.
• 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

• 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

• 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.
• 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.
• 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.