themx
← Back to themes

Luxury Dark

elegant Visual style

Understated opulence in every pixel

Reference year: 2025

Compare this theme

Best for

Ecommerce, Brand & events, Portfolio

Less suitable for

  • Utility interfaces with large tables and frequent form input.

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Luxury Dark preview

Examples

Luxury Dark — Hero Section
Hero Section
Luxury Dark — Card Grid
Card Grid
Luxury Dark — Form
Form
Luxury Dark — Dashboard Layout
Dashboard Layout

Color Palette

Primary #D4AF37
Secondary #C0C0C0
Accent #8B0000
Background #0A0A0A
Text #E5E5E5

Typography

Heading: Playfair Display
Body: Lato

Key Characteristics

  • Dark backgrounds with metallic gold accents
  • Serif headings for sophistication
  • Generous letter-spacing
  • Subtle gradient overlays
  • Thin elegant borders
  • Refined micro-interactions

Tags

dark-mode gold premium serif

Luxury Dark is the digital equivalent of a black-tie event — restrained, sophisticated, and commanding attention through what it withholds rather than what it displays. Inspired by high-end fashion houses, luxury hospitality brands, and premium automotive design, this style communicates exclusivity through deep dark backgrounds punctuated by metallic gold accents and refined serif typography.

When to Use

This style is tailor-made for luxury brands, premium product showcases, high-end hospitality and real estate, jewelry and fashion e-commerce, and any project where the goal is to communicate exclusivity and sophistication. It also works beautifully for photography portfolios and editorial sites that want images to take center stage against a dark canvas. Avoid it for casual consumer apps or content aimed at younger audiences where it may feel unapproachable.

Key Visual Elements

The near-black background (#0A0A0A) provides a canvas of infinite depth. Gold (#D4AF37) is used sparingly — for accent lines, hover states, and key interactive elements — so that each touch of gold feels intentional and precious. Thin 1px borders in low-opacity gold or silver create elegant separations. Subtle gradient overlays add dimension to hero sections. Silver (#C0C0C0) serves as a secondary metallic for less prominent elements, creating a jeweler’s palette.

Typography

Playfair Display with generous letter-spacing (0.05-0.1em) brings old-world elegance to headings, while Lato provides clean, modern readability for body text. Keep headings in regular or medium weight rather than bold — true luxury whispers, it does not shout. Text transforms to uppercase with tracked-out spacing work beautifully for navigation items and labels.

Export style

Choose a library mapping or use the CSS variables in your own components. JSON includes the same mapping. Load the listed fonts separately.

:root {
  --tx-surface-bg: #0A0A0A;
  --tx-font-heading: "Playfair Display", sans-serif;
  --tx-font-body: "Lato", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: rgba(212,175,55,0.03);
  --tx-card-border: rgba(212,175,55,0.15);
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: rgba(212,175,55,0.35);
  --tx-card-shadow-hover: 0 0 16px rgba(212,175,55,0.1);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(229,229,229,0.7);
  --tx-text-subtle: rgba(229,229,229,0.5);
  --tx-link-color: #D4AF37;
  --tx-button-radius: 0;
  --tx-input-bg: rgba(255,255,255,0.03);
  --tx-input-border: rgba(212,175,55,0.2);
  --tx-text: #E5E5E5;
  --tx-primary: #D4AF37;
  --tx-secondary: #C0C0C0;
  --tx-accent: #8B0000;
  --tx-media-filter: none;
}

Prompt Builder

Choose your project, UI library, and output. Prompts, documents, and exports use the same resolved theme values.

Example projects:

Use your own components with the exported CSS variables.

Components

Changing the page purpose selects suggested components. You can adjust them below.

Optional design layers

Apply a layout, then a surface effect, then a color mode. Fonts stay with the base theme. The output contains one final token set.

Luxury Dark

Live component preview

Try the sample controls. daisyUI uses compiled library classes; shadcn/ui uses React components from the New York registry. The three example layouts demonstrate styling with the selected tokens. All content is demo data.

Optional skills

Include skill references and installation instructions for your coding agent. Selecting a skill here does not install it.

Choose daisyUI or shadcn/ui to include its official skill.

Copy this prompt into your coding assistant. The task mode applies to the UI prompt.

Generated prompt

You are building a web application using Next.js with Tailwind.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Not specified
Target users: Not specified
Page purpose: Ecommerce
Framework: Next.js
CSS approach: Tailwind
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Luxury Dark (visual-style)
- Dark backgrounds with metallic gold accents
- Serif headings for sophistication
- Generous letter-spacing
- Subtle gradient overlays
- Thin elegant borders
- Refined micro-interactions

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #D4AF37, secondary #C0C0C0, accent #8B0000, background #0A0A0A, text #E5E5E5
Typography: Playfair Display for headings, Lato for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #0A0A0A;
  --tx-font-heading: "Playfair Display", sans-serif;
  --tx-font-body: "Lato", sans-serif;
  --tx-surface-bg-image: none;
  --tx-card-bg: rgba(212,175,55,0.03);
  --tx-card-border: rgba(212,175,55,0.15);
  --tx-card-border-width: 1px;
  --tx-card-radius: 0.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: rgba(212,175,55,0.35);
  --tx-card-shadow-hover: 0 0 16px rgba(212,175,55,0.1);
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: rgba(229,229,229,0.7);
  --tx-text-subtle: rgba(229,229,229,0.5);
  --tx-link-color: #D4AF37;
  --tx-button-radius: 0;
  --tx-input-bg: rgba(255,255,255,0.03);
  --tx-input-border: rgba(212,175,55,0.2);
  --tx-text: #E5E5E5;
  --tx-primary: #D4AF37;
  --tx-secondary: #C0C0C0;
  --tx-accent: #8B0000;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use a dark background, generous spacing, and a limited number of featured items.

## Interaction
- Use restrained hover transitions and avoid low-contrast text on dark surfaces.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Luxury Dark: Utility interfaces with large tables and frequent form input.

## Components
Generate the following components in this style:
- Navbar
- Cards
- Buttons
- Forms

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Tailwind utility classes with the declared tokens.
Product context is incomplete. Label assumptions and treat the result as a draft until the missing context is supplied.