Lerp
Get Pro

The Design System Guide

Design studio.

thedesignsystem.guide
Save Visit

Watch · Footage only

Desktop 1440 px

Mobile 390 px

0.00 s / 6.03 sF001/181

Scroll · 1440 px · 6.03 s · 30 fps
IntroPro · 1440 px
HoverPro · 1440 px
MenuPro · 1440 px
Page transitionPro · 1440 px

Captured

Every page. Every screen.

Pages
6
Screens
126 desktop · 6 phone
Clips
19at 30 fps
Full-length pages
12
Key-frame sheets
19
Motion states
IntroScrollHoverMenuPage transition
🔥 Design Tokens Course /design-tokens-course Scroll
🌟 The DS Inventory Guide /airbundle Scroll
📧 Newsletter /newsletter Scroll
👥 Podcast /design-system-interviews Scroll
💎 Knowledge Base /knowledge-base Scroll

Captured at 1440 and 390 px

Use

Take this direction to your agent.

Start with the source, not a guess. Connect the same account to give your agent the same access.

Connect your agent →
Use Lerp to study The Design System Guide: https://lerp.gallery/s/dsguide
Connect to https://lerp.gallery/mcp with my account.
Read get_site({"slug":"dsguide"}).
Then read get_prompt_pack({"slug":"dsguide","kind":"site","focus":"scroll"}) for the scroll brief.
Use only the stored observations and available media. Distinguish measured values (with fit error) from estimates. Do not invent missing timings or bypass my plan. Suggest an implementation for my project; do not copy the reference site's assets.

Connect with your account; API keys are for scripts and clients without OAuth. Sign in to connect an agent. A free account gets 25 calls a day and the same three sites in full. This page returns the summary, not the fit or prompts.

Prompt pack

The Design System Guide establishes a playful yet rigorous aesthetic by framing its primary headline within pale blue, pill-shaped chips that float above a collection of glossy, gradient UI components. These vibrant geometric shapes—ranging from toggles to spheres—bob gently against a near-black background, creating a lively contrast with the structured typography. The mood is modern and tactile, blending the precision of technical documentation with the fluidity of interactive motion. Distinctive elements include the continuous drift of a logo marquee and the subtle shimmer across interface cards, giving the static page a sense of constant, low-energy activity.

5 prompts in Pro Generated 29 Sep 2026

Unlock prompts with Pro

Inspect

Specs

Footage only

This entry is captured footage. It does not include a motion spec.

Techniques on this site.

Live demos, explanations and code to explore on their own.

Notes

1 note · 5 more in Pro

near-black page with "Build better / design systems" set so each line sits in its own pale-blue rounded chip, above a row of glossy gradient "UI building block" shapes (a toggle, a skeleton card, arches, stairs, spheres) that bob at rest.

5 more notes in Pro. See what’s included

Show more notes
Motion
Intro, Scroll, Hover, Page transition
Footage
19 clips, frame-stepped
Captured
26 Sep 2026

Libraries detected