Three. A single hot-orange spark cutting through near-total darkness, with every surface stripped of color until the moment something matters.
- Developer tools
- Dark theme
- 11 colors
- 1 typeface
ThreeTools is a matte-black developer canvas lit by a single molten-orange spark. The interface is overwhelmingly achromatic — near-black surfaces, white text, gray hairline borders — and the only chromatic element is a vivid #ff4300 reserved exclusively for primary action surfaces and decorative emphasis. Typography is aggressively bold: the system font is set at weight 700 across every size from 9px badges to 68px display headlines, with tight negative tracking that intensifies as type grows. Components are softly rounded with 15–25px radii on controls and cards, 50–999px on inputs and pills, giving a friendly counterweight to the otherwise austere dark background. The design system is minimal, monochromatic, and lets the brand-orange carry 100% of the chromatic narrative — a single warm point in a sea of graphite.

Three design system
Brand1
Orange action color for filled buttons, selected navigation states, and focused conversion moments
Neutrals10
Page canvas, deepest background layer
Elevated card surface, section backgrounds
Footer surface, tertiary elevated panel
Card borders, secondary button fills, hairline dividers
Muted secondary headings, sub-label text
Tertiary heading text, less-prominent labels
Muted body text, secondary borders, icon strokes
Primary text on dark surfaces, dominant hairline borders, icon strokes
Off-white button fill, soft surface highlight
Headlines, badge fills, input text, emphasis text, subtle border highlights
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Void Black on Ember Orange
5.44 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











