# Fallengrape · Design system migration spec

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

> This site is a great example of using warm, muted earth tones to convey a premium, rustic brand identity without relying on high-contrast or neon colors.

## 1. Identity DNA

The system's identity is built on an analogy: the warmth and texture of a rustic, high-end wine cellar. This translates directly into an organic, premium aesthetic anchored by earth tones and high-contrast serif typography, creating a sense of refined tradition.

**One-liner:** A refined wine brand age-gate using warm, organic earth tones and serif typography.
**Keywords:** Wine · Age-gate · Premium · Organic
**Analogy:** A rustic, high-end wine cellar with warm paper textures

## 2. Color

The palette is built on organic warmth, drawing from natural earth tones. It relies on a muted orange background and a beige semi-transparent modal, contrasted with dark brown text for legibility.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E3A36E` | main background |
| `--bg-soft` | `#E1C6AB` | card background |
| `--bg-quiet` | `#F3F3F3` | quiet area |
| `--ink` | `#573D21` | body text |
| `--ink-soft` | `rgba(87,61,33,0.75)` | secondary text |
| `--muted` | `rgba(87,61,33,0.1)` | placeholder |
| `--line` | `rgba(87, 61, 33, 0.1)` | divider |

**Color principle:** Organic warmth through natural earth tones and high-contrast serif typography.

The principle is clear: warmth is achieved through muted, natural hues, never through bright, high-chroma accents.

## 3. Typography

Typographic voice is established through a deliberate contrast: the elegant transitional serif **Romie** for display headlines, paired with the clean, condensed grotesque sans-serif **Arial Narrow** for body and UI text. This juxtaposition defines the system's premium yet functional character.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 400 | -1px | Main question |
| body | 14px | 1.3 | 400 | 1px | Legal text |
| caption | 16px | 1.5 | 400 | 0.6px | Button labels |

**Type rules:**
- Use Romie for display elements
- Use Arial Narrow for body and UI text

## 4. Spacing

Spacing rhythm is generous and vertical, particularly within the central modal, creating a calm, breathable reading pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing within the central modal

## 5. Surfaces

Surfaces are defined by depth and clarity. The semi-transparent modal is set apart by a very subtle, soft drop shadow and a fine, warm-toned border.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 4px 30px 0px
- **Borders:** 1px solid rgba(87, 61, 33, 0.1)

## 6. Layout

The layout skeleton is singular and focused: a full-bleed, textured background image with a centered modal overlay. This structure concentrates all user attention on the age-gate interaction.

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

**Skeleton:** Single centered modal overlay over a full-bleed textured background

## 7. Motion & Interaction

Motion philosophy is one of subtlety and restraint. Interactivity is communicated through simple opacity transitions on hover and standard focus management, using a consistent 0.3s ease-in-out timing.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Simple opacity transitions on hover

- **Hover:** Color shift or opacity change on buttons
- **Click:** Direct state change or modal closure
- **Transition:** 0.3s ease-in-out for basic transforms
- **Keyboard:** Standard focus management for modal

## 8. Voice & Don'ts

The editorial voice is formal, direct, and compliant, mirroring the functional necessity of an age-gate. Headlines are elegant serif questions, while calls-to-action are direct, uppercase sans-serif labels.

- **Tone:** Formal, direct, and compliant
- **Headline style:** Large, elegant serif question
- **CTA style:** Direct, uppercase sans-serif labels
- **Avoid:** Playful language / Bright, neon colors / Excessive decoration

### Don'ts
- ❌ Don't use bright, high-chroma accents — screenshot shows muted earth tones instead
- ❌ Don't use purely geometric sans-serif for headlines — screenshot uses a transitional serif
- ❌ Don't use small, cramped spacing — screenshot shows generous vertical padding in the modal
- ❌ Don't use heavy drop shadows — screenshot uses a very subtle, soft shadow
- ❌ Don't use sharp, rounded corners on the modal — screenshot shows sharp, unrounded edges
- ❌ Don't use white backgrounds for the main container — screenshot uses a semi-transparent beige

The system deliberately avoids playful language, bright colors, and excessive decoration, committed to a calm, sophisticated tone.

## System Prompt (paste into AI tool)

```
This design is a refined wine brand age-gate overlay, positioning itself as premium and organic. The palette relies heavily on warm earth tones, specifically a muted orange background (#E3A36E) and a beige semi-transparent modal (#E1C6AB), paired with dark brown text (#573D21). Typography contrasts an elegant transitional serif (Romie) for the main question with a clean, condensed grotesque sans (Arial Narrow) for UI elements. The layout is a single, centered modal with generous vertical spacing. Critical donts include: never use bright, high-chroma accents; avoid purely geometric sans-serifs for display; and ensure generous spacing rather than cramped layouts. The overall mood is calm, rustic, and sophisticated.
```