Brami Design System

Overview

Brami is an Italian-inspired food brand that brings Mediterranean warmth to digital retail through a striking, high-contrast visual system. The design language balances editorial sophistication with approachable, almost streetwear-influenced energy — think warm espresso tones against electric yellow voltage, proprietary typefaces layered over grainy black-and-white photography, and surfaces that feel simultaneously artisanal and modern. The overall mood is confident and appetite-inducing: this is food as culture, not just commerce.

Brand voltage lives most visibly in {colors.accent} (#ffe400), an aggressive lemon-yellow that appears on the main navigation bar, all primary CTAs, and headline text within modal overlays. It's a color that refuses to be ignored — it's the "start eating with us" energy made manifest. The primary palette anchor is {colors.primary} (#472b1a), a deep espresso brown that serves double duty as both the dominant text color and the brand's darker surface tone (announcement bars, hero bands). This creates a cohesive warmth where even dark areas feel appetizing rather than somber.

The typography move that defines the system is the three-face stack: Neue Haas Grotesk Display Pro handles all display and UI text with Swiss precision at heavier weights (700), Highgate (a custom serif) delivers editorial headline moments with authoritative heft, and Noto Sans carries body copy with neutral clarity. The contrast between grotesque-sans headings and slab-like serif titles creates a rhythm that feels both contemporary and rooted in Italian print tradition.

Shape language is deliberately restrained — radii hover around {rounded.DEFAULT} (2px) to {rounded.lg} (5px), giving cards and inputs a barely-perceptible softness without ever feeling "app-like." The one exception is circular elements (close buttons, category tags) which go fully {rounded.pill}, creating deliberate focal points. Photography is treated as a first-class surface: images appear full-bleed behind content layers, often in desaturated or black-and-white treatments that let yellow text pop with maximum contrast.

Key sub-systems observed: a modal/email capture dialect (the prominent popup shown) with its own high-contrast photo-background treatment; a product catalog dialect likely using the pastel surface tokens ({colors.surface-blue}, {colors.surface-pink}, etc.) for category differentiation; and a utility/accessibility layer (the purple-tinted widget visible in DOM but visually subordinate).

Key Characteristics

• Canvas is pure {colors.canvas} (#ffffff), keeping product photography pristine
• Brand voltage concentrated in {colors.accent} (#ffe400) on CTAs, nav, and overlay headlines
• Primary ink is deep espresso {colors.primary} (#472b1a), not true black — warmer, more food-appropriate
• Display type uses {typography.display-xl} at weight 700 in Neue Haas Grotesk — never light, always present
• Serif moment reserved for {typography.title-md} / {typography.title-sm} in Highgate — used sparingly for editorial authority
• Tight radius vocabulary: {rounded.DEFAULT} (2px) default, maxing at {rounded.lg} (5px) for inputs
• Modal overlays use photographic backgrounds with {colors.accent} text for maximum pop
• Shadow system is subtle: {extensions.shadows.md} at 10% opacity, never heavy
• Spacing feels compressed and intentional: base unit clusters around 7px–8px, sections at 45px

Colors

Brand & Accent

• Primary ({colors.primary} — #472b1a): Deep espresso brown serving as the dominant brand color for body text, announcement bar backgrounds, and hero band surfaces. Carries the warmth of Italian coffee culture.
• Primary Hover ({colors.primary-hover} — #5c3a24): Lightened espresso for interactive states on primary-colored surfaces.
• Primary Active ({colors.primary-active} — #3a2316): Darkened espresso for pressed/clicked states.
• Accent ({colors.accent} — #ffe400): Electric lemon-yellow — the voltage color of the system. Used for navigation backgrounds, primary CTA buttons, modal headline text, and emphasis highlights. Demands attention.
• Accent Hover ({colors.accent-hover} — #ffdc00): Slightly deeper yellow for hover states on accent surfaces.
• Secondary ({colors.secondary} — #29314e): Deep navy blue appearing in limited text contexts, likely for legal or tertiary information.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline for main content areas, card backgrounds, and product photography staging.
• Surface Soft ({colors.surface-soft} — #ffe400): The accent yellow reused as a surface treatment — specifically the main navigation bar background.
• Surface Warm ({colors.surface-warm} — #fff9f1): Creamy off-white with yellow undertone, used for footer and subtle background warming.
• Surface Blue ({colors.surface-blue} — #91bdfc): Pastel sky blue for category tags and potential product line differentiation.
• Surface Pink ({colors.surface-pink} — #ba6295): Muted rose for alternate category or collection labeling.
• Surface Orange ({colors.surface-orange} — #ff5d19): Vibrant tomato-orange for promotional or urgent callouts.
• Surface Green ({colors.surface-green} — #1d883a): Deep herb green for success states or organic/natural product signaling.
• Surface Gray ({colors.surface-gray} — #999999): Neutral mid-gray for disabled or deactivated surfaces.

Text & Ink

• Ink ({colors.ink} — #000000): True black for maximum-contrast headings, navigation text, and the logo lockup.
• Body ({colors.body} — #472b1a): Espresso brown for paragraph text, creating warmth vs. harsh black body copy.
• Muted ({colors.muted} — #696e7b): Cool gray-blue for placeholder text, input hints, and secondary metadata.
• Muted Soft ({colors.muted-soft} — #4b0d2e): Deep plum/burgundy appearing in limited decorative text contexts.
• On Primary ({colors.on-primary} — #ffffff): White text for legibility on espresso-brown surfaces like the announcement bar.
• On Dark ({colors.on-dark} — #ffffff): White for any dark modal or overlay backgrounds.
• On Accent ({colors.on-accent} — #000000): Black text on yellow accent surfaces — essential for CTA button readability given the high-luminance background.
• On Canvas Dark ({colors.on-canvas-dark} — #670009): Very dark crimson for alert text on white backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Light gray for subtle dividers and card borders where separation is needed without visual weight.
• Border Strong ({colors.border-strong} — #472b1a): Espresso brown used for emphasized input borders and focused states — matches primary for cohesion.
• Border Input ({colors.border-input} — #eff1f7): Very pale blue-gray for default input field backgrounds/borders, providing subtle definition.

Semantic

• Error ({colors.error} — #c13515): Brick red for form validation errors and system warnings.
• Success ({colors.success} — #1d883a): Herb green mirroring surface-green for confirmation states.
• Warning ({colors.warning} — #ff5d19): Tomato orange for cautionary messaging.
• Info ({colors.info} — #91bdfc): Sky blue for informational notices and tooltips.
• Link ({colors.link} — #472b1a): Links use the primary espresso color, maintaining brand consistency in hypertext.
• Link Hover ({colors.link-hover} — #5c3a24): Lightened link state on interaction.

Typography

Font Family

Brami employs a carefully curated four-font family stack that creates distinct hierarchical voices. Neue Haas Grotesk Display Pro (a premium grotesque sans-serif in the Helvetica lineage) serves as the workhorse for 90% of UI and display text — it appears 465+ times in the extracted DOM, handling everything from the logo wordmark to navigation items to button labels. Its character is Swiss-precise but warmer than Helvetica due to subtle humanist touches in the glyph construction.

Highgate is the brand's proprietary serif face, loaded as a custom @font-face from their CDN. It appears exclusively in headline contexts at weights 700 (bold) only, delivering an editorial, almost newspaper-like authority that contrasts beautifully against the sans-serif body. Think Italian broadsheet aesthetics — confident, slightly condensed, commanding attention through weight rather than size alone.

Noto Sans carries all body copy, form labels, and functional UI text below the heading tier. Chosen for its exceptional Unicode coverage and neutral personality, it recedes visually to let the photography and brand colors dominate. It renders at 400 (regular) weight exclusively in body contexts.

Marr Sans Condensed makes rare appearances for condensed display treatments — likely used for price tags, promotional badges, or tightly-spaced labels where horizontal space is at a premium. It's a high-impact, high-compression face deployed sparingly for maximum effect.

Fallback chains are robust: Neue Haas falls back to "Helvetica Neue", Helvetica, Arial, sans-serif; Noto Sans has no fallback needed (it is the web-safe choice); Highgate specifies serif fallback.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 700 | 1.1 | -0.02em | Hero headlines, modal main headlines | | {typography.display-lg} | 32px | 700 | 1.15 | -0.01em | Section headings, page titles, logo | | {typography.display-sm} | 24px | 700 | 1.2 | 0 | Subsection headers, card titles | | {typography.title-md} | 28px | 700 | 1.07 | 0 | Editorial serif headlines | | {typography.title-sm} | 16.73px | 700 | 0.95 | 0 | Small serif labels, bylines | | {typography.body-lg} | 18px | 400 | 1.5 | 0 | Lead paragraphs, descriptions | | {typography.body-md} | 16px | 400 | 1.2 | 0 | Standard body copy, nav items | | {typography.body-sm} | 14px | 400 | 1.43 | 0 | Captions, fine print, tags | | {typography.caption} | 13px | 400 | 1.38 | 0 | Legal text, timestamps | | {typography.button} | 15px | 700 | 1.2 | 0.02em | Primary CTA buttons | | {typography.button-sm} | 14.4px | 600 | 1.2 | 0 | Utility buttons, accessibility widgets | | {typography.label} | 15px | 700 | 1.33 | 0 | Form labels, field titles | | {typography.mono} | 16px | 700 | 1.2 | 0.05em | Condensed badges, prices |

Principles

The Brami typographic system trusts weight and color to create hierarchy far more than size variation. Notice that {typography.display-lg} (32px) and {typography.title-md} (28px) are separated by only 4px — the real differentiation comes from the font family switch (grotesque → serif) and the contextual color application. Headlines in the modal appear in {colors.accent} (yellow) against photography, while body copy sits in {colors.body} (espresso) on white. This color-type pairing does more heavy lifting than scale alone.

Weight choices are aggressively bold across the board: display faces sit at 700, buttons at 600-700, even labels at 700. There is no "light" or "thin" in this system — every piece of text wants to be read, to command presence, to feel substantial like the food products themselves. The only exception is body copy at 400, which correctly recedes to let imagery lead.

Letter-spacing is used conservatively: display sizes get -0.01em to -0.02em tightening (standard for large setting), while {typography.button} gets +0.02em expansion for uppercase-style impact at small size. The {typography.mono} role pushes to +0.05em for its condensed face, ensuring legibility at compression.

Italic is not observed in the extracted data; the brand communicates entirely through roman (upright) faces. Uppercase appears in the announcement bar ("FIND US AT COSTCO!") via CSS transforms rather than small-caps fonts, suggesting a preference for true capital letters over typographic case features.

Note on Font Substitutes

Neue Haas Grotesk Display Pro is a commercial Linotype font requiring licensing. For open-source substitution, use Inter (available Google Fonts) as the closest geometric-grotesk match — it shares similar proportions, a tall x-height, and excellent screen rendering. Define as: --font-display: 'Inter', 'Helvetica Neue', sans-serif.

Highgate is a fully custom brand asset with no public equivalent. Substitute with Playfair Display (Google Fonts) for the serif voice — it shares the bold-weight authority and slight condensation. Define as: --font-serif: 'Playfair Display', Georgia, serif. Note that Playfair will render slightly more decorative; if a more neutral serif is preferred, Source Serif 4 is a safer structural match.

Noto Sans is already freely available via Google Fonts — no substitution needed. Load via: @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');

Layout

Spacing System

• Base unit: Clusters around 7px–8px, reflecting the irregular but intentional spacing pattern observed in the DOM (75 instances of 7px, 54 of 6px, 20 of 16px). This suggests an implicit ~8px grid with occasional half-step adjustments.

• Tokens:

  • {spacing.xxs} (2px) — micro-adjustments, hairline offsets
  • {spacing.xs} (4px) — icon internal padding, tight gaps
  • {spacing.sm} (6px) — inline element gaps, small margins
  • {spacing.base-sm} (7px) — frequently occurring odd spacing, likely list gaps
  • {spacing.base} (8px) — standard gap between related elements
  • {spacing.md} (10px) — button padding axis, form field gaps
  • {spacing.base-md} (13px) — intermediate padding
  • {spacing.base-lg} (15px) — card internal spacing variant
  • {spacing.lg} (16px) — standard container padding, section gutters
  • {spacing.base-xl} (17px) — header vertical padding
  • {spacing.xl} (18px) — modal internal padding
  • {spacing.xxl} (20px) — generous component padding
  • {spacing.section-sm} (33px) — between major content blocks
  • {spacing.section} (45px) — section vertical rhythm
  • {spacing.section-lg} (80px) — hero-level breathing room

• Section padding (vertical): {spacing.section} (45px) — standard between content bands; {spacing.section-lg} (80px) for hero and modal presentations.

• Card internal padding: {spacing.md} (10px) to {spacing.lg} (16px) depending on density — product cards tighter, feature cards looser.

• Gutters: Desktop containers target 1440px max-width with {spacing.lg} (16px) lateral padding; mobile collapses to {spacing.base-xl} (17px).

Grid & Container

• Max content width: 1440px (explicitly set on <main>). This is wide-format e-commerce territory, allowing side-by-side product grids and immersive hero imagery.
• Density choice: Marketplace-editorial hybrid — the site has the breadth of a food shop (many SKUs, filtering needs) but the pacing of an editorial magazine (large photography, generous headline whitespace).
• Grid behavior at desktop: Likely a 12-column or flexible masonry grid for products; the hero appears to be a 2-column layout (text left, image right) based on the underlying page structure partially visible behind the modal.
• Hero column split: Approximately 40/60 or 35/65 (text narrower, image dominant) when the modal isn't obscuring the view.

Whitespace Philosophy

Brami practices compressed intentionality — whitespace exists to separate, not to decorate. Unlike luxury fashion sites that breathe with 120px+ section padding, Brami keeps things relatively tight (45px standard sections, 16px card padding). This creates a bustling market-atmosphere that matches the "Italian grocery" positioning. However, the modal overlay breaks this rule dramatically, using the photograph itself as negative space and letting the centered text block float with generous internal padding (18px+). The tension between the tight page layout and the expansive modal creates a "special moment" feeling for the email capture.

Header Architecture

|--------------------------------------------------------------------------------|
|  [FIND US AT COSTCO! ——]  (announcement bar - full-width, {colors.primary})     |
|================================================================================|
|  SHOP   ABOUT   FIND US          BRAMI®                    [account] [cart]   |
|                         (nav - {colors.accent} bg, {spacing.base-xl} v-pad)   |
|--------------------------------------------------------------------------------|

Navigation uses a flexible space-between layout: utility links flush-left, logo center (or slightly offset), account/cart icons flush-right. Height is approximately 64px including padding. The announcement bar above sits at roughly 36px height with centered text.

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|   [Large B&W Food Photo — full bleed or near-full-bleed behind content]       |
|                                                                                |
|   ┌─────────────────────────────────┬──────────────────────────────────┐      |
|   │  "Protein-packed"              │                                  │      |
|   │  pasta made                     │   (Product lifestyle shot /      |      |
|   │  ...                            │    ingredient photography)       |      |
|   │                                 │                                  |      |
|   │  [SHOP ALL — {button-secondary}]│                                  |      |
|   └─────────────────────────────────┴──────────────────────────────────┘      |
|                                                                                |
|--------------------------------------------------------------------------------|

Note: The actual hero is partially obscured by the modal in the provided screenshot. The structure above is inferred from the visible "Protein-packed pasta made" text fragment and typical Shopify homepage patterns. The hero likely uses {colors.primary} or a dark photographic background with {colors.accent} or {colors.on-primary} text.

Modal/Overlay Structure (Visible in Screenshot)

|================================================================================|
|                                                                                |
|   ╔════════════════════════════════════════════════════════════════════╗      |
|   ║                                                                      ║      |
|   ║  [B&W hands/cooking photo — textured, grainy, full modal bg]         ║      |
|   ║                                                                      ║      |
|   ║           ✕  (close btn — top-right, pill shape)                     ║      |
|   ║                                                                      ║      |
|   ║        Your passport to Italy                                        ║      |
|   ║        starts with 15% off        ({typography.display-xl})           ║      |
|   ║                                                                      ║      |
|   ║        Sign up for your discount... ({typography.body-md})            ║      |
|   ║                                                                      ║      |
|   ║   ┌─────────────────────────────────────┐                           ║      |
|   ║   │ Enter your email                    │  ({component.email-input})║      |
|   ║   └─────────────────────────────────────┘                           ║      |
|   ║                                                                      ║      |
|   ║   ┌─────────────────────────────────────┐                           ║      |
|   ║   │   START EATING WITH US              │  ({component.button-primary})║   |
|   ║   └─────────────────────────────────────┘                           ║      |
|   ║                                                                      ║      |
|   ╚════════════════════════════════════════════════════════════════════╝      |
|                                                                                |
|================================================================================|

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} background | Base page surface, footer, announcement bar | | 1 — Hairline | 1px solid {colors.hairline} or {colors.border-strong} | Card borders, input outlines, section dividers | | 2 — Soft drop | {extensions.shadows.md} — 0 4px 12px rgba(0,0,0,0.1) | Product cards, elevated panels, dropdown menus | | 3 — Modal | {extensions.shadows.lg} + semi-transparent backdrop | Email capture modal, lightboxes, dialogs | | 4 — Inset accent | {extensions.shadows.inset-accent} — yellow inner shadow | Button active states (bottom highlight) |

Philosophy: Brami favors color-block elevation over shadow depth wherever possible. The announcement bar establishes hierarchy through {colors.primary} background, not a drop shadow. The navigation commands attention through {colors.accent} saturation. Shadows are reserved for truly floating elements (cards, modals) and even then remain restrained at 10-12% opacity — never the heavy 0 20px 40px treatments seen in SaaS dashboards. The one decorative depth technique observed is photographic layering: placing text and form elements atop full-bleed B&W photography in the modal, where the image texture itself provides depth.

Decorative Depth

The modal's background photograph (hands preparing food, visible grain texture) serves as textural depth — a monochromatic, analog-feeling image that gives the overlay tactile quality without competing with foreground elements. The yellow headline and white form field pop against this because the photo's value range stays in the mid-grays, avoiding extreme blacks that would fight with text. This is a sophisticated technique: the image supports mood without sacrificing legibility.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.DEFAULT} / {rounded.sm} | 2px | Standard cards, buttons, small containers | | {rounded.md} | 4px | Input fields, bordered elements | | {rounded.lg} | 5px | Accessibility widget buttons, larger inputs | | {rounded.xl} | 8px | Larger featured cards (potential) | | {rounded.bottom-rounded} | 0 0 65px 65px | Signature bottom-only rounding on hero or feature blocks | | {rounded.bottom-rounded-xl} | 0 0 80px 80px | Extra-deep bottom curve for dramatic section ends | | {rounded.pill} | 9999px | Close buttons, category tags, circular icons | | {rounded.none} | 0px | Navigation elements, logo container, search inputs |

The radius vocabulary is notably tight and conservative — nothing exceeds 5px for rectangular elements. This gives the interface a crisp, architectural feel that aligns with the grotesque typeface choices. The exception is the bottom-rounded tokens (65px/80px curves on bottom corners only), which appear to be signature shapes used on hero bands or featured product sections to create a "peeking" effect from the section below. These are brand-specific shapes that should be applied sparingly and consistently.

Photography Geometry

Images in the Brami system are treated as full-bleed, unmasked rectangles with {rounded.none}. The modal background photo has no corner rounding — it extends edge-to-edge behind the content card. Product photography (partially visible beneath the modal) appears to use 4:3 or 3:2 landscape aspect ratios for lifestyle shots, and likely 1:1 square for product SKU thumbnails (standard e-commerce practice). Avatar or icon circular crops would use {rounded.pill} but aren't clearly visible in this screenshot. No rounded-corner image masks were detected — the brand prefers sharp photographic edges that feel like printed magazine spreads.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.email-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The principal conversion action, seen as "START EATING WITH US" in the modal. Background {colors.accent} (electric yellow), text {colors.on-accent} (black), using {typography.button} at weight 700 for punchiness. Rounded {rounded.sm} (2px), padding 16px 32px vertically/horizontally, height locked to 54px for touch compliance. Full-width within the modal context. State variant: {component.button-primary-hover} shifts to {colors.accent-hover}.

{component.button-secondary} — Supporting actions like "SHOP ALL" visible beneath the modal. Same yellow background {colors.accent} but with {colors.body} (espresso) text instead of black — slightly lower visual priority. Uses {typography.button} weight 700, {rounded.sm}, tighter padding 12px 24px. Appears both inside and outside modal contexts.

{component.button-ghost} — Transparent-background utility buttons for navigation back-actions or dismissals. Text is {colors.on-primary} (white), no background fill, no rounding, zero padding — essentially styled text acting as a button. Seen in the accessibility layer's "Back" button.

{component.button-accessibility} — Special-purpose purple button (#574cf5 background) belonging to the third-party Accessibly widget. Uses {typography.button-sm} at 600 weight, {rounded.lg} (5px), minimal padding 2px 5px. Not part of the core brand system but must be accounted for in z-index stacking.

Cards & Containers

{component.modal-overlay} — Full-screen backdrop at rgba(0, 0, 0, 0.6) opacity. Centers the {component.modal-card} content with generous {spacing.section-lg} (80px) padding on all sides. Prevents body scrolling when active (noted in the <body> class klaviyo-prevent-body-scrolling).

{component.modal-card} — Transparent container holding the email capture content. Has no intrinsic background — instead relies on the B&W photograph beneath it for visual containment. Text color defaults to {colors.accent} (yellow) for headlines. Rounded {rounded.none} — sharp edges matching the photo's frame. Internal padding {spacing.xl} (18px).

{component.product-card} — Standard product thumbnail card (inferred from e-commerce context). White {colors.canvas} background, {colors.ink} text, {typography.body-md} for product names. {rounded.sm} (2px), {spacing.md} (10px) internal padding. Would carry {extensions.shadows.md} elevation on hover/focus. Contains image, title, and price.

{component.card-elevated} — Featured content card with more breathing room than product cards. Same white background but {spacing.lg} (16px) padding, suitable for recipe cards, blog teasers, or brand story blocks.

{component.tag-category} — Pill-shaped category label using pastel surface colors (e.g., {colors.surface-blue}). {rounded.pill} geometry, {typography.caption} sizing, 4px 12px padding. Used for product tagging or collection filtering.

Inputs & Forms

{component.email-input} — The star input of the visible modal. Pure {colors.canvas} background, {colors.muted} gray placeholder text, {typography.body-md} at 16px (prevents mobile zoom). {rounded.md} (4px) corners, generous 16px 20px padding, 54px height matching the adjacent CTA. Border is handled via shadow or a subtle {colors.border-input} definition. State variant: {component.email-input-focus} maintains background but shifts text to {colors.body} (full espresso opacity) indicating active editing.

{component.input-bordered} — Alternative input style with transparent background and explicit 1px solid {colors.border-strong} (espresso) border. Used for the Klaviyo-form email variant. {rounded.md} (4px), tighter 8px 12px padding, 42px height.

{component.input-search} — Minimalist search field with completely transparent background and no border — just text {colors.body} at {typography.body-lg} (18px). {rounded.none}, 1px 2px micro-padding. Appears in a header search context where the underline or container provides the only visual boundary.

Navigation

{component.top-nav} — Main navigation strip spanning full viewport width. Background {colors.accent} (yellow) making it the highest-saturation element in the persistent chrome. Text {colors.ink} (black), {typography.body-md} for menu items. Height 64px, padding {spacing.base-xl} (13px) vertical. Houses {component.nav-link}, {component.nav-logo}, and {component.nav-icon-btn} children.

{component.nav-link} — Individual navigation items ("SHOP", "ABOUT", "FIND US"). Transparent background, black text, {rounded.none} (sharp), 8px 12px clickable area. Hover likely adds underline or background tint.

{component.nav-logo} — The "BRAMI®" wordmark lockup. Transparent background, {colors.ink} text at {typography.display-lg} (32px, weight 700) in Neue Haas Grotesk. Registered trademark symbol included. No rounding — sits flush in the nav flexbox.

{component.nav-icon-btn} — Icon-only buttons for Account and Cart in the nav right rail. 24px × 24px hit area (expandable via padding), transparent background, {colors.ink} icon color. FontAwesome icons detected: user-circle (fa-user-circle) and shopping cart (fa-shopping-cart).

{component.announcement-bar} — Top-most horizontal band, {colors.primary} (espresso) background spanning full width. {colors.on-primary} (white) text at {typography.caption} size. Height ~36px. Contains promotional text like "FIND US AT COSTCO! →". Fixed/sticky behavior likely.

Signature Components

{component.hero-band} — Full-width hero section with {colors.primary} (dark brown) background. Text in {colors.on-primary} (white) at {typography.display-xl} size. Padding {spacing.section-lg} (80px) vertical for dramatic entry. Likely contains the main value proposition headline and supporting CTA pair.

{component.hero-text-block} — Text column within the hero, sitting alongside (or over) photography. Transparent background allowing photo to show through, {colors.accent} (yellow) or {colors.on-primary} text depending on photo darkness. {typography.display-xl} for headline, {spacing.lg} (16px) vertical rhythm between lines.

{component.footer} — Site-wide footer with {colors.surface-warm} (cream) background — noticeably warmer than {colors.canvas}. {colors.muted} (gray-blue) text at {typography.body-sm}. Generous {spacing.section} (45px) padding. Likely contains links, social icons, newsletter signup, and legal.

{component.modal-close-btn} — Circular dismiss button positioned top-right of the modal. Background rgba(255,255,255,0.9) (near-white with slight transparency), {colors.ink} X icon, {rounded.pill} (fully circular), 28px × 28px size. Provides clear escape hatch from the overlay.

{component.divider} — Horizontal rule element, 1px height, {colors.hairline} color. Used between content sections where visual separation is needed without drawing attention.

Do's and Don'ts

Do

• Do use {colors.accent} (#ffe400) for primary CTA backgrounds and navigation surfaces — it's the brand's voltage color and should appear on every page's key interaction point.
• Do reserve {typography.title-md} (Highgate serif) for editorial headlines only — never use it for UI labels, buttons, or body copy; its authority comes from scarcity.
• Do maintain the {rounded.sm} (2px) default radius on all rectangular components — the sharp-but-softened corners are a signature of Brami's architectural feel.
• Do apply {colors.body} (#472b1a) espresso brown to paragraph text rather than #000000 true black — the warmth is essential to the food-brand mood.
• Do use full-bleed photography behind modal or overlay content — the B&W textured photo treatment is a signature depth technique that makes email captures feel cinematic.
• Do keep button heights at 54px (for primary) and 44px+ minimum — these exceed WCAG AAA touch targets and match the extracted dimensions.
• Do apply {extensions.shadows.md} (10% opacity shadow) to elevated cards and dropdowns — avoid heavier shadows that would fight the clean, flat-aesthetic foundation.
• Do use the {rounded.bottom-rounded} (0 0 65px 65px) token on hero section bottoms for the signature "reveal curve" into the next content band.
• Do set {typography.display-xl} headlines at weight 700 — the brand never uses light display faces; presence and confidence come from boldness.
• Do place {colors.ink} (#000000) text on {colors.accent} backgrounds for maximum contrast on yellow CTAs — never use white-on-yellow (fails accessibility).

Don't

• Don't substitute {colors.primary} (espresso #472b1a) with true black #000000 for brand applications — the brown undertone is intentional and food-specific.
• Don't expand the radius vocabulary beyond {rounded.lg} (5px) for standard UI elements — the 65px/80px bottom-curves are reserved for section-level drama only.
• Don't use {typography.mono} (Marr Sans Cond) for anything other than condensed badge/price treatments — it's a special-use face, not a general UI font.
• Don't apply gradients to buttons or backgrounds — the brand uses flat color blocks exclusively; gradient emulation would break the print/editorial aesthetic.
• Don't place {colors.accent} (yellow) text on white backgrounds for body copy — reserve yellow text for photography-backed contexts where it can achieve sufficient contrast.
• Don't round photography corners — images should stay sharp-edged ({rounded.none}) to maintain the magazine-spread feeling.
• Don't use shadows heavier than {extensions.shadows.lg} (0 4.8px 16px) — the system is fundamentally flat with optional soft elevation, never deeply layered.
• Don't mix serif and sans-serif within the same heading level — keep Highgate at {typography.title-md}/{typography.title-sm} tiers and Neue Haas at display tiers.
• Don't apply letter-spacing wider than 0.05em to any text — the brand prefers tight, European-style typesetting, not expanded American display spacing.
• Don't promote the modal's photographic-background treatment to standard card designs — that technique is reserved for high-impact overlay moments and would lose effectiveness if overused.

Motion & Animation

Transition Tokens

--transition-color: color 0.2s ease-in-out, background 0.2s ease-in-out;
--transition-opacity: opacity 0.3s ease-in-out;
--transition-gap: gap 0.3s;
--transition-height: height 0.4s;
--transition-transform: transform 0.4s;
--transition-all: all; /* fallback */

Transitions in the Brami system are fast and functional — durations cluster between 200ms (color/background changes) and 400ms (structural transforms like height or position changes). The easing curve is consistently ease-in-out (or the equivalent cubic-bezier), providing smooth deceleration without bouncy overshoot. No spring physics or custom beziers were detected.

Keyframe Animations

• klaviyo-fadein — Opacity 0→1 entrance for modal appearance (Klaviyo email form platform).
• klaviyo-fadeout — Opacity 1→0 exit for modal dismissal.
• klaviyo-slideinup — Vertical translate + fade for upward-sliding modal entry.
• klaviyo-spinner — Rotation animation for loading indicators within forms.
• fadein — Generic opacity fade-in for content reveals.
• shopify-rotator — Carousel/product rotation animation (Shopify-native).
• kl_reviews__list_loading__spinner — Review section loading spinner (Klaviyo reviews widget).

The majority of keyframe animations are third-party injected (Klaviyo email marketing platform, Shopify theme, review widgets) rather than core brand animations. The native brand motion appears limited to simple fades and slides for modal interactions.

Interaction Patterns

• Modal slide-up: The email capture overlay animates in from below with a combined translate-Y and opacity transition ({typography.klaviyo-slideinup}), taking roughly 300-400ms.
• Color transitions on hover: Buttons and links shift background/text color over 200ms ease-in-out — snappy but not jarring.
• Opacity crossfades: Dropdown reveals, tooltip appearances, and accessory-content shows use opacity transitions at 300ms.
• Accordion height animations: Any collapsible sections (FAQ, product details) animate height over 400ms, suggesting a measured reveal pace.
• Focus ring expansion: Input focus states likely show a subtle border-color shift or shadow injection (detected in state variants).
• Close button rotation/spin: The modal dismiss button may have a subtle transform on hover (inferred from transform transition presence).
• Carousel sliding: Product or testimonial carousels use horizontal translation (shopify-rotator) for slide transitions.

Recommended timing for new motion: Stick to the established 200-400ms range with ease-in-out. Avoid springs, bounces, or durations exceeding 500ms — the brand voice is direct and appetite-focused, not whimsical.

Imagery Style

• Photography-first approach: The brand leads with photography, not illustration or abstraction. Every major content block appears to be anchored by a food or lifestyle photograph.
• Black-and-white treatment for overlays: The modal background uses a grainy, high-contrast B&W image (hands working with dough/pasta) that evokes analog film and Italian nonna-kitchen authenticity. Desaturation removes distraction and lets yellow text pop.
• Warm color grading for hero/lifestyle: Visible fragments beneath the modal suggest the main site imagery uses warm, saturated color palettes — golden hour lighting, rich tomato reds, olive greens, and creamy pasta tones.
• Texture emphasis: The modal photo shows visible grain/noise, suggesting the brand embraces tactile, film-like qualities over sterile digital perfection. This reinforces "artisanal" and "handmade" positioning.
• Human hands in frame: The visible modal image centers on hands preparing food — a recurring motif that emphasizes craftsmanship and the human element behind the products.
• Food-as-hero composition: Products (pasta bowls, ingredients) are photographed with appetite appeal front and center — shallow depth of field, natural lighting, prop styling that feels accessible rather than aspirational-luxury.
• No illustrated elements detected: The system appears to rely entirely on photography; there are no icons-as-illustrations, flat graphic scenes, or 3D renders in the visible design.
• Full-bleed presentation: Images extend edge-to-edge within their containers, with text overlaid or placed in adjacent columns — no floating-in-white-space product shots.
• Aspect ratio variety: Likely mixes 16:9 (hero banners), 4:3 (lifestyle cards), 1:1 (product thumbnails), and potentially 9:16 (mobile-story formats).
• Cultural specificity: Photography signals Italian origin — ingredients, preparation methods, table settings that read as authentically Mediterranean rather than generic "food stock."

Icon System

• Library: Font Awesome (v5.6.3 and v6.1.2 both loaded via CDN). The brand uses the FA icon set for all UI iconography.
• Specific icons observed:
  • fa-user-circle or fa-user — Account/profile access in navigation
  • fa-shopping-cart — Cart icon in navigation right rail
  • fa-times or fa-times-circle — Close/dismiss button on modal (X symbol)
  • fa-arrow-right — Directional arrow in announcement bar ("→")
  • Additional FA icons likely present for social media links, payment badges, and trust signals (not fully visible in screenshot)
• Treatment: Icons render as outline/stroke style (Font Awesome Regular or Light weights) rather than solid fills. Color is typically currentColor, inheriting from parent text color (black on yellow nav, white on dark surfaces).
• Size alignment:
  • Navigation icons: 20px–24px (matching {component.nav-icon-btn})
  • Modal close: 14px–16px within the 28px circular button
  • Announcement arrow: 12px–14px (inline with caption-sized text)
  • General UI: 16px (standard FA default)
• Stroke weight: Consistent 1.5px–2px stroke width (FA's default), maintaining the clean, lightweight feel that complements the grotesque typefaces.

Recommended Frontend Stack

- Framework:      Shopify Liquid (Theme 2.0+) with metafield-driven content
- Styling:        Vanilla CSS / SCSS modules with CSS custom properties for tokens
- Fonts:          Self-hosted @font-face for Neue Haas Grotesk, Highgate, Marr Sans Cond;
                  Google Fonts CDN for Noto Sans
- Animation:      CSS transitions + keyframes (native); Klaviyo JS for modal behaviors
- Icons:          Font Awesome 6 (PRO license for additional weights if needed)
- Component lib:  None (custom Shopify sections/snippets); vanilla JS for interactivity
- Build:          Shopfiy CLI / GitHub integration for deployment
- CMS:            Shopify Admin for product/content; Klaviyo for email capture forms

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column layout; modal full-screen; nav collapses to hamburger; stacked hero (image above text); reduced type scale | | Tablet | 768px – 1024px | Two-column grids begin; nav may show abbreviated links; modal constrains to ~90% width | | Desktop | 1025px – 1440px | Full nav visible; 2-column hero; multi-column product grids; modal at fixed ~600px width | | Wide | > 1440px | Max-width container (1440px) centers with auto margins; extra gutter padding |

Touch Targets

• {component.button-primary}: 54px height × variable width (min 280px on mobile) — Exceeds WCAG AAA (44×44 minimum)
• {component.email-input}: 54px height — Exceeds WCAG AAA
• {component.button-secondary}: ~48px height (estimated from padding) — Meets WCAG AAA
• **{component.nav-icon-btn}: 24px × 24px icon with invisible padding expanding to ~44px — Should verify hit area meets 44px
• {component.modal-close-btn}: 28px × 28px — Below AAA threshold, recommend expanding to 32px–36px for mobile
• {component.nav-link}: Text-based, line-height dependent — Ensure padding achieves 44px effective height

Collapsing Strategy

• Navigation: At mobile breakpoint, the horizontal nav ({component.top-nav}) likely converts to a hamburger menu with a slide-out drawer. The yellow {colors.accent} background persists but compresses vertically. Logo remains visible; account/cart icons may persist or move into drawer.
• Modal overlay: On mobile, the email capture modal goes full-viewport with reduced internal padding ({spacing.lg} instead of {spacing.section-lg}). Form fields stack vertically (they already do). Close button increases touch target size.
• Hero section: The two-column hero (text + image) stacks to single column on mobile — image moves above or below text block depending on content priority. Typography scales down: {typography.display-xl} (48px) → ~32px on mobile.
• Product grids: Multi-column product grids collapse to 2-column on tablet, single-column on mobile with enlarged cards showing more detail per item.
• Footer: Multi-column footer stacks to single column on mobile with accordion potential for link groups.
• Announcement bar: Persists at full width on all breakpoints; text may truncate with ellipsis on very small screens, or marquee-scroll if content is long.

Image Behavior

• Hero photographs: Scale down proportionally maintaining aspect ratio; on mobile they may crop to 4:3 or 16:9 focal-point extracts rather than showing full desktop composition. Object-fit: cover with strategic object-position for focal point preservation.
• Modal background photo: Covers full modal area on all devices; on mobile the photo may zoom/pan slightly (subtle parallax or focal adjustment) to keep the hands/food subject visible behind the form.
• Product thumbnails: Responsive images using Shopify's srcset with 1x/2x variants; swap from grid (3-4 column) to list view (single column with horizontal image) on mobile for better touch interaction.
• Avatars/icons: If user avatars exist, they'd use {rounded.pill} circles at 40px desktop → 32px mobile.

Iteration Guide

1. Start with the design tokens file. Extract every color, font, radius, and spacing value from the YAML frontmatter via {section.token} paths. Implement as CSS custom properties (:root { --color-primary: #472b1a; }) so your entire codebase references tokens, never hard-coded values.

2. Build the font loading strategy first. Neue Haas Grotesk Display Pro, Highgate, and Marr Sans Cond are self-hosted @font-face declarations (see fontFaces array for exact URLs). Load these with font-display: swap to prevent FOIT. Noto Sans loads from Google Fonts CDN asynchronously.

3. Implement the modal component before the page. The email capture overlay is the most complex component (layered photo background, centered form, close button, focus management). Get this working with the Klaviyo animation classes (klaviyo-slideinup, klaviyo-fadein) as it drives much of the motion spec.

4. Use {rounded.sm} (2px) as your global default. Only escalate to {rounded.md} (4px) for inputs, {rounded.lg} (5px) for specialized buttons, or {rounded.pill} for circles. Never invent a new radius value — the tight scale is intentional.

5. Reserve Highgate ({typography.title-md}) for editorial moments. When adding a new section, decide: is this UI (use Neue Haas/Noto) or editorial (use Highgate)? Mixing them within the same visual tier breaks the hierarchy contract.

6. Treat {colors.accent} as a finite resource. Electric yellow appears on: (1) nav background, (2) primary CTA buttons, (3) modal headlines. Don't add it to borders, icons, or decorative elements — dilution kills its voltage.

7. State variants live as separate frontmatter entries. When building {component.button-primary}, also build {component.button-primary-hover} and {component.button-primary-active} as distinct classes or data-states. Never nest variants inside a single component object.

8. Photography is a surface, not decoration. When implementing hero or modal sections, place images as position: absolute or background-image with content layered atop using relative positioning and z-index. The Brami look fails if photos float in boxes.

9. Run the linter. Execute npx @google/design.md lint DESIGN.md after any token additions. Watch for broken-ref (typos in token paths), contrast-ratio (especially yellow-on-white violations), and orphaned-tokens (defined but unused colors/spacing).

10. Match the motion duration discipline. Keep transitions under 400ms, use ease-in-out exclusively, and avoid keyframe animations beyond what Klaviyo/Shopify inject. The brand feels fast and purposeful, not animated.

Font Setup

For development without licensed fonts:

:root {
  --font-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Noto Sans', sans-serif;
  --font-condensed: 'Roboto Condensed', sans-serif;
}

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&family=Noto+Sans:wght@400;600;700&family=Roboto+Condensed:wght@700&display=swap');

Replace with production @font-face declarations pointing to the Shopify CDN URLs listed in the fontFaces array when deploying to the live environment.

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are inferred from active/focus states and brand patterns. Implementation should add background-color shifts (~5-10% darken/lighten) and optional transform: translateY(-1px) micro-lifts on buttons.
• Loading skeletons / pending states: No skeleton loader or shimmer patterns detected. E-commerce sites typically need these for cart updates, image lazy-loading, and form submission — design them using {colors.hairline} for skeleton lines and klaviyo-spinner for indeterminate loading.
• Form validation states: Beyond {component.email-input-focus}, error states (red border, error message text) and success states (green checkmark) are inferred from semantic colors ({colors.error}, {colors.success}) but not visually confirmed.
• Authenticated/user flows: Dashboard, order history, account settings, and checkout pages are not visible in the landing-page screenshot. These may introduce new components (tables, address forms, order cards) not captured here.
• Mobile navigation drawer: The hamburger menu, its slide-out animation, and mobile nav linking structure are assumed based on standard Shopify patterns but not directly observable.
• Product detail page (PDP): Individual product templates with image galleries, variant selectors, quantity adjusters, and add-to-cart forms are not represented in this screenshot + CSS extract.
• Cart drawer/slide-out: The cart interaction pattern (drawer vs. dedicated page) is unknown; only the cart icon trigger is visible.
• Accessibility widget styling: The purple Accessibly app widget (#574cd5 buttons) is third-party code injected into the DOM. Its visual presence conflicts subtly with the brand palette and may require custom CSS overrides or acceptance of the dissonance.
• Klaviyo form platform constraints: The modal's HTML structure, animation classes, and form submission behavior are driven by Klaviyo's embeddable form JS. Custom styling must work within their markup constraints (specific class hooks, iframe considerations).
• Pixel-exact values for derived surfaces: Colors like {colors.surface-warm} (#fff9f1) and {colors.border-input} (#eff1f7) appeared infrequently in the CSS extraction (2 and 1 occurrences respectively) and may be contextually specific rather than globally reusable tokens. Verify usage scope before applying broadly.