Derek Rose | Luxury Pyjamas, Loungewear & Leisurewear

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/derek-rose.com -->
<!-- Extracted: 2026-08-26T08:01:47.010Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Derek Rose | Luxury Pyjamas, Loungewear & Leisurewear"
description: "Derek Rose embodies a refined, heritage-inspired luxury that prioritizes tactile comfort and understated elegance. The brand voice is sophisticated yet accessible, blending formal precision with a casual focus on how clothing feels rather than just how it looks."
colors:
  primary: "#e1261c"
  surface: "#ffffff"
  on-surface: "#252525"
  border: "#e9e9eb"
  link: "#252525"
typography:
  display-lg:
    fontFamily: "Jost"
    fontSize: "32px"
    fontWeight: "700"
    lineHeight: "55.4666px"
  headline-md:
    fontFamily: "Jost"
    fontSize: "22px"
    fontWeight: "400"
    lineHeight: "32px"
    letterSpacing: "1.52px"
  body-md:
    fontFamily: "Jost"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "27.7333px"
rounded:
  sm: "50px"
  lg: "100px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#e1261c"
    textColor: "#ffffff"
    rounded: "50px"
    padding: "9px 20px 8px"
    fontSize: "13px"
    fontWeight: "400"
    borderColor: "#e1261c"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#252525"
    rounded: "0px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#252525"
---

# Derek Rose | Luxury Pyjamas, Loungewear & Leisurewear — Design System

## Overview

The Derek Rose digital interface embodies a refined, heritage-inspired luxury that prioritizes tactile comfort and understated elegance. The design atmosphere is sophisticated yet accessible, blending formal precision with a casual focus on how clothing feels rather than just how it looks. Rooted in the archetypes of The Ruler and The Caregiver, the visual language conveys stability, care, and timeless quality. Comparable to the quiet confidence of The Row and the heritage prestige of Brooks Brothers, the UI avoids loud trends in favor of enduring clarity. The emotional register is calm and composed, inviting users into a space of leisure and refined self-care. Every element serves to highlight the product's texture and fit, mirroring the brand's commitment to sensory experience. The design is not trendy, nor is it overly ornate. It rejects the noise of fast fashion and the stark minimalism of pure tech startups. Instead, it offers a warm, structured environment that feels like a high-end department store or a private club. The layout breathes with ample whitespace, allowing the rich imagery and detailed product descriptions to take center stage. Navigation is intuitive and unobtrusive, respecting the user's intelligence and desire for a seamless shopping journey. This approach ensures that the digital experience aligns perfectly with the physical pleasure of wearing Derek Rose garments.

**Key characteristics:**

- Vibe — heritage, luxury, minimalist, tactile, sophisticated, calm
- Archetypes — The Ruler, The Caregiver
- Comparable to — Brooks Brothers, Hermès, Saks Fifth Avenue, The Row
- Design era — classic-editorial
- Emotional tone — trustworthy-refined
- Target audience — Affluent consumers seeking high-quality, timeless loungewear and sleepwear who value craftsmanship, comfort, and understated luxury over trend-driven fashion.
- Visual energy — 3/10 (calm/understated)

## Colors

The color palette anchors the brand in heritage luxury through a restrained use of white space and a singular, powerful accent. The primary color, #e1261c, serves as a bold yet classic signal of quality, used sparingly for critical actions and brand markers to draw the eye without overwhelming the senses. The surface color, #ffffff, provides a clean, crisp backdrop that enhances the perception of purity and high-quality materials. This minimalist approach ensures that the focus remains on the tactile richness of the fabrics and the craftsmanship of the garments, reinforcing the brand's core values of elegance and comfort.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#e1261c` | Crimson |
| background | `#ffffff` | White |
| text | `#252525` | Near-Black |
| border | `#e9e9eb` | Lavender |
| link | `#252525` | Near-Black |

## Typography

