---
name: Jones Road
description: "This site is a masterclass in restrained, premium beauty branding, using a minimal color palette and elegant typography to let the product photography take center stage."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#FF2E92"
  neutral: "#898989"
  bg-soft: "#F5F2EC"
  bg-quiet: "#E0DED8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.4px"
  label:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 700
    letterSpacing: "1px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

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

---

## Overview

A premium, minimalist beauty brand focusing on effortless, skin-first makeup essentials with a clean, editorial aesthetic.

*A curated gallery of high-end, minimalist beauty essentials.*

## Colors

High-contrast monochrome base with a single, vibrant magenta accent for interactive highlights and badges.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#FF2E92`)** — uses `accent` token
- **Muted (`#898989`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** grotesque-sans
- **Mono:** monospaced-sans

- Use transitional-serif for elegant, high-contrast headlines.
- Use a clean grotesque-sans for body text and primary interface elements.
- Use a bold, wide grotesque-sans for brand logos and strong call-to-actions.
- Apply uppercase and wide letter-spacing to labels and buttons.

## Layout

Full-width hero sections with centered content, transitioning into structured multi-column product grids.

*Rhythm:* Generous padding and whitespace create a premium, breathable layout.

## Elevation & Depth

- rgba(0,0,0,0.25) 0px 5.78px 5.78px 0px
- Borders: Minimal, using thin 1px solid black or magenta lines for separation and highlights.

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Black background with white uppercase text, sharp corners, and wide letter-spacing. Magenta variant for secondary actions.
- **card:** Clean white backgrounds with minimal borders, focusing on high-quality product photography.
- **chip:** Uppercase text labels with a thin bottom border, switching to magenta for the active state.
- **input:** Simple line-style inputs with black borders, maintaining the minimal aesthetic.
- **hero:** Large-scale photographic hero with serif headline, sans-serif description, and a prominent black CTA button.

## Do's and Don'ts

**Don't:**
- don't use rounded corners on primary buttons — screenshot shows sharp, rectangular button shapes.
- don't add drop shadows to product cards — screenshot shows flat, borderless cards.
- don't use multiple accent colors — screenshot shows only a single magenta accent.
- don't use script or handwritten fonts — screenshot shows only serif and sans-serif categories.
- don't use heavy background patterns — screenshot shows clean white or off-white backgrounds.
- don't use small, cramped spacing — screenshot shows generous padding and whitespace.

---

## System Prompt (paste into AI agent)

```
This design is for a premium, minimalist beauty brand positioned as 'effortless, versatile, and skin-first'. The palette is strictly monochrome (black #000000 on white #FFFFFF) with a single vibrant magenta (#FF2E92) accent. Typography pairs an elegant transitional-serif for headlines with clean grotesque-sans for body text. Avoid adding rounded corners to buttons, using multiple accent colors, or adding drop shadows to product cards. The layout prioritizes generous whitespace and high-quality photography over complex decorative elements. Use uppercase, wide-spaced labels for navigation and interactive elements to maintain the sophisticated, editorial feel.
```