LumaLabs

A cinematic, image-forward AI-product interface built on a pure white canvas and pure black ink, where full-bleed photographic/video heroes carry the brand voltage and the UI chrome stays deliberately quiet. The system pairs the Graphik neo-grotesque (tight negative tracking, weight 500) with soft pill buttons, heavily rounded cards (~24px), and a single deep near-black "Research" band that inverts the page. Restraint is the point — color is almost entirely monochrome, with rare muted accents (tan, navy, green) borrowed from product imagery rather than a painted accent palette.

lumalabs.ai

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-xl 52px · 500 · 1.2

The quick brown fox jumps

display-lg 48px · 500 · 1.2

The quick brown fox jumps

title-md 22px · 500 · 1.4

The quick brown fox jumps

body-md 16px · 500 · 1.5

The quick brown fox jumps

button 16px · 400 · 1.5

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	6px
xs	8px
sm	10px
md	12px
base	16px
lg	20px
xl	24px
xxl	32px
xxxl	40px
section	80px
section-lg	160px

Border Radius

Name	Value	Preview
sm	8px
md	16px
lg	24px

FAQ

What colors does LumaLabs use?: LumaLabs's core palette includes #000000, #202020, #737373, #8c8c8c, #a6a6a6. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the LumaLabs DESIGN.md.
What font does LumaLabs use?: LumaLabs's primary typeface is Graphik. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the LumaLabs design system?: A cinematic, image-forward AI-product interface built on a pure white canvas and pure black ink, where full-bleed photographic/video heroes carry the brand voltage and the UI chrome stays deliberatel…

More like this

↓ .md ↓ All files

loading…