Skip to main content
Back to Examples

Luma

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

Events platform. Nearly-white canvas, one rainbow-gradient hero, charcoal actions and translucent floating cards.

23
core colors
3
typefaces
41
tokens
Now playing — motion preview
01

Palette

primary
#F31A7C
on-primary
#FFFFFF
primary-hover
#D5176D
surface
#FFFFFF
surface-secondary
#F7F8F9
surface-tertiary
#EBECED
on-surface
#131517
on-surface-secondary
#737577
on-surface-tertiary
#B3B5B7
hairline
#D2D4D7
hairline-soft
#EBECED
divider
RGBA(19,21,23,0.08)
success
#3CBD2C
warning
#D69712
error
#ED2B32
barney
#AB46DD
purple
#682FFF
blue
#146AEB
green
#3CBD2C
yellow
#D69712
orange
#F8712B
red
#ED2B32
gradient-rainbow
LINEAR-GRADIENT(-45DEG, #8A18A8 0%, #CE2756 51.6%, #E7A90D 100%)
02

Typography

displayThe quick brown fox jumps-apple-system, system-ui, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif
64px
headlineThe quick brown fox jumps{typography.display.fontFamily}
24px
section-titleThe quick brown fox jumps{typography.display.fontFamily}
20px
body-lgThe quick brown fox jumps{typography.display.fontFamily}
18px
body-mdThe quick brown fox jumps{typography.display.fontFamily}
16px
labelThe quick brown fox jumps{typography.display.fontFamily}
14px
captionThe quick brown fox jumps{typography.display.fontFamily}
13px
monoThe quick brown fox jumps"SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace
03

Spacing & Shape

TokenValuePreview
xs4px
sm8px
md14px
lg20px
xl24px
2xl40px
04

Border Radius

TokenValuePreview
sm8px
md15px
lg16px
full9999px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: luma-design
version: alpha
description: >
  Luma's canvas is clean white (#fff) over a near-black ink (#131517), kept deliberately
  neutral so the brand color can pop: a hot cranberry pink (#f31a7c) used for the logo,
  links, primary actions, and editor accents. Its signature flourish is the diagonal
  rainbow gradient (purple → cranberry → amber) splashed across hero words ("start here.")
  and 3D playful illustrations (pool floats, flamingos, confetti). Type is the system
  UI stack (San Francisco / Inter), weights 300–600, with large tight-tracked titles.
  Shapes are very round — 15px buttons, big pill chat bubbles. Depth comes from a 5-layer
  ultra-soft shadow ladder; motion uses a 0.3s standard ease plus a springy bounce curve.
colors:
  # Brand
  primary: '#f31a7c'          # cranberry — brand, links, primary CTAs, editor accents
  on-primary: '#ffffff'
  primary-hover: '#d5176d'    # cranberry-60 active
  # Surface (light)
  surface: '#ffffff'          # primary background
  surface-secondary: '#f7f8f9'# elevated/secondary panels (gray-10)
  surface-tertiary: '#ebeced' # tertiary (gray-20)
  # Text
  on-surface: '#131517'       # primary ink (--primary-color)
  on-surface-secondary: '#737577' # secondary (gray-70)
  on-surface-tertiary: '#b3b5b7'   # tertiary (gray-50)
  # Hairlines
  hairline: '#d2d4d7'         # primary border (gray-40)
  hairline-soft: '#ebeced'    # secondary border / dividers
  divider: 'rgba(19,21,23,0.08)'
  # Semantic
  success: '#3cbd2c'
  warning: '#d69712'
  error: '#ed2b32'
  # Accent spectrum (event/category theming)
  barney: '#ab46dd'           # violet
  purple: '#682fff'
  blue: '#146aeb'
  green: '#3cbd2c'
  yellow: '#d69712'
  orange: '#f8712b'
  red: '#ed2b32'
  # Signature gradient
  gradient-rainbow: 'linear-gradient(-45deg, #8a18a8 0%, #ce2756 51.6%, #e7a90d 100%)'
typography:
  display:
    fontFamily: '-apple-system, system-ui, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif'
    fontSize: 64px            # hero "Delightful events"
    fontWeight: 500
    lineHeight: 1.2           # 65.92px
    letterSpacing: -1px
  headline:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 24px            # font-size-xxxl
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  section-title:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 20px            # --section-title-font-size 1.25rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 18px            # 1.125rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px            # 1rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px            # .875rem
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 13px            # .8125rem
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  mono:
    fontFamily: '"SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace'
rounded:
  sm: 8px      # links / small chips
  md: 15px     # buttons (default)
  lg: 16px     # cards / panels
  full: 9999px # avatars, pill bubbles
spacing:        # base unit 4px (rem-driven)
  xs: 4px
  sm: 8px
  md: 14px      # input horizontal padding .875rem
  lg: 20px      # modal horizontal padding 1.25rem
  xl: 24px
  2xl: 40px
components:
  button-primary:                 # "Create Your First Event" (here near-black) / brand CTA
    backgroundColor: '{colors.on-surface}'   # primary actions render near-black on hero
    textColor: '{colors.surface}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '0.625rem 0.875rem'
  button-brand:                   # cranberry CTA (e.g. in-app "Register")
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
  button-secondary:               # "Sign In"
    backgroundColor: 'rgba(19,21,23,0.04)'
    textColor: 'rgba(19,21,23,0.64)'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '7px 10px'
  input:
    backgroundColor: '{colors.surface}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.sm}'
    typography: '{typography.body-md}'
    padding: '0.625rem 0.875rem'
    height: 'calc(2.25rem + 2px)'
  card:
    backgroundColor: '{colors.surface}'
    borderColor: '{colors.hairline-soft}'
    rounded: '{rounded.lg}'
    boxShadow: '{shadows.light}'
  chat-bubble-me:
    backgroundColor: '#287eff'    # chat-blue
    textColor: '#ffffff'
    rounded: '{rounded.full}'
  chat-bubble-other:
    backgroundColor: 'rgba(19,21,23,0.04)'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.full}'
shadows:
  xs: '0 1px 4px rgba(0,0,0,0.1)'
  sm: '0 1px 3px rgba(0,0,0,.02), 0 2px 7px rgba(0,0,0,.03), 0 3px 14px rgba(0,0,0,.04), 0 7px 29px rgba(0,0,0,.05), 0 20px 80px rgba(0,0,0,.06)'
  light: '0 1.6px 3px rgba(0,0,0,.02), 0 4.2px 7px rgba(0,0,0,.03), 0 8px 14px rgba(0,0,0,.04), 0 17.5px 29px rgba(0,0,0,.05), 0 48px 80px rgba(0,0,0,.06)'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  easing-bounce: 'cubic-bezier(0.54, 1.12, 0.38, 1.11)'
  duration-fast: 200ms
  duration-standard: 300ms
  duration-slow: 600ms
icons:
  style: outline
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.on-surface-secondary}'

