Skip to content

Building a Food & Beverage Style for Elayne: Part 2 – Core Implementation Complete

• By Jasper Frumau

In Part 1, we outlined our vision for a complete Food & Beverage style variation for the Elayne theme. We shared our design system—the typography, color palette, and pattern library we planned to build. Now it’s time to show you what we actually built.

Phase 2 is complete. The core style variation is live, the first pattern is working, and we have a functional header specifically designed for restaurants and cafes. Let’s walk through what we implemented and the key decisions we made along the way.

What We Shipped: The Core Style Variation

The heart of any WordPress FSE style variation is the theme.json file. This single file defines the entire design system—colors, typography, spacing, and more. Here’s what we built.

The Color Palette Evolution

Remember the 11-color system we planned in Part 1? We refined it based on accessibility testing and real-world usage. The final palette includes:

Primary Greens:

  • Emerald (#046b3c) – Main brand color for text and headings
  • Seafoam (#18a58a) – Accent color for highlights and CTAs
  • Dark Moss (#013d1a) – Deep green for headers and premium sections
  • Sage Green (#6fb591) – Lighter accent for backgrounds and subtle highlights
  • Mint Background (#afdcc5) – Soft green for contact sections and call-outs

Neutral Tones:

  • Light Cream (#f3efe4) – Primary background color (replaces pure white)
  • Creamy Beige (#eadfbf) – Secondary background for cards and sections
  • Base White (#ffffff) – Reserved for text on dark backgrounds

Accent Colors:

  • Harvest Gold (#d9b76a) – Warm gold for borders and decorative elements
  • Charcoal Gray (#484848) – Dark footer and text accents
  • Secondary Text (#757575) – Muted gray for supporting copy

Why we changed from the original plan: The original “Pine Green” and “Teal Deep” were too similar in practice. We shifted to “Emerald” and “Seafoam” for better visual distinction. We also added “Mint Background” for contact sections—a common restaurant website pattern we hadn’t originally planned for.

Typography Implementation: Four Font Families

We implemented all four typefaces from our original plan, but with critical technical considerations:

Anton (Headings):

  • 400 weight only (this is a display font with limited weights)
  • Used for h1 and major section headers
  • Fallback chain: "Anton", "Mona Sans", system-ui, sans-serif

Asap Condensed (Body):

  • Full weight range: 200, 300, 400, 500, 600, 700, 800, 900
  • Default body font for all content
  • Excellent readability at small sizes (critical for menu items)
  • Fallback: "Asap Condensed", "Open Sans", system-ui, sans-serif

Orbitron (Decorative):

  • Variable font: 100-900 weight range
  • Used for h2 headings (menu section headers)
  • Creates visual distinction between content hierarchy levels
  • Fallback: "Orbitron", "Mona Sans", system-ui, sans-serif

Inter (Utility):

  • Variable font: 100-900 weight range with optical sizing
  • Available for body text and UI elements as needed
  • Industry-standard fallback for maximum compatibility

Technical note: All fonts use font-display: swap to prevent invisible text during loading. This is critical for restaurant sites where users need to see menu information immediately.

Duotones and Gradients: Visual Polish

We implemented three duotone filters and two gradients exactly as planned:

Duotones:

  1. Moss & Gold – Dark Moss (#013d1a) + Harvest Gold (#d9b76a)
  2. Emerald & Cream – Emerald (#046b3c) + Light Cream (#f3efe4)
  3. Seafoam & Beige – Seafoam (#18a58a) + Creamy Beige (#eadfbf)

Gradients:

  1. Warm Earth – linear-gradient(135deg, #013d1a 0%, #18a58a 50%, #d9b76a 100%)
  2. Cream Fade – linear-gradient(180deg, #f3efe4 0%, #eadfbf 100%)

These are now available in the WordPress editor for any image or block that supports duotone/gradient overlays.

Pattern #1: Drinks Menu Grid

The centerpiece of this style variation is the Drinks Menu Grid pattern (elayne/menu-drinks-grid). This is a fully responsive, four-column menu layout designed specifically for restaurants, cafes, and bars.

Pattern Structure

The pattern is built with native WordPress blocks—no custom code, no shortcodes. Here’s the anatomy:

Outer Container:

  • Wide alignment (alignwide)
  • Constrained layout with 900px max content width
  • Large vertical padding for breathing room
  • Contains heading and grid layout

Grid Layout:

  • Uses CSS Grid with minimumColumnWidth: 19rem
  • Automatically responsive (4 → 2 → 1 columns)
  • Medium block gap between sections

Menu Sections (4 Cards):
Each card is a wp:group with:

  • Color-coded background (varies per section)
  • 8px border radius for soft corners
  • Medium padding on all sides
  • Heading + menu items inside

Menu Items:
Each item uses a flex layout:

  • Left-aligned item name
  • Right-aligned price
  • Separator line between items
  • Consistent typography (15px, font-weight 500)

Responsive Behavior

The grid adapts automatically:

  • Desktop (1200px+): 4 columns (Coffee/Tea, Wines, Beers, Snacks)
  • Tablet (782px-1199px): 2 columns (stacks to 2×2 grid)
  • Mobile (<782px): 1 column (vertical stack)

No breakpoint CSS needed—WordPress handles this through the minimumColumnWidth setting.

Color-Coded Sections

Each menu category has a distinct background color for quick visual scanning:

  1. Coffee & Tea – Secondary Text gray (#757575)
  2. Wines – Harvest Gold (#d9b76a)
  3. Beers – Emerald green (#046b3c)
  4. Snacks – Sage Green (#6fb591)

This color coding helps customers quickly navigate to their preferred category, especially on mobile devices where all sections are stacked vertically.

Subsection Support

The pattern includes subsection headers (smaller h4 headings) for menu organization:

  • “Frisdranken” (soft drinks) subsection under Coffee & Tea
  • “Wit” (white) and other wine types under Wines
  • Different formatting and spacing from main section headers

Pattern #2: Food & Beverage Header

We created a specialized header pattern (elayne/header-fandb) designed specifically for restaurant and cafe websites. This header diverges from typical WordPress navigation patterns to match industry conventions.

Header Layout

Three-zone layout:

  1. Left zone – Social media icons (Facebook, Instagram)
  2. Center zone – Site logo/branding
  3. Right zone – Hamburger menu navigation

Why this layout? Restaurant websites prioritize social proof and visual identity over navigation complexity. Customers want to quickly:

  • See the restaurant’s Instagram feed (visual menu preview)
  • Check Facebook for hours/reviews
  • Identify the brand (logo front and center)

Traditional left-aligned logos with horizontal nav don’t serve these goals as well.

Social Media Integration

We created custom SVG icons specifically for this style:

New SVG Assets:

  • icon-facebook-fandb.svg – Facebook icon in Emerald green (#046b3c)
  • icon-instagram-fandb.svg – Instagram icon in Sage Green (#6fb591)
  • icon-facebook.svg – Generic Facebook icon using currentColor
  • icon-instagram.svg – Generic Instagram icon using currentColor

These icons are 24x24px and use proper viewBox attributes for scaling. The F&B-specific versions match the color palette, while the generic versions can be reused in other style variations.

Navigation Strategy

The header uses overlayMenu: "always" which means:

  • Hamburger menu on ALL device sizes (even desktop)
  • Full-screen overlay menu with large touch targets
  • Dark Moss background (#013d1a) with white text
  • Simplified navigation (Home, Menu, Events, Contact)

Why always use overlay? Restaurants rarely have complex navigation hierarchies. A hamburger menu keeps the header clean and puts focus on the logo and social proof rather than navigation chrome.

Technical Decisions and Trade-offs

Why No Build Tools?

We’re building this style using pure FSE—no webpack, no Vite, no compilation step. Here’s why:

Advantages:

  • Changes are instantly visible (no rebuild required)
  • Simpler deployment (no node_modules to manage)
  • Easier maintenance (fewer dependencies to update)
  • Theme.json is version-controllable and human-readable

Trade-offs:

  • No SCSS/LESS preprocessing
  • No automatic vendor prefixing
  • Manual font file management
  • Larger file sizes (no tree-shaking)

For a style variation (not a standalone theme), these trade-offs are acceptable. We’re adding design tokens to an existing theme, not building a complex JavaScript application.

Font Loading Strategy

We chose to self-host all fonts rather than using Google Fonts:

Reasons:

  • GDPR compliance (no external requests to Google)
  • Faster loading (no DNS lookup, no third-party CDN)
  • Guaranteed availability (no dependency on external service)
  • Full control over font-display behavior

Downside:

  • Larger theme file size (fonts add ~500KB total)
  • Manual font updates if we need different weights

Pattern Category Creation

We created a dedicated pattern category: elayne/food-beverage

This allows users to filter patterns in the WordPress editor:

'Categories': 'elayne/food-beverage'

Any pattern tagged with this category appears in the “Food & Beverage” section of the pattern inserter. This organizational strategy makes it easy for users to find industry-specific patterns without scrolling through the entire library.

What’s Working Well

After implementing Phase 2, here’s what we’re most satisfied with:

1. Color Palette Versatility

The green-gold-cream palette works across multiple food service types:

  • Coffee shops – Warm, inviting earth tones
  • Fine dining – Gold accents add premium feel
  • Casual cafes – Sage and seafoam feel approachable
  • Bars – Dark moss creates sophisticated atmosphere

2. Typography Hierarchy

The four-font system creates clear visual hierarchy:

  • Anton (h1) – Unmistakable section headers
  • Orbitron (h2) – Distinct category labels
  • Asap Condensed (body) – Highly readable at all sizes
  • Inter (utility) – Clean, modern backup

3. Pattern Reusability

The Drinks Menu Grid pattern is more flexible than we expected:

  • Works for food menus (not just drinks)
  • Subsection headers allow for course grouping
  • Color-coded sections work for any categorization scheme
  • Easy to customize in the block editor

4. Header Simplicity

The F&B header pattern is incredibly simple:

  • Only 45 lines of PHP (including comments)
  • Three group blocks + navigation
  • Works immediately with any restaurant brand
  • Social icons pre-configured with example URLs

What We Learned

Color Accessibility is Harder Than Expected

We spent significant time testing color contrast ratios:

  • Emerald on White: 8.15:1 (AAA compliant ✓)
  • White on Dark Moss: 14.39:1 (AAA compliant ✓)
  • Seafoam on White: 3.23:1 (AA for large text only)
  • Harvest Gold on White: 2.84:1 (Fails AA, decorative only)

Lesson: Not every color in your palette can be used for text. Some colors (like Harvest Gold) are purely decorative and should only be used for borders, dividers, and backgrounds with dark text overlays.

Responsive Grid Behavior Isn’t Obvious

WordPress’s minimumColumnWidth creates automatic breakpoints, but the behavior isn’t always intuitive:

  • 19rem minimum = 4 columns at 1200px+ width
  • At 900px, drops to 3 columns (not 2)
  • At 720px, drops to 2 columns
  • At 400px, drops to 1 column

We initially planned for 4→2→1 behavior, but got 4→3→2→1 instead. We adjusted by targeting wider screens (increasing the outer container width) to force the 4→2→1 behavior we wanted.

Font File Sizes Add Up Quickly

Our self-hosted fonts total 512KB:

  • Anton: 24KB (1 weight)
  • Asap Condensed: 312KB (8 weights)
  • Inter: 96KB (variable font)
  • Orbitron: 80KB (variable font)

Optimization opportunity: We could subset fonts to Latin-only characters and reduce this by ~30%. We may do this in Phase 5 if load time testing shows it’s necessary.

Pattern Keywords Matter for Discoverability

We added comprehensive keywords to each pattern:

'Keywords': 'menu, drinks, beverages, coffee, wine, beer, food, restaurant, cafe, bar'

This makes patterns searchable in the WordPress editor. A user typing “coffee” will find the Drinks Menu Grid pattern, even though “coffee” isn’t in the pattern title.

Development Stats

Time spent on Phase 2: ~8 hours

  • Style variation file (food-beverage.json): 2 hours
  • Drinks Menu Grid pattern: 3 hours
  • F&B Header pattern: 1.5 hours
  • SVG icon creation: 30 minutes
  • Testing and refinement: 1 hour

Files changed: 9 files

  • 1 new style variation file
  • 2 new pattern files
  • 4 new SVG icon files
  • 1 CHANGELOG update
  • 1 readme.txt update

Lines of code added: 352 lines

  • food-beverage.json: 53 lines (JSON)
  • header-fandb.php: 45 lines (PHP/HTML)
  • menu-drinks-grid.php: 254 lines (PHP/HTML)

Live Demo and Source Code

View the code: All implementation work is available in the Elayne GitHub repository

Latest commit: 6239b00 – Add Food & Beverage style variation and header pattern

Files to review:

Demo site: Coming in Phase 5 – demo.imagewize.com/kafe/

What’s Next: Phase 3 – Menu Pattern Deep Dive

Phase 2 delivered the foundation: a working style variation, one complete pattern, and a functional header. But we’re just getting started.

Phase 3 Preview:

  • Food Menu Grid pattern – Full restaurant menu with appetizers, mains, desserts, sides
  • Daily Specials pattern – Highlight today’s chef specials
  • Pricing Tables – Multi-tier pricing for catering services
  • Menu item components – Reusable blocks for dietary indicators (vegetarian, gluten-free, etc.)

We’ll dive deep into:

  • Converting traditional menu layouts to block patterns
  • Handling complex grid layouts with mixed content types
  • Creating reusable inner blocks for menu items
  • Perfecting responsive behavior for tablet devices (the hardest breakpoint)

Part 3 is coming soon. We’ll show you the complete menu system and how we’re handling everything from wine lists to dietary restrictions.

About Elayne Theme

Elayne is Imagewize’s flagship Full Site Editing theme, designed for digital agencies and web professionals who need flexible, industry-specific solutions. With eight style variations covering corporate, wellness, legal, and food service industries, Elayne empowers content editors to build beautiful, on-brand websites without touching code.

Current Style Variations:

  1. Denim & Copper (Corporate)
  2. Forest Sage (Wellness/Eco)
  3. Gray & Gold (Luxury)
  4. Legal Blue (Legal Services)
  5. Orange (Vibrant)
  6. Spa & Wellness (Spa Industry)
  7. Teal Bay (Modern/Tech)
  8. Food & Beverage (Version 2.4.0 – Live!)

Learn more: https://imagewize.com/themes/elayne/

GitHub: https://github.com/imagewize/elayne

Leave a Reply