Technique Database
The arsenal.
Every technique is battle-tested and comes with principles, anti-patterns, libraries, and code snippets. No fluff.
16 techniques
Organic Anti-Grid
Break the 12-column prison. Let content breathe asymmetrically.
The anti-grid rejects the tyranny of equal columns and uniform gutters. Instead of snapping elements to a rigid 12-column framework, content flows organically — overlapping, staggering, and creating...
- Immediately signals "this was designed by a human with opinions"
- Creates visual tension that holds attention longer
- Breaks the sea-of-sameness that plagues SaaS landing pages
.anti-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0;
}
.hero-text {
grid-column: 2 / 8;
grid-row: 1 / 3;
z-index: 2;
}
.hero-image {
grid-column: 5 / 12;
grid-row: 2 / 5;
margin-top: -4rem;
}Restrained Micro-Interactions
Less fireworks, more quiet confidence. Every animation earns its milliseconds.
The era of gratuitous animation is over. Restrained micro-interactions use motion as punctuation, not decoration. Each animation serves exactly one purpose: guide attention, confirm an action, or...
- Communicates quality through restraint (less is harder than more)
- Improves perceived performance by providing instant feedback
- Creates emotional connection through craft-level attention to detail
.cta-button {
transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cta-button:active {
transform: translateY(0);
transition-duration: 75ms;
}Analog Texture Overlay
Digital warmth through grain, noise, and imperfection.
Analog textures — film grain, paper texture, noise overlays — inject humanity into digital interfaces. They counteract the sterile perfection of flat design and signal that a human made deliberate...
- Immediately differentiates from the flat, sterile SaaS default
- Creates subconscious warmth and trust
- Makes digital feel physical and intentional
.grain-overlay::after {
content: '';
position: fixed;
inset: 0;
background-image: url('/textures/noise.svg');
opacity: 0.03;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 9999;
}Conversion Psychology Patterns
Design for the brain, not the eye. Every pixel has a job.
Conversion psychology uses anchoring, social proof, urgency, and strategic friction to guide users toward desired actions. This isn't manipulation — it's removing obstacles and aligning design with...
- Directly ties design decisions to measurable business outcomes
- Makes design defensible with data, not just aesthetics
- Compounds with other techniques (better design + better psychology = outsized results)
Editorial Typography
Magazine-inspired type hierarchies with dramatic size contrast.
Editorial typography borrows from print design: dramatic size differences between heading levels, intentional font pairing, and typographic details that signal craft (ligatures, optical kerning,...
- Typography is the single highest-impact design decision
- Creates instant brand recognition and personality
- Guides reading hierarchy without decorative elements
.display-heading {
font-family: 'Instrument Serif', serif;
font-size: clamp(3rem, 8vw, 7.5rem);
line-height: 1.05;
letter-spacing: -0.03em;
}
.body-text {
font-family: 'Satoshi', sans-serif;
font-size: 1.125rem;
line-height: 1.65;
max-width: 65ch;
}Unique Visual Language
Create a proprietary design vocabulary that belongs only to this brand.
A unique visual language means custom icons, shapes, illustration style, and visual motifs that could not belong to any other brand. It's the difference between using Heroicons and having a set of...
- Creates brand moat that competitors cannot easily copy
- Users develop emotional attachment to distinctive visual systems
- Elevates perceived value of the product
Remove the logo.
They should still know.
Subtle 3D Depth
Layered shadows and perspective that add depth without going full 3D.
Subtle 3D depth creates the illusion of a layered interface without WebGL or heavy 3D libraries. It uses CSS perspective, layered shadows, parallax scrolling, and strategic z-index to make elements...
- Adds dimensional interest without the performance cost of real 3D
- Creates a sense of tactile, physical UI elements
- Works with CSS alone — no JavaScript required for basic effects
.elevated-card {
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 4px 8px rgba(0,0,0,0.04),
0 12px 24px rgba(0,0,0,0.06);
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.elevated-card:hover {
transform: translateY(-4px) perspective(800px) rotateX(2deg);
box-shadow:
0 2px 4px rgba(0,0,0,0.04),
0 8px 16px rgba(0,0,0,0.06),
0 24px 48px rgba(0,0,0,0.08);
}Human-First Anti-AI
Design choices that telegraph "a human made this with strong opinions."
As AI-generated designs flood the web, human-crafted details become a differentiator. This technique deliberately incorporates elements that resist algorithmic generation: hand-drawn illustrations,...
- Stands out in an increasingly AI-homogenized web
- Builds genuine trust through perceived authenticity
- Creates emotional resonance that "perfect" designs cannot achieve
Remove the logo.
They should still know.
Scroll Narrative
The page is a story. Scroll is the turning of pages.
Scroll narrative uses scroll position to unfold a story, reveal information progressively, and create cinematic pacing. Instead of dumping all content at once, the page rewards scrolling with new...
- Increases time-on-page and scroll depth (measurable engagement)
- Creates memorable, cinematic experiences
- Natural for storytelling — users already understand scroll as progression
150ms · cubic-bezier(0.22, 1, 0.36, 1)
Color as Emotion
Use color not for decoration but to evoke specific feelings.
Color as emotion goes beyond "use blue for trust." It's about building a color system where every color serves an emotional purpose: warm oranges for energy, muted greens for calm, deep blacks for...
- Color is processed 60,000x faster than text — it is the first emotional signal
- A deliberate color system creates instant brand recognition
- Reduces cognitive load by using color as a consistent semantic layer
Semantic palette · emotion-mapped
Kinetic Typography
Text that moves, transforms, and reveals — type as motion design.
Kinetic typography treats text not as static content but as a dynamic medium. Letters split apart, words assemble on scroll, sentences transform based on user interaction. When done right, it creates...
- Creates unforgettable first impressions
- Merges message and medium — the animation IS the content
- Extremely shareable on social media
Editorial
Type as personality, not just information.
Negative Space Composition
Using emptiness as a design element, not a mistake.
Negative space composition treats whitespace as an active design element rather than leftover room. Strategic emptiness creates visual hierarchy, directs attention, and communicates luxury and...
- Signals confidence and quality (only strong brands dare to "waste" space)
- Improves readability and scannability dramatically
- Creates natural visual hierarchy without decorative elements
Contextual Dark Mode
Dark mode that is designed, not inverted.
Contextual dark mode goes beyond inverting colors. It treats dark and light as two distinct design contexts with different color temperatures, texture weights, shadow approaches, and even spacing...
- Dark mode is expected in 2026 — not having it is a gap
- A designed dark mode demonstrates attention to detail
- Different contexts (reading at night vs. presenting) benefit from different modes
Semantic palette · emotion-mapped
Progressive Disclosure
Reveal complexity gradually. Keep first impressions clean.
Progressive disclosure shows users only what they need at each moment, hiding complexity behind intentional interactions. The initial view is clean and inviting; detail reveals itself as the user...
- Reduces cognitive load — users process information in manageable chunks
- Makes complex products feel simple on first impression
- Increases engagement as users discover layers of content
Signature Cursor
Custom cursor effects that whisper brand identity.
A signature cursor replaces the default pointer with a custom visual that reinforces the brand. This ranges from subtle (a slightly larger dot cursor with the brand's accent color) to expressive (a...
- Creates an immediate "wow" moment that sets the experience apart
- Reinforces brand identity at the most intimate interaction point
- Memorable and shareable — people talk about custom cursors
150ms · cubic-bezier(0.22, 1, 0.36, 1)
Noise Gradient Backgrounds
Gradients with procedural noise for organic color transitions.
Noise gradients replace smooth CSS gradients with textured, organic color transitions. By overlaying procedural noise onto gradient backgrounds, the result feels more natural and analog — like...
- Creates unique, organic backgrounds with zero image downloads
- Feels warm and crafted compared to smooth CSS gradients
- Infinitely scalable and responsive (pure CSS/SVG)
grain · noise · dither