Card title
Generate, schedule and distribute high-fidelity operational summaries of live cluster telemetry.
Get started
RST Design SystemOverview
RST is built on tokens. Primitives hold the raw values and stay the same in both themes. The semantic, material, component and visualization layers point at those primitives and are redefined for Light and Dark. Components only ever use the upper layers, which is why one theme switch changes the whole system.
242Variables
5Collections
16Text styles
2Modes
Scope. This catalog documents public RST components. Duplicate/alternate masters, nested internals and
Legacy components are deliberately excluded, and the specialized RST/Agent, RST/Research and RST/UX Artifact sets are not exposed variant-by-variant — they need a public-surface decision first.
Design principles
Four rules the system is held to. They are the reason component repairs happen at the master rather than in the documentation.
Token-first
No component ever hardcodes a colour. If a value cannot be expressed as a token, the token is missing.
One source of truth
Every example is an attached instance of a production master. Documentation never forks a component.
Variants carry meaning
If two variants render identically, the property is decoration. Type must change the thing.
Behaviour is part of the spec
Focus order, Escape, dismissal and keyboard navigation are documented alongside the visuals.
What's new
What changed in the system recently, and what it means for work already in flight.
Foundations
02 — Foundations · 03 — VariablesBrand
Five colours and five gradients carry RST identity. They are separate from the status palette on purpose: brand says who the product is, status says what just happened.
Layer brand/* and gradient/*
Brand colours
Brand is not status. Positive Green and
status/success are close in hue and completely different in meaning.
Use a brand colour when you are expressing RST identity, and a status token when you are telling someone the result of something.
Never swap one for the other to get a colour you like.
Controlled gradients
Gradients are an emphasis tool. A typical application view should carry one gradient surface, occasionally two.
Every gradient here is built from the semantic gradient stops, so they darken correctly in Dark mode and the ink token
on them flips with the theme. Do not write gradient values into a component.
Brand Studio
Make RST your own. Set five colours and a typeface, watch the system adapt, then take the specification with you.
Color
RST components use semantic tokens so colors and surfaces stay consistent across themes. The primitive ramps below exist to be referenced by those tokens rather than applied directly.
Semantic surfaces & text
Status
Primitive ramps
Tokens
Five collections, resolved live from the same values as the design library.
| Collection | Variables | Modes | Role |
|---|---|---|---|
RST / Primitive | 131 | Value | Raw palette, spacing, radius, sizing. Mode independent. |
RST / Semantic | 64 | Light · Dark | Surface, text, border, interactive, status, brand. |
RST / Material | 7 | Light · Dark | Solid, elevated, glass, gradient, inverse. |
RST / Component | 22 | Light · Dark | Per-component surfaces and radii. |
RST / Visualization | 18 | Light · Dark | Chart series, grid, axis, label, tooltip. |
Typography
IBM Plex Sans across the ramp, IBM Plex Mono for code and data. Sixteen published styles.
Icons
The curated RST Product Icon Set, thirteen categories of glyphs that product work actually needs. The rest of the library is kept in the design library and reachable here under Extended library, but it is not published. Which set a glyph belongs to is decided in the design library and read back here, never decided twice. Search by name, by category or by what you are trying to say, then copy or download any drawn glyph as an SVG.
Masters RST/Icon size wrapper · RST/Icon/<Name> glyphsSplit 657 product · 852 extended
Spacing
A 12-step scale. Everything in the system lands on it.
Grid & Layout
Four columns on mobile, eight on tablet, sixteen on desktop, with gutters of 16 / 24 / 32.
Desktop · 16 columns · 32px gutter
Tablet · 8 columns · 24px gutter
Mobile · 4 columns · 16px gutter
Radius
Ten steps from 0 to fully round. Components reference radius through their own component token.
Elevation
Three shadow levels plus the material surfaces they sit on. Shadows deepen in dark mode rather than inverting.
elevation/0
elevation/1
elevation/2
elevation/3
Motion
A shared timing and reveal language for RST products. Respect prefers-reduced-motion and show content immediately when motion is reduced.
fast · 150ms
standard · 300ms
reveal · 600ms
slow · 800ms
Stagger
tight 60ms · standard 100ms · relaxed 150ms. Use on groups of cards or steps, not on every small element.
Triggers
load · view · hover · press · expand · state-change. View reveals play once as an element enters the viewport.
Reveal variants · play examples
In React: <MotionReveal variant="fade-up">...</MotionReveal>. Wrap direct reveal children in <MotionStagger rate="standard">...</MotionStagger>. Default reveal is fade-up, 24px to rest in 600ms with smooth ease-out. Use IntersectionObserver for the view trigger; keep content visible if scripting or observation is unavailable.
Accessibility
Targets for every RST component. The catalog itself is built to them, so it doubles as a reference implementation.
Required
- 4.5:1 contrast for body text, 3:1 for large text and UI boundaries
- A visible focus ring on every interactive element, never
outline:none - Full keyboard operation including Escape and arrow-key patterns
- Status conveyed by more than colour alone
- Touch targets of at least 44×44 on coarse pointers
Never
- Focus traps without an exit
- Placeholder text as the only label
- Animation that cannot be reduced
- Interactive elements below 24px on any pointer
Actions & input
06 — Actions · 07 — FormsButtons
The primary action component. Fifteen types, four sizes and seven states, all driven by the same anatomy.
Master RST/ButtonStatus Production
Live component
Types
The primary type is theme-aware: solid Primary Blue in Light, and the Primary Blue → Secondary Purple brand gradient in Dark. It comes from --button-primary-background, so every primary CTA inherits it and no screen sets it directly. No other type takes the gradient.
States
Default
Hover
Pressed
Focus
Selected
Disabled
Loading
Sizes
| Property | Values | Notes |
|---|---|---|
Type | Primary · Secondary · Tertiary · Ghost · Danger · Inverse · Glass · Gradient · Pill · Icon + Label · Label + Icon · Icon Only · Round Icon · Floating Action · Segmented | One action per screen should be Primary. |
Size | Small · Medium · Large · XL | 32 / 40 / 48 / 56px control heights. |
State | Default · Hover · Pressed · Focus · Selected · Disabled · Loading | Loading suppresses pointer events and keeps the label width. |
Show Leading Icon | boolean | Icon precedes the label. |
Show Trailing Icon | boolean | Use for forward motion, not decoration. |
Use it when
- The action is the point of the view and needs a clear commitment
- The label can state the outcome in one or two words
Reach for something else when
- It navigates rather than acts — use a link
- There are more than two competing actions — use a menu
Accessibility
Icon-only buttons carry an aria-label. Disabled buttons stay in the tab order only when they explain why. Loading state keeps the accessible name stable so screen readers do not re-announce the control.
Floating action button
The Floating Action type of RST/Button. It gives a view one persistent shortcut to the action people reach for most.
Master RST/Button · Type=Floating Action
Accessibility
A FAB must not be the only route to its action. Keep it out of the way of the bottom safe area on mobile and give the icon-only form an explicit label.
Text inputs
The Text Input type of RST/Input. All nine states are reachable from the control panel, and the live examples validate as you type.
Master RST/InputStatus Production
Live component
Live validation
Work email
We only use this for delivery receipts.
API key name
Minimum 8 characters.
Use it when
- The answer is short, free-form text
- The field needs a persistent visible label
Reach for something else when
- The answer is one of a known set — use Select
- The answer is long-form — use Textarea
Accessibility
Labels are real elements, not placeholders. Error text is associated with the field and aria-invalid flips on failure, so the error is announced rather than only coloured.
Textarea
The Textarea type of RST/Input, for answers longer than a line. Resizes vertically only.
Master RST/Input · Type=Textarea
Release notes
Markdown supported.
Summary
A summary is required before publishing.
Number input
Increment and decrement with the buttons or ↑ / ↓. Clamps to min and max, and disables the button that would overshoot.
Master RST/Form/Number Input
Concurrency
Range 1–16
Search
The Search type of RST/Input, with a leading icon and a clear affordance once there is a value.
Master RST/Input · Type=Search
Search documentation
Selection controls
The Checkbox type of RST/Selection Control. The parent below is genuinely indeterminate when only some children are on.
Master RST/Selection Control
Radio
The Radio type of RST/Selection Control. One answer from a visible set.
Master RST/Selection Control · Type=Radio
Select
A real listbox: opens on click or ↓, moves with arrow keys, Home and End, commits on Enter and dismisses on Escape or outside click.
Master RST/Input · Type=Select
Region
- North America
- EMEA
- APAC
- LATAM
Accessibility
Implemented as button + listbox with roving focus. The trigger exposes aria-expanded; the list is labelled by the field label.
Toggles
The Toggle type of RST/Selection Control, for settings that take effect immediately.
Master RST/Selection Control · Type=Toggle
Accessibility
Uses role="switch" so state is announced as on/off rather than checked. A toggle must apply instantly — if it needs a Save button, use a checkbox.
Sliders
Draggable, keyboard-operable and live-reporting. The track fills to the current value.
Master RST/Form/Slider
File upload
Dropzone and compact types with live drag, progress and error states.
Master RST/Upload · RST/Upload/States
Drop files here or browse
CSV, XLSX or JSON up to 50 MB
telemetry-2026-q1.csv24%
accounts-2026-03.csv
4.2 MB · uploaded
ledger-export.xlsx
Upload failed — unsupported sheet format.
Attach a fileCompact type · up to 50 MB
Content & data
10 — Cards · 12 — TablesCards
Fourteen types across five materials. The material decides the surface; the type decides the anatomy.
Master RST/Card
Hover or focus me
Interactive cards lift on hover and take keyboard focus.
Glass material
Backdrop blur over the page surface.
Gradient material
Brand gradient with on-gradient text tokens.
Inverse material
For high-contrast callouts inside light surfaces.
Weekly throughput
Up 18% week over week.
Metrics
A single figure with its movement. Three sizes; the sparkline is an RST micro chart, not an image.
Master RST/Card/Metric
Revenue$2.48M▲ 12.4% vs last quarter
Active agents1,284▲ 3.1%
Error rate0.42%▼ 0.18pp
Status
How a system state is shown so it reads the same everywhere, and never depends on colour alone.
Badges & tags
Compact status or classification metadata. Tone is the property that matters. A Badge is a filled pill with no stroke, which is what separates it from a Tag.
Master RST/Data Display
Live component
Tones
Neutral
Info
Success
Warning
Error
Accessibility
Tone is never the only signal — every badge carries a text label, and the optional dot is decorative.
Chips
The Tag type of RST/Data Display. Tags are outlined, rectangular and removable. Click the × to dismiss one.
Master RST/Data Display · Type=Tag
Region: EMEA
Stage: Proposal
Owner: Me
Health: At risk
Avatars
Three sizes and three content modes. Initials are the default when no image is available.
Master RST/Data/Avatar
AO
ML
RC
AOML
RCSB
+7
Lists & rows
Row density is a property of the table, not the cell. Compact fits roughly 40% more rows in the same space.
Master RST/Data Table/Row
Static data
Read-only value types: key/value, code, timestamp and confidence. These are figures and identifiers, not interactive chips.
Master RST/Data DisplayOpen SRC-11
- Region
- EMEA
rst.chart.series.02CodeTimestamp
High 82%Confidence
$2.48MMetric
Scrollbar
The RST scrollbar treatment applied to an overflowing region. Scroll the panel below.
Master RST/Data/Scrollbar
Tables
Sortable columns, selectable rows with a real indeterminate header checkbox, and live filtering. Click a column header or press Enter on it to sort.
Master RST/Data Table
| Account | Stage | Value | Owner | |
|---|---|---|---|---|
| Northwind Traders | Closing | $482,000 | A. Okafor | |
| Contoso Health | Proposal | $318,500 | M. Lindqvist | |
| Fabrikam Logistics | At risk | $204,750 | R. Chandra | |
| Tailspin Media | Discovery | $96,200 | S. Beaulieu | |
| Adventure Works | Stalled | $61,400 | D. Moreau |
Accessibility
Headers are real th elements carrying aria-sort and are keyboard operable. Selected rows set aria-selected, and status is never conveyed by colour alone — every badge carries text.
Table toolbar
The controls a data table is assembled from. Previously only Filter was documented; this is the rest of the family.
Masters RST/Table/* (11 components)Backlog P1
Stage: Closing
Data visualization
20 — ChartsOverview
What the visualization layer covers today, what it deliberately does not, and how to pick a chart.
Visualization principles
Five rules every RST chart is held to, and what each one rules out.
Chart anatomy
The parts of an RST chart, what each one is for, and which are optional.
Color & palettes
The visualization ramp, when to use a categorical palette and when a sequential one, and why status colours stay out of it.
Axes & scales
Baselines, ticks, gridlines and the truncation rule.
Legends & labels
When a legend earns its place, when direct labelling is better, and how values are formatted.
Interaction
Hover, focus, tooltips and series isolation — including what has to work without a mouse.
Motion
What a chart is allowed to animate, and what happens under reduced motion.
Comparison
Single-series categorical comparison. Hover a bar for its value.
Master RST/Chart/Bar Vertical
Grouped bar
Two series side by side in blue and orange, which stay separable in both themes. Click a legend entry to isolate a series.
Master RST/Chart/Bar Vertical · Type=Grouped
Horizontal bar
The right answer for ranked categories with long labels.
Master RST/Chart/Bar HorizontalBacklog P1
Trend
Continuous change over time. Multi-line uses the categorical ramp in order.
Master RST/Chart/Line
Area chart
The Line + Area type. The fill implies volume, so only use it from a zero baseline.
Master RST/Chart/Line · Type=Line + Area
Sparkline & micro charts
Inline shapes for cards and table cells. There are no axes and no labels because the only thing a sparkline needs to show is direction.
Masters RST/Micro/Sparkline · Line · Area · Bar · Delta · DotBacklog P1
Line
Area
Bar
Dot
12.4%
DeltaComposition
Composition within each category. Use it when the total matters as much as the parts.
Master RST/Chart/Bar Vertical · Type=Stacked
Pie
Part-to-whole for four or fewer slices. Beyond that, a horizontal bar reads better.
Master RST/Chart/PieBacklog P1
Donut
A pie with a centre, which is where the headline figure goes.
Master RST/Chart/Donut
Half donut
Part-to-whole in half the vertical space. It is built from a real annular arc rather than a masked pie, so the geometry stays correct at any size.
Master RST/Chart/Donut · Type=Half Donut
Waterfall
How a starting value becomes an ending value. Positive contributions use series 03, negatives use the dedicated negative token.
Master RST/Chart/Waterfall
Distribution
Distribution across bins. Bars touch, because the x-axis is continuous.
Master RST/Chart/HistogramBacklog P1
Heat map
Two categorical axes with intensity carried by opacity on a single series token rather than by a rainbow of hues.
Master RST/Chart/Heatmap
Relationship
Relationship between two continuous measures.
Master RST/Chart/Scatter
Progress
A single value against a bounded target. One progress colour sits over a track on a real 0 to 100 scale, and there is no series legend because there is only one series.
Master RST/Chart/Donut · Type=Gauge
Use it when
- There is one value and a known ceiling
- The reader needs progress at a glance, not precision
Reach for something else when
- You are comparing parts of a whole — use Donut or Half donut
- You need exact values — use a table
Feedback & status
14 — FeedbackAlerts
The Inline Notification type of RST/Feedback. Five tones, dismissible. Tone carries meaning, so the icon changes with it.
Master RST/Feedback
Export queued
We will email you when the file is ready.
Report published
Shared with 14 people in Platform.
Approaching quota
82% of the monthly limit used.
Sync failed
Reconnect the source and retry.
Banner type
Full-bleed variant for page-level messages.
Toasts
Transient confirmation that does not block the page. Fire one and it stacks in the bottom right, then dismisses itself.
Master RST/Feedback · Type=Toast
Accessibility
The toast region is a labelled landmark. Error toasts use role="alert"; everything else uses role="status" so it does not interrupt.
Progress
Determinate progress. Press Run to watch it animate to completion and flip to the success state.
Master RST/Feedback/Progress Bar
Index rebuild24%
Failed import62%
Loading
Indeterminate waiting. Three sizes; stops animating in the disabled state.
Master RST/Feedback/Spinner
Empty states
The four kinds of empty, and the one thing each of them owes the reader.
Errors
Where an error belongs, how it is worded, and how someone gets out of it.
Overlays
16 — OverlaysModal
A real focus trap. Escape closes it, a scrim click dismisses it, and focus returns to the trigger. Tab cycles inside the dialog rather than escaping to the page.
Master RST/Modal
Accessibility
role="dialog" with aria-modal, labelled by its title. Focus moves to the first field on open and returns to the trigger on close. Background scroll is locked.
Drawer
A side panel for secondary work that keeps context. Below 480px it becomes a bottom sheet.
Master RST/DrawerBacklog P2
Popover
Anchored panel with four placements. Dismisses on outside click and Escape, and returns focus to its trigger.
Master RST/Overlay/Popover
Tooltip
Opens on hover and focus, closes on Escape. Tab to the buttons below to see it work from the keyboard.
Master RST/Tooltip
Dropdown
The Dropdown type of RST/Input. Same anatomy as Select but for filtering and view switching rather than form data.
Master RST/Input · Type=Dropdown
View
- Last 7 days
- Last 30 days
- This quarter
- Year to date
Notifications
Grouped activity with read and unread states.
Master RST/Overlays/Notifications Panel
Media & communication
18 — Media · 19 — DateCarousel
Previous/next, clickable indicators, arrow-key support and touch swipe.
Master RST/Carousel
Video
Play/pause, a scrubbable progress bar and live time. Six states from the master; the state badge follows playback.
Master RST/Media/Video Player
Five sample posters. Pick one to set the poster frame — swap the files in assets/posters/ for your own artwork.
Calendar
Month navigation and date selection, with today, selected, outside-month and disabled day states. The second example selects a range.
Masters RST/Calendar · RST/Calendar/Day
Chat
Conversation surface with typing state. This is the one public surface exposed from the Agent Components page.
Master RST/Media/Chatbox
The gauge rebuild is complete across all nine half-arc variants.
Did the legend get removed on the gauge type?
Yes — a single-value gauge has no series legend. Half Donut keeps its own.
Feed
Activity item with optional media and a loading state.
Master RST/Data/Feed Post
ML
Maja Lindqvist
Platform · 2h ago
Shipped the native half-arc gauge. The imported pie widget is gone and the arc now uses a real track.
AI & intelligence
26 — Agent · 27 — ResearchAgent
Eight public surfaces for showing what an agent is doing, what it has done, and where it needs a person.
Research
Six public surfaces for carrying research from raw signal through to a recommendation someone can act on.
Diagrams & workflows
29 — Diagram SystemCanvas
The surface a diagram sits on: grid, density, material, and the two things it can show for you.
Nodes
Ten node types, what each one means, and why a node is never a card.
Connectors
Five geometries, five types and the rule that keeps a branch label attached to its branch.
Groups
Grouping without nesting — how a phase or a boundary is drawn around nodes that stay independent.
Annotations
Notes that sit beside a diagram without pretending to be part of the flow.
Legend
When a diagram needs a key, and what belongs in it.
User Flow
A signed-out visitor reaching a published report, including the branch where they do not have access.
Agent Workflow
An agent run from trigger to output, with the tool calls, the retry and the human checkpoint.
Research Synthesis
Raw signals converging into themes, and themes into an opportunity with evidence attached.
Journey Map
Five stages of an onboarding journey with touchpoints, feeling and the drop-off worth fixing.
Before and After
The same task before and after a change, drawn so the saving is countable.
Service Flow
Frontstage, backstage and the support processes underneath, across one request.
Patterns
30 — PatternsAuthentication
Default and error states. The email field validates live.
Master RST/Pattern/Sign In
Onboarding
A complete onboarding pattern built from Card, checklist and progress.
Masters RST/Onboarding/Card · Checklist · ProgressBacklog P1
Finish setting up your workspace
2 of 4 complete50%
Search experiences
Input, suggestions, results and the no-results case, as one experience rather than four components.
Filtering
The table filter control and its resulting chips.
Master RST/Table/Filter
Forms
Grouping, order, validation timing and what happens on submit.
Checkout
A three step checkout covering details, review and success, composed from Stepper, Card and Button.
Master RST/Pattern/Checkout
- Details
- 2Review
- 3Confirmation
Order summary
- RST Platform · annual
- $14,400
- Additional seats (12)
- $3,600
Total$18,000
Dashboard composition
How a dashboard is laid out so it answers its question in the first screenful.
Empty states
Empty as a moment in a flow rather than a component: what the page should do next.
Error recovery
Default and offline states.
Master RST/Pattern/404
404
We could not find that page
The link may be out of date, or the report may have been moved.
Templates
25 — Dashboard Templates · 31 — TemplatesExecutive
A decision-focused overview for senior leaders monitoring performance, growth, targets, risk and opportunity.
Frames RST / Dashboard / Executive [Desktop · Tablet · Mobile]
Financial
A premium financial-health workspace connecting position, movement, utilization, spending, transactions and recommendations.
Frames RST / Dashboard / Financial [Desktop · Tablet · Mobile]
AI Agent
A live operational view of intelligent-agent work, progress, evidence, project status, tasks and sources.
Frames RST / Dashboard / AI Agent [Desktop · Tablet · Mobile]
UX Research
A visual research-results workspace for evidence, findings, pain points, opportunities, priorities and journey insight.
Frames RST / Dashboard / UX Research [Desktop · Tablet · Mobile]
Operations
A dense but legible view of operational health, services, utilization, performance, risk, locations, activity and recommendations.
Frames RST / Dashboard / Operations [Desktop · Tablet · Mobile]
Finance Dashboard
An executive dashboard combining key metrics, trends and composition data using RST components and live charts.
Master RST/Template/Finance Dashboard
ARR$18.0M▲ 8.2%
Net retention114%▲ 2.0pp
Churn1.8%▼ 0.3pp
Video Streaming
Player plus library rail.
Master RST/Template/Video Streaming
Episode 1
Episode 2
Episode 3
AI Chat
Conversation-first layout built on Chatbox.
Master RST/Template/AI Chat
AI
What would you like to analyse?
Revenue by segment for Q1.
Email Client
List plus reading pane.
Master RST/Template/Email Client
Deploy summary
All nine half-arc variants rebuilt natively. No detached instances, no duplicate masters.
Project Board
Kanban board in a full application shell.
Master RST/Template/Project Board
To do 2
Consolidate hero mastersP2
Doing 1
Table toolbar docsP1
Done 3
Token rampShipped
Kanban board
Column-per-status layout at two densities.
Master RST/Data/Kanban Board
Backlog 3
Retire legacy chart setSRC-09
Icon master re-authoringSRC-06
In progress 2
Off-master scaling passCFG-10
Done 5
Native gauge rebuildSRC-04
Categorical rampSRC-05
Guidelines
Applied across the systemResponsive behavior
The catalog itself is the specimen: persistent nav at 1440, a collapsed rail at 1024, and a dismissible drawer below 768. Resize the window to watch the left navigation change behaviour.
Breakpoints 1440 · 1024 · 768 · 375
Accessibility
The accessibility rules that apply to everything, and how each one is checked.
Content
How the system writes: labels, buttons, errors, numbers and dates.
Theme usage
All four themed collections switch together: semantic, material, component and visualization. Use the toggle in the header. Your choice is remembered, and if you have not made one the system preference applies.
Collections Semantic · Material · Component · VisualizationFix CFG-09
Current theme
Search
InfoSuccessWarningError
Series ramp
Blue, orange, green, purple, cyan — separable at adjacent positions and lightened for dark surfaces.
Dashboard theme comparison
The same dashboard, the same markup, rendered twice. Nothing about the composition changes between the two columns: only the set of variable values each column resolves against, which is what switching a variable mode does in the design library. Dark mode is not a black page with grey cards, and light mode is not a white page with grey cards — both keep the surface hierarchy the tokens describe.
Rule No Light or Dark component variants
How the two columns are themed. The catalog declares its Light values on :root and its Dark values on :root[data-theme="dark"]. Each selector also matches [data-theme-scope], so a single region can hold one mode while the rest of the page follows the reader's own choice. The values are shared, not copied, so the comparison cannot drift from the tokens it is comparing.
Component composition
Putting components together into page sections without ending up three cards deep.
Hero
The Data hero: headline, supporting line and live figures. Fourteen further hero masters are P2 backlog pending consolidation.
Master RST/Hero/Data
RST Design System
Operational truth, without the spreadsheet
Live cluster telemetry, summarised and scheduled — so the number in the deck is the number in production.
2.48MEvents per minute
99.98%Ingest uptime
412Connected sources
Testimonials
The Testimonial type of RST/Carousel.
Master RST/Carousel · Type=Testimonial
“The catalog stopped being a slide and started being the source of truth.”
ML
Maja Lindqvist
Head of Platform Design
“Repairing at the master instead of the documentation cut our drift to nearly nothing.”
RC
Rohan Chandra
Design Systems Lead
Teams
Grid and list layouts for people.
Master RST/Pattern/Teams
AO
Ada Okafor
Principal Designer
ML
Maja Lindqvist
Head of Platform
RC
Rohan Chandra
Systems Lead
SB
Sylvie Beaulieu
Research
Developer reference
Supported reference implementationGetting started
What this is, what it is not, and how to run it. Read the two columns below before copying anything.
Dependencies Google Fonts only
There is no RST SDK. No npm package, no component library, no framework build.
Everything on this page is reference HTML, CSS and JavaScript you copy into your own stack.
Code labelled Reference reproduces the component rendered directly above it —
the preview and the snippet are the same string.
Run it
Technology stack
The actual architecture, not an aspirational one.
Framework noneBuild build.sh — cat + a regex rewrite
Semantic tokens
Every public semantic token with its live Light and Dark value, read from the cascade rather than typed in. Copy the CSS reference straight into your stylesheet.
Prefix none — tokens are
--surface-base, not --rst-surface-base
Consume the semantic layer. A component stylesheet should never reference a
--color-* primitive — primitives do not change between modes, so a component
bound to one cannot theme.
Token architecture
Why the alias exists. One blue, four layers, and only the last one is what the product sees.
Layers Primitive → Semantic → Component → Product
Change
--interactive-primary once and every primary button, link, focus accent and
selected state moves with it. Change --color-blue-60 and you have changed a swatch
that four unrelated things happened to share.
Theme implementation
Three states, no flash of the wrong theme, and an explicit choice that beats the OS in both directions.
Storage localStorage
rst.themeTypography
The real family, the real fallback stack, and the ramp as composite shorthands.
Family IBM Plex Sans / IBM Plex MonoLicence SIL OFL 1.1
Icons
One icon language, four sizes, colour inherited from the surrounding ink.
Sizes 16 · 20 · 24 · 32
Layout
The shell and the grids, with the measurements they are derived from.
Breakpoints 1440 · 1024 · 768 · 390 · 375
Forms
Button, Text Input, Select, Checkbox, Radio, Toggle and Slider, each with a working example and its source.
Source pages 06 · 07 · 08
Overlays
Modal, Drawer, Tooltip and Popover — the behaviours a component variant cannot express.
Source page 15 — Overlays
Data and time
Data Table, Progress, Carousel and Calendar, including the mobile table strategy.
Source pages 19 · 14 · 09 · 17
AI & Intelligence
The fourteen approved public surfaces from two component masters. The 312 Agent and 153 Research variants are not enumerated here, and should not be.
Agent 320px authoredResearch 340px authoredSource pages 21 · 22
Charts
Grouped by the question, not the shape. Types with no production master are marked NOT YET AVAILABLE rather than stubbed.
Master RST/Chart
Cards/glass/gradients
Containers and materials, including the Phase A gradient token layer.
Source pages 10 · 02
Accessibility
The Phase F documentation as pull-request checks, plus the four markup patterns worth memorising.
Target WCAG 2.1 AA
Resources
Tools and downloadsComponent playground
Real component properties, wired to real components. Change a property and the markup changes with it.
Release notes
What shipped in each phase of the system, newest first.
Design assets
Where the source lives and what can be taken from it.
Social Feed
Feed posts in a two-column reading layout.
Repair pass 1 is complete — 70 of 84 rows now pass.