# Essie Wine — Style Reference
> Vintage Bookplate Serenity — a quiet, reserved aesthetic like an aged paper with delicate script.
**Theme:** light
Essie Wine cultivates a classic, understated visual identity through a sparse palette of off-whites, murky greens, and a singular, muted ochre. Its spacious, text-dominant layout employs a traditional serif for its primary messaging, harmoniously paired with a legible sans-serif for functional text. Components are minimalist, often appearing as subtle underlines or text-only elements, reflecting a design ethos of quiet sophistication rather than overt display. The overall aesthetic feels like a well-worn book or a vintage poster—timeless and unpretentious.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Inkwell | `#062d32` | `--color-inkwell` | Primary text, headers, navigation links, input borders, ghost button borders. This dark, desaturated teal establishes a grounded, vintage feel |
| Parchment | `#e9e9e2` | `--color-parchment` | Canvas background for primary content sections, subtle text elements |
| White Linen | `#ffffff` | `--color-white-linen` | Page backgrounds in select sections, pristine component surfaces |
| Old Gold | `#aa9e54` | `--color-old-gold` | Background for specific sections like forms or featured content. Its moderate saturation provides a warm, earthy contrast |
| Dusty Rose | `#c9a9b5` | `--color-dusty-rose` | Secondary background sections, footer background. A muted, desaturated rose that contributes to the vintage atmosphere |
| Slate Grain | `#767676` | `--color-slate-grain` | Default input border color for a subtle, unobtrusive form |
| Deep Pewter | `#344b52` | `--color-deep-pewter` | Subtle border color for links and decorative accents |
| Pitch Black | `#000000` | `--color-pitch-black` | Highest contrast text, borders for ghost components, decorative lines |
## Tokens — Typography
### BasicCommercial LT Com Roman — Main navigation, larger headings, and body text. Its clean, condensed sans-serif provides modern legibility against the serif. · `--font-basiccommercial-lt-com-roman`
- **Substitute:** Inter
- **Weights:** 300, 400
- **Sizes:** 19px, 38px, 49px
- **Line height:** 1.16, 1.18, 1.20
- **Letter spacing:** 0.003, 0.004, 0.008, 0.026
- **Role:** Main navigation, larger headings, and body text. Its clean, condensed sans-serif provides modern legibility against the serif.
### Adobe Caslon Pro — Primary headings, subheadings, and featured text blocks. The traditional serif conveys authority and elegance, creating an established, classic brand feel. Its lightness at 300 weight is distinctive, suggesting understated professionalism. · `--font-adobe-caslon-pro`
- **Substitute:** Libre Baskerville
- **Weights:** 300
- **Sizes:** 49px
- **Line height:** 1.18
- **Letter spacing:** 0.003
- **Role:** Primary headings, subheadings, and featured text blocks. The traditional serif conveys authority and elegance, creating an established, classic brand feel. Its lightness at 300 weight is distinctive, suggesting understated professionalism.
### Elementa — Paragraph text, small labels, and detailed content. A highly readable sans-serif for practical information. · `--font-elementa`
- **Substitute:** Graphik
- **Weights:** 300, 400
- **Sizes:** 16px, 19px
- **Line height:** 1.00, 1.16
- **Letter spacing:** 0.008, 0.042
- **Role:** Paragraph text, small labels, and detailed content. A highly readable sans-serif for practical information.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 19px | 1.18 | — | `--text-caption` |
| body-sm | 38px | 1.18 | — | `--text-body-sm` |
| body | 49px | 1.18 | — | `--text-body` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** spacious
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 20 | 20px | `--spacing-20` |
| 40 | 40px | `--spacing-40` |
| 68 | 68px | `--spacing-68` |
| 100 | 100px | `--spacing-100` |
| 136 | 136px | `--spacing-136` |
### Border Radius
| Element | Value |
|---------|-------|
| inputs | 0px |
| buttons | 0px |
### Layout
- **Section gap:** 136px
- **Card padding:** 27px
- **Element gap:** 23px
## Components
### Ghost Text Button
**Role:** Default interactive element for navigation and actions.
Text in Inkwell (#062d32), no background, no border, with a padding of 27px symmetrically. Underlined on hover or active state with Inkwell (#062d32).
### Underlined Call-to-Action
**Role:** Semantic action for submissions or primary interactions.
Text in Pitch Black (#000000), no background, with a 1px solid Pitch Black (#000000) border bottom, 0px border radius, and 27px padding. Uses the 'Elementa' font at 16px, weight 400.
### Form Input Field
**Role:** Standard input for user data collection.
No background, text in Pitch Black (#000000), with a 1px solid Slate Grain (#767676) border bottom. No padding or border radius. Focus state changes border to Inkwell (#062d32). Placeholder text uses the same style but in a lighter shade.
### Form Input Field (Active)
**Role:** Active state for form inputs.
No background, text in Inkwell (#062d32), with a 1px solid Inkwell (#062d32) border bottom. No padding or border radius.
### Content Section (Old Gold)
**Role:** Distinct background for specific content blocks like forms.
Background color Old Gold (#aa9e54), typically with text in Pitch Black (#000000), with generous vertical padding (e.g., 100-150px) to provide ample breathing room.
### Content Section (Dusty Rose)
**Role:** Background for hero sections or footers.
Background color Dusty Rose (#c9a9b5), with text in Inkwell (#062d32), featuring flexible padding that allows for large illustrations or minimal content.
## Do's and Don'ts
### Do
- Prioritize Elementa for all body text and small labels at 16px, weight 400, for practical legibility.
- Use Adobe Caslon Pro at 49px (weight 300) for major headings to establish a classic, refined tone.
- Implement Inkwell (#062d32) as the primary accent for active states, link underlines, and subtle borders.
- Maintain a monochromatic palette for most UI elements, reserving Old Gold (#aa9e54) and Dusty Rose (#c9a9b5) for distinct background sections.
- Apply 27px padding uniformly to all buttons for consistent visual weight.
- Ensure all interactive elements and underlines use `0px` radius for a sharp, traditional finish.
- Utilize white Linen (#ffffff) and Parchment (#e9e9e2) as the default canvas colors, switching based on content hierarchy or section distinction.
### Don't
- Avoid using saturated or bright colors beyond the defined Old Gold (#aa9e54) for any UI elements.
- Do not introduce sharp shadows or significant elevation; the design relies on flat, understated surfaces.
- Refrain from using any border radius on buttons, inputs, or interactive elements; all corners should be sharp 0px.
- Do not break the line-based input field style with filled backgrounds or alternative border treatments.
- Avoid crowding elements; ensure generous spacing (e.g., 23px element gap, 136px section gap) to maintain an airy, considered layout.
- Do not use highly decorative fonts or vary font weights beyond 300 and 400; stick to the defined Elementa, Adobe Caslon Pro, and BasicCommercial families.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 1 | Parchment | `#e9e9e2` | Primary content canvas, providing a soft background for text-heavy sections. |
| 2 | Old Gold | `#aa9e54` | Elevated background for distinct content blocks, like forms or highlighted features, offering a warm contrast. |
| 3 | Dusty Rose | `#c9a9b5` | Background for less textual, more illustrative elements such as the hero or footer, serving a decorative role. |
| 4 | White Linen | `#ffffff` | Background for pristine, clean content areas or specific nested components. |
## Imagery
The visual language relies heavily on line illustrations, primarily monochrome (Inkwell #062d32 on pale backgrounds). These illustrations are detailed, depicting scenes with human figures and architectural elements, often in a whimsical, narrative style. They are generally contained compositions, not full-bleed, and serve a decorative and atmospheric role rather than explanatory. There are no photographs or product shots. Icons are simple, outlined, sharing the same stroke weight as the illustrations. Imagery plays a significant role in creating a specific, charming brand mood, complementing the text-heavy layout without overwhelming it.
## Layout
The page structure favors a max-width contained layout, though specific hero sections or illustrations can expand. The hero pattern features a centered, large-scale line illustration against a Dusty Rose (#c9a9b5) background, with minimal text, setting an immediate atmospheric tone. Section rhythm alternates between Parchment (#e9e9e2) and Old Gold (#aa9e54) backgrounds, sometimes introducing White Linen (#ffffff). Content is typically arranged in centered stacks or simple two-column layouts for text-dominant areas. There is ample white space and consistent vertical spacing (136px for sections), creating a feeling of spaciousness. Navigation is a minimalist top bar with ghost text links.
## Agent Prompt Guide
### Quick Color Reference
text: #062d32
background: #e9e9e2
border: #062d32
accent: #aa9e54
primary action: #062d32 (outlined action border)
### 3-5 Example Component Prompts
1. Create an Outlined Primary Action: Transparent background, #062d32 border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.
3. Create a hero section: Background Dusty Rose (#c9a9b5). Centered large responsive line illustration. No text immediately visible, allowing the illustration to dominate. Ensure significant vertical padding top and bottom (e.g., 100px top, 150px bottom) to frame the illustration.
## Similar Brands
- **The Silverlake Wine** — Shares a sophisticated, minimal aesthetic with high contrast text against light backgrounds, emphasizing typography and curated imagery.
- **Typewolf** — Heavy reliance on serif and sans-serif typography for brand identity, with an understated color palette and focus on textual content.
- **Kinfolk Magazine** — Employs an editorial layout with ample white space, muted colors, and a blend of artisanal photography/illustration and classic typography.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-inkwell: #062d32;
--color-parchment: #e9e9e2;
--color-white-linen: #ffffff;
--color-old-gold: #aa9e54;
--color-dusty-rose: #c9a9b5;
--color-slate-grain: #767676;
--color-deep-pewter: #344b52;
--color-pitch-black: #000000;
/* Typography — Font Families */
--font-basiccommercial-lt-com-roman: 'BasicCommercial LT Com Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-adobe-caslon-pro: 'Adobe Caslon Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-elementa: 'Elementa', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 19px;
--leading-caption: 1.18;
--text-body-sm: 38px;
--leading-body-sm: 1.18;
--text-body: 49px;
--leading-body: 1.18;
/* Typography — Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
/* Spacing */
--spacing-unit: 4px;
--spacing-8: 8px;
--spacing-20: 20px;
--spacing-40: 40px;
--spacing-68: 68px;
--spacing-100: 100px;
--spacing-136: 136px;
/* Layout */
--section-gap: 136px;
--card-padding: 27px;
--element-gap: 23px;
/* Named Radii */
--radius-inputs: 0px;
--radius-buttons: 0px;
/* Surfaces */
--surface-parchment: #e9e9e2;
--surface-old-gold: #aa9e54;
--surface-dusty-rose: #c9a9b5;
--surface-white-linen: #ffffff;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-inkwell: #062d32;
--color-parchment: #e9e9e2;
--color-white-linen: #ffffff;
--color-old-gold: #aa9e54;
--color-dusty-rose: #c9a9b5;
--color-slate-grain: #767676;
--color-deep-pewter: #344b52;
--color-pitch-black: #000000;
/* Typography */
--font-basiccommercial-lt-com-roman: 'BasicCommercial LT Com Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-adobe-caslon-pro: 'Adobe Caslon Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-elementa: 'Elementa', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 19px;
--leading-caption: 1.18;
--text-body-sm: 38px;
--leading-body-sm: 1.18;
--text-body: 49px;
--leading-body: 1.18;
/* Spacing */
--spacing-8: 8px;
--spacing-20: 20px;
--spacing-40: 40px;
--spacing-68: 68px;
--spacing-100: 100px;
--spacing-136: 136px;
}
```
Letterpress on aged paper. This…
Editorial Art House
Warm earth-tones, artisan…
Mediterranean sun-drenched linen
Organic luxury, soft earth tones.…
Warm parchment archive.
Editorial canvas, bold type
Vintage academic journal — muted…
Warm parchment memoir

Library of Curated Volumes — each…
Sunset Vineyard Aura
earthy luxury parchment
Boutique bodega postcard

Artist's sketchbook, bursting with…
Sepia-toned literary journal
Artisanal parchment and charcoal…
Gothic manuscript on dark parchment
Minimalist Editorial Canvas
Warm parchment elegance.
Editorial archive, high contrast.