warframe-bilder/wireframe-system/.agents/skills/figma-wireframe-builder/references/mid-fi-wireframe-primitives.md

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.