# Brightland · Design system migration spec

> Source: https://brightland.co  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for how to build a strong, personality-driven DTC brand using a limited but highly effective palette and expressive typography.

## 1. Identity DNA

Brightland's design system is built like a well-appointed pantry: a curated collection of high-quality ingredients where each element serves a clear purpose. The identity merges the authority of a premium brand with the warmth of a sunlit kitchen, using a transitional serif for headlines and a humanist sans for interface text to balance editorial confidence with approachable clarity.

**One-liner:** Premium DTC food brand combining bold serif typography with warm, sun-drenched lifestyle photography.
**Keywords:** artisanal · premium · pantry · clean ingredients · lifestyle
**Analogy:** A high-end pantry brand that merges editorial photography with a warm, approachable aesthetic.

## 2. Color

The palette is a study in controlled warmth, anchored by a signature golden yellow that provides energetic focus against a soft off-white (#F9F2EA) ground. Crisp black text ensures sharp legibility, creating a high-contrast scheme that feels both vibrant and grounded.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6BE00` | main background |
| `--bg-soft` | `#F9F2EA` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#1B1B1B` | body text |
| `--ink-soft` | `#1B1B1B` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#F6BE00` | single accent |
| `--line` | `rgba(27, 27, 27, 0.12)` | divider |

**Color principle:** High-contrast warm palette anchored by a signature golden yellow and crisp black text on soft off-white.

The principle is warmth without compromise: every color choice reinforces a sun-drenched, pantry-fresh aesthetic while maintaining functional clarity.

## 3. Typography

Typography carries the brand's voice through a deliberate pairing: a bold transitional serif for promotional headlines and logo marks delivers editorial weight, while a clean humanist sans-serif handles body copy and UI elements for legible, everyday use.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Primary promotional headline like 'Enjoy 15% Off' |
| heading | 16px | 1.6 | 400 | 1.3px | Sub-headlines and logo mark like 'BRIGHTLAND' |
| body | 16px | 1.6 | 400 | 0px | General descriptive text and button labels |

## 4. Spacing

Spacing follows a consistent, tactile rhythm: interactive elements and modals use a uniform 18px padding, with smaller 8-18px gaps defining the breathing room between grouped components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 15 / 18 / 24 / 28 / 32 px
- **Rhythm:** Consistent 18px padding for interactive elements and modals, with 8-18px gaps between flex items.

## 5. Surfaces

Surface treatments create subtle depth through a dual shadow strategy: a soft, standard drop shadow for lifted elements and a full-screen overlay shadow for modal focus. Borders are consistently defined with a 1px solid rule at low opacity.

- **Radius:** sm 8px · md 18px · lg 9999px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
  - rgba(0, 0, 0, 0.4) 0px 9999px 0px 9999px
- **Borders:** 1px solid rgba(27, 27, 27, 0.12)

## 6. Layout

The layout skeleton on desktop is a clean two-column, 50/50 split that gives equal weight to lifestyle imagery and promotional messaging. On mobile, this gracefully collapses to a single column, maintaining focus on the prominent image block.

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

**Skeleton:** Two-column desktop split (50/50) collapsing to a single column on mobile with a prominent image block.

## 7. Motion & Interaction

Motion is smooth and deliberate, with all interactive elements transitioning on a 0.4s ease-in-out curve. The philosophy prioritizes refinement over flair, using opacity and transform changes for modals and clear visual feedback on hover states.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth transition for modal opacity and transform
  - Hover states on interactive elements

- **Hover:** Visual feedback on pill buttons
- **Click:** Selects a preference or dismisses the modal
- **Transition:** All elements transition smoothly with 0.4s ease-in-out timing
- **Keyboard:** Standard tab navigation with focus rings

## 8. Voice & Don'ts

The editorial voice is warm, inviting, and confident, matching the visual tone with bold, emotive serif headlines that focus on value and quality. Direct, action-oriented CTAs are highly visible, guiding the user with clarity.

- **Tone:** Warm, inviting, and confident
- **Headline style:** Bold, emotive serif with a focus on value and quality
- **CTA style:** Direct, action-oriented, and highly visible
- **Avoid:** Cold technical language / Aggressive discount messaging / Complex jargon

### Don'ts
- ❌ don't use a stark white background — screenshot shows a warm off-white (#F9F2EA) instead
- ❌ don't use geometric sans-serif for headlines — screenshot shows a transitional-serif font instead
- ❌ don't use rectangular buttons — screenshot shows pill-shaped buttons with 9999px radius instead
- ❌ don't use a muted or pastel primary accent — screenshot shows a highly saturated golden yellow instead
- ❌ don't use harsh blue or cool tones — screenshot shows a warm, earthy palette instead
- ❌ don't use thin, low-contrast borders — screenshot shows clearly defined 1px borders with subtle opacity instead

The system deliberately rejects cold technical language, aggressive discount messaging, and complex jargon to preserve its premium, approachable character.

## System Prompt (paste into AI tool)

```
This is a premium DTC food brand website for Brightland. The design DNA centers on a warm, sun-drenched aesthetic that combines editorial photography with bold typography. The palette is anchored by a signature golden yellow (#F6BE00) and crisp black (#1B1B1B) on soft off-white surfaces (#F9F2EA). Typography pairs a striking transitional-serif for primary headlines with a clean humanist-sans for body text and UI elements. Layouts are clean and spacious, often utilizing a two-column split on desktop. Critical constraints: Never use stark white backgrounds or cold blue tones. Avoid geometric sans-serif fonts for display text, as the brand relies on the elegance of serifs. Do not use rectangular buttons; all interactive elements should be pill-shaped to maintain a friendly, approachable feel.
```