Layout and shape

Layout and spacing

• Spacing follows a 4px base: space-1 to space-24. Card padding space-6; heading block to content space-8; sections space-16 on desktop and space-12 on phones.
• Content width is capped at container-max (1160px) with a space-5 gutter (space-4 on phones). Left-align text; center only short calls to action.
• Alternate dark and light sections to separate topics instead of drawing boxes around them.

The Section and Container components apply these rules. See the values on the Tokens page.

Shape and depth

• Radii: radius-sm for tags, radius-md for buttons, inputs and notices, radius-lg for cards and panels, radius-full for the chat launcher.
• Separate with border hairlines, not shadows. The only shadow is shadow-float, for the chat launcher and panel.
• Focus is a 2px solid focus ring with a 2px offset on every interactive element.