---
title: "Hartzler Family Dairy design system"
variant: extended
source: https://www.hartzlerdairy.com/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/hartzlerdairy-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Hartzler Family Dairy · Design System

> Fresh dairy, framed with playful simplicity

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.hartzlerdairy.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Hartzler’s homepage pairs oversized, playful typography with clean product photography to make its dairy range the visual focus. A crisp white canvas, deep green branding, and bright aqua accents give the page a fresh, approachable character.

## North star

Let oversized aqua typography and honest, isolated product photography lead on a quiet white canvas.

## Overview

The page uses white as an expansive canvas, leaving generous open space around the products and oversized display words. Deep green (#035542) anchors the Hartzler script logo, menu, and outlined product navigation, while vivid aqua (#56dddb) carries the enormous “DAIRY” headline and product labels. Pale yellow (#f9e9a9) appears as a secondary display accent in “FRESH”; it is a supporting graphic colour rather than a defining interface colour. Work Sans supplies both the heavy, compact display lettering and the restrained supporting copy. A centered brand mark and menu sit above the hero composition; bottle and ice-cream photography is arranged across the page, with small captions and floating category labels. The layout is sparse and vertically paced, letting product imagery and typographic gestures define the page instead of cards, shadows, or dense content. Green outlined pill buttons and small social marks finish the footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Dairy Green | `#035542` | `--color-dairy-green` | brand | Logo, menu icon and text, outlined product buttons, and the site’s strongest brand accent. |
| Milk White | `#ffffff` | `--color-milk-white` | surface | Main page canvas and the open background surrounding the product imagery. |
| Soft Charcoal | `#333333` | `--color-soft-charcoal` | neutral | Primary body and supporting text, including small product captions. |
| Clear Blue | `#2b7bb9` | `--color-clear-blue` | accent | Measured link colour, including skip navigation; keep it limited to functional links. |
| Fresh Aqua | `#56dddb` | `--color-fresh-aqua` | brand | Oversized “DAIRY” display type and floating product category labels. |
| Butter Cream | `#f9e9a9` | `--color-butter-cream` | accent | Pale yellow “FRESH” display lettering; a secondary graphic accent, not a page surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Milk White) · `--color-text` → `#333333` (Soft Charcoal) · `--color-text-muted` → `#035542` (Dairy Green) · `--color-border` → `#035542` (Dairy Green) · `--color-accent` → `#035542` (Dairy Green) · `--color-accent-2` → `#2b7bb9` (Clear Blue) · `--color-accent-3` → `#56dddb` (Fresh Aqua)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#035542` | `#ffffff` | 8.82:1 | AAA |
| `#035542` | `#ffffff` | 8.82:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Work Sans | `--font-body` | webfont | 400, 500, 900 | Display lettering, headings, body copy, captions, links, and menu text. | Inter |

- **Work Sans:** Use measured weights 400, 500, and 900; display words are extremely heavy and uppercase, while supporting copy stays restrained.

### Type scale — Custom (ratio ≈ 2.645, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 333px | 900 | 1 | 0 | — | Work Sans | Oversized graphic words such as “DAIRY” and “FRESH”. |
| h1 | 275px | 900 | 0.7 | -0.011em | — | Work Sans | Primary hero headline, rendered as bold display lettering. |
| h2 | 40px | 400 | 1 | 0 | — | Work Sans | Supporting section headings. |
| body | 18px | 400 | 1.45 | 0 | — | Work Sans | Product and brand description copy. |
| caption | 17px | 500 | 1.06 | 0 | — | Work Sans | Small product captions and supporting labels. |
| link | 14px | 400 | 1.45 | 0 | — | Work Sans | Compact functional links and footer navigation. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 10, 12, 15, 20, 24, 30, 50 px.
- Section rhythm 50px · element gap — · card padding — · max content width —.

