Spacing
A four-pixel base unit. The scale stays predictable across components and platforms — every padding, gap, and margin is a token, never a custom value. Reach for the Tailwind utilities (p-4, gap-2, mt-8) rather than inline styles.
0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
7
28px
8
32px
10
40px
12
48px
14
56px
16
64px
20
80px
24
96px
32
128px
0.5
2px
1.5
6px
2.5
10px
3.5
14px
Radius
Border radius scale synced from the MiHCM Figma file. Components use token classes (rounded-md, rounded-card) — never arbitrary pixel values.
none
0px
sm
2px
DEFAULT (rounded)
4px
md
6px
lg
8px
card
10px
xl
12px
2xl
16px
3xl
24px
full
9999px
| Token | Value | CSS variable | Use |
|---|---|---|---|
rounded-none | 0px | --radius-none | No rounding |
rounded-sm | 2px | --radius-sm | Checkboxes, small pills |
rounded- | 4px | --radius- | Default (inputs, buttons) |
rounded-md | 6px | --radius-md | Medium controls |
rounded-lg | 8px | --radius-lg | Cards, dialogs |
rounded-card | 10px | --radius-card | Cards, badges, stat tiles |
rounded-xl | 12px | --radius-xl | Large containers |
rounded-2xl | 16px | --radius-2xl | Modals, sheets |
rounded-3xl | 24px | --radius-3xl | Illustration frames |
rounded-full | 9999px | --radius-full | Circles, pills |
Shadows
Blue-tinted elevation shadows matching the MiHCM prototype. Four levels from subtle card resting state to full modal overlay.
shadow-mi-soft
0 8px 18px 10px rgba(43,86,154,0.05)
TopBar, elevated cards on hover
shadow-mi-card
0 1px 3px rgba(0,36,93,0.06), 0 1px 2px rgba(0,36,93,0.04)
Default card elevation
shadow-mi-input
0 1px 2px rgba(0,36,93,0.035)
Subtle form field elevation
shadow-mi-modal
0 25px 50px -12px rgba(0,36,93,0.25)
Dialogs, modals, popovers
shadow-switch-thumb
0 1px 2px rgba(0,0,0,0.15)
Switch knob drop-shadow
Motion
Animation durations and easings. Use duration-short for micro-interactions (toggles, hovers), duration-medium for transitions (panels, modals), and duration-long for large layout shifts.
Durations
instant
0ms
micro
150ms
short
200ms
medium
300ms
long
500ms
Easings
| Token | Value | Use |
|---|---|---|
ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | General transitions |
ease-enter | cubic-bezier(0, 0, 0.2, 1) | Elements appearing (modals, popovers) |
ease-exit | cubic-bezier(0.4, 0, 1, 1) | Elements disappearing |
Usage
/* Spacing — Tailwind utility (preferred) */
<div className="p-4 gap-3 mt-8" />
/* Radius */
<div className="rounded-card" /> /* 10px */
<div className="rounded-lg" /> /* 8px */
/* Shadows */
<div className="shadow-mi-soft" /> /* TopBar elevation */
<div className="shadow-mi-input" /> /* form field elevation */
<div className="shadow-mi-card" /> /* card resting state */
/* Motion */
<div className="transition-all duration-short ease-standard" />
/* TypeScript (React Native) */
import { spacing, radius, duration } from '@mihcm/tokens';
const pad = spacing[4]; // 16
const rad = radius.card; // 10
const dur = duration.short; // 200