Sorted UI@scrums/sorted-ui v0.1.0scrums.cominternal · on-register render
Every component in the library, rendered live from04-build/platform/ui/src as Astro islands. 69 components · grouped as in the library README. Interactive components (NavBar, SortControl, FilterDrawer, scroll rails) are hydrated (client:visible); the rest are static SSR markup.
The single source of truth for building brand-consistent surfaces — tokens, components, and patterns, documented and ready to ship.
Learn how to work with our brand assets.
Line icon set tailored for operator tooling.
$ scrums deploy
Building blocks for product surfaces.
A disciplined, single-accent colour system.
A core part of the Scrums.com aesthetic.
Specifically designed for operators and engineers.
The Scrums.com logo — mark, wordmark, and lockup — with the placement, colour, and minimum-size rules that keep it consistent everywhere it appears. Treat the mark as fixed geometry: never redrawn, recoloured, or rebuilt from scratch.
The primary lockup pairs the icon mark with the wordmark at a fixed ratio and spacing. It ships in three colour treatments — ink for light surfaces, white for dark or brand-blue surfaces. Never recombine the mark and wordmark at a different spacing or scale than shown here.
The mark alone — the "S" glyph — stands in for the full lockup wherever the wordmark won't fit legibly: favicons, avatars, app icons, and tight UI chrome. It always inherits currentColor, so it recolours automatically between ink and white contexts.
Keep a minimum clearspace equal to the height of the icon mark on every side — no other logo, text, or UI chrome may enter it. Below the minimum size, the mark stops rendering legibly and the wordmark should be dropped in favour of the icon alone.
96px — below that, use the icon mark alone.16px — the smallest legible size, used for favicons and dense UI chrome.--ds-paper or any light-neutral surface.--ds-ink-1 or --ds-blue surfaces only — never white-on-light.The mark is fixed geometry. Every variation below has shipped somewhere as a "quick fix" — none are correct.
Learn how to work with our colour system. Right click to copy raw values.
Five token scales, each a live 25 → 950 ramp. Every swatch is wired to a CSS variable — change a scale token once and every component and swatch that references it updates. Right-click any swatch to copy its raw value.
var(--scale-step); the semantic tokens (--ds-blue, --ds-success…) alias these scales, so updating a scale propagates everywhere at once.--ds-live), text-safe ok uses 600 (--ds-ok). It is distinct from the Success feedback scale.Rules of typesetting throughout the system.
Two families, one typeface: IBM Plex. Mono-first, engineered for operators — Sans exists solely for long-form prose. Copy either stack straight into CSS.
The base for everything — headings, data, interface chrome, and labels. Mono-first, engineered for operators.
'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospaceThe one exception, reserved for body-* long-form prose only — never headings, data, or UI chrome.
'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serifTwo emphasis modifiers layer on top of any size in the scale — they change weight/colour only, never the size or family. Use <strong> for real semantic emphasis, not for making text look bigger.
| Aa Example | ◇ Modifier | Usage |
|---|---|---|
| Subtle — de-emphasised text | Secondary/muted text within any size — sets colour to --ds-ink-5, weight and size untouched. | |
| Regular text with a strong span inline | Semantic emphasis via <strong> — steps weight up one notch on the five-step ladder (e.g. regular→medium, medium→semibold, semibold→bold), never changes colour or size. |
Used to introduce pages or sections. Plex Mono --font-weight-semibold; tracking tightens as size increases. The two largest tiers are responsive — resize the window below 760px.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Heading 72 | Marketing heroes. Responsive: 40px below 760px. | |
| Heading 64 | Secondary marketing heroes. | |
| Heading 56 | Large section intros. | |
| Heading 48 | Page titles. Responsive: 32px below 760px. | |
| Heading 40 | Dense page titles. | |
| Heading 32 | Section headers, dashboard headings. | |
| Heading 24 | Compact section headers. | |
| Heading 20 | Sub-section headers. | |
| Heading 16 | Card and compartment titles. | |
| Heading 14 | Smallest heading — dense list/table group headers. |
Telemetry and metrics. Plex Mono; always font-variant-numeric: tabular-nums.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| 99.999% | Hero telemetry readouts. | |
| 12,480 | Stat strip figures. | |
| 8,462 | Card metrics. | |
| 21d ramp | Inline data points. | |
| A17 · af-cpt | Node and region tags. |
Only used inside components that render buttons — never for links or plain text. Plex Mono --font-weight-semibold.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Deploy Scrums.com | Largest button — marketing CTAs. | |
| Deploy | Default button. | |
| Documentation | Compact buttons, and buttons placed inside an input field. |
Navigation and tag chrome. Plex Mono.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Platform | Nav links. | |
| 01 / 05 | Nav indices. | |
| af-cpt | Tags and chips. |
Long-form prose. The only place Plex Sans is used. Never below the 15px accessibility floor.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Software Engineering Orchestration Platform. | Lead paragraphs. | |
| Never below 15px for long-form prose. | Default body copy. Workhorse. | |
| Secondary descriptive text, captions. | Captions, secondary copy. | |
| Fine print, legal, metadata. | Legal, fine print. |
Uppercase, tracked. Coordinates, addresses, and eyebrows. Plex Mono.
| Aa Example | ◇ Class name | Usage |
|---|---|---|
| Region // af-cpt | Section labels, eyebrows. Workhorse. | |
| Section header | Dense labels. | |
| Micro label | Micro coordinates, ticks. |
Five weights, system-wide — up from three. Weight, not size, now carries most of the legibility/hierarchy load: light for de-emphasised metadata, regular for prose, medium for secondary UI text and data labels, semibold for headings and buttons, bold for the highest-impact brand moments. Every step here is a real static weight IBM Plex Mono ships on Google Fonts — no interpolated in-between values, since this family has no variable-font axis to interpolate from.
| Aa Example | ◇ Token | Usage |
|---|---|---|
| Light 300 | De-emphasised metadata, timestamps, muted captions. | |
| Regular 400 | Body copy, default UI text. | |
| Medium 500 | Nav links, data figures, tags. | |
| Semibold 600 | Headings, buttons, emphasis. | |
| Bold 700 | Highest-impact brand moments — hero display numerals, top-of-funnel headlines. |
Tightens as size increases — a 72px headline needs a much tighter line-box than 15px prose to avoid looking loose. Named by value so the token doubles as the number.
| Aa Example | ◇ Token | Usage |
|---|---|---|
| 0.92 — tightest | heading-hero. | |
| 0.95 | heading-64. | |
| 1.0 — numeric | The entire Data family; heading-56. | |
| 1.05 | heading-h1. | |
| 1.08 | heading-40. | |
| 1.1 | heading-h2. | |
| 1.15 | heading-24. | |
| 1.2 | heading-h3. | |
| 1.3 | heading-h4. | |
| 1.35 | heading-14. | |
| 1.55 | body-small, body-tiny. | |
| 1.6 — prose | body-large, body-default. |
Negative tracking tightens large display type; positive tracking opens up small uppercase labels so they stay legible. Never use a value outside this scale.
| Aa Example | ◇ Token | Usage |
|---|---|---|
| Tightest | -0.05em — heading-hero, heading-64, heading-h1. | |
| Tighter LG | -0.04em — heading-56, heading-40. | |
| Tighter | -0.03em — heading-h2, data-hero, data-large. | |
| Tight | -0.02em — heading-24, data-medium, ui-nav. | |
| Snug | -0.01em — heading-h3, heading-h4. | |
| Normal | 0 — buttons, body copy, the default. | |
| Wide | .04em — ui-tag. | |
| Wider | .05em — data-tiny. | |
| Widest | .06em — label-small. | |
| Widest LG | .08em — label-default, ui-nav-index. | |
| Widest XL | .12em — label-tiny. |
A single linear scale referenced by index, base unit declared explicitly. Gaps in the numbering are deliberate — reserved for later insertion without renumbering.
A deliberately small enum — 2 values, not a multi-tier ladder — because Scrums caps radius at 3px everywhere and has no pill shapes.
Radius and elevation are fused into one named tier so a component picks a single value that carries both — 3 tiers total, because Scrums' radius never varies and elevation is shadow-free.
material="elevated", never sets border and accent-edge separatelyrole="dialog" is still set independently; Material carries zero ARIA meaningGap-as-gridline construction is the default compartment method — §2 rule 1 of the brand law.
1px gap over a hair-2-coloured parent, cells filled paper. Adjacent compartments share a single hairline — no floating cards, no doubled borders.
Grid intersections can carry a small cross — one of the brand's own signature devices, reserved for compartments that should read as an instrument panel.
Set explicitly at all three — no implicit fallback.
| Token | Value | Use for |
|---|---|---|
| mobile-max | 699px | Single column, stacked layout |
| tablet-max | 1099px | 2-column compartments |
| desktop-min | 1100px | Full grid, all columns active |
| content-max | 1340px | Outer content-width ceiling |
A complete, implementation-ready motion foundation. Every animation resolves to one duration token × one easing token — nothing else. Compose these two tokens for every transition in the product so movement stays consistent and predictable, and no one hand-picks a magic number.
transform and opacity only — never width/height/top/left/margin (layout thrash → dropped frames). For accordions animate grid-template-rows: 0fr → 1fr.ease. Pick a curve for the direction (out = entering, in = leaving, in-out = toggles).prefers-reduced-motion.Six steps, coarse on purpose. Rule of thumb: the more screen area moves, the longer the duration. Press Play to feel each token — every bead travels the same distance.
| Token | Value | Use for |
|---|---|---|
| --motion-instant | 100ms | Button press, toggle, color change |
| --motion-fast | 160ms | Hover, small state change |
| --motion-moderate | 240ms | Menu open, tooltip, tab switch |
| --motion-slow | 360ms | Accordion, drawer, list item |
| --motion-deliberate | 560ms | Modal, dialog, panel |
| --motion-entrance | 720ms | Page load, hero reveal, count-up |
The curve carries the direction. Entrances decelerate (out), exits accelerate (in), toggles ease both ways (in-out). Press Play to run a bead along each curve.
| Token | Bezier | Use for |
|---|---|---|
| --ease-out-quart | cubic-bezier(0.25, 1, 0.5, 1) | Standard entrance, hover-in |
| --ease-out-quint | cubic-bezier(0.22, 1, 0.36, 1) | Sharper entrance: metrics, hero, emphasis |
| --ease-out-expo | cubic-bezier(0.16, 1, 0.3, 1) | Most decisive: modals, drawers |
| --ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | State toggles that move both ways |
| --ease-in | cubic-bezier(0.7, 0, 0.84, 0) | Elements leaving the screen entirely |
Drop straight into :root. These exact tokens are live on this page.
Each pattern is pinned to tokens. The demos below are live and implement the spec exactly.
A grid of self-contained custom animations, one per cell. The homepage hero leads; below are four cursor-reactive canvas backgrounds — Sphere Lines, Particle Sphere, Grid Lines, Wave Lines — ported to vanilla canvas and tokenised to the system (they follow the light/dark toggle). Hover any tile to interact. Config constants sit at the top of each so they can be tuned per brand.
transform and opacity animate; the whole stage honours prefers-reduced-motion.transform and opacity only (GPU-composited, skips layout)width / height / top / lefteaseprefers-reduced-motionA testable checklist derived from everything above — the lint layer, not new information.
__btn/__cta class instead of the atom — every colour and text-case bug found in this system's real components traced back to exactly thisIcons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
stroke-width: 2, at every size. No optical variation by size; this replaces an earlier 1.5px/2px split that never matched how @untitledui/icons actually ships. Round caps and joins.currentColor — the icon inherits its parent's ink so it themes automatically. Never hardcode a hex on an icon.--ds-blue when it marks the active/primary action, same rule as every other element.aria-label.Four steps, aligned to the spacing scale. Optical size, not just box size — smaller icons step up to 2px stroke.
Five reusable templates for social, blog, and announcement imagery — each suited to a different kind of post, all built from the same system tokens.
A bold, high-contrast layout for launches and big announcements — a large headline paired with live-looking stats.
A light, data-forward layout for sharing results and proof points — a hero stat alongside supporting metrics.
A side-by-side layout for comparing two things at a glance — regions, releases, or time periods — each with its own status and figures.
A quiet, editorial layout for quotes and testimonials, letting the words carry the page.
A terminal-styled layout for a single strong call to action — good for event promos or one-line announcements.
The standardised company profile background for social platforms (LinkedIn, X, Facebook cover/banner) — built strictly from system tokens (colour, type, spacing, logo) so it doubles as the calibration reference for every future AI-generated profile surface. Every element traces back to a rule documented elsewhere in this system; nothing here is a one-off.
+ SCRUMS.COM // SEOPNot yet built in @scrums/ui. Listed here as a placeholder under Foundations (Atoms) so the taxonomy stays complete. When it gets built, it should reference the existing Colours, Typography, Spacing, Shape, and Materials tokens documented in this system — not introduce new raw values.
Description.
Talent, delivery, and intelligence operated as one system — observe, orchestrate, deploy.
The Software Engineering Orchestration Platform — talent, delivery, and intelligence operated as one system instead of fragmented tools and teams.
Median 21 days to first deploy. Vetted operators embed into your stack and ship inside the first sprint.
us-east, us-west, af-cpt, af-nbo, and eu-lon — work routes to the region that fits latency, cost, and compliance.
Every engagement reports state — uptime, deployments, SLA, and ramp — on one operated surface, not status decks.
Scrums.com replaced four vendors and a status meeting with one operated surface. We read delivery as telemetry now.
Operators ramped inside a sprint and shipped to production in week two. The orchestration is the product.
We scaled across three regions without adding coordination overhead. It runs like infrastructure.
BOTTLENECK MAPPED · CAPACITY READ
OPERATORS RAMPED · ON SURFACE
PODS LIVE · TELEMETRY STREAMING
+REGIONS · +AGENTS · 0 OVERHEAD
| Capability | Scrums.com | In-house hire | Dev agency |
|---|---|---|---|
| Ramp time | Days | Weeks | Months |
| One operated surface | Yes | No | No |
| Telemetry across SDLC | Yes | No | No |
| Multi-region pods | 5 regions | Single | Single |
| AI agents embedded | Yes | No | No |
| Coordination overhead | Operated | High | High |
How work routes to the region that fits latency, cost, and compliance.
The vetting and embedding model behind median 21-day ramp.
Where agents observe, route, and deploy alongside operators.
Reading engagements as readouts instead of status decks.
Scaling across regions without coordination overhead.
Why fragmentation is the enemy and orchestration is the product.
Tell us what you're building. An operator routes you to the right region and pod, usually within a business day.
Scrums.com operates talent, delivery, and intelligence as one system instead of fragmented tools and teams. Every engagement reports state on one operated surface.
The enemy is fragmentation; the after is one operated surface.
How operated engagements report their own state — and why the status meeting is the first thing the platform retires.
Talent, delivery, and intelligence operated as one system. Observe, orchestrate, deploy — on one surface.
NO CARD · 5 REGIONS · UPTIME 99.999%Deploy an orchestrated engineering system — talent, delivery, and intelligence on one operated surface.
| Sector | System | Outcome | Span | Status |
|---|---|---|---|---|
| Fintech | Ledger core | Cut p99 380ms → 90ms | 14 wk | SHIPPED |
| Health | Claims pipeline | 0-downtime cutover | 9 wk | SHIPPED |
| Logistics | Routing engine | Throughput +3.1× | 11 wk | OPERATING |
the four numbers that matter
Every agent is a typed, priced, deployable record — built for humans, queryable by machines.
USD 4,800
Deploy stages this to your workspace — no charge yet.
Rated 4.8 / 5 by clients on GoodFirms.
Read verified reviews on GoodFirmsBuild with Scrums.com and your team gets instant access to the full rewards catalogue.
Get startedAlready building with us? Explore every reward and redeem deals across analytics, AI and more.
Browse perksAn embedded squad operated end-to-end on your stack.
Metered access to production AI agents.
Navigating PCI DSS, POPIA, PSD2 and AML/CFT compliance delays feature releases by weeks.
Monoliths make adding embedded finance or crypto risky. Modernizing needs deep expertise.
One operated surface for the systems your business runs on — for humans & agents.
