CURATED · OPEN · FREE

Hartzlerdairy

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

ProductCleanEditorialCurationPhotographic
Hartzlerdairy screenshot
↓ Download design system (21 MB)Open in OpenDesign

Visit: https://www.hartzlerdairy.com

📦 Browse pack contents →

01

Identity DNA

artisanalpremiumfamily-ownedfreshtraditional

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

02

Color

#56DDDBAccent
#333333Ink
#FFFFFFBG
#035542Muted
rgba(51, 51, 51, 0.1)Line

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

03

Typography

geometric-sans · 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

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

generous spacing to let products breathe

05

Surfaces

sm · 4px
md · 8px
lg · 20px
pill · 100px

none visible on main cards

0 4px 20px rgba(0, 0, 0, 0.1)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

Subtle hover transitions on interactive elements · Scroll-triggered animations for product reveals

Subtle color change or scale on interactive elements · Immediate response with visual feedback

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko