A complete design system for building premium dark-mode interfaces. Near-black surfaces, amber gold accents, editorial typography — the aesthetic that makes high-end software feel like it was designed by a world-class studio.
Every decision in the system traces back to one of three principles. Learn them and you'll never produce a generic dark UI again.
One accent family — warm amber gold by default, or swap in your own color — applied surgically to borders, labels, and numbers. Never as a fill. Near-black backgrounds with warmth baked in, not flat grey.
Hierarchy through color, not weight. All headlines run bold at 700–800. Supporting words dim to #5a544a — same weight, just invisible until needed.
Cards have no visible border. Elevation comes from background contrast and an inset top-edge highlight. Hover adds 2px lift and a deeper shadow at 220ms.
Dark luxury earns its keep when the product matches the aesthetic. Here are the use cases where it converts hardest.
Dashboards and tools that justify a $200/month price tag. The dark luxury aesthetic signals quality before the user reads a single word of copy.
Marketing and portfolio sites that position a team as world-class. Clients look at the site and assume the output will match the craft of the design.
Personal sites and writing platforms with a publishing aesthetic. The typography system was built for this — editorial weight, editorial restraint.
Product pages that make customers feel they're buying something exclusive before they see the price. The palette signals premium without a single word.
The system is product-agnostic. Bring any premium concept.
Color, type, and motion — all defined. The system covers every decision so you never have to make a judgment call mid-build.
Each component is built from the same token set. Swap a variable and the entire UI shifts together. Nothing is hardcoded.