---
title: "Loeffler Randall design system"
variant: extended
source: https://loefflerrandall.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/loeffler-randall-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Loeffler Randall · Design System

> Warm editorial calm, grounded in considered craftsmanship.

**Theme:** light · **Industry:** fashion · **Source:** https://loefflerrandall.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Loeffler Randall’s homepage pairs warm, restrained typography with full-bleed fashion photography and spacious product-led sections. An ivory canvas and deep brown text keep the experience quiet while image compositions provide the seasonal color and drama.

## North star

Let the seasonal fashion photography carry the drama; keep the surrounding interface warm, quiet, editorial, and spacious.

## Overview

The visual system is built around an ivory canvas (#fdfcfa), deep brown text and links (#4f1f00), and a black-backed opening campaign section (#000000). Keep the interface’s own color restrained; richer browns, creams, and other tones belong primarily to the seasonal photography rather than the UI palette. Louize supplies the elegant, regular-weight serif for campaign and section headings, while Centra handles navigation, body copy, captions, and compact uppercase actions. The hero pairs two adjacent fashion photographs with centered white campaign copy, making imagery the dominant element. Below it, editorial category images form an irregular four-item arrangement, followed by balanced two-column product features and a centered customer-style portrait and quote. Generous section breathing room offsets the dense photographic content. Components remain mostly flat and square-edged, with subtle warm fills on selected cards and buttons rather than shadows or decorative borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fdfcfa` | `--color-gallery-ivory` | brand | Main page canvas, light section backgrounds, and restrained hairline or border treatment. |
| Roasted Umber | `#4f1f00` | `--color-roasted-umber` | brand | Primary text, headings, navigation, footer links, and understated action labels. |
| Campaign Black | `#000000` | `--color-campaign-black` | surface | Measured dark section surface and inverse campaign backing; hero imagery supplies most visible dark tones. |

### Semantic aliases

`--color-canvas` → `#fdfcfa` (Gallery Ivory) · `--color-surface` → `#000000` (Campaign Black) · `--color-text` → `#4f1f00` (Roasted Umber) · `--color-text-muted` → `#fdfcfa` (Gallery Ivory) · `--color-border` → `#fdfcfa` (Gallery Ivory) · `--color-accent` → `#4f1f00` (Roasted Umber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#4f1f00` | `#fdfcfa` | 13.4:1 | AAA |
| `#4f1f00` | `#000000` | 1.53:1 | fail |
| `#fdfcfa` | `#000000` | 20.48:1 | AAA |
| `#4f1f00` | `#fdfcfa` | 13.4:1 | AAA |
| `#4f1f00` | `#000000` | 1.53:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Centra | `--font-body` | webfont | 400, 500 | Navigation, body copy, captions, links, buttons, and utility labels. | Montserrat |
| Louize | `--font-display` | webfont | 400 | Display and section headings, including the opening campaign title. | Cormorant Garamond |

- **Centra:** Mostly regular weight; compact actions use medium weight, uppercase styling, and wide tracking.
- **Louize:** Regular-weight editorial serif; use natural case and relaxed leading for prominent headings.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 84px | 400 | 1.5 | 0 | — | Louize | Oversized campaign title over the opening hero photography. |
| h1 | 30px | 400 | 1.5 | 0 | — | Louize | Primary page or campaign heading. |
| h2 | 26px | 400 | 1.38 | 0 | — | Louize | Centered section titles such as Featured Items. |
| h3 | 25.5px | 400 | 1.38 | 0 | — | Louize | Subsection headings and editorial feature titles. |
| h4 | 22px | 400 | 1.36 | 0 | — | Louize | Smaller editorial headings within content blocks. |
| body | 14px | 400 | 1.86 | 0.014em | — | Centra | Product descriptions, newsletter copy, and supporting text. |
| caption | 13px | 400 | 1.73 | 0 | — | Centra | Category names and short image-adjacent labels. |
| button | 12px | 500 | 1 | 0.1em | uppercase | Centra | Compact uppercase calls to action such as SHOP HER PICKS. |
| nav | 13px | 400 | 1.73 | 0 | — | Centra | Primary navigation and utility navigation labels. |
| link | 12px | 500 | 1 | 0.1em | — | Centra | Short text actions such as SHOP NOW. |
| eyebrow | 9px | 500 | 2.5 | 0.16em | uppercase | Centra | Small uppercase section or content identifiers. |

OpenType features in use: `"lnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 11, 14, 15, 18, 20, 21, 23, 26, 30, 32, 45, 54, 60 px.
- Section rhythm 45px · element gap 5px · card padding 16px · max content width 1395px.

A slim full-width utility header sits above a two-image campaign hero. Below, the page alternates centered section headings with an irregular four-category image arrangement, a balanced two-column feature row, and a centered portrait-and-quote feature. The footer resolves into four columns. Content uses a measured maximum width of 1395px and comfortable density; the measured section gap is 45px. Preserve substantial vertical breathing room and let image widths and asymmetry create editorial rhythm rather than adding extra UI framing.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The page is predominantly flat, with no measured shadows or gradients. Use square-edged controls and image cards; rely on photography, white space, and occasional overlap in the category layout for depth. Warm off-white card fills can distinguish product labels or actions without adding visible elevation.

## Imagery

Use high-quality fashion and product photography as the main visual content: seasonal looks, footwear, knitwear, and accessories. The opening hero juxtaposes a model portrait with a close product-fashion scene; later category cards use varied portrait and product crops. Keep images natural and tactile, with warm real-world light and minimal graphic treatment. No illustration or 3D-rendered imagery defines the visual identity.

## Components

### Editorial campaign hero

Two adjacent fashion photographs anchor the first section, with a large centered Louize title, supporting copy, and a small explore action over the imagery.

### Primary navigation

A narrow ivory header places SHOP, EXPLORE, and BRIDAL at left, the spaced brand wordmark centrally, and help, account, wishlist, region, bag, and search utilities at right.

### Category image cards

Four editorial category links use uneven image sizing and staggered placement; each receives a simple Centra label beneath or beside its image.

### Two-column feature cards

Paired wide product images sit above concise serif titles, compact supporting copy, and understated SHOP NOW links.

### Quote and customer portrait

A centered portrait is followed by a short fashion quote, handwritten-style attribution in the image content, and a warm-filled SHOP HER PICKS button.

### Newsletter and footer

A four-column footer combines a signup form and compact About, Customer Service, and Contact link lists, with small utility links along the bottom.

### Measured component styles

- **Primary button** (“SHOP HER PICKS”): background #f3efe7 · text #4f1f00 · radius 0px · padding 21px 54px · 500 12px Centra · uppercase
- **Link** (“Knitwear”): transparent background · text #4f1f00 · radius 0px · padding 0px · 400 15px Centra
- **Input**: transparent background · text #4f1f00 · radius 0px · padding 11.2px 42px 11.2px 0px · 400 13.995px Centra
- **Card** (“Knitwear”): background #fbf8f4 · text #4f1f00 · radius 0px · padding 31.5px 0px · 400 15px Centra
- **Navigation item** (“SHOP EXPLORE BRIDAL HELP SIGN IN WISHLIS”): transparent background · text #4f1f00 · radius 0px · padding 0px · 400 15px Centra

## Do

- Use #fdfcfa as the quiet default canvas.
- Set interface text and links in #4f1f00.
- Reserve #000000 for dark campaign surfaces where appropriate.
- Let large, tactile fashion photographs lead each section.
- Use Louize for editorial headings and Centra for interface copy.
- Keep controls flat, square-edged, and visually understated.
- Preserve generous gaps between distinct editorial sections.

## Don't

- Do not introduce extra brand colors beyond the measured palette.
- Do not add shadows, gradients, or rounded card treatments.
- Do not crowd the hero with navigation-like overlays.
- Do not use heavy all-caps styling for every text role.
- Do not make the layout feel like a dense product catalog.
- Do not treat colors inside campaign photography as interface colors.

## Agent prompt

Build a new fashion-commerce page in Loeffler Randall’s warm editorial style. Use Gallery Ivory (#fdfcfa) as the canvas and Roasted Umber (#4f1f00) for interface text and links; use Campaign Black (#000000) only for an intentional dark campaign surface. Set prominent editorial headings in a Louize-like serif and navigation, descriptions, captions, and actions in a Centra-like sans serif. Lead with large, carefully cropped fashion photography, then alternate centered headings, asymmetrical image categories, and balanced product features. Keep the overall layout spacious, with square-edged flat components, restrained warm button fills, and minimal borders. Make calls to action compact and understated. Do not add decorative gradients, shadows, bright UI accents, or rounded cards; allow the photography to provide the seasonal palette and visual drama.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two adjacent campaign images fill the opening area, with centered white headline and supporting copy overlaid. | Explore action, Scroll cue | Split photography, Centered serif title, White overlay copy |
| 2 | category-nav | Centered section heading above four staggered category images and compact labels. | Category browsing, Image-linked destinations | Asymmetric image grid, Simple captions, Ivory canvas |
| 3 | product-showcase | Two equal-width image features with title, supporting line, and link beneath each. | Shop-now links, Paired product discovery | Two-column photography, Serif titles, Compact action labels |
| 4 | testimonials | Single centered portrait, quote, attribution, and action with broad surrounding whitespace. | Editorial endorsement, Shop-the-look action | Centered portrait, Serif quotation, Warm-filled CTA |
| 5 | footer | Four-column footer with newsletter signup and grouped brand, service, and contact links. | Email subscription, Grouped utility navigation | Compact multi-column layout, Text links, Minimal form styling |

## Source CSS custom properties (selected)

```css
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0;
--oke-starRating-spaceBelow: 0;
--oke-button-backgroundColor: #f3efe7;
--oke-button-backgroundColorHover: #4f1f00;
--oke-button-backgroundColorActive: #4f1f00;
--oke-button-textColor: #4f1f00;
--oke-button-textColorHover: #f3efe7;
--oke-button-textColorActive: #f3efe7;
--oke-button-borderColor: #f3efe7;
--oke-button-borderColorHover: #4f1f00;
--oke-button-borderColorActive: #4f1f00;
--oke-button-borderRadius: 0;
--oke-button-borderWidth: 1px;
--oke-button-fontWeight: 500;
--oke-button-fontSize: 12px;
--oke-button-fontFamily: inherit;
--oke-border-color: #ecded4;
--oke-border-width: 1px;
--oke-text-primaryColor: #4f1f00;
--oke-text-secondaryColor: #4f1f00;
--oke-text-small: 12px;
--oke-text-regular: 12px;
--oke-text-large: 20px;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: #f3efe7;
--oke-avatar-placeholderTextColor: #4f1f00;
--oke-highlightColor: #4f1f00;
--oke-shadingColor: #fbf8f4;
--oke-attributeBar-shadingColor: #4f1f00;
--oke-attributeBar-borderColor: undefined;
--oke-attributeBar-backgroundColor: #f3efe7;
--oke-attributeBar-markerColor: #4f1f00;
--oke-filter-backgroundColor: #fbf8f4;
--oke-filter-backgroundColorActive: #4f1f00;
--oke-filter-borderColor: #4f1f00;
--oke-filter-borderColorActive: #4f1f00;
--oke-filter-textColor: #4f1f00;
--oke-filter-textColorActive: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/loeffler-randall-com