Brand & Assets
Image specs, brand colors, typography, and asset guidelines for Market of Choice.
Centralized reference for image dimensions, brand tokens, and asset handling. Both sites share the same brand identity but have slightly different Avada configurations.
Image Specs
Featured Images (WPUPG Grids)
The standard featured image size used across blog posts, recipes, maker profiles, employee spotlights, newsroom posts, and all WPUPG grid content:
- Dimensions: 1200 x 925px (48:37 aspect ratio)
- Format: JPEG, quality 85
- Crop: Center on the subject with good headroom
- Max file size: aim for under 300KB after optimization
magick input.jpg -auto-orient -resize 1200x -gravity North -crop 1200x925+0+0 +repage -quality 85 output.jpgAdjust the -gravity and crop offset to frame the subject well.
Hero Banners
Full-width hero images for homepages, department pages, and landing pages:
- Width: at least 2400px (for retina displays)
- Aspect ratio: typically 16:9 or wider
- Format: JPEG, quality 85
- Max file size: under 500KB
Product Images (Reservations Site)
WooCommerce product images for catering and Supper Club items:
- Format: JPEG or PNG
- Optimization: always optimize before uploading — client-provided images are often uncompressed TIFFs (30+ MB)
General Rules
- HEIC files from iPhone need conversion to JPG before uploading
- Always set alt text and title on uploaded media
- All media is offloaded to Cloudflare R2 and served from
static.marketofchoice.com - PDFs are excluded from R2 on the reservations site (stay on WP Engine)
- Thumbnail regeneration triggers a full R2 re-upload — see Gotchas
Brand Colors
Both sites use Avada's color system via CSS custom properties (--awb-colorN). The palettes are similar but not identical.
2024 Rebrand Palette (Marketing Site)
The 2024 rebrand introduced named custom colors that are the primary design tokens:
| Token | Name | Hex | Usage |
|---|---|---|---|
--awb-custom_color_1 | 2024 Primary | #8aa953 | Primary color, links, buttons |
--awb-custom_color_2 | 2024 Secondary | #003a42 | Headings (H1–H6), dark teal |
--awb-custom_color_3 | 2024 Neutral | #f0f0df | Page background, warm cream |
--awb-custom_color_5 | 2024 Primary 300 | #4c6c32 | Button fills, darker green |
Core 8-Color Palette (Marketing Site)
| Token | Hex | Usage |
|---|---|---|
--awb-color1 | #ffffff | White / backgrounds |
--awb-color2 | #f9f9fb | Light gray background |
--awb-color3 | #f2f3f5 | Border / divider gray |
--awb-color4 | #e2e2e2 | Muted gray |
--awb-color5 | #739c24 | Legacy green |
--awb-color6 | #4a4e57 | Dark gray / body text |
--awb-color7 | #212934 | Near-black |
--awb-color8 | #000000 | Black |
Additional marketing site tokens: #65bc7b (accent green — menu highlights, focus states), #9ea0a4 (muted gray).
Core 8-Color Palette (Reservations Site)
| Token | Hex | Difference from Marketing |
|---|---|---|
--awb-color1 | #ffffff | Same |
--awb-color2 | #ebeaea | Slightly darker gray |
--awb-color3 | #e2e2e2 | — |
--awb-color4 | #a0ce4e | Lighter green (vs marketing's muted gray) |
--awb-color5 | #747474 | Medium gray (vs marketing's green) |
--awb-color6 | #739c24 | Legacy green (same value, different slot) |
--awb-color7 | #333333 | Dark gray |
--awb-color8 | #000000 | Same |
The reservations site hasn't adopted the 2024 rebrand palette — it still uses the legacy color system.
Typography
Fonts are served via Adobe Fonts (Typekit) at use.typekit.net/fvb2xtu.css.
Font Families
| Font | Type | Usage |
|---|---|---|
| New Spirit | Serif | Headings (H1–H6), buttons, display text |
| Pragmatica | Sans-serif | Body text, small text, UI elements |
| Quiet Nights | Script | Decorative subheadings (marketing site only) |
| Local Brewery | Display | Special headings (marketing site only) |
| True North | Display | Decorative accents (marketing site only) |
| Arial/Helvetica | Sans-serif | Navigation, footer headings (fallback) |
Heading Sizes (Marketing Site)
| Element | Font | Size |
|---|---|---|
| H1 | New Spirit | 70px |
| H2 | New Spirit | 50px |
| H3 | New Spirit | 28px |
| H4 | New Spirit | 28px |
| H5 | New Spirit | 24px |
| H6 | New Spirit | 18px |
| Body | Pragmatica | 16px |
| Buttons | New Spirit | 14px |
| Navigation | Arial | 15px (weight 600) |
Avada Typography Tokens
Marketing site:
| Token | Font | Size | Weight | Line Height |
|---|---|---|---|---|
typography1 | New Spirit | 60px | 400 | 1.2 |
typography2 | Quiet Nights | 24px | 400 | 1.1 |
typography3 | New Spirit | 20px | 400 | 1.2 |
typography4 | Pragmatica | 16px | 400 | 1.72 |
typography5 | Pragmatica | 13px | 400 | 1.72 |
Reservations site:
| Token | Font | Size | Weight | Line Height |
|---|---|---|---|---|
typography1 | New Spirit | 60px | 400 | 1.1 |
typography2 | New Spirit | 24px | 400 | 1.1 |
typography3 | Pragmatica | 18px | 400 | 1.2 |
typography4 | Pragmatica | 16px | 400 | 1.72 |
typography5 | Pragmatica | 13px | 400 | 1.72 |
The reservations site doesn't use decorative fonts (Quiet Nights, Local Brewery, True North) — it's a simpler, more functional design.
Logo
The primary logo is at static.marketofchoice.com/uploads/2024/03/2024-branding.png. Favicon: uploads/2021/01/moc-favicon-64X64.png.
The logo is configured in Avada > Options > Logo on each site. It's not a file you typically need to touch.
Design Tokens Summary
Quick reference for the most-used values:
| Token | Value |
|---|---|
| Primary green (2024) | #8aa953 |
| Dark teal (headings) | #003a42 |
| Warm cream (backgrounds) | #f0f0df |
| Deep green (buttons) | #4c6c32 |
| Accent green | #65bc7b |
| Legacy green | #739c24 |
| Site max width | 1200px |
| Button border radius | 5px |
Social / OG Images
The default OG share image is at static.marketofchoice.com/uploads/2024/04/MOC_share_thumbnails_1200x675_main.png (1200 x 675px). Individual pages can override this via Yoast SEO's social tab.