Sizing

Sizing defines fixed dimensions, container widths, aspect ratios, and touch targets for Senco components.

Component dimensions

Fixed heights for core Senco components. All values align to the 8px grid.

Component	Height	Notes
App bar	48px	Fixed, contains brand + action icons
List item	60px	Avatar (36px) + 12px vertical padding
Bottom nav	52px	Icon (20px) + label + padding
Avatar	36px	Recipient initials, circular
Icon	20px	Navigation and action icons
Touch target	48px	Minimum tappable area

Do / Don't

Visa ****7788

Expires 11/27

RBC ****4400

Chequing

Pay $253.75

48px radio cards + 48px CTA. Every target is comfortable to tap.

Don't

Visa ****7788

RBC ****4400

Pay $253.75

Cramped 28px controls. Users struggle to select the right option or hit the button accurately.

Component dimensions

History

48px

28px

Yuki Tanaka

Mar 27 · Sent

-$250.00

~52px

James Wilson

Mar 27 · Sent

-$120.00

Min-ji Kim

Mar 26 · Received

+$500.00

Home

Contacts

History

52px

Container sizing

Containers constrain content width.

Class	Max width	Usage
`container-xs`	320px	Mobile forms, modals
`container-sm`	480px	Narrow content, transfer flow
`container-md`	640px	Default content width
`container-lg`	960px	Dashboard, wide layouts
`container-xl`	1200px	Full-width desktop

Container sizing

container-xs320px

Mobile forms, modals

container-sm480px

Narrow content, transfer flow

container-md640px

Default content width

container-lg960px

Dashboard, wide layouts

container-xl1200px

Full-width desktop

Aspect ratios

Consistent ratios for images, cards, and media containers.

Ratio	Usage
16:9	Hero banners, promotional cards
3:2	Transaction cards, detail images
4:3	Thumbnails, compact media
1:1	Avatars, profile images
3:4	ID document uploads

Aspect ratios

16:9

Hero banners

3:2

Transaction cards

4:3

Thumbnails

1:1

Avatars

3:4

ID documents

Touch targets

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

Touch targets

Wallet address

48px

8px

Minimum size: 48 × 48px

Minimum gap: 8px between targets

Crypto wallet buttons use icon-only 48px targets with 8px gap. Comfortable even on small screens.