---
name: Brightland
description: "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."
version: alpha

colors:
  background: "#F6BE00"
  primary: "#1B1B1B"
  secondary: "#1B1B1B"
  tertiary: "#F6BE00"
  neutral: "#999999"
  bg-soft: "#F9F2EA"
  bg-quiet: "#FFFFFF"
  line: "rgba(27, 27, 27, 0.12)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "1.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 18px
  lg: 9999px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 15px
  xl: 18px
  2xl: 24px
  3xl: 28px

---

## Overview

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

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

## Colors

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

- **Background (`#F6BE00`)** — uses `bg` token
- **Primary text (`#1B1B1B`)** — uses `ink` token
- **Secondary text (`#1B1B1B`)** — uses `ink-soft` token
- **Accent (`#F6BE00`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(27, 27, 27, 0.12)`)** — uses `line` token

## Typography

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

## Layout

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

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 8px
- `md`: 18px
- `lg`: 9999px
- `pill`: 9999px

## 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.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```