Luma

luma-design · alpha

Overview

Luma pairs a clean white canvas (#fff) with a near-black ink (#131517) and keeps that base intentionally neutral so its hot cranberry pink (#f31a7c) can do all the talking — it is the logo, the links, the primary actions, and every editor/selection accent. The personality is delightful and playful: the hero word "here." and the "start" run through a diagonal rainbow gradient (purple → cranberry → amber), and the hero art is glossy 3D illustration (pool floats, an inflatable flamingo, confetti sparkles, a calendar) — a deliberately fun, consumer-grade tone that sets Luma apart from sober B2B SaaS. Type is the native system UI stack (San Francisco on Apple, Inter as substitute), kept light-to-medium with large, tight-tracked titles. Shapes are very round — 15px buttons and fully-pill chat bubbles. Depth is built from an ultra-soft 5-layer shadow ladder (each layer ≤6% black) so cards float gently, and interactions use a 0.3s standard ease plus a springy bounce curve that gives the product its bouncy, friendly feel.

Colors

Brand — primary #f31a7c (cranberry) is the heart of Luma. It colors the wordmark, all text links (a), the in-product primary CTA / "Register" button, and editor accents (selection, resize handles, active toolbar button). Hover/active deepens to #d5176d. Note the marketing hero CTA "Create Your First Event" renders near-black for contrast against the pastel art — cranberry is the system primary, near-black a contextual one.

Surface — surface #fff; surface-secondary #f7f8f9 for elevated/secondary panels; surface-tertiary #ebeced. Modals/menus use translucent white (rgba(255,255,255,0.867)) with a 16–24px backdrop blur.

Text — four-step ink ramp: on-surface #131517, on-surface-secondary #737577, on-surface-tertiary #b3b5b7, plus an even fainter quaternary #dee0e2. Secondary text is also available as alpha (rgba(19,21,23,0.64)).

Hairlines — hairline #d2d4d7 for input/primary borders; hairline-soft #ebeced for card edges; divider rgba(19,21,23,0.08) for rules, often as a fading gradient-divider.

Accent spectrum — a full named ramp (barney violet, purple, blue, green, yellow, orange, red) used for event/category theming and status, each with 5→90 shades and pale/faint translucent variants.

Signature gradient — gradient-rainbow (-45deg, #8a18a8 → #ce2756 → #e7a90d) is the hero text fill and Luma's most recognizable brand asset.

Typography

Family: the system UI stack — -apple-system, system-ui, Inter, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif (so it renders as San Francisco on macOS/iOS). Closest open-source substitute: Inter. Mono is "SF Mono", Menlo, Monaco. Weights: light 300, regular 400, medium 500, bold 600. Line-heights are tokenized: 1.5 default, 1.3 reduced, 1.2 titles, 1.15 reduced-title. Large titles get −1px tracking.

TokenSizeWeightLine-heightTrackingUsage
display64px5001.2−1pxHero "Delightful events"
headline24px6001.20Page / large section titles (xxxl)
section-title20px6001.20Section headers
body-lg18px4001.50Lead paragraph copy
body-md16px4001.50Standard body / nav
label14px5001.50Buttons, form labels
caption13px4001.50Meta, timestamps

Font-size scale (rem): xxxs .625 / xxs .75 / xs .8125 / sm .875 / md 1 / lg 1.125 / xl 1.25 / xxl 1.375 / xxxl 1.5.

Layout

Spacing is rem-driven on a 4px base; common steps 4 / 8 / 14 / 20 / 24 / 40. The homepage is a split hero: left column (wordmark, gradient headline, subcopy, dark CTA) and right column (the floating 3D phone mockup). Inputs are 14px horizontal / 10px vertical padding; modals use 16px vertical / 20px horizontal. The footer is a calm surface-secondary band with inline link rows and social icons. Whitespace is generous and airy, reinforcing the light, friendly feel.

Elevation & Depth

Depth is the soft-shadow ladder (xs → xl): each level stacks up to five offsets, all at ≤6% black, producing a very diffuse, realistic float (e.g. light = 0 1.6px 3px/.02 … 0 48px 80px/.06). Modals add a 1px outline + inset bottom highlight (shadow-modal). Menus/sheets layer translucent fills with blur(16px) backdrop. No hard or dark shadows — everything is gentle and consumer-soft.

Shapes

Round-leaning vocabulary: 8px (links, small chips, inputs), 15px (the default button radius — notably rounder than typical SaaS), 16px (cards/panels), and full for avatars and chat bubbles (radius computed from line-height so bubbles are true pills). The geometry signals approachable and fun, not technical.

Components

  • button-primary — near-black fill / white text, 15px radius (marketing hero CTA).
  • button-brand — cranberry #f31a7c fill / white text, 15px radius (in-product primary, e.g. "Register").
  • button-secondary — rgba(19,21,23,0.04) tint fill, muted text, 15px radius ("Sign In").
  • input — white fill, #d2d4d7 1px border, 8px radius, ~38px tall.
  • card — white fill, soft light shadow, 16px radius, hairline-soft edge (event cards, calendar tiles).
  • chat bubbles — "me" bubble #287eff blue / white; "other" bubble rgba(19,21,23,0.04) / ink; both fully pill.

Motion

Two durations matter: standard 300ms and fast 200ms, on cubic-bezier(0.4,0,0.2,1). The personality differentiator is the bounce curve cubic-bezier(0.54,1.12,0.38,1.11) applied to playful elements (entrances, toggles), giving Luma its springy, joyful motion. A slow 600ms variant covers large transitions. Backdrop blurs animate in for menus/modals. Avoid harsh linear snaps — Luma leans warm and elastic.

Iconography

Outline icons on a 24px grid, rendered 16/20/24px, default on-surface-secondary, turning on-surface or cranberry on active. Integration brand colors are tokenized (Google #4285f4, Zoom #2d8cff, Discord #5865f2, etc.). The decorative hero uses full-color 3D rendered illustration rather than flat icons.

Do's and Don'ts

  • Do keep the canvas white with a four-step ink ramp; let cranberry #f31a7c be the one loud color.
  • Do use the rainbow gradient (gradient-rainbow) for hero/brand text moments only.
  • Do use 15px button radius and pill chat bubbles — Luma is rounder than typical SaaS.
  • Do apply the bounce easing to playful interactions for the signature springy feel.
  • Do keep shadows ultra-soft and multi-layer; never harsh.
  • Don't render a dark UI for the marketing surface — the canvas is light.
  • Don't flood large surfaces with cranberry or the accent spectrum; use spectrum colors for event/category theming and status.
  • Don't swap the playful 3D illustrations for flat corporate vectors — the delight is the brand.

Known Gaps

  • Luma exposes an unusually complete :root token set (captured above). The full token file is large; spacing/component tokens beyond those listed (timeline, rich-text editor) were truncated. Hero CTA color is contextual (near-black on the pastel hero) while the system primary is cranberry — both documented.