Penhaligon's

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/penhaligons.com -->
<!-- Extracted: 2026-10-19T20:55:30.451Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Penhaligon's"
description: "Homepage | Penhaligon's US presents a professional web presence."
colors:
  primary: "#20201f"
  secondary: "#6c757d"
  tertiary: "#4f60ff"
  neutral: "#606c76"
  surface: "#ffffff"
  on-surface: "#20201f"
  on-surface-secondary: "#606c76"
  border: "#f7f6f4"
  link: "#0d6efd"
  error: "#dc3545"
  warning: "#ffc107"
  success: "#198754"
  info: "#0dcaf0"
  primary-dark: "#96927e"
  surface-dark: "#000000"
  on-surface-dark: "#495057"
typography:
  display-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "38px"
    fontWeight: "400"
    lineHeight: "39.9988px"
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "30px"
    fontWeight: "600"
    lineHeight: "36px"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "17px"
    fontWeight: "700"
    lineHeight: "21.0001px"
  body-md:
    fontFamily: "Montserrat"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "2px"
  md: "5px"
  lg: "6px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#efefef"
    textColor: "#000000"
    rounded: "0px 0px 5px 5px"
    padding: "16px 32px"
    fontSize: "16px"
    fontWeight: "700"
    borderColor: "#000000"
  button-outline:
    textColor: "#20201f"
    rounded: "0px"
    padding: "0px"
    fontSize: "13px"
    fontWeight: "500"
    borderColor: "#20201f"
    borderWidth: "0px 0px 1px"
---

# Penhaligon's — Design System

## Overview

Homepage | Penhaligon's US presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 71 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#20201f` | Near-Black |
| secondary | `#6c757d` | Slate Gray |
| accent / tertiary | `#4f60ff` | Royal Blue |
| background | `#ffffff` | White |
| text | `#20201f` | Near-Black |
| secondary text | `#606c76` | Dim Gray |
| border | `#f7f6f4` | White Smoke |
| link | `#0d6efd` | Dodger Blue |
| muted | `#606c76` | Dim Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#96927e` | Gray |
| background | `#000000` | Black |
| text | `#495057` | Dark Gray |
| border | `#474747` | Dark Slate Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#198754` | Confirmations, positive states |
| warning | `#ffc107` | Caution, intermediate states |
| error | `#dc3545` | Failures, destructive actions |
| info | `#0dcaf0` | Neutral information, tips |

## Typography

Type is set in Montserrat, Cormorant Garamond, Cormorant Garamond, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Montserrat | body | self-hosted | 400, 500, 600, 700 |
| Cormorant Garamond | heading | self-hosted | 400, 600, 700 |
| Cormorant Garamond | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Cormorant Garamond | 38px | 400 | 39.9988px | — |
| Heading 2 | Cormorant Garamond | 30px | 600 | 36px | — |
| Heading 3 | Cormorant Garamond | 17px | 700 | 21.0001px | — |
| Body | Montserrat | 16px | 400 | 24px | — |

### Conventions

- Heading case — uppercase
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0))`

## Shapes

Border-radius scale:

- `sm` — 2px
- `md` — 5px
- `lg` — 6px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#efefef`
- Text — `#000000`
- Radius — `0px 0px 5px 5px`
- Padding — `16px 32px`
- Font size — `16px`
- Font weight — `700`
- Border — ` solid #000000`
- Sample copy — "Skip to Main Content"

**Outline**

- Text — `#20201f`
- Radius — `0px`
- Padding — `0px`
- Font size — `13px`
- Font weight — `500`
- Border — `0px 0px 1px solid #20201f`
- Sample copy — "United States  EN"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/penhaligons.com) | 100% |
| favicon | — | svg | [link](brands/penhaligons.com/logo-0.svg) | 95% |
| favicon | — | png | [link](brands/penhaligons.com/logo-1.png) | 95% |
| primary | — | svg | [link](brands/penhaligons.com/logo-2.svg) | 85% |
| secondary | — | svg | [link](brands/penhaligons.com/logo-3.svg) | 85% |

## Sources

- Official brand guidelines — https://penhaligons.com/brand
- Live brand page — https://extractvibe.com/brand/penhaligons.com
- Raw JSON — https://extractvibe.com/api/brand/penhaligons.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/penhaligons.com/design.md
- Extracted — 2026-10-19T20:55:30.451Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

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