NoirLuxe Design System

NoirLuxe Design System mockup preview
Click to expand

NoirLuxe is a dark, gold-accented design system that exudes exclusivity and refined taste. Designed for premium membership platforms and luxury brand experiences, it pairs near-black surfaces with restrained gold accents to convey sophistication. Gold is used with surgical precision -- a single line, a badge, a hover state -- never splashed broadly. Every shadow carries warmth; every surface whispers black-tie elegance.

Surface Base#0C0C0E
Gold#C9A84C
Warm White#F2F0EB
Success#4ADE80
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

headlineDancing Script · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

heading 2Dancing Script · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

heading 3Dancing Script · 24px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

heading 4Inter · 18px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 15px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallInter · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

tinyInter · 11px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

NoirLuxe is a dark, gold-accented design system that exudes exclusivity and refined taste. Designed for premium membership platforms and luxury brand experiences, it pairs near-black surfaces with restrained gold accents to convey sophistication. Gold is used with surgical precision -- a single line, a badge, a hover state -- never splashed broadly. Every shadow carries warmth; every surface whispers black-tie elegance.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

defaultactivesuccesswarningexpiredpremium

Checkbox

default

checked

focus

Radio Button

default

selected

Tooltip

default

Elevation & Depth

glow-gold-sm
glow-gold-md
glow-gold-lg
shadow-warm-sm
shadow-warm-md
shadow-warm-lg

Do's & Don'ts

Do

Use gold exclusively for the single most important action or indicator on any screen.
Maintain warm-tinted shadow blacks (#0C0C0E, #161618) instead of cool greys.
Use Dancing Script only for headings and display text, never for body copy.
Keep typography light-weight (300-400) for body text to maintain elegance.
Use generous letter-spacing on uppercase labels to convey luxury.
Ensure gold text passes WCAG AA contrast (minimum 4.5:1) against dark surfaces.

Don't

Apply gold backgrounds to large areas – gold is an accent, never a fill.
Use bright white (#FFFFFF); always use warm-white (#F2F0EB) for text.
Combine gold glow with colored semantic states – let each speak alone.
Crowd elements; luxury demands whitespace and breathing room.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.7 KB
Downloads 0
dark elegant landing-page luxury premium

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/noirluxe and implement it in my code

Don't have the MCP? Install it here