Steward · design system
Direction A · Studio. A dark green sidebar, a toned canvas, white sheets with one soft shadow, filled status pills and coloured source tiles. One family, Manrope: 800 for titles and big numbers, 400 to 600 for everything else. Provenance on everything. Revised 22 September 2026 after the first, ruled register was rejected as wireframe-like.
Everything you said, decided and promised. Filed.
Steward reads your Plaud recordings, emails, chats and meeting notes once, then keeps the tasks, decisions, dates and medical facts where your family will find them, with the source one click away.
The anti-reflex
The category reflex for an AI assistant is a purple-blue gradient, glass and a chat bubble; the second-order reflex is a warm serif on cream; the third is a pastel family app. Steward is none of these. It is the colour of a ledger cover and it behaves like one.
The scene
06:40, kitchen island in Jumeirah, phone in one hand. 10:55, a desk in Business Bay between two calls. Mixed light, two minutes at a time. So: light ground, high legibility, dense but quiet, one deep accent.
Two registers
The landing page is brand register: photograph, one drenched band, the number. The product is product register: ruled, tabular, restrained. Mobile is the same system at a larger size with 44px targets.
Colour
OKLCH throughout, one hue (160) driving every neutral. Contrast ratios are measured against the ground, not estimated. Ground is a true off-white at chroma 0: never cream.
Chart ramp
Five steps of the brand hue. Semantic colours never appear in charts.
Status vocabulary
One word, one icon, one colour role. Colour is never the only indicator. These are the only pills in the product.
Sources
Every item carries where it came from. The chip is the product's signature.
Typography
One family, Manrope, self-hosted as a single variable file: 800 for display and titles, 600 for labels and buttons, 500 and 400 for interface and body, tabular figures for data.
Send Khalid the revised numbers by Tuesday latest, before the board pack goes.
The reaction in August was to amoxicillin, and the test confirms a penicillin-class allergy. It is something every doctor treating him needs to know.
Plaud · Al Barsha site walk · 42 min · Fri 19 Sep 2026
…so send Khalid the revised numbers by Tuesday latest, before the board pack goes.
Space, shape, rule, depth
The six form decisions of the Studio archetype, each a token. Nothing in the component layer hardcodes one.
Shape
Three radii, never a fourth.
Rules
1px hairlines inside sheets; the sheet edge carries the shadow.
Depth
One-step model. Every sheet carries one soft shadow; floating layers a deeper one.
Density
Controls 40px, rows 56px on web; 44px and 56px on mobile.
s-2 · s-4 · s-5 · h-ctl · h-row · s-7 · s-8
Controls
Every variant in every state. Focus rings are visible; loading is real; disabled says why on hover.
Buttons
Hover darkens, active nudges 1px, focus shows a 2px ring. Never a scale transform.
Fields
Surfaces and data
A table with sort, selection and a bulk bar; list rows; tabs; a definition list; the sheet. Content lives on white sheets over the toned canvas.
List rows
Tabs, definitions, notes
- Blood group
- O+
- Emirates ID
- 784-2018-XXXXXXX-2
- Insurer
- AXA Gulf · Silver · AXG-2291-7740
- Paediatrician
- Dr Anjali Nair, Mediclinic Jumeirah
Domain components
The three components that exist only in Steward. This is the section that proves the system was made for this product.
Extraction row
Kind, the proposal, the quoted sentence, the timestamp, and accept / edit / skip. A low-confidence row is tinted and asks instead of accepting.
Morning brief
Emergency card
Emergency card
v4 · 17/09/2026- Allergies
- Penicillin class (confirmed 17/09/2026)
- Conditions
- Mild asthma · seasonal rhinitis
- Medications
- Salbutamol inhaler as needed · Cetirizine 5 mg at night
- Doctor
- Dr Anjali Nair · Mediclinic Jumeirah · +971 4 429 9000
- Parents
- Omar +971 50 442 8817 · Layla +971 55 310 6641
- Insurer
- AXA Gulf · AXG-2291-7740
Figures
A ruled row, not the hero-metric template.
Timeline and open loops
- Site walk recorded · 8 things found
- DIFC renewal notice received
- Board pre-read call · Abu Dhabi deferred
Feedback and states
Empty, zero results, loading, error, offline, permission-denied. The unhappy paths are what convince a buyer.
Loading skeleton, reserved height
Offline banner, mobile
Iconography
One family, 1.6px stroke on a 24 grid, inlined as SVG. No emoji, no icon font, no second family.
Bans
Written down so they are enforced, and so the client can see the discipline.