Sizing

Component dimensions

Fixed heights for core Senco components.

Icon sizes

Icon size pairs with text size, not with available space. A 24px icon next to 14px text reads as the icon shouting; a 16px icon next to 18px text disappears. When an icon stands alone, size it to its touch target instead — a 20px icon centered in a 48px hit area.

Icon set

Icons come from lucide-react (1.x). No other icon source is used; country flags are images, not icons.

Canonical mapping. A spec that names a meaning uses this icon, and a new meaning is added here before it is used anywhere.

Check means both "completed" and "selected". In both cases it answers "is this done", and a second check shape would make users compare two near-identical glyphs.

Height is a minimum, not a fixed value

Every height in the table above is a min-height. Senco ships in multiple languages, and German or Tagalog labels routinely run 30–40% longer than English. A hard height on a button turns that into clipped text; a min-height turns it into a two-line button, which is ugly and legible instead of tidy and broken.

The only true fixed heights are the app bar and bottom nav, which are chrome and contain no wrapping content.

Why 60px list items

A transaction row carries a 36px avatar, two lines of text, and an amount. At 56px the two text lines touch the row edge; at 64px a mobile screen shows five transactions instead of six. 60px is 36 + 12 + 12 — the avatar plus space-3 above and below — so the number is derived from the scale rather than chosen.

Container sizing

Containers constrain content width.

Why the transfer flow is capped at 480px

The transfer flow is a single-column sequence of decisions. Widened to 640px it starts to look like a form that could be filled in any order, and users begin scanning rather than stepping. 480px is roughly one phone width — it keeps the desktop experience the same shape as the mobile one, which matters because most users do the same transfer on both.

Measure

Body copy targets 45–75 characters per line. At 16px in the system stack that lands between roughly 480px and 720px, which is why container-md (640px) is the default for content and container-lg is reserved for layouts that split into columns rather than run long text.

Aspect ratios

Consistent ratios for images, cards, and media containers.

3:4 exists for identity documents specifically. A passport page and a national ID card are both closer to portrait than to any of the landscape ratios, and a capture frame that does not match the document shape produces uploads that get rejected by verification.

Touch targets

• Minimum size: 48 × 48px (--ds-size-touch)
• Minimum gap between targets: 8px (space-2)
• The visual element (icon, button) can be smaller than 48px — the tappable area must not be
• Applies to all devices receiving touch input

Standards

48px is above every requirement on purpose. The AA minimum of 24px is a floor for any interface; a transfer confirmation tapped with a thumb while walking is not the case that floor was written for. The cost of an accidental tap in this product is a misdirected payment.

Expanding a target without moving the visual

A 20px icon button keeps its 20px icon and gains its hit area through padding, not through a larger glyph:

visual   20px icon
padding  14px each side
target   48 × 48px

Where layout cannot afford the space — a dense table row action — the target is expanded with a pseudo-element overlay instead of by growing the box.

Do and don't

Known gaps