name: petnat-design
version: alpha
description: >
  A natural-wine-bar identity built like a hand-pressed letterpress poster: warm
  kraft-paper surface (#E9E0CD), near-black ink (#1C1A16), and a single magenta
  voltage (#9E2B52) drawn straight from wine sediment. The signature moves are a
  serrated "gouge-rule" divider clipped like a woodcut, oversized Libre Caslon
  Display headlines roughened by an SVG displacement filter, monospaced Martian
  Mono micro-labels in wide-tracked uppercase, carved game-icon botanicals, and
  rotating wax-seal SVG stamps. Geometry is flat and hard: zero radii, thick 4px
  ink borders, no shadows.
colors:
  # Brand / Voltage
  magenta: '#9E2B52'      # sole accent — links, price chips, seals, eyebrows, hover
  green: '#5C7A3F'        # defined helper accent (.green); not used in current layout
  # Surface
  kraft: '#E9E0CD'        # primary warm paper page surface
  ink: '#1C1A16'          # near-black; dark sections, footer, borders, gouge-rule
  # Text
  text-ink: '#1C1A16'     # body + heading text on kraft
  text-kraft: '#E9E0CD'   # text on ink surfaces
  # Hairlines / Tints (alpha over ink or kraft)
  kraft-85: 'rgba(233,224,205,0.85)' # body copy on ink (text-kraft/85)
  kraft-40: 'rgba(233,224,205,0.40)' # dividers on ink (border/divide-kraft/40)
  kraft-20: 'rgba(233,224,205,0.20)' # footer baseline rule (border-kraft/20)
  ink-20: 'rgba(28,26,22,0.20)'      # hours-row underline on kraft (#1C1A16/20)
typography:
  display:
    fontFamily: "'Libre Caslon Display', serif"
    fontSize: clamp(3.5rem, 11vw, 9.5rem)
    fontWeight: 400
    lineHeight: 0.82
    letterSpacing: -0.01em
  heading:
    fontFamily: "'Libre Caslon Display', serif"
    fontSize: clamp(2.5rem, 7vw, 6rem)
    fontWeight: 400
    lineHeight: 0.85
  cardTitle:
    fontFamily: "'Libre Caslon Display', serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1
  body:
    fontFamily: "'Libre Caslon Text', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.625
  monoLabel:
    fontFamily: "'Martian Mono', monospace"
    fontSize: 11px
    fontWeight: 600
    letterSpacing: 0.2em
    textTransform: uppercase
  monoNav:
    fontFamily: "'Martian Mono', monospace"
    fontSize: 12px
    fontWeight: 500
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:                  # there is no radius — everything is square
  none: 0px
spacing:                  # 4px base unit (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  section: 96px           # py-24 section rhythm
components:
  navLink:
    textColor: '{colors.text-ink}'
    typography: '{typography.monoNav}'
    hoverColor: '{colors.magenta}'
  navCta:
    backgroundColor: '{colors.magenta}'
    textColor: '{colors.text-kraft}'
    typography: '{typography.monoNav}'
    rounded: '{rounded.none}'
    padding: '8px 16px'
    label: 'Book a Stool'
  buttonPrimary:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-kraft}'
    typography: '{typography.monoLabel}'
    rounded: '{rounded.none}'
    padding: '16px 28px'
    label: 'See the Pour List'
  linkText:
    textColor: '{colors.magenta}'
    typography: '{typography.monoLabel}'
    decoration: 'underline 2px, offset 4px'
  pourCardLight:
    backgroundColor: '{colors.kraft}'
    textColor: '{colors.text-ink}'
    border: '4px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '28px'
  pourCardDark:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-kraft}'
    border: '4px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '28px'
  priceChip:
    backgroundColor: '{colors.magenta}'
    textColor: '{colors.text-kraft}'
    typography: '{typography.monoLabel}'
    rounded: '{rounded.none}'
    padding: '4px 12px'
    label: '12 / glass'
  infoCard:
    backgroundColor: '{colors.kraft}'
    textColor: '{colors.text-ink}'
    border: '4px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '32px to 40px'
  gougeRule:
    backgroundColor: '{colors.ink}'
    height: '8px'
    note: 'serrated clip-path divider, woodcut edge'
  waxSeal:
    stroke: '{colors.magenta}'
    typography: '{typography.monoLabel}'
    note: 'rotating circular SVG textPath stamp'
motion:
  stampReveal: 'GSAP ScrollTrigger batch — opacity 0->1, scale 1.12->1, rotation random(-2,2)->0, duration 0.45s, ease back.out(2), stagger 0.08s'
  marquee: 'marquee keyframe translateX(0 -> -50%), 24s linear infinite'
  sealRotate: 'spin keyframe rotate(360deg), 28s linear infinite'
  reducedMotion: 'respects prefers-reduced-motion: reduce — stamps set visible immediately, no scroll animation'
