Web Style Guide

Build everything on one system.

The single source of truth for the Entwine website. Colour, type, components, grid, icons and motion — all mirroring the live homepage tokens (styles.css) and self-hosted Outfit. Hand in a wireframe; pages get built from exactly these rules.

02

Colour

Colour system

Champagne gold is the only brand accent; the rest is ink, white and warm greys. Category accents tint card edges. Status/utility colours are reserved (green = live; red only inside the funding gradient).

Brand & neutrals
Gold
#b8a86a
Accent, CTAs, links
Ink
#0a0a0a
Text, dark sections
Black
#000000
Hero, deep cards
Grey 3
#4a4a4a
Body on light
Grey 2
#6b6b6b
Secondary text
Grey 1
#8a8a8a
Labels, captions
White
#ffffff
Surfaces, light text
Surfaces
Eco BG
#f8f8f8
"One ecosystem"
Zaar BG
#e9eaec
Invest section
Footer BG
#f1f2f4
Footer
Category accents (card edges)
Purple
#7e54f1
Diner / consumer
Gold
#b8a86a
Restaurant
Yellow
#ffc101
Invest
Green
#46ba64
Partner / live
Ink
#0a0a0a
Neutral edge
Utility & lines
Red
#c90e0a
Funding gradient only
Progress
#c90e0a → #b8a86a
Zaar progress bar
Line / dark
rgba(255,255,255,.14)
Dividers on dark
Line / light
rgba(0,0,0,.12)
Dividers on light
03

Typography

Type system

Outfit is the entire system, self-hosted from /assets. ExtraLight/Light for display, Regular/Medium for body and UI, Bold for tile labels. Outfit is the only typeface — no secondary font. All sizes are fluid via clamp().

Weights — Outfit

100 Thin200 ExtraLight300 Light 400 Regular500 Medium600 SemiBold 700 Bold800 ExtraBold900 Black

Scale & roles

Display · 200
96 / lh .98 / -3%
hero, big headings
Your own sommelier. At every table.
H2 · 300
64 / -2%
section titles
One ecosystem. One satisfying outcome.
H3 · 200
40 / -2%
card / row titles
Your menu. Your pairings.
Lead · 400
22 / lh 1.5
Wine recommendations built around your meal, not just your mood.
Body · 400
16 / lh 1.7
Entwine connects to your restaurant's actual menu and matches every dish to a wine worth ordering. 8,000 wines. Your table. Your perfect pairing.
Eyebrow · 500
11 / 0.2em / upper
For Wine Lovers
Caption · Outfit 500
11 / 0.16em / upper
I.   TAKE IT TO DINNER
04

Buttons & badges

Actions

Pill shape (999px). Gold = primary, ink = secondary on light, outline = tertiary. The "upper" variant (uppercase, 0.14em) is for compact CTAs. Buttons lift 1px on hover. Store badges in gold and black; icons white.

States

Default
Base fill or outline.
Hover
Lift 2px + soft shadow; gold lightens, outline fills ink, badge lifts. Arrow → slides 4px.
Active
Press — translateY(0) scale .98.
Focus
2px gold ring, 3px offset (keyboard).
Disabled
45% opacity, pointer-events off.
Cards & links
Cards lift 4px; nav links grow a gold underline; mobile burger morphs to a gold X.

Hover the buttons & badges above to preview these states live.

05

Components

Cards & blocks

The recurring building blocks. Radius 12px; shadows per type (see Elevation). Dark cards on light sections create rhythm; left accent bars signal category.

audience tile

I'm a Diner

Wine recommendations built around the menu you're actually ordering from.

Continue as Consumer →
eco card
For Wine Lovers

Built around your meal, not your mood.

Connects to the restaurant's actual menu and matches every dish to a wine worth ordering.

feature · 02
Powerful, simple
Free Tools

Seven professional tools to ease your working day.

product callout
For Restaurants

Your restaurant belongs in the founding club.

Give your wine programme the intelligence it deserves.

Campaign card (Zaar)

Zaar · Malta
Crowdfunding campaign
● Live
€50,000 target raise
€16,200 committed32% of target
06

Iconography

Icon library

Minimal 2px line icons. We use Phosphor Icons (Thin weight, ~1px) — a free, open-source set with deep food & drink coverage — pulled in here via Iconify. Icons inherit currentColor: ink by default, gold on accent.

