---
url: https://brand.okrado.com/layout/shell/
title: The shell
description: "The app shell: top bar, rail, sidebar and inspector, with the tokens that size them."
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
---

# The shell

> The app shell: top bar, rail, sidebar and inspector, with the tokens that size them.

The shell (`AppShell`, `ZoneShell`) gives every product the same frame: a top bar, an optional icon rail, a sidebar of navigation, the main area and an optional inspector. It keeps a skip link and the landmarks, and the main area is focusable so it scrolls from the keyboard.

- The sidebar is 216 px by default and resizes between 200 and 320.
- Items are 32 px high (28 compact); touch targets stay at 44 px.
- The active item is a `surface` with a 1 px line, not an edge bar.
- One workspace mark: the Okrado mark, never initials in an amber square.

| Token                          | CSS variable                         | Value                      |
| ------------------------------ | ------------------------------------ | -------------------------- |
| `ui.layout.content-max`        | `--okr-ui-layout-content-max`        | `1280px`                   |
| `ui.layout.gutter`             | `--okr-ui-layout-gutter`             | `24px`                     |
| `ui.layout.columns`            | `--okr-ui-layout-columns`            | `12`                       |
| `ui.layout.margin`             | `--okr-ui-layout-margin`             | `clamp(20px, 4.2vw, 80px)` |
| `ui.layout.header`             | `--okr-ui-layout-header`             | `68px`                     |
| `ui.layout.sidebar`            | `--okr-ui-layout-sidebar`            | `216px`                    |
| `ui.layout.inspector`          | `--okr-ui-layout-inspector`          | `340px`                    |
| `ui.layout.topbar`             | `--okr-ui-layout-topbar`             | `48px`                     |
| `ui.layout.icon-rail`          | `--okr-ui-layout-icon-rail`          | `48px`                     |
| `ui.layout.sidebar-min`        | `--okr-ui-layout-sidebar-min`        | `200px`                    |
| `ui.layout.sidebar-max`        | `--okr-ui-layout-sidebar-max`        | `320px`                    |
| `ui.layout.form-max`           | `--okr-ui-layout-form-max`           | `640px`                    |
| `ui.layout.dashboard-max`      | `--okr-ui-layout-dashboard-max`      | `1440px`                   |
| `ui.layout.page-inline-sm`     | `--okr-ui-layout-page-inline-sm`     | `16px`                     |
| `ui.layout.page-inline`        | `--okr-ui-layout-page-inline`        | `24px`                     |
| `ui.layout.page-top`           | `--okr-ui-layout-page-top`           | `24px`                     |
| `ui.layout.section-gap`        | `--okr-ui-layout-section-gap`        | `32px`                     |
| `ui.layout.reading-max`        | `--okr-ui-layout-reading-max`        | `68ch`                     |
| `ui.layout.header-toolbar-gap` | `--okr-ui-layout-header-toolbar-gap` | `12px`                     |
| `ui.layout.dialog-sm`          | `--okr-ui-layout-dialog-sm`          | `440px`                    |
| `ui.layout.dialog-md`          | `--okr-ui-layout-dialog-md`          | `560px`                    |
| `ui.layout.dialog-lg`          | `--okr-ui-layout-dialog-lg`          | `720px`                    |
| `ui.layout.drawer-sm`          | `--okr-ui-layout-drawer-sm`          | `340px`                    |
| `ui.layout.drawer-md`          | `--okr-ui-layout-drawer-md`          | `480px`                    |
| `ui.layout.drawer-lg`          | `--okr-ui-layout-drawer-lg`          | `640px`                    |
| `ui.layout.sheet-snap-half`    | `--okr-ui-layout-sheet-snap-half`    | `0.5`                      |
| `ui.layout.sheet-snap-full`    | `--okr-ui-layout-sheet-snap-full`    | `0.9`                      |