---
version: alpha
name: "Jeni's"
description: "Token-first design system reference for Jeni's Splendid Ice Creams — joyful artisan ice cream DTC built on warm cream, punchy orange, and a custom all-caps grotesque."

colors:
  # Surface / canvas
  background: "#f9f9f7"        # warm off-white — slightly warm, never clinical
  surface: "#ffffff"            # pure white for card insets, modals
  surface-teal: "#aee0e1"       # mint-teal secondary surface — flavor tile accent

  # Text / ink
  ink: "#262015"                # very warm near-black with a brown undertone — main text
  ink-secondary: "#444444"      # mid-gray for supporting body copy
  on-background: "#262015"      # same as ink — body on canvas
  on-surface: "#262015"         # text on white card surfaces

  # Brand accent
  primary: "#ff4612"            # Jeni's Signal Orange — CTAs, hover states, accents
  on-primary: "#ffffff"         # white text on orange buttons
  primary-hover: "#d93c0f"      # darkened orange — button hover

  # State / interaction
  text-hover: "#ff4612"         # nav links shift to signal orange on hover
  focus-ring: "#ff4612"         # orange focus ring matching primary
  focus-tint: "#fde8e0"         # pale tint of primary for focus backgrounds /* estimated */

  # Semantic
  success: "#44be70"            # extracted from CSS var for sale pricing
  error: "#ef4444"              # standard error red /* estimated */
  sale: "#44be70"               # sale price text — search plugin var

  # Borders
  border: "#333333"             # dark near-black hairline dividers
  border-light: "#e5e7eb"       # light gray borders for quiet UI

  # Shadow
  shadow-soft: "#d9d9d9"         # was #00000026 (alpha ~15% black) — flattened over white

typography:
  display-hero:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.52px
  display:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.42px
  heading-section:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.34px
  heading-sub:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0.22px
  body-large:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.6px
  body:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.6px
  nav-link:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1.6px
  button-ui:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 1.28px
  label-upper:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.6px
  caption:
    fontFamily: "Moderat, Arial, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 11px 50px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 11px 50px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 11px 50px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 11px 50px
  button-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  button-pill-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 24px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 7px 12px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 7px 12px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Jeni's Design System

## Overview

Jeni's Splendid Ice Creams is one of the few DTC food brands that has figured out how to make a screen feel like a scoop shop. The homepage opens on a warm off-white canvas (`{colors.background}`) — closer to a linen tablecloth than a tech product page — and immediately places three vivid ice cream pints front-and-center as the hero. The design makes no attempt to be subtle: the brand wordmark is bold, the orange (`{colors.primary}`) is punchy and hot, and the typography is compressed and all-caps with wide tracking. Everything about it says: this is a joyful, artisan food brand, not a wellness startup.

The typographic spine is Moderat — a self-hosted custom geometric grotesque used exclusively across the entire site at weights 500, 700, and 900. There are no serif moments, no decorative faces, no secondary type system. All display headlines are uppercase, with slight positive letter-spacing that gives them a label-print quality at large scale. At 42–52px and weight 700, section headers feel stenciled rather than typeset — like the ink on a carton. This pairing of warm canvas, near-black ink (`{colors.ink}`), and hot signal orange creates a system that reads as print-informed retail, not software.

