✦ Pattern-first showcase

Build complete interfaces, not just isolated components.

The docs cover every class. This page shows three whole screens built from nothing but Lume, so you can judge the system, not the parts.

Open Docs Admin Demo
10 kBminified + gzipped
25+components, one stylesheet
0dependencies
2 themeslight and dark, token driven
Composed screens

Three screens, one stylesheet.

Every pixel below is a Lume class or a token. No page-specific overrides beyond the window frame around each screen.

Sign in

lume-form-grouplume-inputlume-check-grouplume-btn-primarylume-blockquote
app.lume.dev/sign-in
Lume Workspace

Calm interfaces for teams that ship.

"We replaced three component libraries with one stylesheet and nobody noticed, which is the point."
Maya Johnson, Head of Product

Welcome back

Sign in to continue to your workspace.

Forgot password?

No account? Create a workspace

Dashboard

lume-statlume-tablelume-badgelume-listlume-avatar
app.lume.dev/overview

Overview

Tuesday, 14 September

MRR
$84.2k
+12.5%
Churn
2.4%
-0.3%
Uptime
99.9%
Stable
CustomerStatusAction
ACAlice ChenActive
MWMarcus WebbPending
RWRyan WalkerInactive
Activity
New asset uploaded2m
Team invite accepted14m
Invoice paid1h
MFA enabled for 3 admins3h

Settings

lume-tabslume-switchlume-calloutlume-toastlume-skeletonlume-drawer
app.lume.dev/settings

Account

Profile, preferences and workspace defaults.

Usage warning
You have used 92% of this month's request limit.
Saved
Preferences updated a moment ago.
No passkeys yet
Add a passkey to sign in without a password.

Plan details, invoices and payment methods live here.

Token-driven

Every colour, radius and shadow is a custom property. Restyle the whole system from one block of CSS.

Accessible by default

Visible focus rings, AA contrast on semantic text, reduced-motion handling and ARIA-ready markup patterns.

Low on JavaScript

Everything above works from markup alone. The optional helper adds focus traps, keyboard menus and toasts.

Theme gallery

Same components, ten palettes.

Copy a preset into your stylesheet to restyle everything at once. Presets are optional and not bundled with the core library.

Aurora Night

Dark
Cool + crisp
Theme preview

Balanced contrast with vibrant teal accents.

:root {
  --lume-white: #0f171a;
  --lume-bg: #0b1215;
  --lume-surface: #162227;
  --lume-border: #23343a;
  --lume-border-dark: #2f464d;
  --lume-text: #e8f4f8;
  --lume-text-muted: #abc4cd;
  --lume-text-subtle: #7b99a4;
  --lume-accent: #5ed7c8;
  --lume-accent-light: #12353a;
  --lume-accent-dark: #7debe0;
  --lume-danger: #ef6c68;
  --lume-danger-light: #3a1d21;
  --lume-warning: #f5b358;
  --lume-warning-light: #3d2b16;
  --lume-info: #6bb5ff;
  --lume-info-light: #182c47;
  --lume-success: #43c59b;
  --lume-success-light: #133228;
}

Sunset Ember

Light
Warm editorial
Theme preview

Bright, friendly UI with orange coral accents.

:root {
  --lume-white: #fff5ef;
  --lume-bg: #fff0e7;
  --lume-surface: #ffe6d8;
  --lume-border: #eecfb9;
  --lume-border-dark: #deb69a;
  --lume-text: #40281f;
  --lume-text-muted: #785547;
  --lume-text-subtle: #9f7868;
  --lume-accent: #e7673c;
  --lume-accent-light: #ffd8c8;
  --lume-accent-dark: #b74824;
  --lume-danger: #bf3d2e;
  --lume-danger-light: #ffe3db;
  --lume-warning: #c27c2d;
  --lume-warning-light: #ffedd4;
  --lume-info: #3e82b8;
  --lume-info-light: #dcedf9;
  --lume-success: #2f996e;
  --lume-success-light: #daf4e8;
}

Ocean Depths

Dark
Deep blue
Theme preview

Oceanic tones for data-rich product dashboards.

:root {
  --lume-white: #102036;
  --lume-bg: #0b1728;
  --lume-surface: #132841;
  --lume-border: #1f3959;
  --lume-border-dark: #2f4a6a;
  --lume-text: #e8f2ff;
  --lume-text-muted: #a6bddf;
  --lume-text-subtle: #7f99bf;
  --lume-accent: #54b9f2;
  --lume-accent-light: #19334f;
  --lume-accent-dark: #7ad4ff;
  --lume-danger: #f37b7b;
  --lume-danger-light: #3d232d;
  --lume-warning: #f2b25b;
  --lume-warning-light: #3f301a;
  --lume-info: #6ac8ff;
  --lume-info-light: #17334c;
  --lume-success: #42c49f;
  --lume-success-light: #12372f;
}

Forest Moss

Dark
Natural green
Theme preview

Grounded forest palette for calm productivity apps.

:root {
  --lume-white: #0f1a14;
  --lume-bg: #0b1410;
  --lume-surface: #15241b;
  --lume-border: #24372b;
  --lume-border-dark: #32503f;
  --lume-text: #edf7ee;
  --lume-text-muted: #b2cab6;
  --lume-text-subtle: #88a88d;
  --lume-accent: #62c28a;
  --lume-accent-light: #1a3a2a;
  --lume-accent-dark: #83ddaa;
  --lume-danger: #da6666;
  --lume-danger-light: #3a1e22;
  --lume-warning: #d8a24c;
  --lume-warning-light: #3a2d18;
  --lume-info: #62a5d8;
  --lume-info-light: #182f42;
  --lume-success: #3db178;
  --lume-success-light: #123525;
}

Rose Quartz

Light
Soft pink
Theme preview

