The normative shape, color, glass, elevation, typography, spacing, and content rules.
Every squircle uses token-derived continuous-curvature corners. Controls and compact containers use 20px across products and viewports; large showcase and routing cards use 32px; the primary composer input in Cortex and Journeys uses 40px; true circles and semantic pills retain their round geometry (design).
Nested radii are derived as outer radius minus padding.
Exactly three surface roles exist: background, secondary, and tertiary, the fewest that show containment depth without borders (design).
Surfaces nest at most three deep and read darkest-to-lightest from outside-in in both modes, so depth reads in one direction everywhere (design).
Component-named surface colors do not exist.
Secondary text uses neutral foreground hues—60, 60, 67 in light contexts and 235, 235, 245 in dark contexts—with sufficient opacity to maintain at least 5:1 contrast against every supported surface (design).
Socra cyan is the theme’s one accent hue and only brand color inside products, using #0090B0 in light mode and #29C4E8 in dark mode (design).
Selection uses a neutral surface plus native semantics, never a primary or brand highlight, because selection is the user's state and never a promotion (design).
One filled action on a screen identifies what to do next (design).
A checked switch may fill its track with the accent because the fill makes its current state obvious (design).
A state that reveals actions floats them clear of the content and changes no element's box, because the reader is looking at what they just acted on and text that moves under a finger has to be found again.
A revealed surface that cannot fit beside the element it acts on resolves to its other side rather than over it.
Glass is reserved for floating functional layers, never content chrome; glass never stacks and derives its tint from underlying content, because glass marks a floating functional layer and chrome that blurs content hides it (design).
Elevation orders content below sticky below overlay below glass; the layer determines shadow, glass treatment, and stacking together.
Web surfaces on macOS, iOS, and iPadOS use the system interface font; all other platforms use Inter, one quiet family so hierarchy comes from published scale and weight, never from novelty (design).
Text uses published typography types; manual font sizes and weights are forbidden, because one manual size forks the hierarchy the system promises.
Spacing is 8 within groups, 16 between groups, and 32 between sections, so grouping is shown by space before any divider needs to exist (design).
A control names the outcome of its action, such as “Save changes”; vague labels such as “OK” and “Submit” are not allowed.