What makes the Jeni's design vocabulary distinctive is its **radius binary** — the system uses essentially two states: perfectly flat `0px` for the sharp-edged product headers, hero bands, and rectangular CTAs like "Shop All Flavors" and "Explore All Flavors," and full `9999px` pill for the rewards badge, loyalty chip, newsletter CTA, and smaller interactive elements. There is almost no middle-ground radius. Combined with bold orange-outline buttons (a `2px solid {colors.primary}` treatment that doubles as both filled and ghost), and the teal mint secondary surface (`{colors.surface-teal}`) used as an occasional flavor-moment accent, the overall identity lands somewhere between a mid-century ice cream counter and a contemporary DTC playbook.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) — toasty, not clinical; sets an artisan food register
- Signal orange (`{colors.primary}`) as the single chromatic anchor — CTAs, hover states, borders
- Very warm near-black ink (`{colors.ink}`) — brownish undertone that reads as almost sepia against the warm canvas
- Moderat at weight 700/900, all-caps, positive letter-spacing — label-print energy throughout
- Binary radius system: `{rounded.none}` for headers and rectangular CTAs, `{rounded.pill}` for pills and loyalty elements
- Orange-outline ghost button (`2px solid {colors.primary}`, white fill, orange text) paired with solid orange fill
- Teal mint accent (`{colors.surface-teal}`) used sparingly as a flavor-evocation secondary surface
- Positive letter-spacing on all uppercase display text (0.42–0.52px) — reads as stenciled, packaged-goods quality
- Pill buttons and badges exclusively for membership/rewards contexts — structural distinction between shop and loyalty
- Sharp zero-radius on all product imagery, section bands, and rectangular CTAs — uncompromising shelf-confidence

## Colors

### Primary
- **Jeni's Canvas** (`{colors.background}`): Warm off-white — the default page surface. Toastier than pure white, closer to fresh paper stock. Extracted from the logo background.
- **Jeni's Ink** (`{colors.ink}`): Very warm near-black with a sepia undertone. All headings, body text, and icon fills. Never cold or neutral.
- **Pure White** (`{colors.surface}`): Card insets, modal surfaces, email inputs — reserved for maximum-contrast moments against the warm canvas.

### Brand Accent
- **Signal Orange** (`{colors.primary}`): The defining Jeni's color. Applied to primary CTAs ("Explore the Flavors", "Join now"), nav hover states, button borders, and all interactive color-shift moments. The dembrandt extraction found it on 198 elements — the highest-frequency chromatic value in the system.
- **Orange Hover** (`{colors.primary-hover}`): Darkened signal orange for button hover states — `{colors.primary-hover}` confirms the interactive depth.

### Secondary Accent
- **Mint Teal** (`{colors.surface-teal}`): Flavor-moment secondary surface — the closest the system gets to a supporting brand color. Used on select flavor tile backgrounds. Sits naturally against the warm canvas.

### Neutrals & Borders
- **Dark Border** (`{colors.border}`): Near-black hairline dividers for tight UI separation, tab indicators, and section seams.
- **Light Border** (`{colors.border-light}`): Soft gray borders for card outlines, input dividers, and quiet structural separation.
- **Medium Gray** (`{colors.ink-secondary}`): Supporting body copy, subtext, secondary metadata.

### Sale & Semantic
- **Sale Green** (`{colors.sale}`): Sale pricing specifically — a bright mid-green (`{colors.success}`) extracted from the search plugin CSS variable. Functional, not editorial.

## Typography

### Font Family
- **Primary**: `Moderat`, self-hosted via `static.Moderat-Medium.woff2` and `static.Moderat-Bold.woff2`, with fallback `Arial, Helvetica, sans-serif`
- **Secondary (utility)**: `Inter`, system sans stack — used for third-party widget contexts (search results, reviews) but never for editorial content
- **OpenType features**: Standard ligatures; no variable font axis — the two static woff2 files (Medium/Bold) cover the full weight range needed

*Note: Moderat is a custom commercial typeface. For external implementation, `DM Sans` (weight 500/700/900) or `Space Grotesk` approximate the geometric grotesque character. The uppercase + positive-tracking treatment is more important to match than the specific face.*

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Hero headlines, "Summer Collection," major campaign moments — 52px uppercase |
| `display` | Section headers, "Flavor Is Everything" — 42px uppercase, label-print quality |
| `heading-section` | Sub-section heads, category names — 34px uppercase |
| `heading-sub` | Compact section labels, navigation hover states — 22px |
| `body-large` | Intro paragraphs, hero subheads, lead copy — 19px weight 500 |
| `body` | Standard reading text, product descriptions, form labels — 16px weight 500 |
| `nav-link` | Primary navigation items — 20px weight 700, 1.6px tracking, capitalize |
| `button-ui` | All CTAs — 16px weight 900, 1.28px tracking, uppercase — maximum Moderat density |
| `label-upper` | Eyebrow labels, tags, uppercase UI chrome — 15px |
| `caption` | Product metadata, fine print, small badges — 13px |

