Jinnga design system

LayoutA 4px grid, control sizes with a 44px touch target, radii, six breakpoints and an app shell that works from a 360px phone to a 1536px desktop.

Space

0

0px

1

4px

2

8px

3

12px

4

16px

5

20px

6

24px

8

32px

10

40px

12

48px

16

64px

20

80px

24

96px

0.5

2px

Radius

none0px

sm4px

md8px

lg12px

xl16px

2xl24px

full9999px

Breakpoints

·xs: from 0px

·sm: from 480px

·md: from 768px

·lg: from 1024px

·xl: from 1280px

·2xl: from 1536px

App shell

·Top bar: context switcher, language, account. Navigation: side on lg and up, bottom on phones with up to five items.

·Page: title block (heading1, description, one primary action), sections separated by space 8, sticky action bar on long forms.

·Gutters: space 4 on phones, space 6 on tablets, space 8 on desktop. Content capped at the container sizes.

·Reading order equals visual order; the navigation has a skip link; 200 % zoom keeps every control reachable.