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.

Dark Mode UI style preview
Sample PreviewDark Mode UI aesthetic

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
Design System
UI/UX

Design System

Consistent visual language and component patterns for scalable product teams.

Component Lib
Dev

Component Lib

Reusable building blocks that maintain visual consistency across all surfaces.

Style Guide
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

Key Characteristics

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