The type system utilizes Jost and Gill Sans Nova to balance modern clarity with timeless sophistication. Jost provides a geometric, clean structure for body text and UI elements, ensuring readability and a contemporary feel. Gill Sans Nova, with its humanist qualities, adds warmth and approachability to headings and brand voice, bridging the gap between formal precision and casual comfort. The hierarchy is established through weight and scale rather than excessive styling, creating a calm, organized reading experience. This combination communicates reliability and refined taste, aligning with the brand's identity as a leader in luxury leisurewear.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Jost | body | self-hosted | 400 |
| Jost | heading | self-hosted | 400, 700 |
| Gill-Sans-Nova-Book | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Jost | 32px | 700 | 55.4666px | — |
| Heading 3 | Jost | 22px | 400 | 32px | 1.52px |
| Body | Jost | 16px | 400 | 27.7333px | — |

### Conventions

- Heading case — title-case
- Body line-height — 27.7333px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `sm` — 50px
- `lg` — 100px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#e1261c`
- Text — `#ffffff`
- Radius — `50px`
- Padding — `9px 20px 8px`
- Font size — `13px`
- Font weight — `400`
- Border — `1px solid #e1261c`
- Sample copy — "Login"

**Secondary**

- Background — `#ffffff`
- Text — `#252525`
- Radius — `0px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #252525`
- Sample copy — "Men's Tops
                  
Women's Tops"

## Do's and Don'ts

### Do

- Use Jost 400 for body copy with a line-height of 27.7333px and #252525 text color on #ffffff backgrounds.
- Use Jost 700 for headings in Title Case to maintain a structured, editorial hierarchy.
- Style primary CTA buttons with #e1261c background, #ffffff text, 50px border-radius (pill shape), and 9px vertical/20px horizontal padding.
- Style secondary navigation or filter buttons with transparent background, #252525 text, #252525 border, 0px border-radius (sharp corners), and 0px padding.
- Maintain a flat design aesthetic: strictly avoid box-shadows and gradients to preserve a clean, minimalist look.
- Use Gill-Sans-Nova-Book for specific body text elements where a more traditional serif feel is required, keeping weights at 400.
- Adhere to a strict color palette: Primary Red (#e1261c) for accents and primary actions, White (#ffffff) for backgrounds, and Dark Grey (#252525) for text.
- Keep copy concise and matter-of-fact, avoiding exclamations and emojis to sustain a formal yet accessible tone.

### Don't

- Do not use box-shadows or drop-shadows on any elements, including cards or buttons.
- Do not use gradients or background images with opacity overlays; maintain solid, flat colors.
- Do not use sentence case for headings; the brand strictly uses Title Case.
- Do not use emoji or exclamation marks in any copy, preserving a serious and refined voice.
- Do not apply border-radius to secondary buttons or navigation elements; keep them sharp (0px).
- Do not use bright or neon colors outside the primary red (#e1261c); stick to the neutral #252525 and #ffffff base.
- Do not use decorative fonts or heavy weights (e.g., Jost 900) for body text; maintain readability with 400 weights.
- Do not use excessive whitespace padding on secondary buttons; the brand uses 0px padding for a sleek, integrated look.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 4/10 | enthusiastic |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — none
- CTA style — direct action verbs and category labels
- Rhetorical devices — contrast, parallelism

### Sample copy

> we create clothing for how life feels, not just how it looks

> beautifully made pyjamas, sleepwear, loungewear and leisurewear

> Derek Rose London

> Free Shipping Over $300.00 USD

> Start shopping

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/derek-rose.com/logo-0.png) | 95% |

## Sources

- Official brand guidelines — https://brandfetch.com/derek-rose.com
- Live brand page — https://extractvibe.com/brand/derek-rose.com
- Raw JSON — https://extractvibe.com/api/brand/derek-rose.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/derek-rose.com/design.md
- Extracted — 2026-08-26T08:01:47.010Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md