Design System
One standard, applied everywhere.
The shared language behind every Ioma Labs page — surfaces and ink, the five-tier palette, the type system, spacing, and components. Built as plain tokens and CSS so the marketing site, internal docs, and product surfaces all read as one thing.
Cool, clinical paper.
A muted paper neutral rather than the default warm cream, near-black ink, one schematic blue, one annotation amber — and five tier colors that carry the architecture through every diagram on the site.
Surfaces & ink
Brand accents
The five-tier palette
Tier colors are fixed: a stage is always the same hue wherever it appears — diagram, chip, dot, or the identity strip at the top of every page.
Three voices, clearly divided.
A structural display face for headings, a serif for body copy that gives the writing field-notes gravitas, and a monospace reserved strictly for labels, eyebrows, and data annotation.
Falls back to Archivo until the licensed Halogen files are dropped in. Weights 700 / 800.
Optical-sizing on. Regular, Medium, Semibold + italic.
Eyebrows, rail labels, tier chips, captions. Uppercase, tracked.
Type scale
An 8-pixel rhythm.
Spacing steps from an 8px base; corners stay nearly square; structure is drawn with hairlines, not shadows. Whitespace is generous and consistent across every page.
Spacing scale
Rules & radius
1px rules
Sections, cards, and tables are separated by 1px --rule lines. Grids show the rule color through 1px gaps.
4px, sparingly
Corners stay near-square (--radius: 4px). The drafting feel comes from straight edges, not rounding.
1240px max
Content caps at --maxw with a 92px annotation rail on the left at desktop widths.
The shared parts.
Every page is assembled from this small, consistent kit. Hover to see the interaction states.
Buttons
Mono uppercase labels · 1px ink border · primary fills to accent blue on hover.
Tier chips & eyebrow
Cards
Retrieved knowledge substrate
A foundation layer the system can draw on rather than relying purely on weights — grounding output in something inspectable.
Parallel specialist inference
Narrower specialist processes run concurrently rather than one generalist doing everything at once.
Deterministic state assembly
Specialist outputs are combined through a fixed, repeatable procedure — not another opaque learned guess.
Callout
A system that can only generate, never review, will confidently say whatever its first pass produces. We want a system with an internal checkpoint.
— Ioma Labs, design philosophyComparison table
| Dimension | Single-pass model | Calliope (prototype) |
|---|---|---|
| Reasoning traceability | Internal — not directly inspectable | Inspectable at five tier boundaries |
| Self-correction | Limited — one pass | Dedicated appraisal tier |
| Grounding | Varies by prompting | Substrate consulted twice |
Roadmap / timeline
- Phase 2 — Complete
End-to-end prototype built
Calliope running as a full pipeline from substrate retrieval through articulation.
- Phase 3 — In progress
Benchmarking against frontier models
Structured comparison across reasoning, grounding, and output quality.
The signature element.
A literal cross-section of the architecture — substrate at the base, parallel specialists, convergent assembly, an appraisal loop, articulation at the top. Numbered, because here the sequence is real, not decorative. Reused at different scales across the site.
Architecture motif — drawn at small scale
A standalone diagram motif — the same stack abstracted: substrate, specialists, accent at the apex. Used in figures, not beside the wordmark.
Full interactive schematic
Lives at hero scale on the home page — hover any stage to highlight it and read what it does.
One system, end to end.
See it applied across the live pages — or read the architecture this whole visual language is built around.