BlogScrums.com News·3 mins

Announcing Sorted UI: the agent-friendly design system

Sorted UI is the Scrums.com design system: one token file, 69 components in one React package, and docs that agents can read. Built for agents first.

Jamie Chennells

Scrums.com

Published Nov 9, 2026Scrums.com News

Today we release Sorted UI. It is the Scrums.com design system. It is the same library that builds www.scrums.com.

Sorted UI holds our tokens, components and patterns. It ships as one React package, @scrums/sorted-ui. People can use it. Agents can use it too. We designed it for agents first.

Install

npm i @scrums/sorted-ui

import "@scrums/sorted-ui/tokens/tokens.css";
import { Button, NavBar, Hero } from "@scrums/sorted-ui";

Preview<Hero />

SEOPThe Software Engineering Orchestration Platform.

SoftwareEngineering.Sorted.

Talent, delivery, and intelligence operated as one system — observe, orchestrate, deploy.

Deploy Scrums.com →$ scrums deploy --docs

Code

import { Hero } from "@scrums/sorted-ui";

<Hero
  headingLevel={2}
  primaryLabel="Deploy Scrums.com"
  primaryHref="/platform"
  secondaryLabel="$ scrums deploy --docs"
  secondaryHref="/docs"
  panelTitle="SORTED UI / PACKAGE"
  status="LIVE"
  metrics={[
    {
      "label": "COMPONENTS",
      "value": "69"
    },
    {
      "label": "TOKEN FILES",
      "value": "1"
    },
    {
      "label": "LICENCE",
      "value": "MIT"
    },
    {
      "label": "REACT",
      "value": "18+"
    }
  ]}
/>

The site hero: bracket frame, three-line headline, telemetry panel. Every value comes from tokens.css.

Why we built it for agents

An agent does not guess well. It needs rules that it can read and check. Sorted UI gives it those rules:

One token file. tokens.css is the single source of truth. A raw hex value or a font name in a component is a defect.
Plain CSS custom properties. There is no Tailwind or Webflow dependency to learn.
69 components from one export. The agent imports each component by name.
Documentation as plain pages. An agent can read every foundation, component and guideline.

Preview<FeatureCards />

[SORTED UI] AGENT CONTRACT3 MACHINE-READABLE

RULE-01ONE FILE

TOKENS

CSS CUSTOM PROPERTIES · NO RAW HEX · NO FONT NAMES

tokens/tokens.cssTOKENS ▸

RULE-0269 EXPORTS

COMPONENTS

ONE EXPORT · IMPORT BY NAME · REACT 18+

@scrums/sorted-uiCOMPONENTS ▸

RULE-03PLAIN PAGES

DOCS

FOUNDATIONS · COMPONENTS · GUIDELINES

scrums.com/company/sorted-uiREAD ▸

Code

import { FeatureCards } from "@scrums/sorted-ui";

<FeatureCards
  eyebrow="[SORTED UI] AGENT CONTRACT"
  summary="3 MACHINE-READABLE"
  items={[
    {
      "id": "RULE-01",
      "name": "TOKENS",
      "status": "ONE FILE",
      "readout": "CSS CUSTOM PROPERTIES · NO RAW HEX · NO FONT NAMES",
      "region": "tokens/tokens.css",
      "linkLabel": "TOKENS ▸",
      "linkHref": "/company/sorted-ui/tokens"
    },
    {
      "id": "RULE-02",
      "name": "COMPONENTS",
      "status": "69 EXPORTS",
      "readout": "ONE EXPORT · IMPORT BY NAME · REACT 18+",
      "region": "@scrums/sorted-ui",
      "linkLabel": "COMPONENTS ▸",
      "linkHref": "/company/sorted-ui/components"
    },
    {
      "id": "RULE-03",
      "name": "DOCS",
      "status": "PLAIN PAGES",
      "readout": "FOUNDATIONS · COMPONENTS · GUIDELINES",
      "region": "scrums.com/company/sorted-ui",
      "linkLabel": "READ ▸",
      "linkHref": "/company/sorted-ui"
    }
  ]}
/>

A register of bordered compartments on one continuous grid. Each card reports state.

This is one part of a larger decision. At Scrums.com, we package everything for agent use: our docs, our API, our catalog, and now our design. Our site already publishes llms.txt, OpenAPI 3.1 and an MCP gateway. The design system is the next layer of the same contract. When the rules are machine-readable, an agent makes on-brand output the first time.

"A design system is a set of decisions. We wrote ours so a machine can follow them as well as a person can."
Amy Rodgers, Head of Design, Scrums.com

Where it works best

Sorted UI works best with agent-friendly JavaScript frameworks. Astro is our reference. Our marketing site renders the components as Astro islands. Only the NavBar hydrates. Every other page stays static, with zero JavaScript. Framer is also a good fit for teams that design and publish in one tool.

Get the code

Preview<StatStrip />

69COMPONENTSfrom one export

1TOKEN FILEtokens.css

MITLICENSEopen source

18+REACTpeer dependency

Code

import { StatStrip } from "@scrums/sorted-ui";

<StatStrip
  columns={4}
  stats={[
    {
      "num": "69",
      "label": "COMPONENTS",
      "sub": "from one export"
    },
    {
      "num": "1",
      "label": "TOKEN FILE",
      "sub": "tokens.css"
    },
    {
      "num": "MIT",
      "label": "LICENSE",
      "sub": "open source"
    },
    {
      "num": "18+",
      "label": "REACT",
      "sub": "peer dependency"
    }
  ]}
/>

Telemetry cells that share one gridline. Figures use tabular numbers.

GitHubScrumsdotcom/scrums/packages/sorted-ui npm@scrums/sorted-ui Docsscrums.com/company/sorted-ui

Read the full documentation at scrums.com/company/sorted-ui. Software Engineering. Sorted.