CURATED · OPEN · FREE

Luma

A modern platform for creating, hosting, and discovering social events.

eventsrefinedproduct

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://lu.ma

📦 Browse pack contents →

Identity DNA

eventssocialcalendarhostingconsumer

A refined digital invitation for modern social gatherings

Color

#F31A7CAccent

#131517Ink

#64666AInk soft

#F7F8F9BG

#FFFFFFBG soft

#444648Muted

rgba(19, 21, 23, 0.1)Line

A light, neutral canvas that lets the playful 3D imagery and vibrant pink accents pop.

Typography

system-ui

display64px · 600
body-lg20px · 400
body16px · 400
caption14px · 400

Tight negative letter spacing on display sizes · System font stack for optimal performance · Font weight of 600 for display headings, 400 for body

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

A consistent 4px base grid with generous spacing to create an open, airy layout.

Surfaces

sm · 8px

md · 15px

lg · 16px

pill · 100px

Subtle 1px solid lines using rgba(19, 21, 23, 0.1)

0 2px 8px rgba(0,0,0,0.04)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Two-column hero layout with text on the left and a large 3D illustration on the right.

Motion & Interaction

220msmicro

400mssmall

800msmedium

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

Smooth 0.3s transitions for hover and focus states · Cascading animations for sequential elements

Subtle background color or opacity shift with a 0.3s transition. · Immediate visual feedback with a slight scale or opacity change.

Components

button High contrast pill-shaped CTA (dark gray background, white text) with subtle hover transitions.
card Softly rounded containers with subtle borders or shadows.
chip Small, pill-shaped badges for secondary information.
input Clean, rounded input fields with subtle borders.
hero A split layout featuring a bold headline and a large, circular 3D illustration.

Voice & Don'ts

Tone Welcoming, encouraging, and effortless.
Headlines Short, punchy phrases with a mix of neutral and vibrant colors.
CTAs Direct and action-oriented, like 'Create Your First Event'.

Don't use a dark background for the hero — the screenshot shows a light, airy background.
Don't use a serif font for headlines — the screenshot shows a clean, geometric sans-serif stack.
Don't use sharp, 90-degree corners on all elements — the screenshot shows a mix of 8px, 15px, and pill shapes.
Don't use a muted or monochrome palette — the screenshot features a vibrant pink accent and 3D color illustration.
Don't use a standard rectangular layout for the hero image — the screenshot shows a large, circular 3D composition.
Don't use a complex navigation bar — the screenshot shows a minimal, clean top-right navigation.
Avoid: Overly formal or corporate language
Avoid: Dense blocks of text
Avoid: Complex jargon

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Luma is a refined, modern platform for hosting social events. The design uses a light, neutral background (#F7F8F9) with a clean system font stack. A vibrant pink accent (#F31A7C) provides a playful touch against the minimalist canvas. Key critical donts: never use a dark background for the hero section; avoid serif typography; and do not apply sharp, square corners to all UI components. The hero features a large, circular 3D illustration that adds depth and visual interest, while the typography relies on tight letter-spacing for display sizes to create a bold, contemporary feel.

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