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

↓ Download design system (21 MB)Open in OpenDesign

Visit: https://www.hartzlerdairy.com

📦 Browse pack contents →

Identity DNA

artisanalpremiumfamily-ownedfreshtraditional

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

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.

Typography

geometric-sans · humanist-sans

display333px · 900
display-md290px · 900
body14px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

generous spacing to let products breathe

Surfaces

sm · 4px

md · 8px

lg · 20px

pill · 100px

none visible on main cards

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

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

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

Voice & Don'ts

Tone Confident, premium, and artisanal
Headlines Bold, uppercase, large-scale typography
CTAs Teal tags with rounded corners and clean sans-serif text

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
Avoid: Avoid cluttered layouts
Avoid: Avoid overly playful or casual typography
Avoid: Avoid complex color schemes

Inside the pack — real screenshots

Hartzlerdairy — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

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