### Principles
- **All-caps for display and CTA**: Every headline above body scale runs uppercase. The positive letter-spacing is load-bearing — without it the all-caps reads as cramped stencil; with it, it reads as deliberate packaging.
- **Weight 900 for CTAs**: Button labels use Moderat at weight 900 — the heaviest available. CTAs feel stamped, not typed.
- **One typeface, many weights**: Moderat handles the full range from body (500) through headers (700) to CTAs (900). No decorative or serif face enters the system at any point.
- **Tight line-height on display**: 52px and 42px headers run at line-height 1.0 — stacked tight like layers on a carton label.
- **Neutral tracking on body**: Body text at 16–19px keeps modest `0.6px` tracking — enough to feel intentional, not enough to feel spaced-out.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The system leans on a practical ladder: 10px and 12px handle fine internal padding (nav items, input fields); 20px and 25px handle card-to-card gaps; 50px and 80px handle section-level vertical rhythm. The dominant inner padding unit is 7.5px / 10px — tighter than typical DTC, which contributes to the dense, packed-shelf feel inside product cards.

### Grid & Container
- Max content width: approximately 1280px
- Hero: two-column split — text/promo left, product photography right (pints stacked artfully)
- Product grid: flexible multi-column responsive — 4 across on wide desktop, 2–3 on tablet
- Section bands: full-bleed alternating canvas / white / teal accent
- Navigation: top promotional strip (slim, warm canvas) + main nav bar with wordmark left, utility icons right

### Whitespace Philosophy
- **Compressed inner padding**: Product cards use minimal internal padding (7–10px) — density signals shelf abundance, not luxury breathing room.
- **Generous section spacing**: Between major page sections, 50–80px of vertical rhythm gives the design editorial weight without losing the retail pace.
- **Orange anchors the page**: Rather than using white space to draw the eye, orange CTAs and accents act as visual anchors — the browser lands on orange first, content second.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, color-block section bands, body text |
| Button Flat (Level 1) | `0 1px 2px rgba(0, 0, 0, 0.05)` | Primary pill buttons ("Join now") — minimal lift |
| Focus Ring (Level 2) | `0 0 0 2px {colors.primary}` | Input focus state — orange ring |
| Card Lift (Level 3) | `0 10px 15px rgba(0, 0, 0, 0.10)` | Elevated cards, dropdowns |
| Dialog (Level 4+) | `0 20px 25px rgba(0, 0, 0, 0.10)` | Modal/overlay surfaces |

**Shadow Philosophy**: Jeni's uses shadows sparingly and conventionally — the Tailwind defaults rather than a custom elevation language. The real depth work is done by color contrast: orange buttons against warm white, product photography against canvas, teal-tinted flavor tiles against standard surface. When you see a shadow in this system, it's structural (modals, tooltips) not decorative. The personality lives in color and type, not in depth effects.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is emphatically binary:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Headers, section bands, rectangular CTAs ("Shop All Flavors"), product imagery, most UI elements |
| `sm` | 2px | Minor controls from cookie/preference UI — effectively flat in practice |
| `pill` | 9999px | Membership buttons ("Join now"), loyalty chip ("View your rewards"), newsletter CTA, badge overlays |

