---
name: Starbucks
description: "This site is a great example of a high-traffic consumer brand using a clean, photography-driven layout to promote seasonal products."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.58)"
  tertiary: "#006241"
  neutral: "rgba(0,0,0,0.58)"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.16px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A consumer-facing seasonal marketing site driven by large photographic hero sections and a strong green brand identity.

*A bright, modern coffeehouse with large appetizing photography and clear, friendly navigation.*

## Colors

High-contrast brand green anchors the identity, balanced against clean white backgrounds and vibrant product photography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.58)`)** — uses `ink-soft` token
- **Accent (`#006241`)** — uses `accent` token
- **Muted (`rgba(0,0,0,0.58)`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Headings are uppercase for main navigation
- Body text is highly legible with tight letter-spacing
- Font weight 600 is used for emphasis in headings

## Layout

Full-width hero blocks alternate with standard centered content columns.

*Rhythm:* Generous vertical padding is applied to large hero sections and content blocks to let photography breathe.

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 11px 15px 0px
- rgba(0, 0, 0, 0.06) 0px 9px 46px 8px
- Borders: Clean 1px borders are used sparingly, mostly for inputs and focus states.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 50px

## Components

- **button:** Pill-shaped solid green buttons with white text or white pill buttons with green outlines.
- **card:** Large split-view cards combining full-bleed photography with solid green background text blocks.
- **chip:** Simple text links for navigation.
- **input:** Standard rectangular inputs with rounded corners.
- **hero:** Large, full-width split-view combining a prominent food/drink photo on one side with a brand green background and text on the other.

## Do's and Don'ts

**Don't:**
- Don't use dark backgrounds for the main layout — screenshot shows bright white backgrounds dominating the space.
- Don't use heavy drop shadows on primary elements — screenshot shows minimal, soft shadows mostly on modals.
- Don't use a serif typeface for headings — screenshot shows a consistent sans-serif system throughout.
- Don't use sharp 90-degree corners on buttons — screenshot shows fully rounded 'pill' shapes.
- Don't use small, cramped spacing in hero sections — screenshot shows generous padding around large photography.
- Don't rely on heavy borders for structure — screenshot shows color blocks and whitespace as primary separators.

---

## System Prompt (paste into AI agent)

```
This is a consumer-facing seasonal marketing site for a major beverage brand. It features a clean, bright design driven by large, appetizing photography and a strong, recognizable brand green. The palette is anchored by clean white backgrounds, deep forest green accents, and high-contrast black text. Typography relies on a modern geometric sans-serif for both display and body text. Critical donts: avoid dark mode aesthetics, avoid sharp corners on interactive elements, avoid using serif fonts. The layout uses full-width split-view hero cards alternating with centered content, prioritizing clarity and visual appeal over complex UI patterns.
```