Ossio UI

Ossio UI

The design canon, live. This page is made of the system it documents: if something here looks wrong, the canon is wrong.

Calm, dense, professional. One family of surfaces, one type voice, colour spent only where it means something. Reads as Google-grade software, feels personal because of the warmth.
Colour lives in the iconA tinted container + glyph carries identity. Never a stripe.
Lift with shadowElevation separates; borders are hairlines (--outline) only.
Medium, not boldHeadings sit at 500. Bold is saved for small labels + badges.
Tint + text pairingStatus = saturated text on its matching tint. Never white on saturated.
One scale everywhereRadii, shadows, spacing come from tokens, not taste-of-the-day.
Two temperaturesWarm at home (Labs), cool at work (artifacts). Same bones.
Foundations

Surfaces & ink

The warm Labs ramp. Tap any swatch to copy its token. Flip the theme in Settings and this whole page re-derives itself: that is the point of tokens.

surface--surface
surface-low--surface-low
tonal-soft--surface-tonal-soft
tonal--surface-tonal
on-surface on-surface-muted on-surface-soft never pure black

Semantic pairs, the whole trick

good--good / --tonal-success
warn--warn / --tonal-warn
bad--bad / --tonal-danger
salt--salt / --tonal-info
personal--personal / --tonal-warn

Saturated colour is text; the fill is its tint. Saturated fills are reserved for one primary button per view.

Foundations

Type, number, shape, depth

Roboto Flex, one variable file

Light 300Regular 400 Medium 500Semi 600Bold 700
1,248tabular-nums: columns never jitter
1,248proportional: watch it wobble
sm 8
md 14
lg 20
full
shadow-sm
shadow-md
shadow-lg
Components

The working set

Live, not screenshots. Recipes live in /_shared.css (reference block) and artifact-studio templates.

92%
on plan
3
waiting
17
shipped

Four statuses, no more

todo doing blocked done

A fifth status has to earn its place. It never has.

Filter chips

Entity cardidentity in the icon · whole card is the tap target doing ›

Copy block

color: var(--good); background: var(--tonal-success);
Collapsible panel, for secondary content
Dependency maps, rule text, methodology. Anything a first read can skip. Custom chevron, no default marker.

Modal + empty state

🌤
Nothing here yet. Empty states explain, never apologize.
And never fake data.
Hard rules

Do / don't

✕ Don't
Accent bar
colour glued to an edge
Banned on every side of a card: top, left, right, bottom. Reaffirmed 2026-06-29.
✓ Do
Icon identity tinted container + glyph
Colour lives in the icon. The card stays calm.
✕ Don't
Saturated fill
body text on loud colour
Loud fills exhaust. Save them for one primary action.
✓ Do
Tinted panel
saturated text, soft fill
The pairing rule again. It always works.
✕ Don't
#000 on white
harsh, flat, cheap
Pure black ink is banned; use the on-surface ramp.
✓ Do
on-surface
muted for support text
Three ink strengths cover every case.
Explorations

Creative takes, same bones

Each one bends the system without breaking a rule. The ones that survive daily use graduate into the canon. Pencil-annotate anything you want kept or killed.

1 · Density dial

One set of spacing vars, three moods, now a real setting: this dial writes labs.density (same control as Settings), applied site-wide as apps adopt the vars.

Fitness92% on plan
Signal Mapper352 estimates
Feedback0 open notes
Briefing5 min · audio

2 · Tonal elevation (shadowless depth)

Dark mode hates shadows. Depth can come from the surface ramp alone: further = darker warm grey.

Level 0
--surface
Level −1
--surface-tonal-soft
Level −2
--surface-tonal

3 · Two temperatures, one system

Labs runs warm (#FAF8F2 family), Cowork artifacts run cool (#F6F7F9 family). Same components, retinted by swapping the token block: proof the system is the tokens, not the CSS.

Snapshot
refreshed 07:02
done
same pairing rule

4 · Icon identity gallery

Every app owns a 135° gradient chip. Hue says which world it belongs to: amber/gold = Personal, blue/navy = Salt, slate/steel = Field + utilities.

briefing
ui
salt
field
utility
dispatch
.ic.myapp { background: linear-gradient(135deg, #TOP, #BOTTOM); }

5 · Motion, three verbs only

Press (scale .94), lift (shadow + −2px), crossfade (.18s view transitions between pages). Nothing bounces. Proposal: name them in tokens as --motion-press / --motion-lift / --motion-fade.

Press me
scale .94
Hover me
lift −2px
Navigate
crossfade home

6 · The pencil, everywhere

As of tonight every Labs page carries the annotation pencil (zero footprint until armed). Arm it from /settings → Developer, or tap the pencil in this page's app bar. Tap any element on any page, leave a note, it lands in /feedback. The UI now critiques itself.

Open proposals

Queued refinements

doinglabs.density setting (exploration 1)needs the /settings row + apps honoring the vars
todoMotion tokens in _shared.css (exploration 5)--motion-press / lift / fade; today the timings are copy-pasted
todosignal-mapper/guide.html + salt-sandbox/launcher: link /_shared.csslast two token holdouts (besides generated /map)
todo/map palette: formalize as the "warm map" variant or regenerate on shared tokensgenerator must also re-add the pencil include when rebuilding
todoPort the Labs dark token block back into the artifact canondesign-system.md §1 has no dark family; Labs already solved it
donePencil on every page + /settings arming + /feedback tiletonight
Canon: artifact-studio/references/design-system.md (cool) + /_shared.css (warm) → this page renders both.
Built overnight 2026-07-10. Annotate anything: it all goes to /feedback.
Copied