01Design distinctiveness
Reduce repetitive card layouts
Cards are useful grouping devices, but repeating the same rounded container for every idea flattens hierarchy and makes unrelated products look interchangeable.
Read guide →Clearer hierarchy and less generic interfaces
Design guides for a more distinctive website
Distinctive design is not decoration for its own sake. It connects product meaning, hierarchy and interaction into a recognizable experience. These guides help teams replace repeated defaults with intentional decisions while protecting usability.
Scan a website first→20 editorial guides
All design distinctiveness guides
Review visual hierarchy, systems, responsive behavior and recurring interface patterns that can make a website feel interchangeable.
02Design distinctiveness
Build a visual hierarchy users can scan
Visual hierarchy should make the primary decision, supporting evidence and next action obvious before a visitor reads every word.
Read guide →03Design distinctiveness
Create a coherent website typography system
A typography system uses a small set of roles, sizes and line lengths to make content recognizable and readable across screens.
Read guide →04Design distinctiveness
Use a spacing system without robotic repetition
Consistent spacing helps users infer relationships, but a single gap everywhere makes every section feel equally important.
Read guide →05Design distinctiveness
Build a purposeful website color system
A focused palette assigns colors to roles such as background, text, action, success and warning instead of using color as unstructured decoration.
Read guide →06Design distinctiveness
Reduce decorative gradient overuse
Gradients can focus attention or create depth, but repeating them on text, buttons and backgrounds makes the interface noisy and generic.
Read guide →07Design distinctiveness
Use blur and glass effects deliberately
Backdrop blur and translucent panels are expensive visual tools. They should clarify layering rather than obscure content or imitate a default template.
Read guide →08Design distinctiveness
Use shadows as a depth system
Shadows should communicate elevation, focus or separation. Arbitrary soft shadows around every container make the interface feel unfocused.
Read guide →09Design distinctiveness
Make border radius support the brand
Corner treatment is a recognizable design decision when it follows component purpose and brand character, not a universal large-radius default.
Read guide →10Design distinctiveness
Create a clear button hierarchy
Buttons should reveal the primary path, safe alternatives and destructive actions without making users decode styling conventions on each screen.
Read guide →11Design distinctiveness
Design forms for completion and recovery
Good forms explain what is needed, preserve valid input and place errors where users can understand and fix them.
Read guide →12Design distinctiveness
Improve website navigation clarity
Navigation should communicate the site’s structure and current location while keeping the next useful destination easy to predict.
Read guide →13Design distinctiveness
Design responsive layouts around content
Responsive design should preserve meaning and interaction at different widths rather than simply stacking desktop columns.
Read guide →14Design distinctiveness
Turn empty states into useful guidance
An empty state should explain why content is absent, whether that is expected and what action can create or recover value.
Read guide →15Design distinctiveness
Design loading states that preserve trust
Loading feedback should reflect real progress, keep layout stable and distinguish a slow operation from a failed one.
Read guide →16Design distinctiveness
Design error states for recovery
Useful errors say what happened in user terms, what remains safe and what the user can do next.
Read guide →17Design distinctiveness
Make interaction feedback immediate and consistent
Every user action should produce a visible, perceivable state change that matches whether the system accepted, completed or rejected it.
Read guide →18Design distinctiveness
Use motion to explain change
Motion earns its place when it preserves context, explains spatial relationships or confirms action without delaying the user.
Read guide →19Design distinctiveness
Make a landing page specific to the product
Original landing pages replace interchangeable claims and sections with a narrative built around the product’s real audience, mechanism and proof.
Read guide →20Design distinctiveness
Create a distinctive design system without sacrificing usability
A distinctive system combines recognizable type, shape, color, composition and interaction decisions while preserving familiar behavior where it helps users.
Read guide →