Skip to content
DesignMunkDesignMunk Submit a site

Join Jules

joinjules.com
Pretty Simple Cocktails
Ecommerce Food & Drinks WordPress Homepage Self Modern TT Commons
Share Visit site
joinjules.com DESKTOP · 1440
Join Jules

AI Breakdown

Design export

# Design brief: the Join Jules design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/30104316/joinjules-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/30104316/joinjules-com-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/join-jules/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Join Jules: Split-Screen Cocktail Hero in Peach Pastels

## Overview

Warm, approachable, and a little playful. This system blends editorial typography with friendly, rounded controls. Aim for creamy surfaces, dark aubergine text, and generous spacing. Content should feel seasonal and cozy rather than high-contrast tech; density stays moderate with air around images and chips.

## Page Structure

- Announcement bar: full-width strip with scalloped top edge and a single-line promo.
- Global header: centered wordmark; primary nav left (recipes, hosting, shop, book) and utility links right (about, search). Light surface with soft dividers.
- Split hero: two-column layout; left column has informal script eyebrow, large display headline, search field, and tag chips; right column is a circular recipe image carousel on a peach panel with arrows, title, and short blurb.
- Featured recipes row: a row of image-led cards linking to individual recipes.
- Seasonal Sips: section heading and a row of seasonal recipe cards; a "See All Recipes" link nearby.
- Let's Shake Things Up: editorial text block with three linked pathways to best recipes, pairings, and techniques.
- Newsletter: "Join the Club" signup with single email field and tall pill submit button.
- Book promo: "Pretty Simple Cocktails" feature with CTA; image + text in a compact band.
- Behind the Bar: grid of hosting resources cards with category eyebrow and titles.
- Loving Lately: horizontal affiliate/product carousel with previous/next controls and shop link.
- Social panel: three stacked CTAs to Instagram, TikTok, and YouTube.
- Explore CTA: brief copy and a button to browse all recipes.
- Footer: three-column link lists (Explore, About, Shop) plus a repeat email signup and legal credits.

## Colors

