Foundations
Brand
One mark, one wordmark, one accent. The L-mark carries the LuoForge parent identity; the Tungsten wordmark is the product's editorial voice. Ember Orange stays scarce.
01 — Identity
Mark & lockup
Tungsten (the product) sits inside LuoForge (the parent). The L-mark compresses the parent identity into anything 24px and up — a filled rounded square with a negative-space L cutout, inheriting currentColor so the surface behind shows through. The Tungsten wordmark carries the product voice in editorial moments. Ember Orange stays scarce — used only on the wordmark dot and as the mark fill on brand-tinted surfaces.
01 · Nav & chrome
L-mark at 36px and below, where horizontal space is tight.
02 · Editorial
Tungsten wordmark in hero moments and long-form layouts.
03 · Auth lockup
Mark + LUOFORGE / Tungsten two-line stack on sign-in.
04 · Telemetry stamp
Mono breadcrumb, top-left of every authenticated screen.
LuoForge
Tungsten
| Size | Clear-space | Use |
|---|---|---|
| 56px | 14px | Editorial moments, auth screens |
| 36px | 9px | Default — nav, headers, chrome |
| 24px | 6px | Minimum — dense chrome, favicons |
02 — Wordmark
Surfaces & sizes
The wordmark is the product's editorial voice — sentence-cased Tungsten in Geist 400 with a single 9×9 px square of Ember Orange. Use it in hero moments and editorial layouts; the L-mark covers nav and chrome where size is tight.
| Size | Dot | Tracking | Use |
|---|---|---|---|
| 44px | 9 × 9px | −0.025em | Hero, editorial layouts |
| 28px | 6 × 6px | −0.025em | Section headers |
| 18px | 4 × 4px | −0.02em | Inline, compact contexts |
03 — Telemetry
Wordmark stamp
Wordmark · Geist 400 · −0.025em
TungstenTelemetry stamp · Large · 13px
Telemetry stamp · top-left of every authenticated screen
04 — Voice
Voice & tone
Calm, numerate, never peppy. Numbers in mono, headlines as statements with periods, task-literal verbs on buttons, no hype, costed recommendations. Full rules in docs/design-system/voice.md.
Do
72% avg — 6 of 7 skills passing.
Six of seven skills are passing. Closing one of Scale Estimation (0.44) or Bottlenecks (0.56) takes you over the line.
Don’t
Crush your next interview! 🚀
Our AI-powered platform unlocks your potential through gamified micro-learning experiences.
05 — Illustration
Isometric idiom
Diagrams are always drawn with the product’s vocabulary: dot-grid background, 45° isometric tier plates, brand-gradient highlight on the active node, schematic pointer lines with terminal dots, monospace callout labels. Lifts a system architecture out of generic business-deck rendering and into something that reads like Tungsten drew it.