Design System
One standard, applied everywhere.
The shared language behind every Ioma Labs page — surfaces and ink, the five-layer palette, the type system, spacing, components, and the copy register. Built as plain tokens, CSS, and writing rules 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 layer colors that carry the architecture through every diagram on the site.
Surfaces & ink
Brand accents
The five-layer palette
Layer colors are fixed: a stage of the teaching turn is always the same hue wherever it appears — diagram, chip, dot, or the identity strip at the top of every page. The old tier tokens (--tier-*) remain as deprecated aliases; do not use them in new work.
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
Knowledge mesh
Facts stored as explicit chunks with individual strength scores — retrieval ranks by similarity × strength, and nothing is reconstructed from weights.
Relation mesh
Typed edges between facts, held as independent records. Confirming or rejecting one relation cannot disturb another.
Language layer
A learned lexicon and a rule-first grammar — vocabulary is earned through teaching, never imported.
Callout
A weak answer is correctable; a refusal teaches nothing. Once seeded, the system always answers with its best attempt — because the output exists to be graded.
— Ioma Labs, design principleComparison table
| Dimension | Pretrained model | Resonance |
|---|---|---|
| Where knowledge lives | Entangled in the weights | An explicit, human-readable store |
| Fixing a wrong fact | A retraining cycle | One graded correction |
| Provenance | Retrofitted, approximate | Structural — answers trace to their sources |
Roadmap / timeline
- Hardened — July 2026
Full-build stress test passed
Four critical defects found, fixed, and measured; retention under new learning verified with rehearsal replay.
- Now — First domain
Stand up the board of experts
The learning curve and held-out generalization numbers publish as they accrue.
The signature element.
A literal cross-section of one teaching turn — the knowledge mesh at the base, confirmed relations, the learned language layer, the spoken answer at the top, and graded feedback looping back into every layer. 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: mesh, relations, answer 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 voice, written down.
The register every page is written in — drawn from the way serious AI research labs write about their own systems: plain, exact, and calibrated, never promotional. This is the source of truth for copy. When the company and product details are finalized, the words change; these rules do not.
The voice in one line
We write like a research team describing its own work to a careful reader — declarative, specific, and honest about the edges. We explain the system; we do not sell it.
— Ioma Labs, copy registerPlain & exact
Short declarative sentences. Subject, verb, object. The next sentence earns its place or it's cut.
Calibrated
Claims are sized to the evidence. We hedge where we should and admit what we don't yet know.
Unsold
No hype, no superlatives, no urgency. The architecture is interesting on its own terms; we describe it.
Six principles
Write declaratively
State what is true in the simplest order. Prefer the active voice and a concrete subject. Cut throat-clearing — "it's important to note," "in today's landscape."
Size claims to evidence
"Early testing shows," "we're hopeful," "this can fail" are features, not weakness. A measured claim a reader can trust beats a bold one they can't.
Define before you use
Introduce a term in plain words the first time it appears, then use it consistently. Expand an acronym once; never assume the reader arrived mid-thought.
Show, don't sell
Ground every abstract claim in something concrete — a number, an example, a diagram. If a sentence can't be made specific, it probably isn't true enough to keep.
Say what it is and isn't
The clearest framing draws a boundary. "An architecture layer, not another model." Naming what something is not is often the fastest way to say what it is.
Admit the edges
Give limitations their own space rather than burying them. A page that names its own open questions reads as more credible, not less.
Register by surface
Each part of the type system carries a different writing job. Match the words to the surface.
| Surface | Its job | Example |
|---|---|---|
| Display heading | One idea, terse, often a boundary. Sentence case with a terminal period — the house signature. | Architecture, applied. |
| Lede | One paragraph that frames the section in plain language. Says what this is and why it matters. | Tessera sits between the people who ask and the systems that hold the answers. |
| Body | The argument, in serif. Declarative sentences, concrete examples, the occasional em dash for an aside. | Specialist outputs are combined through a fixed, repeatable procedure — the same inputs produce the same state. |
| Mono label | Eyebrows, rail tags, chips, captions. Uppercase, tracked, two or three words at most. | 01 — ARCHITECTURE |
| Caption | Annotates a figure. Mono, factual, no salesmanship. Reads like a lab note. | FIG. 2 — TESSERA DEPLOYMENT TOPOLOGY |
| Button | A plain verb phrase for the action. No exclamation, no manufactured urgency. | Get in touch |
Rewrites — before & after
| Instead of | Write | Why |
|---|---|---|
| Revolutionary AI that supercharges your entire organization. | A reasoning layer over the systems you already run. | Hype replaced with what it actually does. |
| Our model crushes the competition on every benchmark. | On Terminal-Bench 2.0, it scores higher than any model we tested. | A named, checkable claim instead of a boast. |
| Seamlessly unlock the limitless power of your data! | Your data stays where it is and becomes answerable in plain language. | Concrete benefit; the exclamation and "limitless" are gone. |
| It just works, like magic. | Reasoning runs as discrete steps, so each one is inspectable. | "Magic" is the opposite of inspectable — say the mechanism. |
Words
Plain, structural, exact
- architecture, layer, system, endpoint — the literal nouns of the work
- inspectable, deterministic, grounded, calibrated — properties we can defend
- we find, early testing shows, this can fail — honest framing of evidence
- is / isn't, does / doesn't — boundaries that define by contrast
Hype, vagueness, urgency
- revolutionary, game-changing, cutting-edge, next-gen — empty intensifiers
- seamless, magical, effortless, limitless, unlock, supercharge — marketing filler
- world-class, best-in-class, leading — superlatives without a benchmark
- exclamation marks, emoji, and manufactured urgency — none, anywhere
Claims & evidence
Date and attribute
Tie a claim to its source and moment — "in our internal evals," "as of this release." An unqualified superlative is a liability.
Name the comparison
If something is better, say better than what, measured how. "Higher on BrowseComp than the next model" — never a bare "the best."
Hedge honestly
"Could," "we're hopeful," "early signs suggest" are permitted and encouraged where the evidence is partial. Precision about uncertainty is a feature.
Mechanics
Sentence case
Display headings are sentence case and end in a period. Eyebrows, rail labels, chips, captions, and buttons are UPPERCASE, tracked. Never title case.
The em dash
Spaced em dashes — carry asides and definitions in body copy. No exclamation marks. Serial comma on.
Numerals for data
Spell out small cardinals in prose ("five stages," "three voices"); use numerals for measurements, scores, and tokens. Keep units tight to the figure.
Canonical lexicon — source of truth
The approved spelling and use of every proper noun on the site.
| Term | Use it for | Write it as |
|---|---|---|
| Ioma Labs | The company. An AI research company building Resonance; Tessera is its applied integration practice. | Ioma Labs in prose. The wordmark sets uppercase; copy never does. Legal: Ioma Labs, LLC. |
| Resonance | The system — a from-scratch, feedback-trained memory and language system. No pretrained model inside, no corpus. | Resonance. Built, hardened, and live; in the teaching phase. Referred to as "it," never "she." |
| Tessera | The applied practice — compliance-native AI systems integration for regulated and mission-critical environments. | Tessera. Available now, as subcontract and teaming engagements. |
| Calliope | The earlier prototype's name, returning as the first taught personality of Resonance in the commercial release. | Calliope. A personality of Resonance, not a separate system. Past tense for the prototype. |
| The five layers | The stages of a teaching turn. Each is a fixed name and a fixed color, everywhere. | 01 Mesh · 02 Relations · 03 Language · 04 Answer · 05 Feedback |
| The board of experts | The teaching model: domain specialists set each field's skeleton and approve the automated curriculum that fills it. | Lowercase in prose: the board of experts. |
| The learning curve | The honest instrument: capability as a function of corrections delivered, read against frontier performance on the same tasks. | Lowercase in prose: the learning curve. |
One system, end to end.
See it applied across the live pages — or read the architecture this whole visual language is built around.