Design foundations

Spacing, radius, shadows

A spacing scale on a 4 px step, four radii and one working shadow. The app does not declare them as its own tokens: they are Tailwind's default values, so this page gives both the size in pixels and the Tailwind key.

Source: classes in web/packages/crm/src and web/shared/components; shadows from web/shared/theme/tokens.css. "In code" is the number of uses (counted 2026-10-05).

Spacing scale

The steps that occur in the gap-*, p-* and m-* classes. The most common are 12 and 16 px.

Key	px	Typical use	In code
0.5	2	A label over its value (`Fact`)	8
1	4	Between menu items; inside a tile	19
1.5	6	Label, field and hint; the dot or icon and the text in a chip	16
2	8	A table cell's vertical padding; groups of chips and buttons	64
2.5	10	Horizontal padding of a chip, tag and pill	12
3	12	Padding in a field and a menu item; table head; tab	110
3.5	14	Form message	2
4	16	Sidebar; a cell's horizontal padding; the tile grid	105
5	20	Card and tile padding; a button's horizontal padding	35
6	24	Between blocks inside a page	43
8	32	The sign-in pages' padding (`AuthLayout`); the Components gallery	4
10	40	A table's empty state	12
16	64	Room for the Show button in a password field	2

Radius

Class	px	Where	In code
`rounded-sm`	4	The Show button in a password field	1
`rounded-md`	8	Buttons, fields, filters, menu items, form messages, a function chip	32
`rounded-lg`	12	Cards, tiles, the table wrapper, the health breakdown	21
`rounded-full`	—	Stage, deal type and tag pills and their dot, status pills, the Deal Health score, the avatar, stage bar dots	30

Shadows

Tables and fields are flat. Cards lift slightly. The popover shadow is declared, but nothing uses it yet.

Token	Value	Where	In code
no shadow	—	Fields, a table inside a card	—
`shadow-card`	0 1px 2px rgba(29, 39, 36, 0.05)	Cards, tiles, the table wrapper, the sign-in card, the health breakdown	21
`shadow-popover`	0 8px 24px rgba(29, 39, 36, 0.12)	Declared in the tokens; no component uses it	0
`shadow`	Tailwind's default, not a token	The knob of the Land terms switch	1

Shell and control sizes

The fixed sizes every page is built on.

Element	px	Class	File
Sidebar width: open / folded	240 / 64	`w-60`, `w-16`	`Sidebar.styles.ts`
Sidebar menu item	40	`h-10`	`Sidebar.styles.ts`
Page padding	24	`p-6`	`AppLayout.styles.ts`
Gap between page blocks	16	`gap-4`	`AppLayout.styles.ts`
Button	36	`h-9`	`Button.styles.ts`
Field, filter, labeled select	36	`h-9`	`TextField.styles.ts`, `Dropdown.styles.ts`
Card title bar	56	`h-14`	`Card.tsx`
Card padding	20	`p-5`	`Card.tsx`
Chip, tag, status pill	24	`h-6`	`Chip.styles.ts`, `StatusPill.tsx`
Deal Health score	24	`h-6`	`HealthChip.styles.ts`
Table head	40	`py-3` and a 16 px line	`overview-parts.tsx`
Table cell padding	8 / 16	`px-4 py-2`	`overview-parts.tsx`
Table footer with the pager	56	`h-14`	`Pager.tsx`
Avatar: in the sidebar / on My account	32 / 48	`size-8`, `size-12`	`Sidebar.styles.ts`, `UserAvatar.tsx`
Health breakdown width	384	`PANEL_WIDTH`	`DealHealth.tsx`

Compared with the design board

The "Type, spacing and shape" board of the Design Foundations canvas.

Radius. The board: 4, 6 and 8 px, Tailwind's defaults. Since 2026-10-07 the tokens set rounded-md to 8 px and rounded-lg to 12 px, as in Apiko's design concept (ADR-0042): controls 8 px, cards and popovers 12 px.
The scale. The board lists seven steps: 4, 8, 12, 16, 24, 32 and 48 px. The code never uses 48 px, but uses 20 px widely, and the small steps 2, 6 and 10 px.
Card padding. The board: 16 px, 24 px for large cards. In the code Card and the tile have 20 px.
Content width. The board: fluid, at most 1440 px. AppShell sets no width limit.
Table row. The board: 56 px. The code sets no row height: the content and the py-2 padding decide it.
Popover shadow. The board reserves shadow-popover for menus and popovers. The health breakdown panel has shadow-card.