Materials

Radius, fill, stroke, and lift. Keep these presets — do not invent a fourth radius for a one-off card.

Radius

Control · 6px

Button, Input, Switch, Badge

Card · 8px

Project rows and DocsPreview frames — not docs chrome

Menu · 12px

Menu, Modal, EmptyState icon well

Pill · 999px

shape="rounded" / circle buttons

Page

--ds-background-100

Raised

--ds-gray-100

Hover

--ds-gray-200

Hairline — Default border on dark and light--ds-gray-alpha-400

Focus — 2px ring on interactive controls--ds-focus

Error — Invalid inputs and error notes--ds-red-700

Menus and modals lift off the page. Tooltips stay the lightest.

Tooltip

6px · light shadow

12px · 8 / 30

Modal

12px · deeper lift