Design · Tip
Dark UI Design Blueprint
Design specifications and styling tokens for modern dark dashboard interfaces
A concise styling recipe specifying typography, color codes, icon sets, and border radii for dark-mode dashboard interfaces. It provides ready-to-use visual tokens to quickly recreate a clean, cohesive software UI.
How it works
Steal this blueprint:
- Inter font with letter spacing -0.15px
- 1C1C1C as dark background color
- E5E5E5 for white text and A1A1A1 for subtle text
- @huge_icons for sleek icons, always
- Border radius: 6px, 8px, and 12px
What it's for
- Style a dark-mode dashboard or SaaS application interface
- Configure baseline design tokens for dark themes in Figma or Tailwind CSS
- Establish consistent typography and border radius rules for CRM layouts
Key points
- Typography: Inter font with -0.15px letter spacing
- Background color palette: #1C1C1C for dark backgrounds
- Text color tokens: #E5E5E5 for primary text and #A1A1A1 for subtle text
- Iconography recommendation: Hugeicons for consistent visual weight
- Component hierarchy radius values: 6px, 8px, and 12px
Pricing
Free
Details
- Type
- Tip
- Category
- Design
- Topic
- UI Design
- Open source
- No
- Platforms
- other
- For
- UI/UX designers and frontend developers
- Tags
- darkmode, uidesign, designtokens, typography, dashboard
Why it was saved
- @_heyrico: Concrete, copyable recipe for recreating the sleek dark-interface look.
Related
Design canvas built on web standards that connects to AI coding agents
AI design tool that generates interface variations from text ideas
Curated collection of 15 UI and design resources for polished websites.
AI product design agent that generates contextual UX flows and Figma designs
UI and layout techniques for modern, high-converting e-commerce storefronts
AI UI design tool and generator (discontinued).
Updated