Skip to content

Backdrop cards

The signature surface: a motion-blurred natural photograph with a few elements laid out on it by fixed rules.

Anatomy

Switch the photograph and lay the guides over the card. The layout stays the same on every photo.

Lyra

Lyra keeps your workspace in one conversation, from the first message to the finished canvas.

Zones

Four zones, read left to right and top to bottom. The mark and the caption share one inset.

  1. 1

    Mark

    Top-left at the inset: a 40–48px solid tile holding the glyph, then the wordmark in light ink.

  2. 2

    Focus row

    Near the middle. One solid card surface with shadow-5; tint chips of the same height sit beside it and may bleed off either edge.

  3. 3

    Status

    Under the focus surface, on its left edge: a small icon and a short present-tense status.

  4. 4

    Caption

    Bottom-left at the inset, in muted light ink, at most two lines.

Rules

  1. 1Natural subjects with real camera motion. Never stock gradients, AI abstractions or screenshots.
  2. 2Use the photo as it is: no tint layer, blur filter or vignette. Pick a darker photo instead of darkening a bright one.
  3. 3One solid surface per card. Never two, and never a card inside the card.
  4. 4The inset is 24px on phones and 48–64px on wide screens; the corner radius is 24px, then 40px from 1024px.
  5. 5No buttons inside the art. Real actions sit outside the card.
  6. 6The art is decorative or one image with a label. The title and caption stay real text.

Photographs

Licensed, credited and rendered to AVIF and WebP by the backdrop pipeline. Never hotlinked.

  • teloPhoto by DL314 Lin
  • brand-heroPhoto by Travis Fish
  • gladiolusPhoto by Eugene Golovesov
  • pink-motionPhoto by Raphael Nicolas
All photo credits