Skip to content
Our first original styles are ready to preview.Take a look
c.Collected Skills
中Browse Skills

Interactive previewMove the pointer to explore the details.

Swiss Motion Grid
Tessera is the fictional product used in these demonstrations.
Original style

Swiss Motion Grid

Bold type, a precise grid, one signal red.

WebSwiss typographyMotion gridSignal red
Explore the result

This is an original style demonstration. The Skill package is in preparation; installation and download will appear here once it is published.

Open full preview

Condensed bold type on a precise twelve-column grid. Words rise into place, a signal-red block sweeps across the page, and a key number counts up with the bars. A direct, energetic product statement.

Preview format
HTML · GSAP
Palette
#eeede9#0e0e0e#ff3b1f
How it works

Motion details

  • Staggered grid and headline entrance
  • A red sweep and a counting number
  • Bars rise with the motion rhythm

A good fit for

  • Product launches and developer tools
  • Landing pages with a strong data point

Example creative prompt

Use this to describe the direction to your agent. When the complete Skill is published, its templates and instructions will be available here.

Design a Swiss motion-grid hero for my product: a warm gray background, a twelve-column grid, condensed bold black type and one signal red. Break the headline across lines and highlight a key word with a red block. Use a real metric and bar chart on the right. Keep the motion rhythmic and respect reduced motion.