# Luma · Design system migration spec

> Source: https://lu.ma  ·  Curated by OpenDesign  ·  en

> A perfect example of how to balance a clean, professional SaaS UI with playful, expressive 3D elements.

## 1. Identity DNA

Luma operates as a refined digital invitation for modern social gatherings—a platform where the architecture of an event is built with the same care as the event itself. Its design language balances the clean efficiency of a calendar tool with the expressive warmth of a social host, creating a space that feels both organized and inviting.

**One-liner:** A modern platform for creating, hosting, and discovering social events.
**Keywords:** events · social · calendar · hosting · consumer
**Analogy:** A refined digital invitation for modern social gatherings

## 2. Color

The color system is built upon a light, neutral canvas that acts as a stage. A high-chroma pink accent provides the playful energy, while a dark gray handles primary text with clarity, ensuring the vibrant 3D imagery remains the focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F8F9` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#131517` | body text |
| `--ink-soft` | `#64666A` | secondary text |
| `--muted` | `#444648` | placeholder |
| `--accent` | `#F31A7C` | single accent |
| `--line` | `rgba(19, 21, 23, 0.1)` | divider |

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

This restraint ensures the palette supports content rather than competing with it.

## 3. Typography

Typography is set in a system font stack for optimal performance and native feel. The voice is established through tight negative letter spacing on display sizes and a clear weight hierarchy—600 for bold headlines, 400 for body copy—creating a clean, geometric sans-serif presence.

- **Display:** system-ui
- **Body:** system-ui

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.03 | 600 | -1px | Hero headline |
| body-lg | 20px | 1.5 | 400 | 0px | Hero subheadline |
| body | 16px | 1.5 | 400 | 0px | Default body text |
| caption | 14px | 1.5 | 400 | 0px | Secondary text and navigation |

**Type rules:**
- Tight negative letter spacing on display sizes
- System font stack for optimal performance
- Font weight of 600 for display headings, 400 for body

## 4. Spacing

The layout breathes on a consistent 4px base grid, with generous spacing that creates an open, airy rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid with generous spacing to create an open, airy layout.

## 5. Surfaces

Depth is suggested, not declared. Surfaces use a single, subtle shadow (`0 2px 8px rgba(0,0,0,0.04)`) and delicate 1px borders to lift elements from the canvas without heaviness.

- **Radius:** sm 8px · md 15px · lg 16px · pill 100px
- **Shadows:**
  - 0 2px 8px rgba(0,0,0,0.04)
- **Borders:** Subtle 1px solid lines using rgba(19, 21, 23, 0.1)

## 6. Layout

The foundational skeleton is a spacious two-column hero, with text occupying the left and a large 3D illustration anchoring the right. This clear hierarchy extends into a generous grid system that maintains alignment and proportion across breakpoints.

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

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

## 7. Motion & Interaction

Motion is treated as a functional polish. A consistent 0.3s cubic-bezier transition governs all state changes, from hover effects to cascading animations that introduce sequential content with fluid, unobtrusive timing.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth 0.3s transitions for hover and focus states
  - Cascading animations for sequential elements

- **Hover:** Subtle background color or opacity shift with a 0.3s transition.
- **Click:** Immediate visual feedback with a slight scale or opacity change.
- **Transition:** Global 0.3s cubic-bezier(0.4, 0, 0.2, 1) for all state changes.
- **Keyboard:** Visible focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is welcoming, encouraging, and effortless. It favors short, punchy phrases and direct, action-oriented language like 'Create Your First Event', deliberately avoiding overly formal or corporate diction.

- **Tone:** Welcoming, encouraging, and effortless.
- **Headline style:** Short, punchy phrases with a mix of neutral and vibrant colors.
- **CTA style:** Direct and action-oriented, like 'Create Your First Event'.
- **Avoid:** Overly formal or corporate language / Dense blocks of text / Complex jargon

### Don'ts
- ❌ 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.

The system explicitly avoids dense text blocks and complex jargon, prioritizing clarity and approachability above all.

## System Prompt (paste into AI tool)

```
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.
```