- Primary (#3C1E21): Deep aubergine ink for headlines, body text, and key icons.
- Secondary (#6C5566): Muted mauve for subheads, metadata, and subdued UI text.
- Tertiary (#FD6523): Bright citrus accent for highlights, badges, and interactive states.
- Neutral (#FCFAF2): Creamy canvas for page backgrounds and spacious sections.
- Border (#000000): Hairline rules, input underlines, and icon strokes when a true black edge is needed.
- brand-sitter-red (#3C2136): Dark plum variant used for emphasis text or dense headings where extra depth is desired.
- brand-violet-vapor (#E5DCE2): Lavender tint for soft panels, tags, or dividers behind content.
- surface ({colors.neutral} -> #FCFAF2): Default section background.
- on-surface ({colors.primary} -> #3C1E21): Default text color when placed on the surface.

## Typography

- Self Modern (custom): Display serif for headlines. Sizes: headline-lg 80px (hero), headline-md 60px, headline-sm 40px, headline-xs 32px. Not freely hosted; suggested substitutes: Fraunces (Google), Playfair Display (Google), or Cormorant Garamond (Google) for high-contrast warmth.
- TT Commons (custom): Body and UI text at 18px/1.5. Not freely hosted; suggested substitutes: Inter (Google), Source Sans 3 (Google), or Work Sans (Google) for clear, neutral reading.
- Roylands Script (custom): Informal accent for short asides/eyebrows only. Not freely hosted; suggested substitutes: Caveat (Google), Pacifico (Google), or Dancing Script (Google). Keep usage minimal and never for paragraphs.

## Layout

- Spacing scale: xs 10, sm 26, md 40, lg 60, xl 146. Use md–lg as default section padding; xl for the hero or feature bands; sm around chips and between form elements.
- Grid: two-column split for the hero; subsequent sections use single-column stacks with rows of cards. Keep ample gutters; avoid dense multi-row mosaics in one viewport.
- Rhythm: pair large display headings with md spacing below and sm above related controls to maintain the editorial feel.

## Elevation & Depth

Shadows are minimal (sm only: rgba(0,0,0,0.1) 0 6px 6px). Depth is mainly conveyed with tonal panels (Neutral vs Violet Vapor), crisp borders (#000000) on inputs or cards, and whitespace. Reserve the sm shadow for floating elements like sticky nav or carousels; most surfaces stay flat.

## Shapes

Two radii define the language: sm 10px for cards and images inside grids; md 35px for pill buttons, chips, and larger inputs. Circular image crops are used compositionally in the hero; elsewhere prefer the token radii to keep consistency.

## Components

Buttons and Card (tokenized):
- Button — Primary/Secondary: Text color #FCFAF2, height 66px, padding 17px 26px, radius 35px. Apply on saturated backgrounds from the palette; keep label in TT Commons 18px medium.
- Button — Link: Text color #3C1E21, radius 0; use for inline CTAs and "See All" links.
- Card: Background #6C8526, text #3C1E21, radius 10px, padding 50px; intended for bold feature callouts.

### Split Hero
- Layout: two equal columns on desktop; stack on mobile with image first or second depending on priority.
- Left: script eyebrow (Roylands Script substitute ok), headline-lg 80px Self Modern, then search and filter chips.
- Right: circular image carousel with left/right arrows; recipe title in headline-sm 40px and short body copy 18px.
- Background: neutral surface overall; the image column may sit on a tinted panel.

### Search Bar
- Single-line field at 18px TT Commons, underline or thin border (#000000). Width matches the left column; sm spacing above chips.

### Filter Chips
- Compact pills for quick taxonomy (Classics, Mocktails...). Radius 35px, TT Commons 18px, internal padding ~sm. Use primary text; hover/active may adopt tertiary accent.

### Seasonal Recipe Card
- Image-led tile with title in headline-xs 32px and short description or location link. Radius 10px; keep spacing md around the grid.

### Newsletter ("Join the Club")
- One input + submit button. Input follows 35px pill style; submit uses the 66px tall button-primary. Keep copy at 18px and section padding lg.

### Book Promo Banner
- Compact band featuring the book title (headline-sm 40px), short blurb, and a primary/secondary button. Can reuse the Card background #6C8526 or a light tint.

### Affiliate/Product Carousel
- Horizontal scroller of product tiles with image, short title (18px), and a small CTA. Minimal or no shadow; rely on spacing and borders for separation.

## Do's and Don'ts

- Do use #3C1E21 for all core text on #FCFAF2 backgrounds to preserve legibility and brand warmth.
- Do keep chip and button radii at 35px; inconsistent corner rounds break the friendly tone.
- Do size display headlines with the provided steps (80/60/40/32px); avoid custom in-betweens.
- Don't introduce heavy shadows—only the small tokenized shadow is allowed and sparingly.
- Don't set long paragraphs in the script or the serif; reserve Self Modern for headings and the script for tiny asides.
- Don't compress card grids; maintain md–lg gutters and clear breathing room around images.

## Agent Prompt Guide

Quick color reference: text #3C1E21, background #FCFAF2, border #000000, accent #FD6523.

1) Build the split hero
- Canvas: background #FCFAF2. Two equal columns with lg (60px) gap.
- Left: headline "Easy Cocktails For Any Day" in Self Modern 80px/1.2 (fallback Fraunces). Below, body copy in TT Commons 18px/1.5 (fallback Inter).
- Add a search input 18px with a 1px #000000 underline and md (35px) pill container if using a field background.
- Right: place a large circular image; add left/right arrow buttons; caption title in Self Modern 40px and a short paragraph in 18px.

2) Add filter chips under the hero headline
- Horizontal wrap of pills with md radius (35px), 18px TT Commons text, internal padding 17px 26px.
- Default text #3C1E21 on light backgrounds; hover/active may use accent #FD6523.

3) Seasonal Sips grid
- Section title in Self Modern 40px. Below, a row of 3–4 recipe cards.
- Card: radius 10px, image top, title in 32px, small snippet in 18px. Maintain md (40px) gutters and lg (60px) top/bottom padding.

4) Newsletter band
- Background stays #FCFAF2 or a pale tint. Copy in TT Commons 18px.
- Email input uses a pill shape (35px radius). Submit button: height 66px, padding 17px 26px, text #FCFAF2 on a saturated fill; keep spacing md around the form.

5) Book promo feature
- Use the Card styling: background #6C8526, radius 10px, padding 50px. Heading in Self Modern 40px, CTA as the primary button (66px tall).

## Similar Brands

- Food52: similarly warm editorial layout with big imagery and shop integration; Food52 skews more gray/neutral while Join Jules leans cream and aubergine.
- Half Baked Harvest: oversized display type and seasonal modules; HBH is denser and more photographic, with less use of rounded UI controls.
- Smitten Kitchen: recipe-forward blog with clean grids; less decorative type and fewer shaped elements than Join Jules.
- Seedlip: beverage brand with calm palettes and rounded controls; more product-commerce focused versus Join Jules' content-first library.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #3c1e21;
  --color-secondary: #6c5566;
  --color-tertiary: #fd6523;
  --color-neutral: #fcfaf2;
  --color-border: #000000;
  --color-brand-sitter-red: #3c2136;
  --color-brand-violet-vapor: #e5dce2;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 80px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 60px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.25;
  --text-headline-sm-size: 40px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 32px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.28;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-self-modern: "Self Modern";
  --font-tt-commons: "TT Commons";

  /* Rounded */
  --radius-sm: 10px;
  --radius-md: 35px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 26px;
  --spacing-md: 40px;
  --spacing-lg: 60px;
  --spacing-xl: 146px;

  /* Components */
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 17px 26px;
  --button-primary-height: 66px;
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 17px 26px;
  --button-secondary-height: 66px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #6c8526;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 50px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #3c1e21;
  --color-secondary: #6c5566;
  --color-tertiary: #fd6523;
  --color-neutral: #fcfaf2;
  --color-border: #000000;
  --color-brand-sitter-red: #3c2136;
  --color-brand-violet-vapor: #e5dce2;
  --color-surface: #fcfaf2;
  --color-on-surface: #3c1e21;
  --font-headline-lg: "Self Modern";
  --font-headline-md: "Self Modern";
  --font-headline-sm: "Self Modern";
  --font-headline-xs: "Self Modern";
  --font-body-md: "TT Commons";
  --text-headline-lg: 80px;
  --text-headline-md: 60px;
  --text-headline-sm: 40px;
  --text-headline-xs: 32px;
  --text-body-md: 18px;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 10px;
  --radius-md: 35px;
  --spacing-xs: 10px;
  --spacing-sm: 26px;
  --spacing-md: 40px;
  --spacing-lg: 60px;
  --spacing-xl: 146px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.235,
                    0.118,
                    0.129
                ],
                "hex": "#3c1e21"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.424,
                    0.333,
                    0.4
                ],
                "hex": "#6c5566"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.992,
                    0.396,
                    0.137
                ],
                "hex": "#fd6523"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.98,
                    0.949
                ],
                "hex": "#fcfaf2"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "brand-sitter-red": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.235,
                    0.129,
                    0.212
                ],
                "hex": "#3c2136"
            }
        },
        "brand-violet-vapor": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.863,
                    0.886
                ],
                "hex": "#e5dce2"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.98,
                    0.949
                ],
                "hex": "#fcfaf2"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.235,
                    0.118,
                    0.129
                ],
                "hex": "#3c1e21"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 26,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 146,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 35,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Self Modern",
                "fontSize": {
                    "value": 80,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Self Modern",
                "fontSize": {
                    "value": 60,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Self Modern",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Self Modern",
                "fontSize": {
                    "value": 32,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "TT Commons",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Join Jules**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Ecommerce →
sundayparis.com
Sunday Paris Creative
Sunday Paris
oka.com
OKA Ecommerce
OKA
primalpastures.com
Primal Pastures Ecommerce
Primal Pastures
wattspet.com
Watts Pet Ecommerce
Watts Pet