A
ARTIFX
DarkNightReduced GlareModern2018–Present#17 · Dark

Dark Mode UI

The modern default for developer tools, productivity apps, and anything used at night. Dark surfaces, subtle elevation, and a cool grey palette.

Live Preview
Real components, rendered in the Dark Mode UI style.

Everything you see below — buttons, cards, type and colour — is this theme applied live, so you know exactly how your product would feel.

Component Card
Uses the real Dark Mode UI tokens — not a stock image.

Color Palette

Base Dark
#111827
Card Dark
#1F2937
Border
rgba(255,255,255,0.0…
Blue Accent
#3B82F6
Body Text
#D1D5DB

Typography

DisplayAa Bb Cc
H2Aa Bb Cc
H3Aa Bb Cc
BodyAa Bb Cc
CaptionAa Bb Cc
MonoAa Bb Cc

Component Gallery

// Buttons
// Cards
UI/UX
UI/UX

Design System

Consistent visual language and component patterns for scalable product teams.

Dev
Dev

Component Lib

Reusable building blocks that maintain visual consistency across all surfaces.

Docs
Docs

Style Guide

Documented rules for typography, spacing, color, and interaction patterns.

// Form Elements
// Navigation Bar
LOGO
HomeAboutWorkContact
// Badges & Tags
Design SystemComponentv2.0BetaNewFeaturedOpen Source

Mobile Preview

LOGO
Dark
Dark Mode UI
The modern default for developer tools, productivity ap...
Feature Card
Component example in this style

What Defines This Style

The signature details that make Dark Mode UI instantly recognisable.

01

Background #111827 (not pure black — avoids halation)

02

Cards slightly lighter than background for elevation

03

Muted border colors: rgba(255,255,255,0.08)

04

Cool grey text hierarchy (white → grey 300 → grey 500)

05

Accent colors slightly desaturated for dark context

Industries & Business Models

Dark Mode UI works best for these industries

💰
Finance / FinTech
Financial Ingestion & Ledgers Technology
Explore Models →
🚗
Automobile
Automotive Fleet Telematics
Explore Models →
🤖
AI & SaaS
Cognitive AI & Enterprise SaaS Systems
Explore Models →
17 / 86 styles