hueAtlas
Ivory engineering / maritime charts system.
Atlas is a reference atlas for the systems engineering teams ship, set on ivory paper with deep navy ink and a single rust accent. The display face is IBM Plex Serif, chosen to read like classical engineering print, with Plex Mono handling the instrument labels. The hero is the typographic-chart preset: no centered subject, just a headline that earns its weight on a quiet 80px coordinate grid with crosshairs. Light mode by default, and the closest thing in the library to a paper document.
Read like a chart, not a memoir. Atlas treats engineering knowledge the way a cartographer treats a coastline: every page has a coordinate, every change leaves a bearing, nothing drifts. The identity is classical engineering: paper, ink, hairlines, crosshairs, mono labels for instrument readings, a serif italic for the one word that matters.
Anatomy
Fictional ivory engineering brand. A reference atlas for the systems engineering teams ship. Paper-ivory canvas, deep navy ink, rust accent, IBM Plex Serif display set against a quiet 80px coordinate grid. Proves the typography-driven, content-rich landing: no centered subject, no glow, just a chart room and a headline that earns its weight.
Hero composition
Ivory canvas with a faint 80px × 80px coordinate grid drawn in 8% rust. A single 10px crosshair sits to the left of a mono lat/lon eyebrow ('LAT 40.7128° N · LON 74.0060° W'). Below it: a 56–104px IBM Plex Serif headline in deep navy ink, with one italic rust-colored word carrying the accent. Sub-copy is 18px Inter at ~56ch in mid-navy. Beneath the CTA row, a hairline-bordered four-column 'instrument readout' (Edition / Bearing / Depth / Status) renders all values in IBM Plex Mono. No centered subject, no render, no glow.
Color tokens
| Token | Value (light) |
|---|---|
| background | #F5F1E8 |
| surface1 | #EBE5D3 |
| surface2 | #DED5BE |
| border | #C9BFA3 |
| border_visible | #C9BFA3 |
| text1 | #0A2540 |
| text2 | #3C5878 |
| accent | #B8441F |
| accent_soft | #E8CFC0 |
| grid | rgba(184, 68, 31, 0.08) |
Typography tokens
| Role | Family | Size |
|---|---|---|
| display | IBM Plex Serif | clamp(56px, 7vw, 104px) |
| body | Inter | 16px |
| mono | IBM Plex Mono | 11px |
Voice
Tone. precise, classical engineering, cartographer's restraint
- Chart the systems your team ships.
- Every page has a coordinate. Every change leaves a bearing. Nothing drifts.
- A runbook should read like a chart, not a memoir.
- Two berths. No surprises.
- Stop relying on tribal memory and Slack threads from 2023. Give every system a coordinate, every decision a bearing, every page a place on the chart.
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.