Remixes of munch-nextjs-template.vercel.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Munch-nextjs-template
description: |
Munch embodies a bold, retro-diner aesthetic grounded in authentic fast-casual
culture. The design system marries industrial clarity with playful
warmth—think hand-drawn signage meets precise, contemporary typographic
hierarchy. The palette centers on deep crimson accents against warm cream
backgrounds, creating high contrast and visual excitement. Decorative dot
patterns and subtle gradient overlays add nostalgic texture without
overwhelming content. Every element feels intentional and deliberate, from
pill-shaped buttons to serif-driven headlines that command attention. The
system prioritizes legibility and speed of action, reflecting a
kitchen-focused brand that values immediate engagement and clear
communication.
source:
url: "https://munch-nextjs-template.vercel.app/"
pagesAnalyzed: 6
extractedAt: 2026-11-07
tokensMeasured: true
typography:
display-xxl:
fontFamily: "Instrument Serif"
fontSize: 158.4px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
display-xl:
fontFamily: "Instrument Serif"
fontSize: 115.2px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
display-lg:
fontFamily: "Instrument Serif"
fontSize: 96px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
display-md:
fontFamily: "Instrument Serif"
fontSize: 80px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
display-sm:
fontFamily: "Instrument Serif"
fontSize: 51.84px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
display-xs:
fontFamily: "Instrument Serif"
fontSize: 43.2px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
heading-md:
fontFamily: "Instrument Serif"
fontSize: 36px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
heading-md-uppercase:
fontFamily: Anton
fontSize: 36px
fontWeight: 400
lineHeight: 1
letterSpacing: 0.9px
textTransform: uppercase
heading-sm:
fontFamily: "Instrument Serif"
fontSize: 30px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
heading-sm-bricolage-grotesque:
fontFamily: "Bricolage Grotesque"
fontSize: 30px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
heading-sm-uppercase:
fontFamily: "Instrument Serif"
fontSize: 30px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
heading-xs:
fontFamily: "Instrument Serif"
fontSize: 20px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-xl:
fontFamily: "Instrument Serif"
fontSize: 24px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-lg:
fontFamily: "Instrument Serif"
fontSize: 20px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-md:
fontFamily: "Bricolage Grotesque"
fontSize: 18px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-sm:
fontFamily: "Bricolage Grotesque"
fontSize: 16px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-xs:
fontFamily: "Bricolage Grotesque"
fontSize: 14px
fontWeight: 400
lineHeight: 1.63
letterSpacing: 0px
body-xs-strong:
fontFamily: "Bricolage Grotesque"
fontSize: 14px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
button-sm:
fontFamily: "Bricolage Grotesque"
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
button-xs:
fontFamily: "Bricolage Grotesque"
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0px
label:
fontFamily: "Bricolage Grotesque"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
caption-md:
fontFamily: "Bricolage Grotesque"
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm:
fontFamily: "Instrument Serif"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
code-lg:
fontFamily: "Geist Mono"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 1.4px
textTransform: uppercase
code-md:
fontFamily: "Geist Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.38
letterSpacing: 1.2px
textTransform: uppercase
code-md-tight:
fontFamily: "Geist Mono"
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 1.2px
textTransform: uppercase
code-sm:
fontFamily: "Geist Mono"
fontSize: 11px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 3.3px
textTransform: uppercase
code-xs:
fontFamily: "Geist Mono"
fontSize: 9px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 2px
textTransform: uppercase
code-xs-tight:
fontFamily: "Geist Mono"
fontSize: 9px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 1.62px
textTransform: uppercase
rounded:
none: 0px
xs: 35.2px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
md: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px"
lg: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px"
xl: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
elevationStrategy: layered-micro
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F7F7F7"
surfaceRaised: "#EEEEEE"
text: "#111111"
textMuted: "#646464"
border: "#E2E2E2"
accent: "#111111"
accentFg: "#FFFFFF"
focusRing: "#111111"
elevation: shadow
dark:
bg: "#0F0F10"
surface: "#1D1D1E"
surfaceRaised: "#29292A"
text: "#F5F5F5"
textMuted: "#9E9E9E"
border: "#353536"
accent: "#818181"
accentFg: "#0B0B0C"
focusRing: "#636363"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "repeating-linear-gradient(90deg, lab(36.6008 60.0126 44.7474 / 0.2) 0px, lab(36.6008 60.0126 44.7474 / 0.2) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 44px)"
- context: section
kind: linear
value: "linear-gradient(to top, oklab(0.470008 0.16927 0.0862654 / 0.9) 0%, rgba(0, 0, 0, 0) 100%)"
- context: section
kind: radial
value: "radial-gradient(lab(36.6008 60.0126 44.7474 / 0.2) 1px, rgba(0, 0, 0, 0) 1.2px)"
- context: section
kind: radial
value: "radial-gradient(55% 45% at 50% 45%, lab(96.0168 -0.162154 5.36114) 0%, rgba(0, 0, 0, 0) 100%)"
- context: section
kind: radial
value: "radial-gradient(at 50% 45%, rgba(0, 0, 0, 0) 0%, oklab(0 0 0 / 0.5) 100%)"
- context: hero
kind: radial
value: "radial-gradient(lab(36.6008 60.0126 44.7474 / 0.2) 1px, rgba(0, 0, 0, 0) 1.2px)"
components:
button-outline:
typography: "{typography.code-md-tight}"
textColor: "lab(97.1663 -0.146359 4.59011)"
border: "1px solid lab(36.6008 60.0126 44.7474)"
height: 38px
padding: "10px 16px 10px 16px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
rounded: 41.6px
backgroundColor: "lab(36.6008 60.0126 44.7474)"
button-outline-lg:
typography: "{typography.caption-md}"
textColor: "lab(36.6008 60.0126 44.7474)"
border: "1px solid lab(36.6008 60.0126 44.7474 / 0.2)"
height: 46px
padding: "10px 16px 10px 16px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
rounded: 41.6px
backgroundColor: "lab(98.322 -0.305593 3.80681)"
button-text:
textColor: "lab(97.1663 -0.146359 4.59011)"
height: 56px
padding: "0px 28px 0px 28px"
fontSize: 16px
fontFamily: "Bricolage Grotesque"
fontWeight: 500
lineHeight: 1.5
rounded: 41.6px
backgroundColor: "lab(36.6008 60.0126 44.7474)"
button-text-sm:
typography: "{typography.button-sm}"
textColor: "lab(97.1663 -0.146359 4.59011)"
height: 32px
padding: "0px 12px 0px 12px"
rounded: 41.6px
backgroundColor: "lab(26.5126 48.9722 36.2227)"
card:
typography: "{typography.caption-md}"
textColor: "lab(36.6008 60.0126 44.7474)"
border: "2px solid lab(36.6008 60.0126 44.7474 / 0.2)"
padding: "96px 64px 40px 64px"
rounded: "160px 160px 0px 0px"
backgroundColor: "lab(98.322 -0.305593 3.80681)"
card-sm:
typography: "{typography.caption-md}"
textColor: "lab(36.6008 60.0126 44.7474)"
padding: "12px 12px 20px 12px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px"
backgroundColor: "lab(98.322 -0.305593 3.80681)"
navigation:
typography: "{typography.caption-md}"
textColor: "lab(36.6008 60.0126 44.7474)"
height: 38px
footer:
typography: "{typography.caption-md}"
textColor: "lab(36.6008 60.0126 44.7474)"
border: "1px solid lab(36.6008 60.0126 44.7474 / 0.2)"
link:
textColor: "lab(36.6008 60.0126 44.7474)"
border: "1px solid lab(36.6008 60.0126 44.7474 / 0.2)"
padding: "0px 28px 0px 28px"
fontSize: 16px
fontFamily: "Bricolage Grotesque"
fontWeight: 500
lineHeight: 1.5
rounded: 41.6px
backgroundColor: "lab(96.0168 -0.162154 5.36114)"
link-2:
typography: "{typography.body-xl}"
textColor: "lab(36.6008 60.0126 44.7474)"
states:
other-disabled:
target: other
state: disabled
opacity: 0.5
other-hover:
target: other
state: hover
opacity: 1
other-focus:
target: other
state: focus
rounded: "3.40282e+38px"
other-focus-visible:
target: other
state: focus-visible
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 5
navLinksVisible: 9
menuToggleVisible: true
headingPx: 83
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 5
navLinksVisible: 14
menuToggleVisible: false
headingPx: 154
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 6
navLinksVisible: 14
menuToggleVisible: false
headingPx: 205
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 6
navLinksVisible: 14
menuToggleVisible: false
headingPx: 234
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 6
navLinksVisible: 14
menuToggleVisible: false
headingPx: 234
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 33
gradientsFound: 9
rolesUnassigned: 0
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Munch embodies a bold, retro-diner aesthetic grounded in authentic fast-casual culture. The design system marries industrial clarity with playful warmth—think hand-drawn signage meets precise, contemporary typographic hierarchy. The palette centers on deep crimson accents against warm cream backgrounds, creating high contrast and visual excitement. Decorative dot patterns and subtle gradient overlays add nostalgic texture without overwhelming content. Every element feels intentional and deliberate, from pill-shaped buttons to serif-driven headlines that command attention. The system prioritizes legibility and speed of action, reflecting a kitchen-focused brand that values immediate engagement and clear communication.
Key Characteristics
lab(36.6008 60.0126 44.7474) / approximately #A71930): Deep crimson red used for buttons, links, headings, borders, and all primary call-to-action elements. This is the defining color of the Munch identity.lab(98.322 -0.305593 3.80681) / approximately #F9F8F7): Warm off-white background for cards, surfaces, and primary content areas.lab(97.1663 -0.146359 4.59011) / approximately #F8F7F6): Very light text on dark backgrounds and reversed contexts.lab(36.6008 60.0126 44.7474)): Brand red reused as text color in certain contexts, maintaining chromatic consistency.lab(96.0168 -0.162154 5.36114) / approximately #F5F4F2): Lightest neutral for link backgrounds and subtle surface differentiation.lab(36.6008 60.0126 44.7474 / 0.2)): Brand red at 20% opacity for light borders and dividers.lab(36.6008 60.0126 44.7474 / 0.2) reduced further in interactive states): Used on outline buttons and cards for minimal visual weight.var(--destructive) in hover states, indicating a status color role exists in the CSS layer but was not measured in static typography. See Known Gaps.Primary Display & Headings
Body & UI Text
Labels, Navigation, Code
Large Display (Hero)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Instrument Serif | 158.4px | 400 | 1.0 | 0px | Hero headlines, maximum impact |
| Display XL | Instrument Serif | 115.2px | 400 | 1.0 | 0px | Page titles, primary focal point |
| Display LG | Instrument Serif | 96px | 400 | 1.0 | 0px | Large section headers |
| Display MD | Instrument Serif | 80px | 400 | 1.0 | 0px | Medium display headings |
| Display SM | Instrument Serif | 51.84px | 400 | 1.25 | 0px | Small display, flexible line height |
| Display XS | Instrument Serif | 43.2px | 400 | 1.0 | 0px | Extra-small display size |
| Heading MD Uppercase | Anton | 36px | 400 | 1.0 | 0.9px | Section subheadings, all caps |
| Heading SM | Instrument Serif | 30px | 400 | 1.2 | 0px | Tertiary headings |
| Heading SM Uppercase | Instrument Serif | 30px | 400 | 1.2 | 0px | All-caps variant of heading-sm |
| Heading XS | Instrument Serif | 20px | 400 | 1.25 | 0px | Small headings, more frequent use |
| Body XL | Instrument Serif | 24px | 400 | 1.25 | 0px | Large body copy, emphasis |
| Body LG | Instrument Serif | 20px | 400 | 1.0 | 0px | Large body text |
| Body MD | Bricolage Grotesque | 18px | 400 | 1.63 | 0px | Primary body copy size |
| Body SM | Bricolage Grotesque | 16px | 400 | 1.63 | 0px | Secondary body text |
| Body XS | Bricolage Grotesque | 14px | 400 | 1.63 | 0px | Tertiary body, fine print |
| Body XS Strong | Bricolage Grotesque | 14px | 600 | 1.43 | 0px | Emphasized body, bold weight |
| Button SM | Bricolage Grotesque | 14px | 500 | 1.43 | 0px | Standard button text |
| Button XS | Bricolage Grotesque | 12px | 500 | 1.33 | 0px | Small button, compact UI |
| Label | Bricolage Grotesque | 14px | 400 | 1.43 | 0px | Form labels, field identification |
| Caption MD | Bricolage Grotesque | 16px | 400 | 1.5 | 0px | Medium caption, metadata |
| Caption SM | Instrument Serif | 14px | 400 | 1.43 | 0px | Small captions, fine detail |
| Code LG | Geist Mono | 14px | 400 | 1.43 | 1.4px | Large code, uppercase |
| Code MD Tight | Geist Mono | 12px | 400 | 1.33 | 1.2px | Standard code size, tight leading |
| Code SM | Geist Mono | 11px | 400 | 1.5 | 3.3px | Small code, maximum tracking |
| Code XS | Geist Mono | 9px | 400 | 1.5 | 2px | Tiny code references |
{typography.code-lg} — 1.4px) reinforces technical precision in navigation and labels.Primary Button (Text)
lab(36.6008 60.0126 44.7474) (brand red)lab(97.1663 -0.146359 4.59011) (off-white){typography.button-sm} (14px, weight 500)0px 28px56px{rounded.full} (9999px / pill-shaped)1px solid rgba(0, 0, 0, 0))backgroundColor: var(--primary) (full red)Primary Button Small (Text SM)
lab(26.5126 48.9722 36.2227) (darker red variant)lab(97.1663 -0.146359 4.59011) (off-white){typography.button-sm} (14px, weight 500)0px 12px32px{rounded.full} (9999px)Outline Button
lab(36.6008 60.0126 44.7474) (brand red, filled)lab(97.1663 -0.146359 4.59011) (off-white){typography.code-md} (12px, weight 400, uppercase)10px 16px38px1px solid lab(36.6008 60.0126 44.7474) (brand red border){rounded.full} (41.6px pill)rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px148.812pxOutline Button Large (Outline LG)
lab(98.322 -0.305593 3.80681) (off-white surface)lab(36.6008 60.0126 44.7474) (brand red text){typography.body-md} (16px, weight 400)10px 16px46px1px solid lab(36.6008 60.0126 44.7474 / 0.2) (light red border){rounded.full} (41.6px)rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px113px24pxDisabled State
0.5Card Default
lab(98.322 -0.305593 3.80681) (off-white)lab(36.6008 60.0126 44.7474) (brand red)2px solid lab(36.6008 60.0126 44.7474 / 0.2) (light red border)160px 160px 0px 0px (rounded top, sharp bottom)96px 64px 40px 64px{typography.caption-md} (16px, weight 400)672px807pxCard Small
lab(98.322 -0.305593 3.80681) (off-white)lab(36.6008 60.0126 44.7474) (brand red)0px solid){rounded.none} (0px / sharp corners)12px 12px 20px 12px{typography.caption-md} (16px, weight 400)rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px448px487pxInput Base
{typography.label} (14px, weight 400)1.43lab(36.6008 60.0126 44.7474) (brand red placeholder/label)lab(98.322 -0.305593 3.80681) (off-white)backgroundColor: color-mix(in oklab, var(--input) 30%, transparent) (light tint)Navigation Bar Default
rgba(0, 0, 0, 0) (transparent)lab(36.6008 60.0126 44.7474) (brand red){typography.caption-md} (16px, weight 400){rounded.none} (0px)38px0pxcolor: var(--primary) (brand red emphasis)Nav Link
{typography.code-lg} (14px, weight 400, uppercase)16pxlab(97.1663 -0.146359 4.59011) (light text, reversed)borderColor: var(--primary), color: var(--primary)Link Default (Pill-shaped)
lab(96.0168 -0.162154 5.36114) (very light neutral)lab(36.6008 60.0126 44.7474) (brand red)1px solid lab(36.6008 60.0126 44.7474 / 0.2) (light red border){typography.button-sm} (14px, weight 500)0px 28px56px{rounded.full} (41.6px)24pxcolor: var(--primary) (deepen red)Link Serif (Display)
rgba(0, 0, 0, 0) (transparent)lab(36.6008 60.0126 44.7474) (brand red){typography.body-xl} (24px, weight 400){rounded.none} (0px)0px30pxcolor: var(--primary) (maintain red)Footer Default
rgba(0, 0, 0, 0) (transparent)lab(36.6008 60.0126 44.7474) (brand red){typography.caption-md} (16px, weight 400)1px solid lab(36.6008 60.0126 44.7474 / 0.2) (light red divider){rounded.none} (0px)0px1440px (full width)855.141pxBase unit: 8px ({spacing.xxs})
Scale
{spacing.xxs} = 8px{spacing.xs} = 12px{spacing.sm} = 16px{spacing.md} = 20px{spacing.lg} = 24px{spacing.xl} = 28px{spacing.xxl} = 32px{spacing.xxxl} = 40px{spacing.section} = 48px{spacing.band} = 64pxUsage Context
{spacing.xxs} (8px): Micro-spacing between inline elements, icon-to-text gaps{spacing.xs} (12px): Button padding-y, tight component spacing{spacing.sm} (16px): Standard body text margins, input padding{spacing.md} (20px): Component margins, card internal spacing{spacing.lg} (24px): Heading margins, larger button padding{spacing.xl} (28px): Sidebar padding, horizontal gutter{spacing.xxl} (32px): Section internal padding{spacing.xxxl} (40px): Large content blocks, top-level padding{spacing.section} (48px): Page section margins, spacing between content areas{spacing.band} = (64px): Full-bleed section spacing, page divisions1440px (full-width desktop container)0px across all breakpoints (full-bleed sections with internal padding on child elements rather than container)1440px (full width); at 1280px: 1280px; at 1024px: 1024px; at 768px: 768px; at 375px: 375pxThe design system prioritizes breathing room and visual clarity. Large display typography sits on generous vertical spacing, creating a sense of luxury and intentionality. Body text benefits from 1.5–1.63 line-height and mid-scale margins, ensuring legibility without cramping. Sections are separated by {spacing.band} (64px), reinforcing distinct content blocks. Horizontal sections use full-bleed backgrounds with internal content padding, avoiding fixed sidebars and instead allowing typography and imagery to scale naturally with the viewport.
{rounded.none} = 0px: Sharp corners; used on images, cards (variant small), navigation, footer{rounded.xs} = 35.2px: Gentle rounding; used on some card variants for subtle softness{rounded.full} = 9999px: Pill-shaped; applied to all interactive elements (buttons, links, nav items) for a modern, approachable feelComponent Contexts
{rounded.full} (9999px){rounded.none} (0px, sharp) or {rounded.xs} (35.2px, gentle top rounding){rounded.none} (0px){rounded.none} (0px)1px): Used on outline buttons and some card borders; creates a delicate visual frame2px): Used on card default borders; provides more prominent definition| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; color blocking only | Navigation, footer, transparent overlays, section backgrounds |
| Micro (sm) | rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px | Outline buttons, subtle lift on interactive elements |
| Medium (md) | rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px | Card small, hovered content, secondary containers |
| Large (lg) | rgba(0, 0, 0, 0.25) 0px 25px 50px -12px | Deep custom overlays, modal-like surfaces (not heavily used) |
| Extra Large (xl) | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Custom deep surfaces, emphasis states |
Shadow Philosophy
The Munch system employs a layered-micro elevation strategy. Rather than aggressive drop shadows, depth emerges from stacked, near-transparent layers that create barely-perceptible lift. This restraint aligns with the design's color-blocking aesthetic—surfaces are differentiated primarily by background hue and border treatments, with shadows playing a supporting role. Shadows are reserved for interactive hover states and secondary content containers, maintaining visual lightness and modernity.
The system applies opacity shifts to denote states and layering depth:
lab(36.6008 60.0126 44.7474 / 0.2))The system defines a clear stacking order for overlapping UI:
Numeric z-index values observed: 1, 7, 8, 9, 10, 11, 12, 13. The gap between base and dropdown suggests a reserved tier for sticky/fixed positioning (z-index 9).
{rounded.full} border radius creates visual cohesion and signals interactivity.lab(36.6008 60.0126 44.7474)) as the primary accent; it drives visual hierarchy and should dominate interactive states.{spacing.band} (64px) to create breathing room and visual hierarchy.text-transform: uppercase to reinforce urgency and precision.{typography.body-md} and below) for readability and breathing room.{rounded.full} is the brand default.text-transform).{spacing.xxs} (8px) for component padding or margin; the system's legibility and touch-target sizing depends on this base unit.| Viewport | Content Width | Grid Columns | Nav Links Visible | Menu Toggle | Display Heading | Body Font Size | Section Padding-X |
|---|---|---|---|---|---|---|---|
| 375px (Mobile) | 375px | 5 | 9 | Yes | 83px (reduced from 115px) | 16px | 0px |
| 768px (Tablet) | 768px | 5 | 14 | No | 154px | 16px | 0px |
| 1024px (Desktop) | 1024px | 6 | 14 | No | 205px | 16px | 0px |
| 1280px (Large) | 1280px | 6 | 14 | No | 234px | 16px | 0px |
| 1440px (XL) | 1440px | 6 | 14 | No | 234px | 16px | 0px |
Key Transition Points
Minimum interactive element size: 32px × 32px (observed in button small variant {typography.button-xs} at height 32px, padding 12px). Primary buttons default to 56px height to accommodate larger touch zones. Navigation links in mobile contexts scale to ensure thumbs can tap comfortably; exact mobile tap zone sizing follows platform norms (48–56px minimum).
Specific Collapses
{rounded.xs} top-rounded cards at desktop may stack or reflow to single-column on mobile; {rounded.none} card variants remain sharp.lab(36.6008 60.0126 44.7474) / approximately #A71930)lab(98.322 -0.305593 3.80681) / approximately #F9F8F7)lab(36.6008 60.0126 44.7474))lab(97.1663 -0.146359 4.59011) / approximately #F8F7F6)lab(36.6008 60.0126 44.7474 / 0.2))lab(96.0168 -0.162154 5.36114) / approximately #F5F4F2)All buttons are pill-shaped (border-radius: 9999px); no square or slight-radius buttons exist in the system. Primary buttons fill with brand red; outline buttons invert to light background with red text and border.
Typography is three-font stack: Instrument Serif for display/headings (large, commanding), Bricolage Grotesque for body/UI (friendly, readable), Geist Mono for labels/code (technical, precise). Never mix fonts within a single typographic role.
Color palette is intentionally minimal: Brand red (lab(36.6008 60.0126 44.7474)), off-white (lab(98.322 -0.305593 3.80681)), and neutrals. No secondary accent colors or multi-color palette; all interaction relies on opacity shifts and red emphasis.
Shadows are subtle: Use micro-elevation (rgba(0, 0, 0, 0.1) 0px 4px 6px -1px) for buttons; medium (rgba(0, 0, 0, 0.1) 0px 20px 25px -5px) for cards. Never stack multiple shadows or use aggressive drop-shadows; color blocking is the primary depth signal.
Spacing base unit is 8px ({spacing.xxs}). All margins, padding, and gaps scale from this base (8, 12, 16, 20, 24, 28, 32, 40, 48, 64px). Never introduce arbitrary spacing values.
Full-bleed sections extend to viewport edges with zero padding-x; internal content containers and cards manage their own padding. This allows background colors and gradients to span edge-to-edge.
Interactive states are sparse: Hover states typically shift color (red becomes darker red) or apply opacity changes. No complex animations or multi-step transitions are present in the extracted tokens; keep state changes immediate and visual.
Uppercase small text: All labels, button text, nav links, and code use uppercase (either via Geist Mono default or text-transform: uppercase). This reinforces precision and visual hierarchy.
Line-height on body is 1.5–1.63: Ensures generous readability and breathing room. Display type uses tight 1.0 line-height for impact. No body text should fall below 1.43 line-height.
Breakpoint transitions scale typography, not layout. At mobile (375px), display headings shrink to 83px; at tablet, they grow to 154px; at desktop, they cap at 234px. Grid columns adjust (5 → 6), but the core layout remains single-column on mobile.
Semantic Status Colors: The site does not expose error, success, warning, or info states in its markup. CSS variables for --destructive, --muted, and --foreground are referenced in interaction states but were not measured as static hex values. Implement these as brand-red-based variants (darker/lighter red) or request additional extraction.
Interaction State Coverage: Hover, focus, and focus-visible states are present in the CSS layer but not all possible states were captured. Missing: active state detail, disabled state appearance beyond opacity 0.5, focus ring styling specifics.
Dark Mode / Theme Variants: No dark mode variant was measured. The extracted palette represents the single visible theme; a dark theme may exist behind authentication or in a settings panel.
Behind-Authentication Surfaces: The extraction covered 6 public pages. Surfaces behind login, account settings, or admin panels were not visited; their design tokens (if different) are unknown.
Animation & Transition Details: The extraction captured static styles and interaction hover/focus states only. Transition duration, easing curves, and animation keyframes are not included; these may need separate capture or implementation guidance.
Full Border Radius Assignments: Only three radius values were extracted ({rounded.none}, {rounded.xs}, {rounded.full}). Any components not visited (e.g., chips, badges, tabs) may have additional radius values; these are recorded as not measured rather than inferred.
Gradient Opacity Specifics: Decorative gradients (hero repeating-linear, section radial) use lab() and oklab() color space with variable opacity. These are exact CSS values but may require browser compatibility verification.
Z-index Full Scale: Only z-indices 1, 7–13 were observed. The full stacking order for modals, toasts, popovers, and overlays is incomplete; values above 13 are inferred from CSS architecture patterns but not measured.
Opacity Assignments to Roles: Opacity values (0.18, 0.25, 0.35, 0.4, 0.45, 0.8) were extracted but their semantic roles (disabled, hover, overlay, etc.) are inferred from context. Explicit mapping to all interaction states may differ.
Container Query / Intrinsic Sizing: No container queries or intrinsic sizing rules were detected; layout is viewport-based only.
Extraction Coverage: 6 pages analyzed across https://munch-nextjs-template.vercel.app/. This document reflects the systemic design tokens and is sufficient for building a pixel-accurate implementation of Munch's public-facing UI.