Components / Cards
Surfaces. Sometimes raised, never floating.
Standard cards sit on the canvas with a 1px shadow ring + 2px soft drop. Raised cards (modals, popovers) get a stronger ring + 24px ambient shadow. No hover state on non-interactive cards. Padding follows the role: 16 default, 20 dashboard, 40 vertical for CTA tiles.
Standard
Hazard Report
Scaffolding stability — OPS-A-01
Field team flagged unsteady scaffold under engine room walkway. Triage required by 14:00.
16-20px padding · 8px radius1px shadow ring + 2px drop
Raised — modal / popover
Confirm rejection
This will move the report to rejected and notify the reporter. The action cannot be undone.
Same shape, stronger 1px ring + 24px ambientModals · popovers · combobox panels
Vertical CTA cards — dashboard tiles
New report
Submit a hazard
Team
Operators on duty
Analytics
Coming soon
40px vertical padding (use pt-10 pb-10 sm:pt-10 sm:pb-10)Active CTA gets green-tinted shadow border
Cards grow with content. Never fixed-height for variable content. Silent truncation is the same anti-pattern as a clipped table column.