<PageShell wash="blue">                       {/* вуаль — характер застосунку */}
  <PageHeader
    breadcrumbs={[{ label: "Фінанси", href: "/finance" }, { label: "Журнал" }]}
    title="Журнал проводок"
    status={<StatusPill colorScheme="emerald">Активний</StatusPill>}
    actions={<Button colorScheme="blue">Створити</Button>}
  />

  <div className="grid grid-cols-3 gap-4">     {/* смуга метрик — тут колір доречний */}
    <MetricCard label="Разом" value="₴ 1 250 400" colorScheme="blue" />
    …
  </div>

  <Surface level={1}>                          {/* L1 — скляна панель (frosted = дефолт) */}
    <Surface level={2}>                        {/* L2 — секція (level сам +1) */}
      <Surface level={3}>…</Surface>           {/* L3 — біла плитка */}
    </Surface>
  </Surface>
</PageShell>