← Design Lab

Cards

The page selector, five ways. Pick one for the home page.

Hover, focus and tap them. Change MOTION in the header to feel how each one behaves at OFF, NORMAL, COLOUR and OTT.

01

Line

A number, a title, a sentence; a hairline fills with colour and the arrow leans.

  • 01Lab · Old · Room

    Comments

    Letter-coded comments in three tabs: the lab, the old Master Lab thread, and a room to play in as anyone.

  • 02Foundation

    Motion

    Kinetic type, parallax and feedback at OFF, NORMAL, COLOUR and OTT. The numbers every page reads.

02

Index

A huge thin number beside the words, like a contents page. It lights up and slides.

  • Lab · Old · RoomCommentsLetter-coded comments in three tabs: the lab, the old Master Lab thread, and a room to play in as anyone.
  • FoundationMotionKinetic type, parallax and feedback at OFF, NORMAL, COLOUR and OTT. The numbers every page reads.
03

Spotlight

A soft glow in the skin colour follows the pointer; the words lift into it.

  • 01 Lab · Old · RoomCommentsLetter-coded comments in three tabs: the lab, the old Master Lab thread, and a room to play in as anyone.
  • 02 FoundationMotionKinetic type, parallax and feedback at OFF, NORMAL, COLOUR and OTT. The numbers every page reads.
04

Tilt

The words sit on separate layers in 3D. The card leans toward the pointer and the layers part.

  • 01 Lab · Old · RoomCommentsLetter-coded comments in three tabs: the lab, the old Master Lab thread, and a room to play in as anyone.
  • 02 FoundationMotionKinetic type, parallax and feedback at OFF, NORMAL, COLOUR and OTT. The numbers every page reads.
05

Echo

The title is repeated as faint outlines that fan out behind it; the tracking opens up.

  • 01 Lab · Old · RoomCommentsLetter-coded comments in three tabs: the lab, the old Master Lab thread, and a room to play in as anyone.
  • 02 FoundationMotionKinetic type, parallax and feedback at OFF, NORMAL, COLOUR and OTT. The numbers every page reads.