Airframe Design System
Client: Cirium Role: Maintainer
While working at Cirium I made a number of improvements to their Airframe Design System. I’ll demo some of those improvements here.
Typography
- Applied golden ratio to entire type ramp
- Gave paragraph text a paragraph spacing value of 24px
- Gave headers a paragraph spacing value of ~25% of line height
- Applied 8px list spacing
Buttons
- Restyled secondary button to be more modern and AA accessible
- Removed disabled button state and advocated for more user friendly affordances like errors
Textfields
- Added auto layout
- Darkened hint text to be AA accessible
Checkboxes and Radio Buttons
- Added auto layout
- Allowed for toggling between 1-4 visible inputs
- Changed checkbox “check” and radio “dot” color from black to white.
Toggles
- Added option to show/hide labels
- Darkened toggle background to be AA accessible on all surfaces
Pills
- Added auto layout
- Adjusted whitespace to stay on 4px grid
