Assets
The visual language of Ether. Quiet paper, one saturated signal, a mark that reads as a sweep rather than a logo stunt.
Signal is the only saturated fill on a surface. Everything else is ink, paper, and hairline.
Mark
Concentric signal ring. Three nested strokes. The outer stroke is incomplete, like a radar sweep.
- Never a filled circle.
- Never a lettermark E except as a last-resort favicon — prefer the ring.
- The mark is strokes on paper or ink. It uses currentColor or Signal. It does not sit on a lozenge.
- Do not add a fourth ring, a gradient, or a glow.
The sweep is the brand: listening, not shouting.
Wordmark
ETHER, wide tracking, never on a lozenge.
- Set in the UI sans (Geist), uppercase, letter-spacing wide enough to read as an instrument label, not a poster.
- The wordmark is untranslated in every locale.
- Do not lock it up in a chip, a pill, or a filled badge.
- Mark + wordmark in the header; do not repeat the wordmark inside panels.
Type
| Role | Face | Notes |
|---|---|---|
| Display | Newsreader | Headlines, principle titles, the sentence that must be read as a thesis. Optical size where available. |
| UI | Geist Sans, 16px, tabular | Body, labels, controls. Tabular numerals on every number. |
| Mono | Geist Mono | IDs, queries, tokens, timestamps in data. |
Base size is 16px. Line-height 1.5 or more. Nothing below 12px. Density changes spacing, not the floor.
Color
Dual theme is required. Default is light (paper). Dark is ink.
| Token | Light (on paper) | Dark (on ink) | Role |
|---|---|---|---|
| Paper | #F6F3EE | — | Light surface |
| Ink | #0E141B | — | Dark surface; light text is paper |
| Signal | #1AA68A | #3EE0C2 | The only saturated accent |
| Critical | #D64541 | #D64541 | Incident, destructive, error |
| Caution | #C4841D | #C4841D | Warning, stale-adjacent caution |
| Positive | #1F8A65 | #1F8A65 | Confirming, up where up is good |
Hairlines are solid borders, not alpha greys. On paper: a solid warm line (e.g. #D6D0C7). On ink: a solid cool line (e.g. #2A333C). Do not use translucent black or white for chrome.
Signal is the only saturated fill on a surface. Critical, caution, and positive color text, icons, and small status — not large fills that compete with the reading.
Foundations split fill, text, and focus. Signal #1AA68A on paper fails 4.5:1 (text) and 3:1 (non-text). Do not use it as body text or as the sole focus ring on paper. Application tokens live in Foundations: Color.
Icons
UI icons are Tabler Icons (outline, MIT). Not a 1.5px custom family.
- Sizes 16 / 20 / 24. Default 24.
currentColor. - Stroke is Tabler's (2). Do not mix Tabler with custom glyphs.
- No filled icons except status (critical / caution / positive / live) — Tabler filled variants only then.
- The signal-ring brand mark is not a UI icon. Keep the concentric ring. Do not replace it with a Tabler glyph.
Illustration
Rare. Line + signal. Never mascots on data.
Dashboards do not get characters, empty-state mascots, or decorative scenes. If you illustrate, it is a line diagram that explains a composing rule — and it is rare.
Motion signature
Ease-out, short, on the thing that changed. If it doesn't change what the eye understands, it doesn't ship.
Animate transform and opacity for hover-many, scroll, and loops. Blur is one-shot (metric tick). will-change sparingly.
Spec
| Motion | Property | Duration | Easing | Trigger | Reduced-motion |
|---|---|---|---|---|---|
| Press | scale(0.97) | 120ms | cubic-bezier(0.23, 1, 0.32, 1) | :active | instant |
| Control hover | opacity/color | 120ms | ease-out | :hover | instant |
| Panel enter | opacity + translateY(6px) | 280ms | ease-out | mount | opacity only or instant |
| Panel exit | opacity + translateY(4px) | 160ms | ease-out | unmount | instant hide |
| Stagger | enter + 40ms/item | 280ms + delay | ease-out | list mount | no stagger |
| Metric tick | opacity (optional 2px blur on outgoing glyph, one-shot) | 180ms | ease-out | value change | instant swap |
| Focus ring | opacity | 80ms | ease-out | :focus-visible | instant ring |
prefers-reduced-motion: reduce maps to the Reduced-motion column. Never flash more than three times per second. Animation never blocks a task.
Dual theme
Class on html, persisted in localStorage. Default light.
Light: paper background, ink text, Signal #1AA68A. Dark: ink background, paper text, Signal #3EE0C2.
Focus rings, hairlines, and status colors must hold contrast in both. See Accessibility.
Swatches
Both themes, independent of the page theme toggle. Hairlines are solid, not alpha.
On paper
Paper #F6F3EE. Signal #1AA68A. Ink for text.
On ink
Ink #0E141B. Signal #3EE0C2. Paper for text.