Lume — A Minimal CSS Library

Auth Screens

Reusable login and sign-up shells using native Lume form patterns, callouts, and action rows.

Welcome back Secure

Password

Keep me signed in

Create your workspace

Workspace name

Work email

Includes onboarding checklists, starter templates, and role permissions by default.

Landing Hero + Features

Marketing-ready section blocks with editorial heading hierarchy, CTA clusters, and feature cards.

For product teams

Ship cleaner UI faster with a calmer design baseline.

Pair reusable tokens with practical components and skip the styling churn. Lume keeps decisions focused and consistent.

No lock-in

Token-driven

Theme once with CSS variables and keep scale coherent.

Accessible defaults

Focus styles, reduced motion, and semantic patterns included.

Low-JS friendly

Most UI works with markup and tiny interaction helpers.

Pricing Blocks

Composable pricing cards with highlighted plan treatment and clean comparison-ready structure.

Starter

$0

Best for prototypes and individual work.

$19/mo

For shipping production apps with teams.

Enterprise

Custom

Security reviews, procurement, and onboarding support.

Dashboard Composition

Reusable dashboard shell using KPI cards, data tables, and activity lists that can be dropped into admin products.

MRR

$84.2k

+12.5%

Churn

2.4%

-0.3%

Uptime

99.9%

Stable

Customer	Status	Action
Alice Chen	Active
Marcus Webb	Pending

Activity

New asset uploaded2m

Team invite accepted14m

Invoice paid1h

Settings & Preferences

Common settings layout: tabs, profile form, notifications, and a compact action drawer trigger.

Display name

Product updates Weekly digest

Use this panel for MFA toggles, session management, and auth providers.

Use this panel for plan details, invoices, and payment methods.

Empty / Loading / Feedback States

State patterns for loading, no-data, warning context, and inline success/error feedback.

📂

No files yet

Upload your first file to begin.

Usage warning

You are near your request limit.

Saved

Preferences updated.

Theme Gallery

Copy-paste token presets below to quickly restyle Lume in your app. These themes 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: #75614f;
  --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: #5d714d;
  --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;
}

Final CTA Band

Ready to build with Lume?

Use docs for class-level references, and this showcase for compositional patterns you can adapt quickly.

Read Documentation Open Admin Demo