icons:
  library: game-icons (lorc / delapouite) via jsDelivr, recolored with CSS filters
  style: solid carved/woodcut silhouette SVGs (grapes, vines, wine-glass, wine-bottle, pouring-chalice, vine-leaf)
  sizes: { glass: 48px, nav: 36px, hero: '280-420px' }
  color: 'ink (.ink-img), kraft (.kraft-img), or magenta (.magenta-img) via filter recoloring'

Pét-Nat & Co.

petnat-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Pét-Nat & Co. is a natural wine bar dressed as a hand-pressed letterpress poster. The whole page sits on warm kraft paper (#E9E0CD) overlaid with a fixed multiply-blended paper texture at 15% opacity, and everything reads in carved ink (#1C1A16). A single voltage — a sediment magenta (#9E2B52) — carries every accent: links, price chips, eyebrow labels, rotating wax seals, and the bullet dots in the marquee. The headline voice is Libre Caslon Display set enormous (clamp(3.5rem, 11vw, 9.5rem)) at a crushed 0.82 line-height and passed through an SVG feDisplacementMap "rough" filter so the type looks ink-bled and hand-printed; body copy switches to its serif companion Libre Caslon Text, while all micro-labels, nav, prices, and tags are Martian Mono in wide-tracked uppercase. The signature structural move is the gouge-rule: an 8px ink band clipped with a jagged polygon() so each section is sealed by a woodcut serration rather than a clean line. Geometry is uncompromisingly flat — no border radius anywhere, no shadows, just thick 4px ink borders around cards. Carved game-icon botanicals (grapes, vines, chalices, bottles) are recolored with CSS filters and scatter the hero and dark panels, popping in on scroll with a stamping GSAP animation.

Colors

Brand / Voltage. magenta #9E2B52 is the only accent and does a lot of work: nav CTA fill, price chips, the "Our story →" link, eyebrow labels, hover color on nav links, the marquee dots, hours-row times, and the stroke/fill of the rotating wax-seal SVGs. A second helper accent green #5C7A3F (.green) is defined in CSS but is not applied in the current layout.

Surface. kraft #E9E0CD is the primary page paper and the fill of light pour cards. ink #1C1A16 is the near-black used for the dark pour cards, the About panel, the footer, all 4px card borders, and the gouge-rule dividers. A fixed full-viewport paper-tex layer (an Unsplash photo, mix-blend-mode: multiply, opacity 0.15) grains the entire surface.

Text. On kraft, text is ink #1C1A16; on ink surfaces it flips to kraft #E9E0CD. Body copy on dark panels is softened with text-kraft/85 (rgba(233,224,205,0.85)).

Hairlines / Tints. Dividers and rules are alpha tints of kraft over ink: kraft/40 for the About stat divider grid, kraft/20 for the footer baseline rule. On kraft, the hours list uses ink/20 (rgba(28,26,22,0.20)) underlines.

Typography

Two families, loaded from Google Fonts via one @import: Libre Caslon Display + Libre Caslon Text (an elegant high-contrast Caslon revival) for all serif display and body, and Martian Mono (a geometric monospace) for every label, nav item, price, and tag. The display face is used huge and tight; the mono face is always uppercase with wide tracking. All three are open-source Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3.5rem, 11vw, 9.5rem)	400	0.82	tight	Hero headline ("GLUG, GLUG, GLUG.")
heading	clamp(2.5rem, 7vw, 6rem)	400	0.85	tight	Section titles ("BY THE GLASS", "WHAT IS PÉT-NAT?")
cardTitle	36–48px (text-3xl/4xl/5xl)	400	1.0	—	Pour names, Find Us / Hours
body	16px (text-sm/base)	400	1.625	—	Paragraph copy (Libre Caslon Text)
monoLabel	11px	600	—	0.2–0.3em	Eyebrows, tasting notes, price chips, footer headings
monoNav	12px	500	—	0.1em	Nav links (uppercase)

Layout

4px base unit (Tailwind scale). The page is a single 1440px max-width column (max-w-[1440px] mx-auto) padded px-6 on mobile, px-12 on desktop, with a py-16 md:py-24 section rhythm. Structure: sticky-feeling header with logo + mono nav and a gouge-rule beneath it; a 12-column hero (7/5 split) with the giant roughened headline on the left and a layered stack of carved-grape, chalice, and magenta-blob SVGs on the right, plus a rotating wax-seal badge anchored bottom-right; a "By the Glass" two-column grid of 4px-bordered pour cards alternating kraft/ink fills; a full-bleed ink About panel with a 3-up stat divider grid; a magenta-dotted infinite marquee bracketed top and bottom by gouge-rules; a two-column Visit block (Find Us / Hours, each a bordered card); and an ink footer with link columns and another rotating seal. Whitespace is generous and poster-like, letting the oversized type and scattered botanicals breathe.

