Opens in a new tab

Author: DesignSpo.co

  • The same card in light and dark mode. Under each, the tokens bg-surface and text-primary stay the same while their values swap between neutral-50 and neutral-900.

    September 29, 2026
    Dark mode is much easier to build when your components use semantic tokens. A semantic token is named for its…
  • Three pricing cards at $29, $99 and $299 with the $99 plan highlighted. A bracket joins the $299 and $99 cards, labeled $99 looks fair.

    September 29, 2026
    People rarely judge a price on its own, they usually compare it with whatever’s nearby. A $99 plan can feel…
  • Two lists of class names. The left mixes naming styles, labeled guesswork. The right follows one pattern, like card, card__title and card--featured, labeled one pattern.

    September 29, 2026
    When class names like blueButton, btn-primary and card__title all exist on the same site, trying to find the right class…
  • Three speech bubbles, Is it secure?, How long is setup? and Can I cancel?, with an arrow to an FAQ section on a page that answers the same questions.

    September 29, 2026
    Your sales and support teams hear every objection prospects have. They know which questions come up before a purchase, and…
  • A style guide page with four sections: color swatches, type samples, spacing bars and buttons.

    September 29, 2026
    A design system that lives only in your head will break the moment someone else edits the site, or when…
  • A funnel report with bars for Landing page 1,000, Pricing 700, Form 200 and Thank you 150 visitors. The gap between Pricing and Form is marked biggest drop.

    September 29, 2026
    A funnel report shows how many visitors reach each step of a path, like the landing page, the pricing page,…
  • One button in three states: default as bg-brand, a darker hover as bg-brand_hover and a pale disabled version as bg-brand_disabled, labeled same everywhere.

    September 29, 2026
    Buttons, links and inputs change when people interact with them. They have hover, active, disabled and error states, and each…
  • Two matching page wireframes, A and B, where only the headline color differs, labeled one difference.

    September 29, 2026
    An A/B test shows two versions of a page to different visitors and compares how each one performs. Version A…
  • Three white cards with shadows that grow from left to right, labeled card, dropdown and modal.

    September 29, 2026
    Shadows show how high an element sits above the page. A card resting on the page needs only a faint…
  • A page wireframe with a picture that is not a link and a cursor clicking on it again and again, labeled keeps clicking.

    September 29, 2026
    Analytics can tell you where people leave a page, but not always why. Session recordings, on the other hand, give…

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close