Layout
A 12-column grid, comfortable and compact density, page templates and content widths.
Five page shapes cover most financial products. AppShell is the frame; the other four are template blocks in @macaw-ds/blocks that npx @macaw-ds/cli add <slug> copies into your repo. The previews below are the real blocks at half scale. Every page starts with a PageHeader whose title is the page's h1.
App shell
Once, in the root layout. Every page below renders inside its main area.
The page renders here: a PageHeader, then the content.
// app/layout.tsx
<AppShell
topBar={<TopBar brand={<Brand />} actions={<HeaderActions />} />}
sideNav={<SideNav aria-label="Main">…</SideNav>}
>
{children}
</AppShell>See AppShell for the props and the skip link.
List page
A PageHeader with the one primary action, a search and filter toolbar, then rows on a layer-1 card.
Items
Every item in this collection, newest first.
Item one
Secondary detail
Active$0.00
Item two
Secondary detail
Active$0.00
Item three
Secondary detail
Draft$0.00
Item four
Secondary detail
Draft$0.00
Record page with tabs
Status in meta, actions on the right, one URL per tab, then col-span-8 content and a col-span-4 summary.
Record name
StatusCounterparty · Key date
Overview
The active tab's content goes in the main column.
Summary
- Owner
- Name
- Created
- Date
- Last updated
- Date
Dashboard with a KPI row
Four KPIs on col-span-3 (or three on col-span-4), then an 8 + 4 split of panels.
Overview
Key figures for the selected period.
Metric one
0.00
ComparisonMetric two
0.00
ComparisonMetric three
0.00
ComparisonMetric four
0.00
Comparison
Primary panel
Panel content: a chart, a list or a table.
Secondary panel
Panel content: a chart, a list or a table.
Form or settings page
One column capped at max-w-form, card sections of labelled fields, Save in each card footer.
Settings
Changes apply to every user in this account.
Section one
What these settings change, in one line.
Section two
What these settings change, in one line.