# Drink818 · Design system migration spec

> Source: https://drink818.com  ·  Curated by OpenDesign  ·  en

> The site is a strong example of a premium consumer brand using a restricted, sophisticated palette and non-traditional UI typography (monospaced) to create a distinct and memorable identity.

## 1. Identity DNA

The design system for Drink818 operates like the careful distillation of a fine spirit: each ingredient is reduced to its essential, potent form. It establishes a visual language that is both **modern heritage** and distinctly premium, building an elegant, earthy aesthetic from a disciplined palette and non-traditional typographic choices.

**One-liner:** Premium tequila brand site featuring an elegant, muted earthy palette and a blend of serif and mono typography.
**Keywords:** premium spirits · tequila brand · elegant · sophisticated · modern heritage
**Analogy:** A high-end boutique tequila brand website with a refined, earthy aesthetic.

## 2. Color

The color system is built on a foundation of earthy restraint, using a warm cream background to let dark charcoal text and a muted olive green accent speak with quiet authority. This palette rejects high-chroma vibrancy in favor of a sophisticated, grounded warmth that feels both organic and refined.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F3E9D5` | main background |
| `--ink` | `#0E1111` | body text |
| `--muted` | `#536451` | placeholder |
| `--line` | `rgba(14, 17, 17, 0.12)` | divider |

**Color principle:** Earthy and refined palette using a warm cream background, dark charcoal text, and a muted olive green for secondary sections.

The governing principle is chromatic discipline—every hue is desaturated and warm, ensuring the palette remains cohesive and legible without visual competition.

## 3. Typography

Typographic voice is bifurcated for expressive clarity: a transitional serif carries the brand's bold, all-caps headlines, while a monospaced face handles the majority of UI text with utilitarian precision. This unconventional pairing, applied with wide letter-spacing, creates a distinct, high-end editorial feel that is immediately recognizable.

- **Display:** transitional-serif
- **Body:** monospaced
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 34px | 1.0 | 700 | -1px | Hero headings and primary titles |
| body | 20px | 1.6 | 400 | 0.2px | Body text and navigation links |

**Type rules:**
- All-caps styling for navigation and legal text.
- Wide letter-spacing applied across the interface for a refined look.
- Transitional serif used for expressive text, while monospaced is used for almost all UI elements.

## 4. Spacing

A consistent 4px base grid establishes a measured, architectural rhythm across all spacing decisions, from component padding to the generous vertical gaps between major sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid is used for padding, margins, and component spacing.

## 5. Surfaces

Depth is communicated sparingly, through layered shadows and a single, consistent border weight for subtle division. The system uses flat, opaque surfaces as its primary expression, reserving elevation effects for specific functional needs like modal overlays or interactive lift.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 9999px 0px 9999px rgba(0, 0, 0, 0.4) for modal overlays
  - 0px 0px 10px 3px rgba(122, 122, 122, 0.2) for subtle lift
- **Borders:** 1px solid rgba(14, 17, 17, 0.12) for inputs and subtle dividers.

## 6. Layout

The layout skeleton is a centered, single-column form with generous vertical space, prioritizing editorial presentation over dense information density. Large typographic scales and ample breathing room between elements define the structure, creating a focused, unhurried reading path.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered, single-column layouts with generous vertical spacing and large typography.

## 7. Motion & Interaction

Motion philosophy favors subtlety and precision, employing smooth, duration-controlled transitions for opacity and scale to create a sense of refined interaction. The system relies on a custom cubic-bezier easing curve to give transform-based animations a fluid, non-mechanical quality.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth transitions for background-size and opacity changes.
  - Transform-based animations for page elements with a custom cubic-bezier easing.

- **Hover:** Subtle background-size or opacity transitions on interactive elements.
- **Click:** Standard active states with immediate feedback.
- **Transition:** Uniform 0.3s ease-in transitions applied globally.
- **Keyboard:** Standard focus states implied by accessible design patterns.

## 8. Voice & Don'ts

The editorial voice is one of sophisticated confidence, using bold, all-caps serif headlines for expression and direct, monospaced uppercase for calls to action. Language is precise and legally aware, avoiding casual playfulness to maintain a tone of mature elegance.

- **Tone:** Sophisticated, confident, and legally precise.
- **Headline style:** Bold, all-caps, and expressive serif typography.
- **CTA style:** Direct, uppercase, and functional using a clean monospaced font.
- **Avoid:** Avoid overly playful or casual language. / Avoid bright, high-chroma neon colors. / Avoid dense text blocks without generous spacing.

### Don'ts
- ❌ Don't use bright, high-saturation accent colors — the screenshot shows a muted earthy palette with olive and cream.
- ❌ Don't use rounded, geometric sans-serif fonts for UI — the screenshot exclusively uses transitional-serif and monospaced fonts.
- ❌ Don't use small, cramped spacing — the screenshot shows generous padding and large gaps between elements.
- ❌ Don't use complex, multi-column layouts for content — the screenshot shows a clean, centered single-column layout.
- ❌ Don't use lowercase text for primary navigation or CTAs — the screenshot shows consistent use of uppercase letters.
- ❌ Don't use drop shadows for depth on primary UI elements — the screenshot uses flat colors with very subtle shadows only for overlays.

What this system deliberately omits is as defining as what it includes: it rejects bright neon accents, lowercase UI text, cramped layouts, and complex multi-column grids.

## System Prompt (paste into AI tool)

```
This is a premium spirits brand website with a refined, earthy aesthetic. The color palette is dominated by a warm cream (#F3E9D5) background and dark charcoal (#0E1111) text, accented by a muted olive green (#536451). Typography relies on a blend of transitional-serif for expressive headlines and monospaced fonts for almost all UI elements, all frequently set in uppercase with wide letter-spacing. Critical constraints include avoiding bright neon accents, never using lowercase for primary navigation or CTAs, and ensuring layouts remain centered with generous vertical spacing. The design prioritizes a sophisticated, editorial feel over dense information display.
```