Guide: Web app screens

• Make each screen 1440 by 900, or 1280 by 800, with overflow-hidden on the root.
• Split the screen into a sidebar and a main column: grid grid-cols-[240px_1fr]. A sidebar is 240 to 280 px wide.
• Put a top bar of 56 to 64 px at the top of the main column, with the title, search and actions. Put the content under it, with 24 to 32 px of padding and a gap of 24 px.
• Put the product mark and the main navigation in the sidebar. Put secondary items at the bottom with mt-auto.
• Make a nav item 36 to 40 px high, with an icon, a label and a radius of 6 to 8 px. Give the active item a fill.
• Make these components first: NavItem, Button (primary, secondary, ghost), Input, Card, Badge, Avatar, and a table row.
• Common content: a row of metrics, a data table, a detail panel, an empty state, and a settings form with a width of 640 px or less.
• Show hierarchy with size and weight, not with colour. Separate surfaces with 1 px borders of low contrast, not with shadows.
• Show each state of a screen as its own frame: empty, loading, with data, with an error. Give the screen component a variant prop for the state, and place one frame for each value with props.

See the recipes in layout.md: the dashboard shell, the form and the table.