---
version: alpha
name: Lobb Padel
description: High-energy padel club brand — Henrietta serif headlines over Plakatgrotesk grotesque body, an electric cobalt blue on a warm cream "off-white" canvas, tiny 3px radii and pill buttons, playful sports-event energy with countdowns, mascots and scarcity messaging.

colors:
  # Canvas + ink
  background: "#fffef0"      # --off-white, warm cream canvas
  surface: "#ffffff"
  surface-soft: "#fafafa"
  ink: "#0e0e0e"             # --off-black
  ink-pure: "#000000"

  # Brand accent
  primary: "#1952c7"         # --blue, electric cobalt
  primary-bright: "#3898ec"  # lighter Webflow blue, links/illustration
  primary-deep: "#0082f3"

  # Support / state
  success: "#18ad3a"
  danger: "#ea384c"
  warn: "#ff4c24"
  highlight: "#ffff00"

  # On-color
  on-primary: "#fffef0"
  on-ink: "#fffef0"

  # Neutral scale
  gray-900: "#201d1d"
  gray-700: "#333333"
  gray-500: "#646464"
  gray-400: "#999999"
  gray-300: "#cccccc"
  gray-200: "#e6e6e6"
  gray-100: "#efeeec"
  gray-50: "#f5f5f5"

  # Tints
  blush: "#ffdede"
  border-soft: "#dddddd"

typography:
  display-hero:
    fontFamily: "Henrietta, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  section-heading:
    fontFamily: "Henrietta, Georgia, serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Henrietta, Georgia, serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.25px
  eyebrow:
    fontFamily: "Plakatgrotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.30
    letterSpacing: 0.5px
  body-large:
    fontFamily: "Plakatgrotesk, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Plakatgrotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-light:
    fontFamily: "Plakatgrotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "Plakatgrotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.25px
  caption:
    fontFamily: "Plakatgrotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.25px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 10px

  badge-scarcity:
    backgroundColor: "{colors.danger}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    padding: 24px
    borderColor: "{colors.border-soft}"

  card-feature:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 10px 14px
    borderColor: "{colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px

  countdown-tile:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Lobb Padel Design System

## Overview