Jeni's does not use 4px, 8px, or 16px radius anywhere in primary UI. The binary nature of the radius system — flat rectangles for commerce, full pills for membership — creates a meaningful structural distinction: "shopping" is angular, "belonging" is rounded. This makes the loyalty program feel warm and approachable against an otherwise crisp, carton-inspired shape language.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Solid signal orange (`{colors.primary}`), white text, `0px` radius, uppercase Moderat weight 900. The "Explore all flavors" / "Shop All Flavors" CTA. Bordered version: `2px solid {colors.primary}`, white fill, orange text — functions as a ghost/outline variant.
- **`button-secondary`** — White fill, orange text, orange outline border. Used for secondary actions and alternating button pairs (one filled, one outlined).
- **`button-pill`** — Signal orange pill, white text, `9999px` radius. Used exclusively for loyalty/rewards contexts ("Join now"). Slightly padded at 14px vertical.
- **`button-pill-hover`** — Darkened orange fill on hover, same pill shape.

### Cards

Product cards are minimal containers — no explicit border-radius, no box shadow in their resting state. A product card is: product image (full-width, `0px` radius), flavor name in Moderat 700, price below, "Add to cart" as a white-with-orange-text pill or flat button. The card sits directly on the warm canvas without a raised surface treatment.

### Inputs

Search inputs use `0px` radius and a bottom-only border treatment against the warm canvas background. The email newsletter input has a subtle rounded `10px` on the input field. Focus state shifts the background to a light teal and adds a 1px solid focus ring — notably the Jeni's search focus uses teal (`#1eaedb`) rather than orange, a third-party widget remnant.

### Badges / Tags

Badges use the full pill radius (`{rounded.pill}`). Primary badge: orange fill, white text. Used for "New" product flags and promotional overlays. Tags within flavor navigation use the pill as a chip treatment.

### Navigation

- Promotional strip: slim top bar with compact promo copy ("Your dad deserves ice cream. Order now for delivery by Father's Day!")
- Main nav: warm canvas background, Jeni's wordmark (script logo) far left, primary links center-left, search + rewards + cart right
- Nav links: Moderat 700 capitalize, `1.6px` tracking — the nav typographically matches the section headers
- Hover: text color shifts to `{colors.primary}` signal orange — consistent system-wide interactive state

## Do's and Don'ts

### Do
- Use `{colors.background}` (warm off-white) as the page canvas — never pure white for the base surface
- Set all primary CTA text in Moderat weight 900 uppercase with `1.28px` letter-spacing — the stamped-label feel is intentional
- Apply `{colors.primary}` (signal orange) for all interactive state changes — hover, active, focus ring
- Use `{rounded.none}` (0px radius) for all product headers, section bands, and commerce CTAs — the angular language signals retail confidence
- Reserve `{rounded.pill}` for membership and loyalty UI exclusively — the structural distinction between "shopping" and "belonging"
- Use the orange-outline ghost button (`2px solid {colors.primary}`, white fill, orange text) as the secondary CTA treatment
- Keep headlines uppercase in Moderat 700 with positive letter-spacing — the label-print quality depends on the tracking
- Use `{colors.surface-teal}` (`{colors.surface-teal}`) as a flavor-accent secondary surface only — it's a supporting note, not an alternate primary

### Don't
- Don't use lowercase for display headlines — Jeni's display voice is all-caps at every scale
- Don't add intermediate border-radius values (4px, 8px, 12px) — the binary `0px` / pill system is the identity
- Don't introduce a second typeface for editorial moments — Moderat's weight range handles everything
- Don't use pure white as the page background — always the warm off-white `{colors.background}`
- Don't demote orange to a decorative role — it's the single active-state signal across the entire system
- Don't apply pill radius to commerce buttons — pills belong to loyalty, not shopping
- Don't use drop shadows on section bands or product imagery — the system is essentially flat; shadows are reserved for modals
- Don't tighten letter-spacing on uppercase display type — the 0.42–0.52px positive tracking is load-bearing for legibility at large scale
- Don't introduce a third accent color alongside orange and teal — `{colors.surface-teal}` is already the limit of chromatic complexity
- Don't use Inter for editorial content — Inter is a third-party widget fallback only; Moderat owns all brand-controlled type moments

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single-column, hero stacks text over product image |
| Mobile | 400–640px | Single-column, hero at full-bleed, 2-up product grid |
| Tablet | 640–1024px | 2–3 column product grid, horizontal nav, 42px display |
| Desktop | 1024–1280px | Full multi-column, 52px hero display, horizontal nav |
| Large Desktop | ≥1280px | Max container, 1280px bound, full section padding |

