# Hartzlerdairy · Design system migration spec

> Source: https://www.hartzlerdairy.com  ·  Curated by OpenDesign  ·  en

> Excellent example of product-focused design with bold typography that lets premium photography shine.

## 1. Identity DNA

The Hartzler Dairy system is built around a single, unshakeable premise: the product is the protagonist. Every design decision, from the generous white space to the massive background typography, serves to frame the photography with the reverence of a gallery exhibition, establishing an identity that is simultaneously artisanal and bold.

**One-liner:** A premium artisanal dairy brand website featuring bold typography, large product photography, and a clean white aesthetic with teal and dark green accents.
**Keywords:** artisanal · premium · family-owned · fresh · traditional
**Analogy:** A premium local dairy brand showcasing its products with bold, confident typography and high-quality photography.

## 2. Color

Color is used as a disciplined accent rather than a dominant force. The palette is anchored by a clean white ground, with teal (#56DDDB) providing interactive highlights and a deep green (#035542) grounding brand elements in tradition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#333333` | body text |
| `--muted` | `#035542` | placeholder |
| `--accent` | `#56DDDB` | single accent |
| `--line` | `rgba(51, 51, 51, 0.1)` | divider |

**Color principle:** Minimal color palette using white space and product photography as the primary visual anchors.

The principle is restraint; let the product photography carry the chromatic weight while the interface remains a quiet, confident frame.

## 3. Typography

The typographic voice is one of confident authority, achieved through heavy, geometric sans-serif display faces and clear, humanist sans-serif for body text. This pairing allows for dramatic, large-scale impact in headers while maintaining excellent readability for product details.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 333px | 1.0 | 900 | -3px | Hero section large background text |
| display-md | 290px | 1.0 | 900 | -3px | Secondary large background text |
| body | 14px | 1.45 | 400 | 0 | Body text and navigation |

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

## 4. Spacing

Generous spacing establishes a rhythm of calm and focus, allowing each product presentation to breathe and command attention without visual competition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous spacing to let products breathe

## 5. Surfaces

Surfaces are defined by their simplicity, relying on clean white planes and a single, subtle shadow to suggest gentle depth. The absence of visible borders on primary cards reinforces the design's commitment to visual openness.

- **Radius:** sm 4px · md 8px · lg 20px · pill 100px
- **Shadows:**
  - 0 4px 20px rgba(0, 0, 0, 0.1)
- **Borders:** none visible on main cards

## 6. Layout

The structural skeleton is built around a full-viewport hero, where overlapping product photography and massive, atmospheric background text create a dynamic first impression. Subsequent layouts maintain this emphasis on spacious, single-column presentation to keep products as the central focus.

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

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

## 7. Motion & Interaction

Motion is employed with surgical precision to acknowledge interaction, not to decorate. Hover states and scroll-triggered reveals provide subtle, smooth feedback that guides the user without disrupting the serene, photographic focus of the page.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle hover transitions on interactive elements
  - Scroll-triggered animations for product reveals

- **Hover:** Subtle color change or scale on interactive elements
- **Click:** Immediate response with visual feedback
- **Transition:** Smooth transitions on state changes
- **Keyboard:** Standard tab navigation supported

## 8. Voice & Don'ts

The editorial voice is confident and premium, expressed through bold, uppercase headlines and clean, direct calls-to-action presented as teal tags. The tone is factual and assured, mirroring the quality of the products themselves.

- **Tone:** Confident, premium, and artisanal
- **Headline style:** Bold, uppercase, large-scale typography
- **CTA style:** Teal tags with rounded corners and clean sans-serif text
- **Avoid:** Avoid cluttered layouts / Avoid overly playful or casual typography / Avoid complex color schemes

### Don'ts
- ❌ 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

It deliberately avoids cluttered layouts, playful typography, and complex color schemes to preserve the purity of the product showcase.

## System Prompt (paste into AI tool)

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