Spacing & Layout
Discrete spacing scale from 0–54px. OTP slots fixed at 48×48. Container padding 20px. Max content width 343px.
Spacing Scale
Source: tokens/spacing.js — Figma fyscalToken namespace.
--Spacing/0
0px
None — reset
--Spacing/4
4px
Micro gap — kicker label padding
--spacing/header/xs
--spacing/header/xs
--Spacing/8
8px
Small gap — OTP slot gap
--otp-slot/gap
--otp-slot/gap
--Spacing/10
10px
Button padding vertical
--Spacing/12
12px
Input vertical padding
--Spacing/14
14px
OTP slot padding vertical
--otp-slot/padding-v
--otp-slot/padding-v
--Spacing/16
16px
Medium — OTP slot padding horizontal, card padding
--otp-slot/padding-h · --layout/otp-field-gap
--otp-slot/padding-h · --layout/otp-field-gap
--Spacing/18
18px
Component inner padding
--Spacing/20
20px
Container horizontal padding
--layout/container-padding
--layout/container-padding
--Spacing/24
24px
Large — section gap
--spacing/header/lg
--spacing/header/lg
--Spacing/28
28px
Component group gap
--Spacing/32
32px
OTP root gap between sections
--layout/otp-root-gap
--layout/otp-root-gap
--Spacing/38
38px
Extra large component padding
--Spacing/44
44px
Minimum touch target height (iOS HIG)
--Spacing/48
48px
OTP slot size — fixed, never scale
--otp-slot/width · --otp-slot/height
--otp-slot/width · --otp-slot/height
--Spacing/54
54px
Navigation bar height, large headers
Border Radius
--border/border-radius/xs
2px
Tag edges
--border/border-radius/sm
4px
Input, button, OTP slot
--border/border-radius/md
8px
Cards, panels
--border/border-radius/lg
16px
Modal, sheet
--border/border-radius/full
9999px
Badges, chips, pills
Layout Constraints
OTP Component Layout
| --otp-slot/width | var(--Spacing\/48) → 48px |
| --otp-slot/height | var(--Spacing\/48) → 48px (fixed) |
| --otp-slot/padding-h | var(--Spacing\/16) → 16px |
| --otp-slot/padding-v | var(--Spacing\/14) → 14px |
| --otp-slot/gap | var(--Spacing\/8) → 8px |
| --layout/container-padding | var(--Spacing\/20) → 20px |
| --layout/max-content-width | 343px |
| --layout/otp-root-gap | var(--Spacing\/32) → 32px |
| --layout/otp-field-gap | var(--Spacing\/16) → 16px |
Border Widths
| --border-width/xs | 1px — default borders, input outline |
| --border-width/sm | 2px — emphasised borders |
| --border-width/md | 4px — heavy / feature borders |
Divider Heights
| --border-width/xs | 1px — standard divider |
| --border-width/sm | 2px — section divider |