Use a centered, single-page composition with broad white margins and a vertical flow from compact header into a large product-led hero, then supporting display text and footer navigation. Keep the logo centered and the menu aligned to the upper-right. Product imagery forms a loose horizontal group rather than a boxed grid; captions sit close to their products. Preserve the airy density and substantial gaps between content groups. Exact maximum width and column measurements are not supplied, so derive them from the reference composition rather than adding arbitrary fixed dimensions.

## Shape & elevation

- Radius: button `20px` · xs `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The interface is predominantly flat: white canvas, unshadowed typography, and product photography provide the depth. Outlined green pill controls create the main interface boundary, with fine caption text and small labels around the products. Avoid elevated cards or strong drop shadows; let overlap and image edges supply visual layering.

## Imagery

Use high-quality, isolated product photography of milk bottles and ice cream, with packaging labels and natural product details visible. Arrange products at large scale against the white background, allowing slight overlap with the giant aqua headline. Small aqua category tags and concise captions identify items. Keep imagery photographic and product-focused; avoid adding decorative illustration or complex background scenes.

## Components

### Header and menu

Centered script logo with a green hamburger icon and MENU label aligned to the upper-right on white.

### Display hero

A huge, heavy aqua “DAIRY” word sits behind or alongside the prominently arranged product photographs.

### Product group

Large cutout-style milk bottles and an ice-cream tub form a loose horizontal showcase, with concise captions beneath.

### Category labels

Small aqua tags identify products such as chocolate milk, classic milk, ice cream, and butter.

### Secondary display word

A large pale-yellow “FRESH” graphic repeats the bold typographic motif lower on the page.

### Footer navigation

Script logo, green outlined pill links, and compact social icons sit on the white canvas.

### Measured component styles

- **Primary button** (“PRODUCTS”): transparent background · text #035542 · border 2px solid #035542 · radius 20px · padding 12px 24px · 500 17px Work Sans
- **Link** (“Skip to content”): transparent background · text #2b7bb9 · radius 0px · padding 10px 15px · 400 14px Work Sans

## Do

- Keep the canvas white and the overall composition airy.
- Use #035542 for branding, menu elements, and outlined navigation.
- Make display words oversized, heavy, and graphic.
- Show products as clear, high-quality photography.
- Use #56dddb for headline emphasis and category tags.
- Keep captions and supporting copy compact and unobtrusive.

## Don't

- Do not fill the page with colored section backgrounds.
- Do not place every product inside a card.
- Do not add shadows or gradients absent from the reference.
- Do not use dense text blocks to compete with the products.
- Do not treat #f9e9a9 as a general interface background.
- Do not replace the distinctive script logo with generic text.

## Agent prompt

Build a new Hartzler-style dairy page with a pure #ffffff canvas and a sparse, product-led composition. Use #035542 for the brand mark, menu, and thin outlined pill navigation; use #56dddb for oversized bold display words and small product tags. Reserve #f9e9a9 for occasional display lettering, not large surfaces. Set all interface type in Work Sans or a close free alternative, contrasting very heavy display text with compact, regular captions. Center the logo, place the menu at the upper-right, and arrange crisp product photography in a loose horizontal showcase with small captions. Let whitespace separate content groups. Keep surfaces flat, avoid card grids and shadows, and finish with simple outlined footer links and small social icons.

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--fl-heading-text: #333333;
--wp--preset--color--fl-body-bg: #ffffff;
--wp--preset--color--fl-body-text: #333333;
--wp--preset--color--fl-accent: #2b7bb9;
--wp--preset--color--fl-accent-hover: #2b7bb9;
--wp--preset--color--fl-topbar-bg: #ffffff;
--wp--preset--color--fl-topbar-text: #757575;
--wp--preset--color--fl-topbar-link: #2b7bb9;
--wp--preset--color--fl-topbar-hover: #2b7bb9;
--wp--preset--color--fl-header-bg: #ffffff;
--wp--preset--color--fl-header-text: #757575;
--wp--preset--color--fl-header-link: #757575;
--wp--preset--color--fl-header-hover: #2b7bb9;
--wp--preset--color--fl-nav-bg: #ffffff;
--wp--preset--color--fl-nav-link: #757575;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hartzlerdairy-com