---
name: Hartzlerdairy
description: "Excellent example of product-focused design with bold typography that lets premium photography shine."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#333333"
  tertiary: "#56DDDB"
  neutral: "#035542"
  line: "rgba(51, 51, 51, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 333px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-3px"
  display-md:
    fontFamily: geometric-sans
    fontSize: 290px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-3px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 100px

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

---

## Overview

A premium artisanal dairy brand website featuring bold typography, large product photography, and a clean white aesthetic with teal and dark green accents.

*A premium local dairy brand showcasing its products with bold, confident typography and high-quality photography.*

## Colors

Minimal color palette using white space and product photography as the primary visual anchors.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Accent (`#56DDDB`)** — uses `accent` token
- **Muted (`#035542`)** — uses `muted` token
- **Borders (`rgba(51, 51, 51, 0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Use uppercase for product labels and navigation
- Maintain tight letter spacing for large display type
- Use dark green for brand elements and accents

## Layout

Full-width hero with overlapping product photography and large background text

*Rhythm:* generous spacing to let products breathe

## Elevation & Depth

- 0 4px 20px rgba(0, 0, 0, 0.1)
- Borders: none visible on main cards

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 100px

## Components

- **button:** Large teal tags with rounded corners and uppercase text
- **card:** Product photography with subtle drop shadow on white background
- **chip:** Circular 'FEATURED' badge with script logo
- **hero:** Full-viewport product showcase with massive background typography

## Do's and Don'ts

**Don't:**
- Don't use thin or light typography — screenshot shows bold, heavy weights throughout
- Don't use small hero text — screenshot shows massive 333px display type
- Don't use dark backgrounds — screenshot shows predominantly white background
- Don't use multiple accent colors — screenshot shows consistent teal and dark green
- Don't hide product photography — screenshot makes products the central focus
- Don't use decorative elements — screenshot shows clean, minimal design

---

## System Prompt (paste into AI agent)

```
This is a premium artisanal dairy website with bold typography and clean product photography. Use white background with teal (#56DDDB) and dark green (#035542) accents. Typography is geometric sans-serif for display and humanist sans-serif for body text. The design emphasizes large product photography with massive background text. Key constraints: avoid dark backgrounds, maintain generous white space, use uppercase for labels, and keep the design minimal with products as the hero. The layout should let products breathe with ample spacing and clean typography hierarchy.
```