# Dr. Konstantin Frank design system

> Captured from https://www.drfrankwines.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/dr-konstantin-frank/). An independent analysis for reference: Dr. Konstantin Frank and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Dr. Konstantin Frank sets a #f7f2e9 parchment ground with #221c1f ink and spends #d0ba70 gold on square buttons, leaf ornaments and hairline rules. Adobe Garamond carries the page, with 36px uppercase headlines tracked 0.083em and 18px body at a 1.6 line height, and Trajan handles the small caps. Nothing is rounded.

- Theme: light
- Mood: classical, gold, parchment, serif, finger lakes
- Category: Winery

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#f7f2e9` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#221c1f` | Primary ink, 15.0:1 on the background |
| Muted text | `#796f4d` | Supporting copy, 4.5:1 on the background |
| Accent | `#d0ba70` | Primary actions |

Full palette, most used first: `#ffffff`, `#f7f2e9`, `#221c1f`, `#000000`, `#d0ba70`, `#796f4d`.

## Typography

- **adobe-garamond-pro**: display and body, 86.4% of the text. Use EB Garamond. Adobe Garamond Pro is a paid typeface. EB Garamond is a free stand-in, not a match.
- **trajan-pro-3**: display and body, 13.6% of the text. Use Cinzel. Trajan Pro is a paid typeface. Cinzel is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | adobe-garamond-pro | 36px | 500 | 1 | 0.083em |
| Heading | adobe-garamond-pro | 28.8px | 500 | 1 | 0.104em |
| Subheading | adobe-garamond-pro | 18px | 400 | 1.6 | 0 |
| Body | adobe-garamond-pro | 18px | 400 | 1.6 | 0 |
| Small | trajan-pro-3 | 14.4px | 400 | 1.5 | 0 |

Sizes in use, largest first: 36px, 29px, 25px, 22px, 20px, 18px, 14px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 5px, 8px, 10px, 12px, 15px, 20px, 24px, 43px, 58px, 72px, 106px.

## Shape

Corners are square throughout.

Shadows, most used first:

- `rgba(0, 0, 0, 0.5) 0px 0px 10px 0px`

## Components

### Primary button ("PLAN YOUR VISIT")

- Fill: #d0ba70
- Text: #ffffff, 14.4px at weight 400
- Border: none
- Corner: 0px
- Height: 44px, padding 15px 30px

## Do

- Track uppercase serif headlines wide, near 0.08em, and center them between thin rules.
- Use the gold for fills and ornaments, with white or dark ink on top.
- Keep every corner square, from buttons to image frames.

## Don't

- Set text in the gold: at 1.7:1 on parchment it fails as type.
- Swap the parchment for pure white; the warmth is the point.
- Add a sans serif for body copy: the whole page reads in Garamond.

## CSS variables

```css
:root {
  --color-background: #f7f2e9;
  --color-surface: #ffffff;
  --color-text: #221c1f;
  --color-text-muted: #796f4d;
  --color-accent: #d0ba70;
  --font-display: "adobe-garamond-pro", system-ui, sans-serif;
  --text-display: 36px;
  --weight-display: 500;
  --font-heading: "adobe-garamond-pro", system-ui, sans-serif;
  --text-heading: 28.8px;
  --weight-heading: 500;
  --font-subheading: "adobe-garamond-pro", system-ui, sans-serif;
  --text-subheading: 18px;
  --weight-subheading: 400;
  --font-body: "adobe-garamond-pro", system-ui, sans-serif;
  --text-body: 18px;
  --weight-body: 400;
  --font-small: "trajan-pro-3", system-ui, sans-serif;
  --text-small: 14.4px;
  --weight-small: 400;
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 43px;
  --space-9: 58px;
  --space-10: 72px;
  --space-11: 106px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.