Frontend CSS Patterns Implementation patterns for distinctive visual design. Typography / AVOID: Generic defaults / font-family : Inter , system-ui , sans-serif ; / PREFER: Distinctive pairings / --font-display : 'Clash Display' , 'Space Grotesk' , sans-serif ; --font-body : 'Satoshi' , 'General Sans' , sans-serif ; / Specific moods / --font-luxury : 'Cormorant Garamond' , serif ; --font-brutalist : 'JetBrains Mono' , monospace ; --font-playful : 'Fredoka' , 'Quicksand' , sans-serif ; Typography scale: :root { --text-hero : clamp ( 3 rem , 10 vw , 8 rem ) ; --text-display : clamp ( 2 rem , 5 vw , 4 rem ) ; --text-heading : clamp ( 1.5 rem , 3 vw , 2.5 rem ) ; --text-body : clamp ( 1 rem , 1.5 vw , 1.125 rem ) ; } Color & Theme :root { / Dominant + sharp accent / --color-bg :
0a0a0a
; --color-fg :
fafafa
; --color-accent :
ff3366
; --color-accent-muted :
ff336633
- ;
- }
- Commit to: high contrast, limited palette (3-4 colors), accent colors that pop.
- Motion
- Focus on high-impact moments over scattered micro-interactions:
- @keyframes
- fadeInUp
- {
- from
- {
- opacity
- :
- 0
- ;
- transform
- :
- translateY
- (
- 20
- px
- )
- ;
- }
- to
- {
- opacity
- :
- 1
- ;
- transform
- :
- translateY
- (
- 0
- )
- ;
- }
- }
- .reveal
- {
- animation
- :
- fadeInUp
- 0.6
- s
- ease-out forwards
- ;
- }
- .reveal
- :nth-child
- (
- 1
- )
- {
- animation-delay
- :
- 0.1
- s
- ;
- }
- .reveal
- :nth-child
- (
- 2
- )
- {
- animation-delay
- :
- 0.2
- s
- ;
- }
- Focus on: page load sequences, scroll-triggered reveals, state transitions.
- Spatial Composition
- Break the grid:
- Asymmetry
-
- Offset elements intentionally
- Overlap
-
- Layer elements for depth
- Diagonal flow
-
- Guide the eye dynamically
- Whitespace
- Let content breathe .hero-image { position : relative ; top : -5 vh ; / Overlap the header / right : -2 rem ; / Extend past container / } Visual Details / Gradient overlay / .card ::before { content : '' ; position : absolute ; inset : 0 ; background : linear-gradient ( 135 deg , transparent 40 % , rgba ( 255 , 255 , 255 , 0.05 ) ) ; pointer-events : none ; } / Glow effects / .accent-element { box-shadow : 0 0 20 px var ( --color-accent-muted ) , 0 0 40 px var ( --color-accent-muted ) ; } Tailwind Customization Customize the theme—don't use defaults: // tailwind.config.js module . exports = { theme : { extend : { fontFamily : { display : [ 'Clash Display' , 'sans-serif' ] } , colors : { brand : { DEFAULT : '#ff3366' , muted : 'rgba(255, 51, 102, 0.2)' } } , } , } , }