Styleguide

Palette

• --color-ground#08090APage ground. Deeper than the can as photographed so the renders float.
• --color-surface#1C1C1BThe circle at rest, before it takes a flavour.
• --color-seam#26262AThe only rules on the site.
• --color-bone#DCD5CAPrimary type. Sampled off the wordmark.
• --color-bone-dim#8E8A83Secondary type, captions, the circle’s ink on neutral grounds.
• --color-orange#C55A3DBlood Orange. Sampled, lit quartile.
• --color-gold#B59A4EYuzu Green Tea. Sampled, lit quartile.
• --color-violet#B2A1BALavender Blackberry Amaretto Mint. Sampled, lit quartile.

Contrast proof

The last row is the measurement the whole art direction turns on: the sampled accents fail as type on a light surface, so on this site colour is a text colour on black and a shape everywhere else.

• AaBone on ground13.68:1AAA
• AaBone-dim on ground5.80:1AA
• AaBone-dim on surface (the ink on neutral discs)4.96:1AA
• AaOrange on ground4.65:1AA
• AaGold on ground7.30:1AAA
• AaViolet on ground8.26:1AAA
• AaGround on orange (the ink on a Blood Orange disc)4.65:1AA
• AaGround on gold (the ink on a Yuzu disc)7.30:1AAA
• AaGround on violet (the ink on a Lavender disc)8.26:1AAA
• AaBone on orange — why accents never carry type on light2.94:1Fail

Type

Archivo at width 118 for display, Jost for everything with a sentence in it, Martian Mono for the can's tracked micro caps. Self-hosted, latin subset, each with a metric-matched fallback so nothing shifts when the webfont lands.

• Display XL

  The other thing

• Display

  In the can

• Lead

  Sharp citrus over cold green tea. Astringent, on purpose.

• Body

  Neat is a going-out drink. It has no alcohol in it, and that is the least interesting thing about it.

• Item

  Suggested menu price

• Micro

  Premium · Non-alcoholic · Beverage

The dot, at every scale

One element does five jobs across the site: marker, aperture, field, section divider and background. These are its resting sizes, shown side by side — on a real page there is only ever one of them.

• Footer

  0.625rem

  The full stop at the end of the site.

• Quiet band

  3rem

  A marker.

• Find it

  9rem

  A field behind a heading.

• Occasions

  15rem

  Small enough that lines cross it.

• Hero

  22rem

  An aperture holding the can.

• Flavour panel

  30rem

  A field with a name inside it.