// SIP C0DE Design System

A wine catalog, decoded.

The SIP C0DE design system codifies the brand into reusable tokens, components, and layouts. Built with HTML + Tailwind, wired to a single token file, ready to scale into a full e-commerce experience. No myths. Just wine — and a system to match.

Tokens
CSS vars
Framework
Tailwind
Varieties
12
Status
Living
// 01 Foundations

Foundations

Tokens are defined in tokens.css and exposed to Tailwind via the config above. Edit one file, the system updates everywhere.

Logo system

// page 3 · lockup
// page 2 · symbol mark
// page 1 · wordmark

Reproduces /logo/sip-code-logo.pdf exactly: concentric stack of hexagon → circle → diamond → square, line-art with equal stroke. Wordmark uses 0 in place of the second O of CODE. Never re-stroke, fill, or alter proportions.

Color

Variety colors are identity carriers. Each wine maps to exactly one color. Neutrals carry the chrome.

Variety palette

Amaranth
#B0233C
Coral Deep
#E55B4B
Bordeaux
#6E1423
Burgundy
#A61E4D
Ruby
#C5283D
Rose
#F77F88
Cream
#F1E3C2
Straw
#E8D26B
Gold
#D4A537
Sage
#9CAF88
Turquoise
#1B9E9D
Mint
#A8D5BA

Neutrals & accent

Ink
#0A0A0A
Body
#333333
Mute
#666666
Line
#E5E5E5
Off-white
#F5F5F5
Signature
#C41E3A

Typography

Contrast Play: Fraunces for editorial weight (warm, modern serif), Inter for clarity, JetBrains Mono for the code DNA.

Display · Fraunces
Aa Bb Cc
Headlines, hero, editorial
Body · Inter
Aa Bb Cc
UI, paragraphs, navigation
Mono · JetBrains
Aa 0123
Wordmark, codes, batch numbers
H1 · Display 72
No myths.
H2 · Display 44
Wine, decoded.
H3 · Display 28
Six varieties. One code each.
Lead · 18
Every bottle earns its place. We'll show you exactly how.
Body · 16
Default paragraph copy. Inter regular at 16px with 1.6 line-height.
Small · 14
Captions, metadata, helper text.
Mono · code
P1NOT NO1R · #PN01/25 · 13.5% ABV
Eyebrow
// the code system

Spacing

8px base scale.

  • --s-1 · 8px
  • --s-2 · 16px
  • --s-3 · 24px
  • --s-4 · 32px
  • --s-5 · 48px
  • --s-6 · 64px
  • --s-7 · 96px

Radii

Minimal, modern, squared.

2px
4px
6px
pill

Shadows

Bold & shadowed, never on labels.

sm
md
lg
// 02 The Code

Varieties

12 wines on the roadmap. Launch with 3, scale to 6, then the full set. Each variety = one shape + one color + a coded name. The pair is the brand on shelf.

F3T34SC4 N34GR4

Fetească Neagră

Cerc · roșu amarant
Batch #FN01/25280 MDL
R4R4 N34GR4

Rară Neagră

Cerc · coral profund
Batch #RN01/25320 MDL
M3RLOT

Merlot

Pătrat · bordo
Batch #MR04/25260 MDL
C4B3RN3T S4UV1GN0N

Cabernet Sauvignon

Pătrat · burgundy
Batch #CS02/25300 MDL
S4P3R4V1

Saperavi

Octogon · rubiniu intens
Batch #SP01/25340 MDL
F3T34SC4 4LB4

Fetească Albă

Triunghi · crem luminos
Batch #FA01/25240 MDL
R3G4L4

Regală

Triunghi · galben pai
Batch #RG01/25230 MDL
CH4RD0NN4Y

Chardonnay

Linie verticală · galben auriu
Batch #CH01/25280 MDL
S4UV1GN0N BL4NC

Sauvignon Blanc

Triunghi răsturnat · verde salvie
Batch #SB01/25270 MDL
V1OR1C4

Viorica

Hexagon · turcoaz
Batch #VR01/25260 MDL
TR4M1N3R

Traminer

Pentagon · mentă
Batch #TR02/25290 MDL
R0Z3

Rosé

