# Leifproducts · Design system migration spec

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

> This site is worth including as a perfect example of using restrained typography and a strictly neutral palette to elevate rich, atmospheric photography.

## 1. Identity DNA

Leif Products operates like a curated botanical journal pinned to a coastal wall—its identity is defined not by decoration, but by restraint. The system establishes a calm, sophisticated presence through expansive photography and a disciplined neutral palette, allowing the natural world within the frame to set the tone.

**One-liner:** A refined Australian botanical brand using expansive photography and restrained typography to evoke a calm, natural luxury.
**Keywords:** minimal · coastal · natural · sophisticated · botanical
**Analogy:** A curated botanical journal meets a coastal luxury retreat.

## 2. Color

The palette is strictly monochromatic, built on high-contrast neutrals that function as a clean canvas. An off-white background paired with pure black and warm grays ensures the earthy, natural photography remains the focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAF9` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#262525` | secondary text |
| `--muted` | `#B2B2B2` | placeholder |
| `--muted-soft` | `#EDEDE7` | weak hint |
| `--line` | `rgb(214, 209, 199)` | divider |

**Color principle:** High-contrast neutrals (black, off-white, muted grays) serve as a clean canvas to let the earthy, natural photography take center stage.

The governing principle is clear: color is reserved for content, not for decoration.

## 3. Typography

Typographic voice alternates between a geometric sans for display and a grotesque sans for body, creating a structured hierarchy. A monospaced font is reserved specifically for descriptive scent notes, adding a layer of detailed, informational texture.

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.0 | 500 | -0.52px | Main hero headings and prominent product titles |
| body | 16px | 1.15 | 500 | normal | Standard body text and navigation |
| caption | 12px | 1.3 | 500 | 0.65px | Uppercase labels and navigation links |

**Type rules:**
- Use uppercase with wide tracking for navigation and category labels.
- Maintain tight negative tracking on large display headings.
- Use monospaced typography for descriptive scent notes and categorizations.

## 4. Spacing

Rhythm is established through a precise 4px base increment, but the defining characteristic is the generous 113px vertical padding that creates distinct, airy sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 113 px
- **Rhythm:** A combination of 4px base increments and generous 113px vertical padding creates a distinct, airy rhythm.

## 5. Surfaces

Depth is conveyed through subtlety, with a single, soft shadow providing lift from the off-white surface. Borders are thin and precise, rendered in a warm gray or a near-black to define components without weight.

- **Radius:** sm 0px · md 6px · lg 8px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 2px 20px 0px
- **Borders:** 1px solid rgb(214, 209, 199) or rgb(38, 37, 37)

## 6. Layout

The layout skeleton is an asymmetric multi-column grid that favors large, photographic blocks. This structure pairs dominant images with generous whitespace and tight, focused text columns, often coalescing into a split-screen hero composition.

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

**Skeleton:** A clean, multi-column asymmetric grid that favors large photographic blocks paired with generous whitespace and tight text blocks.

## 7. Motion & Interaction

Motion philosophy is one of understated function. All interactive elements share a standardized 0.3s transition, creating a consistent and purposeful rhythm for state changes and hover effects.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - 0.3s transitions for hover states and interactive elements.
  - 0.5s transitions for broader UI state changes.

- **Hover:** Subtle opacity or color shifts on interactive elements.
- **Click:** State changes indicated by filled/unfilled radio buttons.
- **Transition:** Standardized 0.3s transitions for all interactive elements.
- **Keyboard:** Standard focus states and accessible navigation flow.

## 8. Voice & Don'ts

The editorial voice is calm, evocative, and sophisticated, using short, mood-setting phrases for headlines and direct, uppercase commands for calls to action. This tone is preserved by consciously avoiding loud promotion, busy layouts, and decorative styling.

- **Tone:** Calm, evocative, and sophisticated.
- **Headline style:** Short, evocative phrases that set a mood or location.
- **CTA style:** Direct, uppercase, and action-oriented commands.
- **Avoid:** Loud promotional language / Busy or cluttered layouts / Vibrant neon colors / Playful or whimsical typography

### Don'ts
- ❌ Don't use bright or saturated accent colors — screenshot shows a strictly neutral, monochromatic palette.
- ❌ Don't use decorative or highly stylized fonts — screenshot shows clean geometric and grotesque sans-serifs.
- ❌ Don't overcrowd the layout — screenshot shows generous whitespace and large breathing room between elements.
- ❌ Don't use heavily rounded corners everywhere — screenshot shows sharp edges or very subtle 6-8px border radii.
- ❌ Don't use complex, multi-color gradients — screenshot shows flat solid backgrounds.
- ❌ Don't rely on heavy drop shadows for depth — screenshot uses mostly flat design with minimal, subtle shadows.

The system deliberately rejects vibrant color, heavy shadows, and whimsical typography in favor of a serene, structured minimalism.

## System Prompt (paste into AI tool)

```
Leif Products is a refined Australian botanical brand utilizing an editorial, photography-driven design to convey calm and natural luxury. The palette relies on high-contrast neutrals, featuring an off-white background (#FAFAF9), pure black text (#000000), and subtle warm grays (#EDEDE7). Typography alternates between a geometric sans for display, a grotesque sans for body text, and a monospaced font for descriptive details, maintaining a clean and structured hierarchy. Critically, avoid using vibrant accent colors, overuse of rounded corners, or cluttered layouts; instead, prioritize generous whitespace, large photographic focal points, and sharp, minimalist UI components with subtle 0.3s transitions.
```