← Back to Skills / Marketplace / dark-luxury
SKL · 04● FREE

DarkLuxury.

Deep warm darks, confident typography, one electric accent — the visual language of apps that cost money and look like it.

● Live preview · Dark Luxury demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

This is what people picture when they imagine a "real" premium app. Deep, warm dark backgrounds. Typography that's confident without shouting. Bright single accent color that appears just enough to feel intentional, never decorative. The visual language of a high-end product — the kind of app that costs money and looks like it. Think Raycast, Pitch, or a luxury watch brand's website. If your goal is to make users feel like they're using something premium before they've even tried it, this is the skill.

● Looks Like
RaycastPitchLinearVercel's dark modeHigh-end fintech appsLuxury e-commercePremium AI tools
02 · Best For / Avoid If
＋ Best For
+SaaS products you're charging real money for
+AI tools and developer tools that want to feel premium
+Fintech, productivity, and professional tools
+Anything where first impressions directly affect conversion
+Apps you want to feel like they were built by a funded team
× Avoid If
×You're targeting casual or everyday consumer users who might find dark interfaces cold or intimidating
×Your brand needs to feel warm, friendly, and approachable above all else
×You have lots of imagery — photography sits awkwardly in very dark interfaces
×Your users are likely to use the app in bright outdoor environments where dark interfaces are harder to read
03 · Design Philosophy
01

Dark is not the absence of color — it's a color

The difference between a dark app that feels premium and one that just feels dark is the specific tone of the background. Warm dark (with a very slight brown or charcoal undertone) feels expensive. Cold dark (blue-black or pure black) feels like a developer made it. This skill uses warm dark backgrounds throughout.

02

The accent earns its power through restraint

One accent color. Used only on the elements that need the most attention — the primary CTA, the active state, the key metric. The reason the accent feels electric is because it appears so rarely. The moment you use it on three different things, it stops being an accent and becomes a color scheme.

03

Typography carries the premium signal

In a dark luxury interface, typography does what decoration does elsewhere. The weight, size, and spacing of text communicates the quality of the product before the user reads a single word. Headlines are large and confident. Body text has room to breathe. Labels are small, precise, and unhurried.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Pure black background
#000000 looks like a developer forgot to set a background color. The background needs warmth — a very dark charcoal or near-black with a slight tint.
! WARNING
Too many accent colors
Claude often introduces secondary and tertiary colors when working in dark mode. Name your one accent and say "no other colors except grays and this accent."
! WARNING
Illegible body text
On dark backgrounds, white text at full opacity is harsh and tiring to read. Ask Claude to use slightly off-white (warm cream or very light gray) for body text rather than pure white.
! WARNING
Border overuse
In dark UI, borders everywhere create a cluttered, low-quality feel. Use them sparingly — only where you genuinely need separation.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD