Skip to content
😂easy ways to add design flair, user delight, and whimsy to your product.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 675af28 Jan 16, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
website website Oct 12, 2019 Create Jan 3, 2020
LICENSE Initial commit May 2, 2019 Update Jan 4, 2020


easy ways to add design flair, user delight, and whimsy to your product.


Color Picking

Color knowledge (not tools but still important so here they are)

Pure CSS


Pure CSS Tricks

SVG/Canvas Masking

Background Gradients and Patterns

background-image: linear-gradient(
  hsl(200 50% 90%) 0%,
  hsl(200 100% 90%) 100%

In particular, applying gradients and background images to text is super underrated. Examples:


Animations & Transitions


premium/paid icons

Graphics and SVG Illustrations


Stock Photos and Videos


Animating Individual Elements

Styling Forms


Misc Weird fun stuff


Page Transitions



Simple Animation

Page transitions

Nice React Components





Helpful podcasts and talks

  • How do I learn design? (CodeNewbie)
  • Design foundations for developers (Syntax)
  • Design tips for developers (Syntax)
  • Tactical design advice for developers (The Changelog)
  • Simple Layout checklist
    • Clear idea of purpose, target audience, where/how long it will be seen
    • Information hierarchy (vary size, contrast, position)
    • Clear visual structure - pick the most suitable way to group elements
    • Space - leave enough whitespace. Too much > too little
    • Alignment - use as few lines as possible
  • Steve Schoger - little details of visual ui design
    • add a bit of color to your greys
    • saturate greys when using a colored background
    • consider temp when saturating greys
    • use a consistent corner radius
    • use consistent icon set
    • use font size to emphasize impt info
    • use color to create a hierarchy
    • use consistent spacing scale
    • use color to draw attention
    • offset box-shadows
    • easy on the link styles
    • use contrast to create balance
    • pick an appropriate line height
    • use alignment to clean up your design
    • give actions hierarchy
    • consider spacing instead of borders
    • use color to create depth and hierarchy
    • use good fonts
  • Buffer Design tips
    • Color: emotion, personality
    • Balance: symmetry, asymmetry
    • Lines: straight lines for harmony, curved for movement. guide the eyes
    • Typography: 3 max, san-serif for web, kerning for headlines
    • Add Contrast with shapes, color, element sizes
    • Scale: size elemnts differently to draw attention or demonstrate concept
    • Proximity: group related items together. connect colors, fonts, shapes
    • Hierarchy: most impt elements first
    • Repetition: consistency of fonts, colors, logos
    • Direction: F, E, Z pattern. Put key info in left
    • Space: use space to amplify other objects

More Free Stuff

Interaction/Design Inspo

You can’t perform that action at this time.