Radius and elevation

Radius

6 to 8 for inputs and buttons, 10 for cards inside the app, 14 to 16 for frames and marketing cards, full only for status chips. The Record square stays sharp. Never mix two radii on nested elements without inner = outer − padding.

Token	CSS variable	Value
ui.radius.xs	--okr-ui-radius-xs	4px
ui.radius.sm	--okr-ui-radius-sm	6px
ui.radius.md	--okr-ui-radius-md	8px
ui.radius.lg	--okr-ui-radius-lg	10px
ui.radius.xl	--okr-ui-radius-xl	14px
ui.radius.2xl	--okr-ui-radius-2xl	16px
ui.radius.full	--okr-ui-radius-full	9999px

Elevation

Structure is a 1 px line. A shadow means a layer floats above the page.

• A card is bordered or shadowed, not both.
• Floating layers (popover, menu, tooltip at e2; dialog, sheet, toast at e3) carry a 1 px border and their shadow. Forced-colors removes shadows, so the border is required.
• In night there is no shadow on cards: a lighter surface and a line. e2 is the maximum.

Token	Paper	Night
ui.shadow.e1	0px 1px 0px 0px rgba(13,16,21,0.04), 0px 12px 32px -12px rgba(13,16,21,0.14)	0px 0px 0px 0px rgba(0,0,0,0)
ui.shadow.e2	0px 4px 12px 0px rgba(13,16,21,0.08), 0px 1px 3px 0px rgba(13,16,21,0.06)	0px 24px 48px -16px rgba(0,0,0,0.6)
ui.shadow.e3	0px 12px 32px 0px rgba(13,16,21,0.12), 0px 2px 6px 0px rgba(13,16,21,0.06)	0px 24px 48px -16px rgba(0,0,0,0.6)

Layers

No other z- value is allowed. Stack depth is two at most.

Token	CSS variable	Value
ui.z.sticky	--okr-ui-z-sticky	10
ui.z.sheet	--okr-ui-z-sheet	40
ui.z.dialog	--okr-ui-z-dialog	50
ui.z.popover	--okr-ui-z-popover	60
ui.z.toast	--okr-ui-z-toast	70
ui.z.tooltip	--okr-ui-z-tooltip	80
ui.z.skip	--okr-ui-z-skip	90