### Touch Targets
- Pill buttons ("Join now"): 48px min tap height, 24px horizontal padding
- Nav links: 44px tap zone — Jeni's nav items have generous vertical padding
- Product card: entire card is the tap target — no nested competing zones
- Cart icon: 44px circular tap area

### Collapsing Strategy
- **Nav**: Horizontal nav bar collapses to hamburger below 768px; full-screen overlay on warm canvas
- **Hero**: Two-column (text + pints) stacks to single column on mobile; product photography moves below promotional text
- **Product grid**: 4-column → 2-column → 1-column; product card structure held constant
- **Display type**: 52px hero → 34–42px on tablet → 28–34px on mobile; weight 700 and all-caps maintained throughout
- **Spacing**: Section vertical padding compresses 80px → 50px → 30px; inner card padding stays tight (7–10px) at all sizes

### Image Behavior
- Product pint photography fills the hero panel fluidly — the stacked-pints composition adapts to viewport
- Product card imagery is square-cropped, full-width within card, `0px` radius maintained at all breakpoints
- No art direction swap — warm photography palette is consistent across viewport sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent / CTA: `{colors.primary}`
- CTA hover: `{colors.primary-hover}`
- Secondary surface: `{colors.surface-teal}`
- Border: `{colors.border}`
- White card: `{colors.surface}`

### Example Component Prompts

- "Build a hero section on warm off-white (`{colors.background}`). Left column: headline in Moderat 700 52px uppercase, letter-spacing 0.52px, line-height 1.0, color `{colors.ink}`. Subhead in Moderat 500 19px, 0.6px tracking. CTA: solid signal orange (`{colors.primary}`) rectangular button, 0px radius, Moderat 900 16px uppercase 1.28px tracking, white text, padding 11px 50px."
- "Design a product card on warm off-white canvas. Product image full-width, 0px radius. Below: flavor name in Moderat 700 22px uppercase, letter-spacing 0.22px, color `{colors.ink}`. Price line in Moderat 500 16px. Add-to-cart as white button with 2px solid `{colors.primary}` border, orange text, 0px radius."
- "Create a loyalty/rewards CTA: pill button (`9999px` radius), signal orange fill (`{colors.primary}`), white text in Moderat 900 16px uppercase 1.28px tracking, padding 14px 24px. Label: 'Join now'. Below, small caption in Moderat 500 13px: 'Current rewards members: Sign in'."
- "Build a promo announcement strip — full-bleed, warm off-white background (`{colors.background}`), center-aligned text in Moderat 700 15px uppercase, color `{colors.ink}`. Keep minimal vertical padding (8–10px). Example: 'Your dad deserves ice cream. Order now for delivery by Father's Day!'"
- "Design a flavor badge: signal orange pill (`{rounded.pill}` = `9999px`), white text, Moderat 500 13px, padding 4px 10px. Use for 'New' and 'Best Seller' overlays on product cards."

### Iteration Guide

1. Start with warm off-white `{colors.background}` canvas and warm near-black `{colors.ink}` text — this pair sets the artisan food register before any accent enters
2. Orange `{colors.primary}` is the one active-state color — every interactive moment (hover, focus, CTA, active tab) resolves to orange
3. Display type is always uppercase, Moderat 700, with positive letter-spacing — the label-print character requires both conditions
4. CTAs default to `{rounded.none}` (rectangular) for commerce; switch to `{rounded.pill}` only for loyalty/membership elements
5. Button hierarchy: solid orange fill (primary) > white fill + orange border (secondary) > pill orange (loyalty)
6. Shadows are structural, not decorative — use only for modals and elevated overlays; all flat UI has no shadow
7. Teal accent (`{colors.surface-teal}`) is a single supporting note — one use per screen maximum; never competes with orange

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Jeni's. Brand names and trademarks belong to their respective owners.