CURATED · OPEN · FREE

Fallengrape

A refined wine brand age-gate using warm, organic earth tones and serif typography.

WarmRefinedCurationPhotographicConsumer

↓ Download design system (22 MB)Open in OpenDesign

Visit: https://www.fallengrape.com

📦 Browse pack contents →

Identity DNA

WineAge-gatePremiumOrganic

A rustic, high-end wine cellar with warm paper textures

Color

#573D21Ink

rgba(87,61,33,0.75)Ink soft

#E3A36EBG

#E1C6ABBG soft

#F3F3F3BG quiet

rgba(87,61,33,0.1)Muted

rgba(87, 61, 33, 0.1)Line

Organic warmth through natural earth tones and high-contrast serif typography.

Typography

transitional-serif · grotesque-sans

display48px · 400
body14px · 400
caption16px · 400

Use Romie for display elements · Use Arial Narrow for body and UI text

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing within the central modal

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid rgba(87, 61, 33, 0.1)

rgba(0, 0, 0, 0.1) 0px 4px 30px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Single centered modal overlay over a full-bleed textured background

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

Simple opacity transitions on hover

Color shift or opacity change on buttons · Direct state change or modal closure

Components

button Flat, rectangular color blocks without borders
card Semi-transparent rectangular modal with subtle drop shadow
hero Full-screen background image with centered modal overlay

Voice & Don'ts

Tone Formal, direct, and compliant
Headlines Large, elegant serif question
CTAs Direct, uppercase sans-serif labels

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
Avoid: Playful language
Avoid: Bright, neon colors
Avoid: Excessive decoration

Inside the pack — real screenshots

Fallengrape — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko