CURATED · OPEN · FREE

Brightland

Premium DTC food brand combining bold serif typography with warm, sun-drenched lifestyle photography.

fooddtc

↓ Download design system (31 MB)Open in OpenDesign

Visit: https://brightland.co

📦 Browse pack contents →

Identity DNA

artisanalpremiumpantryclean ingredientslifestyle

A high-end pantry brand that merges editorial photography with a warm, approachable aesthetic.

Color

#F6BE00Accent

#1B1B1BInk

#F9F2EABG soft

#FFFFFFBG quiet

#999999Muted

rgba(27, 27, 27, 0.12)Line

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

Typography

transitional-serif · humanist-sans

display56px · 700
heading16px · 400
body16px · 400

Spacing

4px

8px

10px

15px

18px

24px

28px

32px

Consistent 18px padding for interactive elements and modals, with 8-18px gaps between flex items.

Surfaces

sm · 8px

md · 18px

lg · 9999px

pill · 9999px

1px solid rgba(27, 27, 27, 0.12)

rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.4) 0px 9999px 0px 9999px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

200msmicro

400mssmall

800msmedium

ease-in-outeasing

Smooth transition for modal opacity and transform · Hover states on interactive elements

Visual feedback on pill buttons · Selects a preference or dismisses the modal

Components

button Pill-shaped with solid yellow background, black text, and generous horizontal padding.
card Modal overlay with soft off-white background, large rounded corners (18px), and a subtle drop shadow.
hero Promotional overlay combining a bold serif discount headline with a lifestyle photograph of products.

Voice & Don'ts

Tone Warm, inviting, and confident
Headlines Bold, emotive serif with a focus on value and quality
CTAs Direct, action-oriented, and highly visible

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
Avoid: Cold technical language
Avoid: Aggressive discount messaging
Avoid: Complex jargon

Inside the pack — real screenshots

Brightland — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko