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

# Agronomy Workshop · Design System

> Golf apparel presented with an editorial eye.

**Theme:** light · **Industry:** fashion · **Source:** https://agronomywork.shop/ · **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._

Agronomy Workshop’s storefront pairs functional golf apparel with a sparse, image-led editorial layout. Crisp product details and vivid blue Shop buttons punctuate a predominantly white canvas.

## North star

Keep the interface quiet and spacious so product photography leads, while blue Shop buttons provide the clearest functional signal.

## Overview

The visual strategy is built around a clean white canvas and abundant open space, letting apparel and campaign photography carry the personality. The measured palette keeps interface text in restrained charcoal and grays, while a vivid blue marks Shop buttons; the warm pale gray appears in product-thumbnail cards. Most imagery contains the page’s richer browns, blues, and outdoor colors, so treat these as photographic content rather than extra interface colors. Compact sans-serif product copy and navigation sit beside oversized, narrow display headings, creating a contrast between practical shopping information and editorial storytelling. Product modules are arranged in an irregular, spacious grid: thumbnails and details occupy one area while larger garment and lifestyle images balance the composition. The page mixes close product views, studio-like cutouts, and candid outdoor portraits. Keep components flat and unornamented, with minimal borders and no visible shadow treatment. Generous gaps and staggered image placement make the store feel like a visual catalog rather than a conventional dense product listing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and open space around product details, image grids, and editorial sections. |
| Soft Graphite | `#888888` | `--color-soft-graphite` | neutral | Muted supporting text, including descriptive product copy and secondary information. |
| Shop Blue | `#0076ff` | `--color-shop-blue` | accent | Bright background on the repeated Shop call-to-action buttons. |
| Weathered Gray | `#666666` | `--color-weathered-gray` | neutral | Secondary muted text for less prominent supporting product information. |
| Workshop Ink | `#1e1e1e` | `--color-workshop-ink` | semantic | Primary text color for compact product titles and key interface copy. |
| Warm Chalk | `#eeede8` | `--color-warm-chalk` | surface | Pale neutral product-thumbnail card backgrounds; a supporting surface, not a page-wide band. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#1e1e1e` (Workshop Ink) · `--color-text-muted` → `#888888` (Soft Graphite) · `--color-text-subtle` → `#666666` (Weathered Gray) · `--color-accent` → `#0076ff` (Shop Blue) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1e1e` | `#ffffff` | 16.67:1 | AAA |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#0076ff` | `#ffffff` | 4.17:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gerstner Programm FSL Regular | `--font-body` | webfont | 400 | Primary body copy, navigation, and product details. | Inter |
| OT Neue Montreal Medium Semi Squeezed | `--font-display` | webfont | 500 | Large editorial headings and section titles. | Oswald |
| Gerstner Programm FSL | `--font-gerstner-programm-fsl` | system | 400 | System-fallback version of the main sans-serif text face. | Inter |

- **Gerstner Programm FSL Regular:** Regular-weight sans serif with compact, practical text sizing; keep copy natural-case and closely set.
- **OT Neue Montreal Medium Semi Squeezed:** Medium weight, conspicuously condensed display style; measured headings use tight negative tracking.
- **Gerstner Programm FSL:** Regular sans-serif fallback; retain the same restrained, compact treatment as the primary body face.

### Type scale — Custom (ratio ≈ 1.964, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 500 | 0.81 | -0.02em | — | OT Neue Montreal Medium Semi Squeezed | Oversized condensed editorial titles, including the brand image finale. |
| h2 | 32px | 500 | 1 | -0.02em | — | OT Neue Montreal Medium Semi Squeezed | Condensed headings introducing editorial or informational sections. |
| body | 14px | 400 | 1.14 | 0 | — | Gerstner Programm FSL Regular | Product descriptions and supporting page copy. |
| caption | 10px | 400 | 1.2 | 0.1em | — | ABC Marfa Mono Unlicensed Trial Regular | Small, widely tracked labels or fine-print details. |
| link | 14px | 400 | 1.14 | 0 | — | Gerstner Programm FSL Regular | Navigation and concise shopping links. |
| code | 10px | 400 | 1.2 | 0.1em | — | ABC Marfa Mono Unlicensed Trial Regular | No prominent code content; reserve for compact monospaced labels if needed. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20 px.
- Section rhythm 40px · element gap 20px · card padding 16px · max content width —.