Phosphor Icons MIT · 9,000+ · Thin Brand mark & logo stay bespoke SVG · everything else: Tabler

Food & wine — 28 of the set (Thin)

wine
beer-bottle
beer-stein
martini
champagne
brandy
coffee
coffee-bean
fork-knife
cooking-pot
bread
pizza
hamburger
hot-dog
ice-cream
cake
cookie
carrot
fish
shrimp
egg
avocado
popcorn
bowl-food
pepper
cherries
grains
plant
Usage — load once: <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script> then drop in any icon: <iconify-icon icon="ph:wine-thin"></iconify-icon>. Size with font-size, colour with color. Browse the full set at phosphoricons.com. For production you can also self-host the SVGs in /assets/icons.
07

Layout

Grid & spacing

Every section shares one centred content column on a full-bleed background, so edges align down the whole page. Vertical rhythm comes from one spacing token.

--content
1400px (1120 ≤1280)
Max content width
--gutter
max(24px, 5vw, (100%−content)/2)
Full-bleed bg, centred content
--sec-y
clamp(84px, 8.5vw, 152px)
Section vertical breathing
grid gaps
21–30px
Tiles 21 · cards 28 · callouts 30
breakpoints
1280 · 1024 · 820 · 560 · 380
Collapses to one column
overlap
cards ↑ ~24vw into dark
Feature cards (transparent bg) bleed into "Why choose"
hero
image full-bleed to top
Every page's hero image starts at the very top; the translucent nav overlays it. Pad hero text clear of the nav.
08

Elevation

Shadows & radii

Soft, directional shadows (offset down-right) give cards a printed feel. Radii stay consistent across the system.

Shadows

--sh-card
23 27 49 / .22 — eco & feature cards
--sh-callout
16 16 33 / .12 — product callouts
--sh-tile
15 17 22 / .18 — audience tiles
--sh-zaar
0 20 30 / .05 warm — campaign card

Radii

8px · overlay
12px · cards
24px · app panel
999px · pills
09

Motion

Motion

Sections fade + rise (26px → 0) on scroll-in over ~0.8s, ease-out cubic-bezier(.16,.84,.44,1), with an 80ms stagger across grid children. Buttons lift 1px on hover. All motion is disabled under prefers-reduced-motion. Keep it subtle — the brand is calm.

10

Voice

Voice & usage

Confident, warm, a little editorial. Short declaratives. British spelling (optimise, programme, favourites). Highlight one key phrase per heading in gold — never a whole sentence. Let whitespace and type carry it.

Do"Your menu. Your pairings." — short paired statements. One gold accent word per heading. Generous spacing.
Don'tLong marketing run-ons, multiple accent colours per block, cramped layouts, or exclamation-heavy hype.
11

Tool pages

Tool page patterns

Patterns introduced by the seven tool detail pages (/tools/…). Each tool page gets a unique hero treatment (light split, dark + device frame, noir centered, tablet stage, full-bleed image, airy light, ink split) while sharing these recurring parts. Freemium tools accent with purple, one-time with gold on ink, free with gold. Icons stay Phosphor Thin (~1px stroke).

Back link & tier tags

Back to all tools 100% Free Tool Freemium Tool Premium One-Time Purchase

Device frames — browser & tablet

your-restaurant/menu

Browser frame (BTG Optimiser hero) and tablet stage (Digital Menu Builder hero). Dark chrome, 1px hairlines, content area takes an imgph placeholder image.

Toast / notification chip

Menu UpdatedInstantly synced across all tables

Floats over panel imagery (Gap Finder). Ink glass surface, gold hairline border, 14px radius.

Plan comparison — free vs upgrade

Free Basic
$0 / month
  • Included feature
  • Locked feature
Pro Upgrade
Pro Analytics
$49 / month
  • Everything in free
  • Premium feature

Check = gold ph:check-circle-thin; locked = muted ph:x-circle-thin. Freemium upgrade card carries the purple top rule + floating tag; on dark sections the recommended card uses a gold ribbon instead (Team Wine Trainer). A disabled "Current Plan" button renders outline at 55% with pointer-events:none.

Smart download routing

Every page loads /store-link.js: store badges (.badge[data-icon]) always deep-link to their named store; generic download buttons (a.btn[href$="/download"], .nav-cta) route Android → Google Play, iOS → App Store, and keep the /download page on desktop.