hueRidge
Developer-platform design system.
Ridge is the slate-and-emerald system for a developer platform that takes itself seriously. Tight monospace meta, grid-on-dark, code as primary content.
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.
Tokens — colors
| 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 |
Tokens — typography
| Role | Family | Size |
|---|---|---|
| display | JetBrains Mono | 56px |
| body | Inter | 15px |
| mono | JetBrains Mono | 12px |
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.