# Mid-Fi Wireframe Primitives

Use these primitives when no design system component is available.

- App shell: vertical frame with top navigation and content region.
- Sidebar: 240-280px fixed navigation with active item state.
- Data table: header row, 5-8 sample rows, filters, pagination/status.
- Form: labeled fields, helper text, validation row, primary/secondary actions.
- Empty state: title, short reason, primary action.
- Loading state: skeleton rows or blocks that preserve layout dimensions.
- Error state: inline error text plus recovery action.
- Status card: label, metric/value, trend/status, supporting caption.

Use neutral colors, 8px or smaller radii, and readable typography. Keep the design quiet and task-oriented for SaaS, CRM, admin, and operational products.