Ember · Design System · Editorial LuxeVol. II, No. 3 · June 2026
Ember
A Living, Tweakable Design System · LIVE
Warm dark, serif headlines, hairline structure, a coral-red spark. Every token below is live — drive the panel and the whole system answers at once.
01Foundationstokens, type, space, glow
Glow Logic · the one rule
Filled color emits light; neutral and outlined elements stay matte.
Glows (own color, dark mode)
Primary / accent button
Active nav item · active tab
Toggle-ON · focus rings
Meter fills · status dots
Filled signal pills & badges
Accent links on hover
Accent seam / rule · accent marks in headings
Stays matte (no glow)
Body text · captions · mono labels
Neutral surfaces, cards, panels
Hairlines & borders
Secondary & ghost buttons
Outlined category chips
The Binary Rule · signals vs categories
Signals are FILLED. Categories are OUTLINED. Nothing in between.
Signals only ever render as filled pills or dots in a saturated system color. Categories only ever render as outlined chips in a soft pastel hue. There is no soft, tinted, or middle signal treatment anywhere in Ember.
Color Tokens · role + live hex
Type Ramp · reference-grade · driven by base size + scale ratio
The serif (Fraunces) is used only for headings — Display, H1, H2, H3. Nothing below H3 uses the serif. Everything smaller is body sans or mono. Editorial display leads (pull-quotes, lede paragraphs, the doc lead-in) also use the serif — these are display type, not body copy — but all serif type is set roman (no italic). Tags, names, footer text, and all UI labels stay sans or mono.
Type Families · role assignment
Serif — headings only
Aa
Fraunces · optical serif
Display · H1 · H2 · H3
Sans — body
Aa
Hanken Grotesk
Body · small · caption
Mono — labels / data
Aa
JetBrains Mono
Eyebrows · labels · data
Spacing Scale
Corner Radius · follows the slider
0 · sharp
½ radius
8px · base
2× radius
full
Glow & Elevation · scoped to dark + glow slider
Flat · border (matte)
Ember glow
02Componentsall reading tokens
Buttons · primary glows, neutrals matte
Form Fields · focus glow
Text input
Select
Search
⌕
Textarea
Cards · neutral surface, matte
Deploy
Trustead → Production
Onboarding flow cleared QA across 41 runs. One approval from going live.
Launch
One Degree BnB
Brand site one visual pass from done. Pick a window and OTTO schedules the push.
Ready
Content
Q3 Retainer Deck
Narrative + metrics drafted; blocked on three client logos before client-ready.
Live · production, healthyHover the status dot to reveal the tooltip.
Usage Meters · fills glow
Account 164%
Account 218%
Account 39%
Toggle / Switch · on glows
Auto-balance accountsEmail digest
Avatar & Status Dot · dots glow
LP
OT
M2
Toasts / Alerts
i
Heads up
Account 1 crossed 60% of its weekly window.
✓
Deploy succeeded
Trustead staging — 6 commits, 0 failures.
!
Awaiting review
Q3 deck blocked on three client logos.
×
Run failed
One worker hit a wall — re-queued on the emptier lane.
Modal
Approve deploy to production?
Trustead onboarding will go live at trustead.app. This action is reversible via rollback.
Code Block
# route to the emptier laneGET https://usage.bbase.ai/api/meters
route("acct-3") // 9% free → DEEP ok
Blockquote & Callout
Every decision that matters deserves one moment of clarity before it ships.
✦
Live tokens. Change the accent in the panel and this border, the icon, and the highlighted word all shift in the same instant.
Keyboard Keys
⌘Kopens command palette ·⌘↵approves the focused item
Dividers · accent seam glows
Links
OTTO routes work to the emptier account automatically, and every reviewable surface ships with a clickable link. Background references use a quieter underline so the accent stays meaningful.
03Applied · In Systemlive, real content
Editorial Status Doc
Status · Week 24 · Trustead
The rebuild crossed the line from scaffolding to product.
By OTTO · for Loren Polster · June 21, 2026 · 4 min read
Three surfaces shipped, one is waiting on your eyes, and the accounts stayed balanced the whole window.
The onboarding flow cleared QA at zero error across 41 runs and is staged one approval from production. The brand site for One Degree BnB is a single visual pass from done — pick a launch window and it goes out. The Q3 retainer deck is the lone blocker, held on three client logos that aren't ours to make.
Everything else ran clean: nightly memory sync, zero conflicts, no lane over seventy percent.
TrusteadOne DegreeDeck blockedSync clean
AI Review Dashboard
OttoAI Management & Review
Account 164%
Account 218%
Account 39%
Needs Your ReviewThree items
DeployApproval
Trustead → Production
Onboarding flow passed QA at 0% error across 41 runs. One approval from live.
LaunchDecision
One Degree BnB — launch window
Brand site is one visual pass from done. Pick a date and OTTO schedules the push.
ContentSign-off
Q3 retainer deck draft
Narrative + metrics drafted; blocked on three client logos before client-ready.
Projects
Trustead
Onboarding flow on staging, awaiting approval.
2h ago
One Degree BnB
Brand site hero rebuilt; final visual pass.
5h ago
OTTO Memory Sync
Nightly sync verifying; week-1 stability.
1d ago
Q3 Retainer Deck
Narrative drafted, blocked on client assets.
3d ago
Vault Cleanup
23 stale inbox captures processed.
6h ago
Activity
14:32Memory sync completed across 3 accounts — 0 conflicts.