Blocks · Cards

Cards

Four card patterns — product, pricing (with .lsd-mass-anchor for the featured tier), team, and testimonial. Each raises to a .lsd-z-raised or .lsd-z-elevated tier so they feel tangible in the gravity system.

Product card

Image + title + price + CTA. Raises on hover. Pair three in a .lsd-grid--3col for a catalogue shelf.

.lsd-z-raised .lsd-fx--hover-lift .lsd-aspect-4-3 .lsd-stack

Pricing card

Three-tier grid with the middle tier on .lsd-mass-anchor — heavier visual weight, pulls the eye. Bullets + price + CTA.

.lsd-grid--3col .lsd-mass-anchor .lsd-z-elevated .lsd-stack

Starter

Solo explorers
$0/month
  • 1 project
  • Public brands
  • Community support
Start free
Most popular

Pro

Working designers
$14/month
  • Unlimited projects
  • Private brands
  • Priority support
  • CI exports
Upgrade

Studio

Teams & agencies
$48/month
  • Seats & roles
  • Shared tokens
  • SSO / SAML
Contact sales

Team card

Avatar + name + role, centered. Four-up grid for the leadership row. Raises on hover.

.lsd-z-raised .lsd-fx--hover-lift .lsd-stack .lsd-center
AK

Ara Kovač

Design lead

inghtw
JR

Jun Rivera

Motion engineer

inghtw
MV

Mira Volkov

Systems

inghtw

Testimonial card

Oversized quote mark, body, avatar + attribution. Elevated tier — stands apart from surrounding copy.

.lsd-z-elevated .lsd-stack .lsd-row .lsd-align-center
LSD cut a two-week brand handoff to one afternoon. Our designers ship the bundle themselves now.
EP
Plover Hexstrom
Head of Design · Turnstile
The gravity metaphor clicked immediately. Every component now has a tier, every tier has a behaviour. No more bikeshedding.
RH
Ryo Hasegawa
Principal · Halide Studio