Building a Food & Beverage Style for Elayne: Part 1 – Planning & Design System

February 3, 2026 • By Jasper Frumau

If you’ve ever wondered how WordPress themes are built for specific industries—or how Full Site Editing (FSE) themes work behind the scenes—you’re in the right place. We’re building a complete Food & Beverage style variation for our Elayne FSE theme, and we’re documenting every step of the process.

This isn’t just theory. By the end of this series, you’ll see real patterns, working code, and a live demo site. You can even follow along with our development on GitHub.

Welcome to the first post in our series documenting the creation of a Food & Beverage style variation for the Elayne Full Site Editing (FSE) theme. This will be our third industry-specific vertical, joining our existing Spa & Wellness and Legal Services styles.

Over the next few posts, we’ll take you behind the scenes as we build a complete WordPress theme solution designed specifically for restaurants, cafes, bars, bakeries, and other culinary establishments. You’ll see our design decisions, technical challenges, and the entire development process from planning to launch.

This series is for WordPress developers, designers, and anyone curious about building industry-specific FSE theme variations.

The Vision: What We’re Building

Before diving into code, let’s explore the design system we’re creating for food service businesses.

Typography Selection: Setting the Right Mood

One of our first design decisions was selecting typefaces that would work together to create a distinctive food service aesthetic. After reviewing dozens of font combinations, we settled on four custom typefaces:

Anton: Bold, impactful display font for main headings and hero sections
Asap Condensed: Clean, condensed sans-serif for menu items and body text (200-900 weight range)
Orbitron: Modern, geometric font for decorative menu section headers
Inter: Versatile variable font for general typography needs

This typography hierarchy ensures menu items are easy to scan while maintaining visual interest through varied font pairings.

Why these fonts? We needed typefaces that would:

Display clearly at small sizes (menu items often use 14-16px text)
Create visual hierarchy without relying on color
Feel approachable and inviting, not overly formal
Work well in condensed layouts (menu grids can get tight on tablets)

Color System Design: Warm and Earthy

For the color palette, we’re building a system of 11 semantic colors inspired by natural, organic materials—think fresh ingredients, wooden tables, and warm lighting.

Primary Colors

Pine Green (#034521) – Deep, rich green for main text and titles
Teal Deep (#169179) – Vibrant accent color for descriptions and highlights
Header Green (#014521) – Dark green for header backgrounds and premium sections

Warm Accents

Warm Gold (#dcb171) – Elegant gold for borders, dividers, and accents
Creamy Beige (#eadfbf) – Soft background for menu sections
Light Cream (#f3efe4) – Gentle background color for content areas

This palette will create a warm, inviting atmosphere perfect for food and beverage establishments while maintaining excellent readability and contrast ratios for accessibility.

Color Strategy:

Primary greens establish a natural, organic foundation
Warm gold adds premium touches and visual interest
Cream tones provide soft, neutral backgrounds that won’t compete with food photography
All combinations tested for WCAG 2.1 AA compliance

Visual Enhancements: Duotones and Gradients

To give designers more creative options, we’re including three custom duotone filters optimized for food photography:

Green & Gold: Creates a warm, premium feel for hero images and featured dishes. Perfect for highlighting signature menu items or creating an upscale atmosphere on hero sections.
Pine & Cream: Provides subtle, organic tones for background images. Ideal for textured backgrounds or food photography that needs to feel natural and inviting without overwhelming the content.
Teal & Beige: Adds a fresh, modern look to beverage photography and product shots. Works particularly well for highlighting specialty drinks or bakery items.

Plus two custom gradients for backgrounds and overlays:

Warm Earth: A rich gradient flowing from deep green through teal to warm gold. Use this for CTA backgrounds, section dividers, or overlay effects that need visual interest without competing with food imagery.
Cream Fade: A subtle transition from light cream to creamy beige. Perfect for gentle section backgrounds or card overlays that maintain readability while adding depth.

Why duotones matter for restaurants: Food photography is crucial for restaurant websites, but stock photos rarely match your brand colors perfectly. Duotone filters let you maintain visual consistency across all imagery while preserving the appeal of the food itself. Instead of expensive photo shoots with color-matched styling, you can apply brand-consistent filters to any food photography.

Planning the Pattern Library

With the design system established, we can now plan the actual WordPress patterns that will make this style useful for real restaurant websites.

The Star Pattern: Responsive Menu Grid

The centerpiece will be a Drinks Menu Grid pattern – a four-column responsive layout that adapts beautifully across all device sizes:

Desktop: 4 columns (Coffee/Tea, Wines, Beers, Snacks)
Tablet: 3 or 2 columns depending on screen width
Mobile: Single column, stacked layout

Each menu section will feature color-coded backgrounds for easy visual scanning, gold pipe separators between item names and prices, consistent typography hierarchy, and rounded corners with proper spacing.

The Complete Pattern Roadmap

We’re planning a complete pattern library designed specifically for food service businesses.

Technical Approach: Pure FSE

Why Full Site Editing?

We’re building this variation using pure Full Site Editing, which means no build tools are required—just WordPress core features and a well-structured theme.json file.

Design Tokens Instead of CSS Classes

We’ll use WordPress’s design token system (via theme.json) for maintainability. This approach will make it easy for site editors to maintain brand consistency across all pages and patterns.

Built-In Accessibility

We’re designing all colors to meet WCAG 2.1 AA standards for contrast. All patterns will use proper semantic HTML, focus indicators, and ARIA labels.

Development Progress & Roadmap

We’re currently in the early stages of this project, working on a dedicated feature branch. Here’s where we are:

✅ Phase 1: Planning & Design System (This post)

Typography selection finalized
Color palette defined (11 semantic colors)
Pattern library outlined (15+ patterns planned)
Technical approach established (pure FSE)
Custom fonts copied to theme assets

🚧 Phase 2: Core Implementation (In Progress – Part 2)

Creating styles/food-beverage.json file
Implementing font declarations
Building first pattern: Drinks Menu Grid
Testing responsive behavior

What’s Next in This Series

This is Part 1 of 5 in our behind-the-scenes development series:

Part 2 – Creating the Style Variation (Next): We’ll create the actual food-beverage.json file, implement the font declarations, and build our first pattern—the responsive drinks menu grid.

Part 3 – Menu Pattern Deep Dive: Converting traditional menu layouts to FSE patterns, handling complex grid layouts, and perfecting the responsive behavior.

Part 4 – Hero & CTA Development: Building conversion-focused patterns for reservations, online ordering, and other restaurant-specific calls-to-action.

Part 5 – Launch & Lessons Learned: Final testing, deployment to the demo site, pull request workflow, and key takeaways from building an industry-specific FSE theme variation.

Follow Along with the Development

Want to see the code as we write it? The entire development is happening in the open on GitHub.

GitHub Pull Request: Elayne Theme PR #48 – Food & Beverage Style

In this PR you can see:

The complete styles/food-beverage.json file with all color and typography definitions
Pattern files as they’re created (starting with the Drinks Menu Grid)
Font files and assets we’re adding to the theme
All commits showing our development process step-by-step
Code reviews and technical discussions

Live Demo: Once Phase 5 is complete, you’ll be able to see a working demo at demo.imagewize.com/kafe/

Or simply stay tuned for Part 2 of this series where we start actually building the theme files!

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 seven style variations covering corporate, wellness, and legal industries, Elayne empowers content editors to build beautiful, on-brand websites without touching code.

The Food & Beverage style (currently in development) will be our eighth style variation.