Romb · roz corai
Batch #RZ02/25240 MDL
Variety
Shape
Color
Code
Tier
Fetească Neagră
Cerc
roșu amarant
F3T34SC4 N34GR4
launch
Rară Neagră
Cerc
coral profund
R4R4 N34GR4
phase 2
Merlot
Pătrat
bordo
M3RLOT
launch
Cabernet Sauvignon
Pătrat
burgundy
C4B3RN3T S4UV1GN0N
phase 2
Saperavi
Octogon
rubiniu intens
S4P3R4V1
phase 3
Fetească Albă
Triunghi
crem luminos
F3T34SC4 4LB4
launch
Regală
Triunghi
galben pai
R3G4L4
phase 2
Chardonnay
Linie verticală
galben auriu
CH4RD0NN4Y
phase 2
Sauvignon Blanc
Triunghi răsturnat
verde salvie
S4UV1GN0N BL4NC
phase 3
Viorica
Hexagon
turcoaz
V1OR1C4
phase 3
Traminer
Pentagon
mentă
TR4M1N3R
phase 3
Rosé
Romb
roz corai
R0Z3
phase 2
// 03 Components

Components

Building blocks for the shop. Bold & shadowed where appropriate; flat where the label rules apply.

Buttons

Form fields

Badges & chips

Red White Rosé Limited batch Subscribe-only New

Product surfaces

F3T34SC4 N34GR4

Fetească Neagră

Batch #FN01/25 · 13.5% ABV · 750ml
280 MDL
Red M3RLOT

Merlot

Soft tannins, plum, baking spice. Producer: Castel Mimi · Bardar.

Batch #MR04/25·13% ABV·750ml
260 MDL

Alerts

Batch shipped. Your Code Box · May 2026 will arrive within 48h.
Limited stock. Saperavi #SP01/25 — 12 bottles remaining.
Subscriber price. Members save 15% on this bottle.
// 04 Patterns

Patterns

Composed surfaces — the bricks that build pages and shop screens.

Hero · White on black

Republic of Moldova · Curated by Solomon

No myths.
Just wine.

A modern wine catalog coded by variety. Every bottle gets a shape, a batch number, and nothing to hide.

// 2026 · 03 launch varieties · 12 codes mapped

Bottle label · Centered Shape

SIP C0DE
NO MYTHS. JUST WINE.
F3T34SC4 N34GR4
REPUBLIC OF MOLDOVA
CURATED BY SOLOMON
#FN01/25 · 13.5% · 750ML
SIP C0DE
NO MYTHS. JUST WINE.
F3T34SC4 4LB4
REPUBLIC OF MOLDOVA
CURATED BY SOLOMON
#FA01/25 · 12.5% · 750ML
SIP C0DE
NO MYTHS. JUST WINE.
M3RLOT
REPUBLIC OF MOLDOVA
CURATED BY SOLOMON
#MR04/25 · 13% · 750ML

Social media · Bold & image-heavy

Templates for Instagram (1:1 feed, 9:16 story) and TikTok. Big color fields, dominant shape, tagline overlay. The variety color does the heavy lifting.

SIP C0DE // new batch
F3T34SC4 N34GR4
Fetească
Neagră.
#FN01/25 · just released
SIP C0DE
No myths.
Just wine.
// curated by solomon
SIP C0DE // panel notes
F3T34SC4 4LB4
"Pear, white
blossom, salt."
— Adrian, blind panel #03
SIP C0DE
Merlot.
M3RLOT · #MR04/25
No
myths.
// just wine.
SIP C0DE
SIP C0DE
Viorica.
V1OR1C4 · turcoaz
SIP C0DE
Chardonnay.
CH4RD0NN4Y · #CH01/25

// 1:1 feed · 9:16 story / tiktok · same system

// 05 Usage

How to use this system

Two files, plus this living showcase.

tokens.css

The single source of truth.

All colors, type, spacing, radii, and shadows live as CSS custom properties. Change a value here, every screen updates.

tailwind config (inline)

Utility classes wired to tokens.

Use bg-amaranth, text-mute, shadow-cta — they all read from tokens.css.

Roadmap to shop
  1. Lock the 3 launch varieties (Fetească Neagră, Merlot, Fetească Albă) and finalize their batch + producer data.
  2. Build the catalog page: filterable grid powered by the variety table above.
  3. Build the product detail page using the surfaces in §03.
  4. Cart, checkout (Stripe), order confirmation — single-bottle flow first.
  5. Add the Code Box subscription as a separate SKU with monthly billing.
  6. Ship batch tracking pages (one per batch, scannable QR on the label).