Corky’s · Design System

Smokin’ since ’84.

twenty-two hours over hickory.

Memphis original Bar-B-Q.

Plates · Catering · Ship Our BBQ.

Body copy is Source Serif 4. Headlines pull Lobster (Google), eyebrows pull Saira Stencil One, billboards pull Arvo, and daily-special handwriting is Caveat. Single source of truth lives in src/styles/corkys-theme-a.css.

Color

Brand palette · raw tokens, theme-stable

corky-red

--color-corky-red

corky-red-deep

--color-corky-red-deep

corky-green

--color-corky-green

corky-green-deep

--color-corky-green-deep

corky-cream

--color-corky-cream

corky-bone

--color-corky-bone

corky-char

--color-corky-char

corky-light-char

--color-corky-light-char

corky-pit-black

--color-corky-pit-black

corky-mustard

--color-corky-mustard

corky-yellow

--color-corky-yellow

corky-brick

--color-corky-brick

corky-pig-pink

--color-corky-pig-pink

corky-neon-white

--color-corky-neon-white

corky-neon-blue

--color-corky-neon-blue

corky-neon-pink

--color-corky-neon-pink

corky-amber

--color-corky-amber

corky-copper

--color-corky-copper

corky-poplar

--color-corky-poplar

Semantic roles · what components consume; themes remap these

--color-bg

bg-alt

--color-bg-alt

bg-deep

--color-bg-deep

bg-pit

--color-bg-pit

--color-fg

fg-muted

--color-fg-muted

fg-faint

--color-fg-faint

fg-invert

--color-fg-invert

accent

--color-accent

on-accent

--color-on-accent

secondary

--color-secondary

on-secondary

--color-on-secondary

warning

--color-warning

highlight

--color-highlight

border

--color-border

border-dashed

--color-border-dashed

Textures

Files in public/images/textures/ mapped to --texture-* in src/styles/textures.css. Preview sits on bg-alt; SVG tiles repeat, rasters use cover.

aged-lamp-grain

--texture-aged-lamp-grain

/images/textures/aged-lamp-grain.svg

grunge (tile)

--texture-grunge

/images/textures/grunge-tile.svg

charred-wood

--texture-charred-wood

/images/textures/texture-charred-wood.jpg

Scrap1-mobile

--texture-scrap1-mobile

/images/textures/Scrap1-mobile.png

Scrap1a-mobile

--texture-scrap1a-mobile

/images/textures/Scrap1a-mobile.png

Scrap1a

--texture-scrap1a

/images/textures/Scrap1a.png

WoodBackground.jpg

--texture-wood-background-jpg

/images/textures/WoodBackground.jpg

WoodBackground.png

--texture-wood-background-png

/images/textures/WoodBackground.png

corkys_bg_light

--texture-corkys-bg-light

/images/textures/corkys_bg_light.jpg

grungebg1

--texture-grungebg-1

/images/textures/grungebg1.jpg

grungebg2

--texture-grungebg-2

/images/textures/grungebg2.jpg

top-nav-background

--texture-top-nav-background

/images/textures/top-nav-background.jpg

wood1

--texture-wood-1

/images/textures/wood1.jpg

wood1_edited

--texture-wood-1-edited

/images/textures/wood1_edited.jpg

Typography

Supporting voices around the display family — three slab plates (Arvo, Arvo regular, Thirteen), then stencil, then Lobster (display), then body / text / hand — one .card-plate each, stacked; text-1 (largest) through text-7 on the left; phrase on the right.

font-slab · Arvo Regular (400)

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

font-slab-heavy · Arvo Bold (700)

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

.stencil · Saira Stencil One

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

font-display · Lobster

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

font-body · Figtree

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

font-text · Source Serif 4

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

font-hand · Caveat

text-1

Memphis low & slow.

text-2

Memphis low & slow.

text-3

Memphis low & slow.

text-4

Memphis low & slow.

text-5

Memphis low & slow.

text-6

Memphis low & slow.

text-7

Memphis low & slow.

Display voice

Brand carries two display moods. Apply .theme-display-script (default, Lobster cursive with a sign-painter tilt) or .theme-display-billboard / .theme-display-marquee (slab weights, geometric slab, no tilt) on <body>, a route layout, or a single section. Stacks with color themes — theme-pit theme-display-billboard gives you a char-on-cream block with billboard headlines.

The same headline · four display family choices

Smokin’ Since ’84

font-display · Lobster (script · default)

Smokin’ Since ’84

font-slab · Arvo Regular (400) · .tracking-tight

Smokin’ Since ’84

font-slab-heavy · Arvo Bold (700) · .tracking-tight

Full hierarchy under each .theme-display-* variant

.theme-display-script — default · Lobster cursive · sign-painter tilt

The Whole Hog

Memphis Original

22 Hours Over Hickory

.theme-display-billboard · .tracking-tight — Arvo · geometric slab · no tilt

The Whole Hog

Memphis Original

22 Hours Over Hickory