Use a broad, responsive canvas with product details, thumbnail stacks, and large images arranged in an asymmetric multi-column grid. Align product text and controls to the edges of their image groups, while allowing lifestyle photography to occupy larger uninterrupted blocks. The measured page has comfortable density, a 40px section gap, and a 20px element gap; maintain generous separation rather than forcing uniform cards. The page maximum width is not measured, so avoid imposing a specific value. Keep the header compact and let content begin close beneath it.

## Shape & elevation

- Radius: link `5px` · xs `5px`
- No box shadows measured: the page is flat.

The interface reads as flat and open, with no measured shadows or gradients. Separate content through whitespace and image placement rather than elevated panels. Thumbnail cards use a pale warm-gray surface, while the larger page remains white. Keep edges mostly clean and avoid decorative borders or layered card effects.

## Imagery

Photography defines the storefront: clean product views, close fabric and garment details, and outdoor portraits of models in golf apparel. Mix small product thumbnails with larger, often portrait-oriented lifestyle images. Preserve the natural browns, sky blues, and muted outdoor tones in the photographs; these are image content, not additional measured interface palette colors. Use cutout product imagery sparingly alongside candid editorial frames.

## Components

### Shop button

A flat, rectangular bright-blue call to action with a short Shop label and a small directional arrow; repeated alongside product details.

### Product information block

Compact title, price, and short descriptive copy aligned beside product imagery, with color swatches where shown.

### Product thumbnail

Small product image on a #eeede8 card surface, stacked vertically beside its product description.

### Editorial image tile

Large product or lifestyle photograph in an asymmetric grid, without a visible frame or shadow.

### Minimal header

Sparse top navigation with Index and Shop at the left, a centered brand mark, and Bag at the right.

### Measured component styles

- **Primary button** (“Shop”): background #0076ff · text #0000ee · radius 0px · padding 6px 8px · 400 12px sans-serif
- **Link** (“Shop”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card**: background #eeede8 · text #0000ee · radius 0px · padding 16px · 400 12px sans-serif

## Do

- Use white as the dominant interface canvas.
- Reserve bright blue for clear shopping actions.
- Let large product and lifestyle images lead the layout.
- Keep product copy concise and compact.
- Arrange product modules in an airy, asymmetric grid.
- Use warm pale gray only for supporting thumbnail surfaces.

## Don't

- Do not add unmeasured interface colors.
- Do not turn every product into a uniform boxed card.
- Do not crowd photography with excess copy.
- Do not introduce shadows or gradients.
- Do not use oversized controls that compete with the imagery.
- Do not treat photographic colors as interface palette tokens.

## Agent prompt

Build a new online store page in Agronomy Workshop’s image-led editorial style. Use Gallery White (#ffffff) as the dominant canvas, Workshop Ink (#1e1e1e) for primary text, and the measured gray text colors #888888 and #666666 for supporting copy. Apply Shop Blue (#0076ff) to concise shopping actions, and Warm Chalk (#eeede8) only to quiet product-thumbnail surfaces. Use a compact regular sans serif for product descriptions and navigation, paired with a condensed medium display face for editorial headings. Arrange product details, small thumbnails, and large lifestyle photographs in an open, asymmetric grid. Favor generous whitespace and clear alignment over borders, shadows, or decorative panels. Keep the header sparse, product copy brief, and photography dominant; do not invent additional palette values or measured dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A single-column, white section at the end of the measured section sequence. | open whitespace | white canvas |

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