# Jones Road · Design system migration spec

> Source: https://www.jonesroadbeauty.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Jones Road operates as a curated gallery of high-end, minimalist beauty essentials. Its design language is built on the principle of effortless versatility, where every element serves a clear purpose. The result is a skin-first, modern luxury aesthetic that feels both confident and deliberately restrained.

**One-liner:** A premium, minimalist beauty brand focusing on effortless, skin-first makeup essentials with a clean, editorial aesthetic.
**Keywords:** effortless · versatile · skin-first · modern luxury
**Analogy:** A curated gallery of high-end, minimalist beauty essentials.

## 2. Color

The palette is defined by a stark, high-contrast monochrome base of black and white. A single, vibrant magenta accent is reserved exclusively for interactive highlights and badges, creating a precise visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F2EC` | card background |
| `--bg-quiet` | `#E0DED8` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#898989` | placeholder |
| `--accent` | `#FF2E92` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

This strict, two-tone-plus-one approach ensures visual cohesion and lets the product imagery remain the focal point.

## 3. Typography

The typographic voice is one of elegant contrast. An transitional-serif provides high-impact headlines, while a clean grotesque-sans handles body text and interface elements, with a bold, wide grotesque-sans reserved for brand logos and strong calls-to-action.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | -0.5px | Hero and section headlines |
| body | 16px | 1.5 | 400 | 0.4px | General body text |
| label | 14px | 1.5 | 700 | 1px | Navigation and category labels |

**Type rules:**
- 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.

## 4. Spacing

Generous padding and whitespace establish a premium, breathable rhythm throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding and whitespace create a premium, breathable layout.

## 5. Surfaces

Surfaces are treated with a philosophy of minimal intervention. Depth is suggested sparingly through subtle, rgba-based shadows, while separation is achieved with thin, 1px solid borders in black or magenta.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Shadows:**
  - 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.

## 6. Layout

The foundational skeleton is built on full-width photographic hero sections with centered content. These transition into structured, multi-column product grids, allowing imagery and whitespace to dictate the visual flow.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is understated and consistent, prioritizing a sense of effortless luxury. All transitions follow a smooth, 0.3s to 0.6s timing with custom easing, primarily using fade-ins and opacity-based hover states.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.39, 0.575, 0.565, 1)`
- **Patterns:**
  - Smooth fade-in transitions for content loading.
  - Opacity-based hover states for interactive elements.

- **Hover:** Subtle opacity reduction or color change on buttons and links.
- **Click:** Immediate visual feedback through color change or subtle scale.
- **Transition:** All transitions follow a consistent 0.3s to 0.6s timing with custom easing.
- **Keyboard:** Standard focus states are maintained for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, sophisticated, and direct. It favors elegant serif headlines that emphasize simplicity and quality, paired with bold, uppercase, action-oriented calls-to-action.

- **Tone:** Confident, sophisticated, and direct.
- **Headline style:** Elegant serif headlines that emphasize simplicity and quality.
- **CTA style:** Bold, uppercase, and action-oriented with wide letter-spacing.
- **Avoid:** Cluttered layouts / Overly decorative elements / Neon or high-saturation palettes

### Don'ts
- ❌ 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.

The system deliberately avoids cluttered layouts, decorative elements, and high-saturation palettes to maintain its clean, editorial aesthetic.

## System Prompt (paste into AI tool)

```
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.
```