Gentle, premium palette for beauty and wellness brands.

:root {
  --lume-white: #fff7fb;
  --lume-bg: #fff1f8;
  --lume-surface: #ffe6f2;
  --lume-border: #efcddd;
  --lume-border-dark: #deb4c8;
  --lume-text: #3b2431;
  --lume-text-muted: #775164;
  --lume-text-subtle: #9f7689;
  --lume-accent: #d65c9a;
  --lume-accent-light: #f8d6e8;
  --lume-accent-dark: #ab3d78;
  --lume-danger: #c0405a;
  --lume-danger-light: #ffe1ea;
  --lume-warning: #bf7c36;
  --lume-warning-light: #ffeccf;
  --lume-info: #5f8fcb;
  --lume-info-light: #deebfb;
  --lume-success: #3f9d74;
  --lume-success-light: #dbf5e8;
}

Midnight Neon

Dark
Cyber violet
Theme preview

Bold contrast and luminous accents for modern SaaS.

:root {
  --lume-white: #17132b;
  --lume-bg: #110d1f;
  --lume-surface: #1e1736;
  --lume-border: #352857;
  --lume-border-dark: #4a3875;
  --lume-text: #f3eeff;
  --lume-text-muted: #c2b5e9;
  --lume-text-subtle: #9588bf;
  --lume-accent: #a463ff;
  --lume-accent-light: #2b1e49;
  --lume-accent-dark: #c18dff;
  --lume-danger: #ff6f8b;
  --lume-danger-light: #432032;
  --lume-warning: #f8ba54;
  --lume-warning-light: #443114;
  --lume-info: #57d8ff;
  --lume-info-light: #17384a;
  --lume-success: #51d09d;
  --lume-success-light: #15352b;
}

Desert Clay

Light
Earthy neutral
Theme preview

Muted earth tones for editorial and lifestyle products.

:root {
  --lume-white: #f8f2ea;
  --lume-bg: #f4ebe1;
  --lume-surface: #eadfce;
  --lume-border: #d7c5ab;
  --lume-border-dark: #c2ac8f;
  --lume-text: #3e3227;
  --lume-text-muted: #705c4a;
  --lume-text-subtle: #9a806b;
  --lume-accent: #ba6d3f;
  --lume-accent-light: #f3d9c6;
  --lume-accent-dark: #8e4f2b;
  --lume-danger: #b34a39;
  --lume-danger-light: #f8ddd7;
  --lume-warning: #aa7a31;
  --lume-warning-light: #f8ead0;
  --lume-info: #5a89a5;
  --lume-info-light: #d9e9f1;
  --lume-success: #5d8f56;
  --lume-success-light: #dfefdb;
}

Royal Amethyst

Dark
Elegant violet
Theme preview

Lux palette for premium accounts and fintech surfaces.

:root {
  --lume-white: #1a1730;
  --lume-bg: #131026;
  --lume-surface: #211b3d;
  --lume-border: #332a56;
  --lume-border-dark: #483a73;
  --lume-text: #f3f0ff;
  --lume-text-muted: #c7bee9;
  --lume-text-subtle: #988ec0;
  --lume-accent: #8c6cff;
  --lume-accent-light: #2c2152;
  --lume-accent-dark: #af98ff;
  --lume-danger: #e36f8f;
  --lume-danger-light: #452537;
  --lume-warning: #d8a258;
  --lume-warning-light: #443315;
  --lume-info: #68c0ff;
  --lume-info-light: #193750;
  --lume-success: #50c498;
  --lume-success-light: #15372c;
}

Arctic Frost

Light
Icy clean
Theme preview

Airy cool neutrals with calm and professional tone.

:root {
  --lume-white: #f8fcff;
  --lume-bg: #eff8ff;
  --lume-surface: #e2f1fb;
  --lume-border: #c8dcea;
  --lume-border-dark: #aec6d6;
  --lume-text: #1f3443;
  --lume-text-muted: #4f6f86;
  --lume-text-subtle: #7390a4;
  --lume-accent: #3f91d2;
  --lume-accent-light: #d6eaf8;
  --lume-accent-dark: #2f6ea3;
  --lume-danger: #cb5a66;
  --lume-danger-light: #fde1e7;
  --lume-warning: #ba8a3d;
  --lume-warning-light: #f7ecd6;
  --lume-info: #4b9ed8;
  --lume-info-light: #dceefa;
  --lume-success: #3d9b7d;
  --lume-success-light: #dcf2e8;
}

Matcha Mist

Light
Soft green
Theme preview

Muted botanical look with excellent readability.

:root {
  --lume-white: #f7f9f0;
  --lume-bg: #eff4e6;
  --lume-surface: #e5eed9;
  --lume-border: #cad7b7;
  --lume-border-dark: #afc196;
  --lume-text: #2b3722;
  --lume-text-muted: #586b48;
  --lume-text-subtle: #83946d;
  --lume-accent: #6e9b40;
  --lume-accent-light: #deebca;
  --lume-accent-dark: #54782f;
  --lume-danger: #bc5a4a;
  --lume-danger-light: #f8e1db;
  --lume-warning: #ab8634;
  --lume-warning-light: #f3ebd3;
  --lume-info: #4e88a4;
  --lume-info-light: #dbeaf2;
  --lume-success: #4d8f53;
  --lume-success-light: #deefdf;
}
Pricing

Cards that know which plan matters.

The featured plan gets an accent ring and the only solid button, so the eye lands there first.

Starter

$0

Best for prototypes and individual work.

Most popular

$19/mo

For shipping production apps with teams.

Enterprise

Custom

Security reviews, procurement, and onboarding support.

Ready to build with Lume?

Use the docs for class-level reference and this page for compositions you can lift straight into a product.

Read the documentation Open the admin demo