hueRidge
Developer-platform design system.
Ridge is SLO monitoring for ops teams on a slate near-black canvas with a faint dot grid and an emerald accent that literally means in the green, the passing-SLO hue. The hero is the grid-on-dark preset: an abstracted dashboard device floating on the pattern, shadow only, no glow. Inter and JetBrains Mono keep the register technical; burn rates, error budgets, and p99 latencies do the talking. The calmest developer-platform composition in the set, built to read like a quiet on-call shift.
The line you don't cross. Ridge watches service-level objectives and pages the right person before the customer notices. Engineering voice, monospace-heavy, no marketing fluff. The product is the dashboard; the copy gets out of the way.
Anatomy
Fictional SLO monitoring platform for ops teams. Dark slate canvas with a faint dot-grid background, an abstracted dashboard device centered in the hero. Proves the grid-on-dark preset: pattern medium + device subject + shadow-only relation. Classic developer-platform composition: the calmest end of the 'device on a pattern' spectrum next to Stint's mesh.
Hero composition
Faint cool slate dot-grid behind a centered dashboard device. A soft top-left corner glow reads as an implied light source; the rest of the field stays calm. The device has a drop shadow but no other interaction with the grid; it sits on top, no emission.
Color tokens
| Token | Value (dark) |
|---|---|
| background | #0F172A |
| surface1 | #1E293B |
| surface2 | #334155 |
| surface3 | #475569 |
| border | #334155 |
| border_visible | #475569 |
| text1 | #F8FAFC |
| text2 | #CBD5E1 |
| text3 | #94A3B8 |
| text4 | #64748B |
| accent | #34D399 |
| accent_hover | #6EE7B7 |
| accent_subtle | #064E3B |
Typography tokens
| Role | Family | Size |
|---|---|---|
| display | JetBrains Mono | 56px |
| body | Inter | 15px |
| mono | JetBrains Mono | 12px |
Voice
Tone. ops-room serious, SRE-literate; the product is an alarm, the copy never panics
Cadence. threat-then-relief constructions. domain vocabulary used straight (burn rate, error budget, p99). clipped sentence endings (Not after.). pricing stated like an SLA.
- The line you don't cross.
- Your SLO is a promise to your customers. Ridge is the alarm that goes off before you break it.
- Define the line. Ridge watches the burn rate across every service and signals the right engineer before you've spent the error budget. Not after.
- Flat per service. No seats. No surprise invoices.
Live preview
Generate one like this
hue is a free, open-source skill that turns any brand into a complete design language your AI assistant can use.