.theme-display-marquee · .tracking-tight — Arvo Bold · ultra-black · loudest

The Whole Hog

Memphis Original

22 Hours Over Hickory

Buttons

One row per variant · columns are sm, md, lg, pill (md + pill), and disabled.

Variant	`sm`	`md`	`lg`	`pill` (md + pill)	`disabled`
`primary`
`secondary`
`mustard`
`cream`
`dark`
`outline`
`ghost`

Chips, badges, pills

.chip — small inline tags, slight rotation, Saira stencil voice

★ Pit PickNew22 hr smokedMemphis Original

.badge — heavier 3px stencil tags

Family-SizeHot off the PitAvailablePit Pick★ Memphis Original22 Hr Smoked

.pill — rounded utility/status tags, Figtree voice

Open NowClosedOnly 4 LeftNewCatering Only

Section dividers

Pick by tone. Stripe & Stamp for utility breaks · Stitch & Brick for menu-internal · Pigs / Cap / Marquee for chapter breaks · Stencil & Wood for section openers · Wave / Splat / Tape when the page needs to feel hand-made.

Utility breaks

.div-pitfire — red → mustard → green flag

.div-stamp — char + 4px sauce-red offset

Menu-internal rules

.div-stitch — 3px dashed mustard

.div-brick — 1px dashed brick · matches plate-card perforation

Chapter breaks · pig & cap medallions

.div-pigs — three pigs marching, hairlines either side

★Smokin’ Since ’84★

.div-pig-star — pig + stencil + pig with hairline rules

.div-cap — bottle-cap medallion centered, 3px char rules

SMOKIN’ SINCE 1984

.div-marquee — pit-black with glowing pig + slab

Section openers

★ The Plates

.div-stencil — tilted stencil tag with hairline rules

★ From the Pit · Memphis Original ★

.div-wood — charred-wood band w/ cream stencil

Hand-made flourishes

.div-wave — hand-painted brick wave (SVG)

.div-embers — mini pit-glow pill between hairlines — same heat-strip DNA as .div-pitfire

Pass the sauce

.div-lobster — Lobster display-script flourish — sauce ink + soft mustard shadow, nudges on hover

Whole hog & hickory smoke

.div-lumiere — Arvo Bold (--font-slab-heavy) slab billboard — uppercase track + sauce underline between hairlines

.div-cta-solo — one oversized .btn-lg centered — stamp shadow reads as the ornament

.div-cta-row — tight wrap-row of stencil buttons — mixed variants for menu-band energy

.div-tape — masking-tape strip, slight tilt

Plate cards

.card-plate · base / dark / accent / green / mustard / brick · 2px char border + 1px dashed perforation · slots: .plate-eyebrow / .plate-title / .plate-body / .plate-price

Our Specialty

Pulled Pork

Hickory-smoked, two sides, garlic toast.

$14

House Favorite

Wet Ribs

Saucy, fall-off-the-bone, hand-rubbed.

$22

Limited Run

Hot Honey Wings

While the smoker’s hot.

$16

Garden Side

Collard Greens

Slow-simmered with smoked turkey.

Sauce Flight

Smokehouse Gold

Tangy mustard, brown sugar, kick of pepper.

Pit Cut

Burnt Ends

Brisket point, candied bark, no shortcuts.

$18

Same six recipes scoped under .theme-display-marquee + .tracking-tight — swaps .plate-title to Arvo Bold via --font-display and pulls letter-spacing in via --display-letter-spacing, no per-card overrides. Drop .tracking-tight to see the slab’s natural airier spacing, or swap to .tracking-loose for an open billboard.

Our Specialty

Pulled Pork

Hickory-smoked, two sides, garlic toast.

$14

House Favorite

Wet Ribs

Saucy, fall-off-the-bone, hand-rubbed.

$22

Limited Run

Hot Honey Wings

While the smoker’s hot.

$16

Garden Side

Collard Greens

Slow-simmered with smoked turkey.

Sauce Flight

Smokehouse Gold

Tangy mustard, brown sugar, kick of pepper.

Pit Cut

Burnt Ends

Brisket point, candied bark, no shortcuts.

$18

Tailwind utilities backed by @theme tokens

Components can mix recipes with utilities; both resolve through the same tokens.

bg-accent · text-on-accent · shadow-stamp

bg-bg-deep · text-on-bg-deep · font-display · shadow-bg-deep-tile

Theme scope

Every recipe consumes semantic role tokens. Apply .theme-dark or .theme-pit on any element — <body> for site-wide, a route layout for whole pages, or one <section> for a single block. Children inherit until another theme-* class resets the cascade.

scope · section · .theme-dark

Same recipes, different skin.

Nothing about the markup below changed — only the .theme-darkclass on this section’s root. Semantic role variables cascade, recipes follow.

Hot off the PitNew

scope · section · .theme-pit

Pit-black variant.

Char ground, cream type, sauce-red accent retained. Useful for hero slabs and storyteller sections.

Memphis Original