---
url: https://brand.okrado.com/
title: One system for every Okrado screen
description: Tokens, foundations, layout, patterns and components of the Okrado design system, for people and agents.
kind: explanation
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# One system for every Okrado screen

> Tokens, foundations, layout, patterns and components of the Okrado design system, for people and agents.

## Same tokens, four conditions

One specimen, drawn from the tokens in its own paper, night, compact and right-to-left subtree. Nothing here is a screenshot.

- March close

  `rec_9f2a…c41d`In review

  OpenDismiss

  Paper

- March close

  `rec_9f2a…c41d`In review

  OpenDismiss

  Night

- March close

  `rec_9f2a…c41d`In review

  OpenDismiss

  Compact density

- إقفال مارس

  `rec_9f2a…c41d`قيد المراجعة

  فتحتجاهل

  Arabic, right to left

## What is inside

- [Start](https://brand.okrado.com/start/principles/)

  The Record, the Loop, and how people and agents use this site.

- [Foundations](https://brand.okrado.com/foundations/colour/)

  Colour with its contrast table, type, spacing, elevation, motion, voice and colour mode.

- [Layout](https://brand.okrado.com/layout/modes/)

  Operate and workspace modes, the shell, page templates and responsive rules.

- [Patterns](https://brand.okrado.com/patterns/overlays/)

  One page per overlay, with keyboard, dismissal and stacking read from the components.

- [Components](https://brand.okrado.com/catalog/)

  110 entries from @okrado/ui 0.11.0: 59 stable, 51 beta. Docs and stories in Storybook.

- [Tokens](https://brand.okrado.com/tokens/browser/)

  Every token with its CSS variable, and the files to download.

- [Brand](https://brand.okrado.com/brand/logos/)

  The Record logo, clear space, and the press files.

- [Project](https://brand.okrado.com/changelog/)

  Changelog, how to add a component, and the lifecycle a component goes through.