Lobb Padel is a padel club brand built to feel like an event, not a website. The system pairs **Henrietta**, a contemporary high-contrast serif, with **Plakatgrotesk**, a bold grotesque sans, and sets both against a warm cream canvas (`{colors.background}`, the brand's literal `--off-white`) rather than sterile white. The result is editorial and sporty at once: serif headlines carry personality and warmth while the grotesque body keeps copy punchy and legible. Color does the heavy lifting through a single electric cobalt blue (`{colors.primary}`) that the brand calls its "blue carpet."

The personality is unapologetically playful and high-energy. The marketing leans on mascot illustrations, countdown timers, scarcity messaging ("limited spots"), and testimonial carousels — the visual language of a launch party. Against the calm cream background, the saturated blue reads as a spotlight, and supporting states (red for scarcity, green for success) flash in only when they need attention.

Geometry is tight and friendly. The signature radius is a barely-there **3px** (`{rounded.xs}`) on cards and inputs, which keeps surfaces crisp, while primary actions go fully **pill-shaped** (`{rounded.pill}`) to read as buttons you want to tap. Type weights swing wide — 300 for airy body passages, 700 for grotesque labels and serif headlines — giving the page a dynamic, almost poster-like contrast.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of white — the brand's `--off-white`
- Henrietta serif headlines over Plakatgrotesk grotesque body — editorial meets sporty
- One electric cobalt accent (`{colors.primary}`) used as a "blue carpet" spotlight
- Near-flat 3px (`{rounded.xs}`) radius on cards/inputs, full pill on buttons
- Wide weight range: 300 airy body to 700 poster-weight labels and heads
- Event energy — countdowns, scarcity badges, mascots, testimonials
- Off-black ink (`{colors.ink}`) rather than pure black for warmth

## Colors

### Primary
- **Off-Black** (`{colors.ink}`): Headlines, body text, dark CTAs. The brand's `--off-black`, softer than pure black.
- **Off-White / Cream** (`{colors.background}`): The page canvas. The brand's `--off-white`, warm not sterile.
- **Cobalt Blue** (`{colors.primary}`): The "blue carpet" accent — primary buttons, links, illustration fills, feature cards.

### Accent & Bright
- **Bright Blue** (`{colors.primary-bright}`): Lighter blue for links and illustrated elements.
- **Deep Blue** (`{colors.primary-deep}`): Hover/active state on blue actions.

### State
- **Success Green** (`{colors.success}`): Confirmation, availability.
- **Scarcity Red** (`{colors.danger}`): "Few spots left" badges, urgency.
- **Warn Orange** (`{colors.warn}`): Alerts, highlights.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deep neutral text.
- **Gray 700** (`{colors.gray-700}`): Secondary text.
- **Gray 500** (`{colors.gray-500}`): Tertiary / muted copy.
- **Gray 400** (`{colors.gray-400}`): Placeholder, disabled.
- **Gray 300–100** (`{colors.gray-300}` → `{colors.gray-100}`): Dividers, borders, subtle surfaces.

### Tints
- **Blush** (`{colors.blush}`): Soft pink tint for accents.
- **Border Soft** (`{colors.border-soft}`): Default card/input outline.

## Typography

### Font Family
- **Display / Headings**: `Henrietta`, with fallbacks `Georgia, serif` — a contemporary high-contrast serif.
- **Body / UI**: `Plakatgrotesk`, with fallbacks `Arial, sans-serif` — a bold grotesque sans.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Serif hero headline — event-poster impact |
| `section-heading` | Section titles in Henrietta serif |
| `card-title` | Card and feature headings |
| `eyebrow` | Grotesque uppercase-ish kicker labels |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-light` | Airy 300-weight passages |
| `button-ui` | Buttons and nav links — 700 grotesque |
| `caption` | Badges, metadata, captions |

### Principles
- **Serif heads, grotesque body**: Henrietta gives warmth and character; Plakatgrotesk keeps UI and copy punchy.
- **Wide weight swing**: 300 for atmospheric body, 700 for poster-weight labels and headlines — contrast is the rhythm.
- **Warm ink**: Text uses `{colors.ink}` (off-black) on cream, never pure black on pure white.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Roughly 8px-based, opening up to generous `{spacing.3xl}`–`{spacing.4xl}` gaps between event sections.

### Grid & Container
- Centered single-column hero with oversized serif headline and a pill CTA
- Feature/testimonial sections in 2–3 column grids
- Cream canvas throughout; feature cards flip to full cobalt blue for emphasis

### Whitespace Philosophy
- **Warm, generous emptiness**: The cream canvas does a lot of the work — sections breathe so the blue accents pop.
- **Event rhythm**: Countdown, scarcity, and testimonial blocks alternate to keep momentum.
- **Spotlight color**: Color is reserved (one blue, occasional red/green) so it always means something.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections |
| `micro` | 2px | Tiny chips |
| `xs` | 3px | Signature radius — cards, inputs, badges |
| `sm` | 4px | Small containers |
| `md` | 8px | Feature cards, countdown tiles |
| `lg` | 12px | Larger panels |
| `pill` | 9999px | Primary/secondary buttons, avatars, icon buttons |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Cobalt blue, cream text, full pill. The main CTA.
- **`button-secondary`** — Cream surface, off-black outline + text, full pill.
- **`button-dark`** — Off-black fill, cream text, full pill — high-contrast alt CTA.

### Pills & Badges
- **`badge`** — Cobalt blue chip, cream text, 3px radius.
- **`badge-scarcity`** — Red urgency chip for "limited spots" messaging.

### Cards
- **`card`** — White surface, soft border, signature 3px radius.
- **`card-feature`** — Full cobalt blue card with cream text for hero moments.

### Inputs
- **`input`** — White surface, soft border, 3px radius. Focus switches the border to cobalt blue.

### Navigation
- **`nav-bar`** — Cream header, off-black grotesque links, blue pill CTA right.

### Distinctive Components
- **Countdown tile** (`countdown-tile`) — Off-black tiles with large serif digits counting down to events.
- **Mascot illustrations** — Blue-fill illustrated characters carrying brand personality.
- **Testimonial carousel** — Social-proof slider with avatar circles.

## Do's and Don'ts

### Do
- Pair Henrietta serif headlines with Plakatgrotesk grotesque body
- Set everything on the warm cream canvas (`{colors.background}`), not white
- Reserve cobalt blue (`{colors.primary}`) as a spotlight accent
- Use full pill radius on buttons, 3px (`{rounded.xs}`) on cards/inputs
- Use off-black (`{colors.ink}`) for text, never pure black
- Let red/green appear only for scarcity/success states

### Don't
- Don't swap the cream canvas for sterile white — warmth is the brand
- Don't use serif for body copy or grotesque for hero headlines
- Don't scatter blue decoratively — it should always mark an action or accent
- Don't round buttons to a soft rectangle — they're full pills
- Don't introduce a second loud accent color alongside the cobalt blue

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <480px | Single column, stacked CTAs, hamburger nav |
| Tablet | 480–991px | 2-column feature/testimonial grids |
| Desktop | 992–1280px | Full multi-column layout |
| Large | >1280px | Centered, generous cream margins |

### Touch Targets
- Pill buttons use comfortable 12px/24px padding
- Nav links at 14px grotesque with adequate spacing
- Countdown tiles scale digits down on mobile

### Collapsing Strategy
- Hero serif headline scales down, keeps tight tracking
- Nav collapses to hamburger
- Feature grids 3-col → 2-col → single column
- Testimonial carousel maintains one card per view on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Cream `{colors.background}`
- Heading/body text: Off-black `{colors.ink}`
- Primary CTA: Cobalt blue `{colors.primary}`, cream text, full pill
- Accent/links: Cobalt blue `{colors.primary}`
- Scarcity badge: Red `{colors.danger}`

### Example Component Prompts
- "Hero on cream `{colors.background}`. Serif headline in Henrietta 40px weight 700, off-black `{colors.ink}`, tight -1px tracking. Subhead in Plakatgrotesk 18px weight 400. Cobalt blue pill CTA (`{colors.primary}`, cream text, 9999px radius, 12px 24px)."
- "Feature card: full cobalt blue (`{colors.primary}`) background, cream text, 8px radius, 32px padding, Henrietta title."
- "Countdown block: off-black tiles (`{colors.ink}`), large Henrietta serif digits in cream, 8px radius."

### Iteration Guide
1. Cream canvas first — never white
2. Henrietta serif for heads, Plakatgrotesk grotesque for everything else
3. One blue accent, used as a spotlight
4. Pills for buttons, 3px for cards/inputs
5. Red/green only for scarcity/success

---

## 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 Lobb Padel. Brand names and trademarks belong to their respective owners.