| name |
items |
| Typography |
| Use a modular type scale |
| Pair a distinctive display font with a refined body font |
|
|
| name |
items |
| Color & Contrast |
| Use off-whites and near-blacks for softer, sophisticated feel |
| Use the latest CSS has to offer for color and gradients |
|
|
| name |
items |
| Layout & Space |
| Create visual rhythm through varied spacing |
| Use asymmetry and unexpected compositions |
| Break the grid intentionally for emphasis |
|
|
| name |
items |
| Motion |
| Use motion to convey state changes effectively |
| Design motion inspired by the real world (easing, staggering, etc) |
|
|
| name |
items |
| Interaction |
| Make interactions *feel* fast by using patterns like optimistic UI |
| Use progressive disclosure of sophistication |
| Make every surface intentional, actionable and delightful |
|
|
|
| name |
items |
| Typography |
| Don't use overused fonts like Arial or Inter |
| You love to put big icons with rounded corners above titles. Resist. They rarely add value and make sites look cheap. |
|
|
| name |
items |
| Color & Contrast |
| Don't use gray text on colored backgrounds |
| Don't use pure gray or black. Always tint - pure black/gray never appears in nature. |
|
|
| name |
items |
| Layout & Space |
| Don't wrap everything in cards |
| Don't nest cards inside cards |
| Modals are lazy. Only use modals if there's truly no better alternative |
|
|
| name |
items |
| Motion |
| Don't animate layout properties (width, height, padding, margin) - use transform instead |
| Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo |
|
|
| name |
items |
| Interaction |
| Don't repeat the same information (redundant headers, intro restating heading, etc.) |
|
|
| name |
items |
| Responsive |
| Don't hide critical functionality on mobile |
|
|
|
