CURATED · OPEN · FREE

Genesis

Premium automotive brand with cinematic dark aesthetic and sharp geometric precision

automotive

↓ Download design system (18 MB)Open in OpenDesign

Visit: https://www.genesis.com

📦 Browse pack contents →

Identity DNA

Luxury AutomotivePerformancePrecisionSophistication

A high-end luxury vehicle showroom with cinematic lighting

Color

#ffffffInk

#6e6e6eInk soft

#000000BG

#1a1a1aBG soft

#f1f1f1BG quiet

rgba(26, 26, 26, 1.0)Line

High contrast monochromatic palette with dramatic lighting effects

Typography

grotesque-sans · humanist-sans

display40px · 400
h140px · 400
h224px · 400
body16px · 400
caption14px · 400

Headlines use all caps with wide letter spacing · Body text maintains generous line height · Font weight stays light to medium throughout

Spacing

4px

8px

12px

16px

24px

32px

40px

48px

56px

64px

96px

Generous spacing with 24px as primary content gap

Surfaces

sm · 2px

md · 0px

lg · 0px

pill · 0px

Minimal with 1px solid borders in dark tones

0 0 5px 0 rgb(128, 128, 128) · 0 0 18px 0 rgba(0, 0, 0, 0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero with left-aligned content overlay

Motion & Interaction

200msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions on hover · Opacity fade for visibility changes · Transform animations for interactive elements

Color transition with 0.2s ease-in-out · Subtle scale or opacity change

Components

button Minimal outlined with rounded corners
card Image-forward with overlaid typography
input Minimal underlined style
hero Cinematic full-bleed photography with text overlay

Voice & Don'ts

Tone Confident and aspirational
Headlines Bold declarative statements in all caps
CTAs Clean understated actions

Don't use playful or rounded elements — screenshot shows sharp geometric precision
Don't apply busy backgrounds — screenshot shows clean photographic focus
Don't use multiple accent colors — screenshot shows monochromatic palette
Don't create cramped layouts — screenshot shows generous whitespace and spacing
Don't use heavy font weights — screenshot shows light to medium typography
Don't add decorative borders — screenshot shows minimal 1px borders only
Don't use rounded containers — screenshot shows sharp corners throughout
Avoid: Overly technical jargon
Avoid: Casual or playful language
Avoid: Crowded layouts
Avoid: Bright saturated colors
Avoid: Decorative elements

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Genesis automotive website featuring premium luxury branding with cinematic dark aesthetic. Primary colors are #000000 and #1a1a1a backgrounds with #ffffff text and #6e6e6e muted tones. Typography uses grotesque-sans for display and humanist-sans for body text at 40px and 16px respectively. Layout employs full-width hero sections with generous 24px spacing. Critical constraints: avoid rounded elements, maintain monochromatic palette, preserve generous whitespace, use light font weights, and keep decorative elements minimal.

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