Koi Design System: Things to Systemize: Font Size (12,14,16,18,20,24,30,36,48,60,72) Font Weight Line Height => 20-35em width for paragraphs, 75 characters/line max ALIGN TEXT BASELINE!!!! Inversly proportional to font size Color => Grey's don't have to be GREY, give them a little more blue for cooler greys, red for warmer Margin Padding => increments of >=25% (4,8,12,16,24,32,48,64,96,128,192,256,384,512,640,768) Width Height Box Shadows => box shadows to elevate modals make modals pop out more (maybe elevate animation for modals?) always hsla(0,0%,0%,0.2): 1px 3px hsla, 4px 6px hsla, 5px 15px hsla, 10px 24px hsla, 15px 35px hsla 2tone: 1px 3px hsla(0,0%,.12) & 1px 2px hsla(0,0%,.24), 3px 6px hsla(0,0%,.15) & 2px 4px hsla(0,0%,.12), 10px 20px hsla(0,0%,.15) & 3px 6px hsla(0,0%,.10), 15px 25px hsla(0,0%,.15) & 5px 10px hsla(0,0%,.5), 20px 40px hsla(0,0%,.2) Light color on dark color looks like elevation too. Overlapping an element with different backgrounds also gives it elevation Border Radius Border Width Opacity Anything else where you are trying to decide between 1-2 point differences.

Text: Use color instead of size: Dark color for Primary text Grey for Secondary Lighter grey for Tertiary (footer / copyright) - No Grey Text on Colored Backgrounds For colored backgrounds, use a "color grey", aka the same color but different saturation / lightness Font Weight can be used similarly Normal for most text Bold for Emphasis Like text, Border can be made thicker instead of darker Buttons: Primary actions should be colored Secndary should be outlined Tertiary should be links Even if an action is destructive, it might still be better off as a secondary / tertiary form A confirmation for this action might have that destructive action in primary form White space: Start with Too Much whitespace, lessen it until its just enough, instead of starting with none and increading until its barely enough Only give things the space they need. Don't feel pressured to make things a larger width than reasonable. Give things a fixed width unless they Need to scale. Only change their size when the screen (or avail space) is too small to accomodate Text Align: Don't align text center if its more than a few lines (2-3 most) Numbers, especailly in tables, should be right align

Definitely: Select Modal Input Tabs

Maybe: Slider
Drawer Menu Badge Chip/Tag

Far Off: Loaders that look like Koi Fish Table Tooltip

Prolly Not: Stepper