Elevation & Depth

Deliberately flat — no box-shadow anywhere. Depth comes entirely from (1) thick 4px solid ink borders around cards, (2) the kraft/ink fill contrast between alternating cards and panels, (3) the fixed multiply paper-texture grain, and (4) z-index layering of the scattered SVG botanicals and seals in the hero. The "rough" SVG displacement filter adds a tactile, printed irregularity to headlines and dark panels in place of any lighting model.

Shapes

There is no radius anywhere — every card, chip, button, and panel is a hard rectangle (rounded.none = 0). The one shaped element is the gouge-rule: an 8px ink bar with a serrated clip-path: polygon(...) bottom edge that mimics a carved woodcut. Circular forms appear only as decorative SVG wax seals (textPath rings) and the hand-drawn squiggle underline beneath "BY THE GLASS".

Components

• navLink — ink text, Martian Mono 12px/500 uppercase, hovers to magenta. No fill.
• navCta — magenta fill, kraft text, mono 600, square, 8px 16px; label "Book a Stool".
• buttonPrimary — ink fill, kraft text, mono 600 wide-tracked uppercase, square, 16px 28px; e.g. "See the Pour List", "Book a Stool".
• linkText — magenta, mono uppercase, 2px underline at 4px offset; e.g. "Our story →".
• pourCardLight — kraft fill, ink text, 4px ink border, square, 28px padding; serif title + mono tasting note + magenta price chip + carved icon.
• pourCardDark — ink fill, kraft text, 4px ink border, square, 28px; same layout inverted, note at kraft/80.
• priceChip — magenta fill, kraft text, mono 600, square, 4px 12px; e.g. "12 / glass".
• infoCard — kraft fill, 4px ink border, square, 32–40px padding (Find Us / Hours).
• gougeRule — 8px ink band with serrated clip-path; the recurring section divider.
• waxSeal — circular SVG with magenta stroke + Martian Mono textPath ("LOW INTERVENTION • EST. 2019", "WALK-INS WELCOME", "PRESSED & POURED"), slowly rotating.

Motion

• stampReveal — GSAP ScrollTrigger.batch on .stamp-art: elements fade in from opacity 0, scale 1.12, and a random ±2° rotation to settled state over 0.45s with ease: back.out(2) and 0.08s stagger — a stamping/pressing effect as you scroll.
• marquee — the natural/cloudy/alive tagline strip scrolls translateX(0 → -50%) over 24s linear infinite.
• sealRotate — wax seals spin a full 360° over 28s linear infinite.
• reducedMotion — fully respected: under prefers-reduced-motion: reduce all .stamp-art is set visible immediately and the scroll animation is skipped.

Iconography

game-icons artwork (lorc & delapouite sets) loaded as transparent SVGs from jsDelivr — grapes, curling-vines, vines, vine-leaf, wine-glass, wine-bottle, pouring-chalice. These are solid carved/woodcut silhouettes, recolored at runtime with CSS filters: .ink-img (black), .kraft-img (kraft-toned via sepia/hue filter), .magenta-img (magenta via invert/hue filter). UI sizes are 36px in nav and 48px (w-12) on pour cards; hero/decorative instances run 200–420px. Mostly decorative — scattered botanical stamps — with small functional icons per pour card.

Do's and Don'ts

• Do keep magenta as the single voltage; let it punctuate, not dominate.
• Do keep everything square (radius 0) with thick 4px ink borders.
• Do use gouge-rules to separate sections — they are the brand's seam.
• Do keep display type huge, tight, and passed through the rough filter.
• Do keep all labels in Martian Mono uppercase with wide tracking.
• Don't add rounded corners, drop shadows, or glassy blur.
• Don't introduce a second bright accent; the defined green stays unused for a reason.
• Don't let the paper texture exceed its subtle ~15% multiply grain.
• Don't set body copy in the mono face or headlines in anything but Libre Caslon Display.

Known Gaps

• letterSpacing: -0.01em on the display/heading tokens approximates Tailwind's tracking-tight; the HTML uses the utility class rather than an explicit value.
• Body font-size is given as 16px; the markup uses responsive text-sm/text-base utilities (14–16px), so 16px is the representative value.
• Card title size (36px) is the base of a responsive text-3xl md:text-4xl (and text-4xl md:text-5xl on Visit cards) range.
• The CSS filter recoloring of icons is described by intent (ink/kraft/magenta); exact filter matrices are in the stylesheet, not reproduced as tokens.
• green #5C7A3F is defined in CSS but not used in the current layout.
• The paper-tex texture is a remote Unsplash image, not a token.