dltHub
A developer-tools interface built on a deep indigo-navy canvas with monospaced display type, lime-chartreuse brand accents, and a periwinkle-purple action color. The system reads as engineered and product-first — dark hero bands carrying monospace headlines give way to crisp white proof sections, with rounded cards (~16px), pill-shaped controls, and embedded terminal/product UI fragments. Brand voltage comes from the ABC Diatype Mono headlines and the electric lime accent rather than from imagery.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
62px · 700 · 1.1
The quick brown fox jumps
title
24px · 700 · 1.5
The quick brown fox jumps
subtitle
18px · 600 · 1.556
The quick brown fox jumps
body
18px · 400 · 1.556
The quick brown fox jumps
button
16px · 500 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 32px | |
| xxxl | 40px | |
| section | 48px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xxs | 2px | |
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| lg | 12px | |
| xl | 16px | |
| xxl | 24px | |
| full | 9999px |
FAQ
- What colors does dltHub use?
- dltHub's core palette includes #ffffff, #23262e, #111827, #191937, #4c4898. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the dltHub DESIGN.md.
- What font does dltHub use?
- dltHub's primary typeface is ABC Diatype Mono. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the dltHub design system?
- A developer-tools interface built on a deep indigo-navy canvas with monospaced display type, lime-chartreuse brand accents, and a periwinkle-purple action color. The system reads as engineered and pr…