Components

123 components in 15 groups, 123 with a live rendering. Every one is held to the design system's own reference bundle by the parity gate.

Foundations · 5

MarkThe Redrob lockup, sized by height and swapped by theme. MarkRevealThe lockup arriving: light wipes across it on the 40 degree rake. LayerOne step of depth. IllustrationOne of the system's drawings, at one of three sizes. DiagramA process, drawn as numbered steps, saying who did each one.

Voice · 4

DisplayOne line set in Redrob Rake Display. StatementThe one spoken sentence on a surface, set in the voice face. QuoteSomebody else's words, attributed. SectionMarkA 40 degree tick and a short label: the system's section opener, and one of its marks of authorship.

Actions · 3

ButtonTriggers an action: submitting a form, opening a dialog, running a search. IconButtonA button whose whole label is an icon: close, more, copy, expand. MenuA button that opens a short list of actions.

Forms · 12

FormThe frame around a set of fields: title, an error summary, the fields, consent, one submit. InputOne line of text, with its label, hint and error. TextareaSeveral lines of text. SelectPick one value from a list. ComboboxPick one value from a list long enough that you would rather type than scroll. CheckboxOne independent yes or no. RadioOne choice out of several, where the options are all visible. SwitchTurns something on or off, and it takes effect immediately. DatePickerA date, typed or picked. TimePickerA time of day, typed or set on a clock face. TimeZonePickerPick a time zone by naming a city. FileUploadTakes files, by drop or by browsing.

Borders · 7

NameInputOne field for a person's name. AddressInputAn address, in the order the country writes it. PhoneInputA phone number: the country, and the number as it is written at home. DateInputA date typed as three parts: day, month, year. MoneyAn amount of money, in the reader's own convention. ConvertedAmountThe same money in two currencies, and everything needed to check the conversion. TimestampA moment in time, in the reader's zone, with the zone said out loud.

Navigation · 6

TabsSwitches between views of the same thing. BreadcrumbWhere this page sits, and the way back up. PaginationPage controls for a list. StepperWhere somebody is in a process that has an order. AccordionSections that open one at a time, for content most readers will skip. ScrollerA scrollable area with faded edges, so it is visible that there is more.

Feedback · 9

AlertA message about the page, in place, that stays until it is dealt with. ToastConfirmation that something happened, floating and brief. ModalInterrupts, for one decision that has to be made before anything else. DrawerA panel from the edge, for detail beside what the person was looking at. TooltipA short label on hover or focus. ProgressHow far along something measurable is. LoaderSomething is happening and the share is unknown. SkeletonThe shape of content that has not arrived, so the layout does not jump when it does. EmptyStateNothing here, and what to do about it.

Data display · 8

CardA block of related content, optionally the whole thing being one control. TableRows and columns of data, in a real table. StatOne number that matters, with what it is and which way it moved. ChartA bar or line chart that says what it does not know. SparklineA trend line the size of a word, for beside a number. BadgeA short piece of state on something else: a status, a count, a label. AvatarStands in for a person: their picture, a generated mark, or their initials. AvatarMarkA generated mark for someone with no picture: the gateway, in one of nine accent families.

Agent chat · 18

MessageOne turn in a conversation. ComposerWhere a person writes to the agent. ModelPickerChooses which model answers, by asking what the person does and what they want. ModelGuideThe full comparison behind the ranking: what each model was asked, what it wrote, and how it scored. ComposerStatusWhat will happen to this message, shown above the composer, before Send. AnswerReceiptWhat happened to produce this answer: which model, what was checked, what was found. PrivateTextText the person wrote that the model did not see, shown as what they wrote. DisputedMarks a claim a second opinion disagrees with, inline, and shows both views. OpinionAddedSomething a second opinion added that the first answer had missed. ModelSwitchSays the model changed mid-conversation, and that nothing was lost. MemorySavedSays something was written to memory, what it was, and how to take it back. StreamingAn answer arriving, with a way to stop it. PromptSuggestionsA few things worth asking, for an empty chat. CitationA reference to where something came from. ConfidenceHow sure an answer is, in words and in three bars. AgentActionOne thing the agent did: a search, a file read, a call out. AgentTimelineWhat the agent is doing, in order, as it happens. ApprovalStepThe agent has stopped and is asking before it does something.

Safeguards · 6

StatusCardThe state of one safeguard, in a sentence somebody can act on. PrivacyProtectionWhether the on-device privacy check is running, at what level, and what it does. MemoryScopeWhich memory this chat reads, including none. SecondOpinionSettingWhen two other AIs check the answer. MemoryListEverything the product remembers, each entry editable or removable. OpinionGridEvery point in an answer against the AI that wrote it and the two that reviewed it.

Agent harness · 13

TaskStatusWhat a run is doing, in a word and a dot. AgentRosterEvery agent working right now, what each is doing, and how to stop one. AgentHandoffOne agent passing work to another, and what went with it. ScopeBadgeEverything an agent can reach, and whether it can change it. ChangesWhat an agent changed, before and after, with a way to undo it. CostMeterWhat a run has spent against what it was allowed. MemoryMeterHow full the working memory is, and what is taking up the room. ScheduleOne scheduled task: what it is, when it runs next, and how the last run went. SchedulePickerWhen something should run: once, on a repeat, or when a file arrives. PlaybookRowOne saved playbook, and how much of it runs without asking. AppAccessWhat a playbook can reach: the project's files, its memory, and named apps with a read or write grant. ConnectorCardOne app the agent can be connected to. CheckInThe agent has stopped and needs an answer before it goes on.

Evidence · 10

SourceSetWhat an answer actually read, and what it did not. EvidenceA quotation put forward as proof of something, with its source. CriteriaWhat the agent is looking for, before it starts looking. MatchBreakdownHow one candidate measures against each condition, with what the judgement rests on. ReviewGridA grid of extracted answers across many documents, with the uncertain ones counted. FindingOne thing found in the material, how serious it is, and what to do. RedlineA proposed wording change, shown in the text itself. PlaybookA saved sequence, step by step, marking where it stops for a person. ShortlistWhat a person has kept for a second look. DecisionNoticeHow a decision about a person was reached, and what they can do about it.

Marketing · 10

HeroThe top of a page: one statement, one action, one second path. LogoRowCustomer and partner marks, with the claim they are evidence for. FeatureRowOne subject, with its picture: title, a paragraph, a few points, one action. FigureA framed picture with a caption. CustomerStoryA customer result: who, the number, and what it is measured over. StoryHeaderThe top of a customer story: who it is about, the claim, and the figures behind it. PriceTableWhat each plan includes, and what it costs. NewsSectionThe newest few stories: one lead and up to three more. MilestonesThe company's own dates, in order. PeopleListThe people, with their titles.

Frames · 8

AppShellThe product frame: sidebar, the work, an optional rail. PageShellThe frame of a public page: a skip link, the banner, the main region, the footer. SiteHeaderThe site's top bar: the mark, up to six sections, and the controls at the end. SiteFooterThe site's footer: the mark, the columns, the legal line. BandOne horizontal stretch of a page: its ground, its texture, and the rail that holds the content to a readable measure. LangSwitchSwitches the page's language. ThemeSwitchSystem, light, dark - three options, not a toggle. ConsentBarAsks about cookies, and takes no for an answer.

Publishing · 4

IndexHeaderThe top of an index: what this collection is, and how to narrow it. PostListAn index of published stories: a lead, then the rest. ArticleLayoutA published piece: kicker, title, standfirst, byline, contents, body, tags. LegalDocA policy or terms document: summary, numbered sections, and what has changed.