The shell

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