# Okrado design system

> Tokens, foundations, layout, patterns and components of the Okrado design system, with the Storybook of @okrado/ui at /components/.

## Overview

- [One system for every Okrado screen](https://brand.okrado.com/index.md): Tokens, foundations, layout, patterns and components of the Okrado design system, for people and agents.

## Start

- [Principles](https://brand.okrado.com/start/principles.md): The Record and the Loop, and the seven rules every Okrado surface follows.
- [Use this site as a person or as an agent](https://brand.okrado.com/start/humans-and-agents.md): Where a designer, a developer and an agent each find the same facts: pages, markdown twins, manifests and tokens.

## Foundations

- [Colour](https://brand.okrado.com/foundations/colour.md): Colour roles with their paper and night values, the rules for using them, and the contrast table generated from the tokens.
- [Type](https://brand.okrado.com/foundations/type.md): The four faces and their jobs, the product scale, the marketing scale and the Arabic rules.
- [Spacing and density](https://brand.okrado.com/foundations/spacing.md): The 4 px spacing scale and the two densities that switch row, control and card sizes.
- [Radius and elevation](https://brand.okrado.com/foundations/elevation.md): Corner radii, the three elevations, and the rule that a card is bordered or shadowed.
- [Motion](https://brand.okrado.com/foundations/motion.md): Durations and easings by token, the exit ratio, and what reduced motion keeps.
- [Iconography](https://brand.okrado.com/foundations/iconography.md): One icon set, how to size and colour icons, and what is banned.
- [Voice and UI copy](https://brand.okrado.com/foundations/voice.md): How Okrado words its interface in English, French and Arabic.
- [Accessibility](https://brand.okrado.com/foundations/accessibility.md): The WCAG 2.2 AA bar, what is tested automatically, and what a person must check.
- [Colour mode](https://brand.okrado.com/foundations/colour-mode.md): System by default, an explicit choice kept in a per-host cookie, and no flash on first paint.
- [Language and right to left](https://brand.okrado.com/foundations/i18n-rtl.md): English, French and Arabic: logical CSS, direction on the root, and what to test.

## Layout

- [Layout modes](https://brand.okrado.com/layout/modes.md): Operate and Persuade: which layout a surface uses and what each mode allows.
- [The shell](https://brand.okrado.com/layout/shell.md): The app shell: top bar, rail, sidebar and inspector, with the tokens that size them.
- [Page templates](https://brand.okrado.com/layout/templates.md): The page templates a route composes, and the width each allows.
- [Responsive behaviour](https://brand.okrado.com/layout/responsive.md): Grid, breakpoints and what changes below 640 px.

## Patterns

- [Overlays](https://brand.okrado.com/patterns/overlays.md): One contract for every layer that floats: layers, sizes, stacking, dismissal, focus and motion.
- [Dialog](https://brand.okrado.com/patterns/dialog.md): A modal for a focused task or a form: when to use it, and how it behaves.
- [Alert dialog](https://brand.okrado.com/patterns/alert-dialog.md): A modal that interrupts for a decision that cannot be taken back, and the ready-made confirmation.
- [Drawer](https://brand.okrado.com/patterns/drawer.md): A panel from the inline end for a record or a longer form, a bottom sheet on a phone.
- [Popover](https://brand.okrado.com/patterns/popover.md): A small floating panel anchored to its trigger, for a moment of extra detail or a quick choice.
- [Menu](https://brand.okrado.com/patterns/menu.md): A list of actions opened from a button, with checkbox and radio items.
- [Tooltip](https://brand.okrado.com/patterns/tooltip.md): A short label for a control, shown on hover and keyboard focus.
- [Toast](https://brand.okrado.com/patterns/toast.md): A brief confirmation that an action happened, with an optional action.
- [Keyboard shortcuts](https://brand.okrado.com/patterns/shortcuts.md): The shortcut registry and the dialog that lists the shortcuts available on a page.

## Components

- [Components](https://brand.okrado.com/catalog.md): Every component of @okrado/ui, generated from its manifest, with its lifecycle stage and a link to its docs in Storybook.

## Tokens

- [Token browser](https://brand.okrado.com/tokens/browser.md): Every token family with its CSS variable and value, generated from @okrado/brand.
- [Token downloads](https://brand.okrado.com/tokens/downloads.md): The token files in every format, and the npm package they ship in.

## Brand

- [Logos](https://brand.okrado.com/brand/logos.md): The Record logo in each lockup, how to choose the file, and clear space.
- [Press kit](https://brand.okrado.com/brand/press.md): Share cards, app icons and the files to use when writing about Okrado.

## Project

- [Changelog](https://brand.okrado.com/changelog.md): Release notes of the tokens and brand package.
- [Add a component](https://brand.okrado.com/contribute/adding-a-component.md): The loop from an idea to a stable component: check the manifest, scaffold, write stories and docs, review, release.
- [Governance and lifecycle](https://brand.okrado.com/contribute/governance.md): The stages a component goes through, what each requires, and who owns what.

## Optional

- [نظام واحد لكل شاشة في أوكرادو](https://brand.okrado.com/ar.md): الرموز والأسس والتخطيط والأنماط والمكوّنات في نظام تصميم أوكرادو، للأشخاص وللوكلاء.
- [Un seul système pour chaque écran Okrado](https://brand.okrado.com/fr.md): Tokens, fondations, mise en page, patterns et composants du système de design Okrado, pour les personnes et pour les agents.
- [Principes](https://brand.okrado.com/fr/start/principles.md): L’Enregistrement et la Boucle, et les sept règles que suit chaque surface Okrado.
- [Utiliser ce site, en personne ou en agent](https://brand.okrado.com/fr/start/humans-and-agents.md): Où une designer, un développeur et un agent trouvent les mêmes faits : pages, jumeaux markdown, manifestes et tokens.
- [Couleur](https://brand.okrado.com/fr/foundations/colour.md): Les rôles de couleur avec leurs valeurs papier et nuit, les règles d’usage, et le tableau de contrastes généré depuis les tokens.
- [Voix et textes d’interface](https://brand.okrado.com/fr/foundations/voice.md): Comment Okrado rédige son interface en anglais, en français et en arabe.
- [Accessibilité](https://brand.okrado.com/fr/foundations/accessibility.md): Le niveau WCAG 2.2 AA, ce qui est testé automatiquement, et ce qu’une personne doit vérifier.
- [Mode de couleur](https://brand.okrado.com/fr/foundations/colour-mode.md): Système par défaut, un choix explicite gardé dans un cookie propre à l’hôte, et aucun flash au premier affichage.
- [اللغة والاتجاه من اليمين إلى اليسار](https://brand.okrado.com/ar/foundations/i18n-rtl.md): الإنجليزية والفرنسية والعربية: خصائص CSS المنطقية، والاتجاه على الجذر، وما يجب اختباره.
- [Surcouches](https://brand.okrado.com/fr/patterns/overlays.md): Un seul contrat pour toute couche qui flotte : niveaux, tailles, empilement, fermeture, focus et mouvement.
- [Composants](https://brand.okrado.com/fr/catalog.md): Tous les composants de @okrado/ui, générés depuis son manifeste, avec leur étape de cycle de vie et un lien vers leur doc dans Storybook.