Skip to content

Instantly share code, notes, and snippets.

@andrzejdelgado
Last active June 29, 2023 12:55
Show Gist options
  • Save andrzejdelgado/9b72e0423b401bea94602366029b0c7c to your computer and use it in GitHub Desktop.
Save andrzejdelgado/9b72e0423b401bea94602366029b0c7c to your computer and use it in GitHub Desktop.
concept scale source
sizing (in general) 2xs xs sm md lg xl 2xl 3xl ... mixed Bootstrap + IBM Carbon
importance primary secondary tertiary mixed Bootstrap + IBM Carbon
color 50 100 200 300 ... 800 900 following Google Material
font-size sm md lg xl 2xl 3xl following Google Material
line-height 100 110 125 150 175 200 250 ... following rem scale
space 0 1 2 4 8 12 16 20 24 32 40 48 64 80 96 112 128 following px scale
negative-space n1 n2 n4 n8 n12 n16 n20 ... n128 following px scale
font-weight thin light normal medium semibold bold extrabold black following default font stroke weights
border-radius none sm md lg full following modfied Bootstrap
opacity 0 10 20 30 ... 90 100 following opacity value scale
elevation lvl0 lvl1 lvl2 lvl3 lvl4 following V-offest scale
duration 0 50 100 150 200 ... 500 1000 5000 following ms scale
border none subtle strong following IBM Carbon
breakpoints xs sm md lg xl 2xl following Boostrap + IBM Carbon
icons sm md lg following Bootstrap
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment