---
name: Luma
description: "A perfect example of how to balance a clean, professional SaaS UI with playful, expressive 3D elements."
version: alpha

colors:
  background: "#F7F8F9"
  primary: "#131517"
  secondary: "#64666A"
  tertiary: "#F31A7C"
  neutral: "#444648"
  bg-soft: "#FFFFFF"
  line: "rgba(19, 21, 23, 0.1)"

typography:
  display:
    fontFamily: system-ui
    fontSize: 64px
    lineHeight: 1.03
    fontWeight: 600
    letterSpacing: "-1px"
  body-lg:
    fontFamily: system-ui
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: system-ui
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: system-ui
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 15px
  lg: 16px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A refined digital invitation for modern social gatherings*

## Colors

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

- **Background (`#F7F8F9`)** — uses `bg` token
- **Primary text (`#131517`)** — uses `ink` token
- **Secondary text (`#64666A`)** — uses `ink-soft` token
- **Accent (`#F31A7C`)** — uses `accent` token
- **Muted (`#444648`)** — uses `muted` token
- **Borders (`rgba(19, 21, 23, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

- 0 2px 8px rgba(0,0,0,0.04)
- Borders: Subtle 1px solid lines using rgba(19, 21, 23, 0.1)

## Shapes

- `sm`: 8px
- `md`: 15px
- `lg`: 16px
- `pill`: 100px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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