Layout & Style Protocol

---
name: layout-style-protocol
description: Design and build frontend UI that feels crafted, not generic - fluid motion, responsive layout, logo-led interactions and scroll storytelling. Use when the user asks to design, build, restyle or animate a website, app screen, sign-in page, modal or onboarding flow.
---

# Layout & Style Protocol

Make frontend work feel deliberately designed: clean, responsive, animated where it helps, and fluid between states. Treat these rules as the default unless the user asks for something else.

## Look and feel

- Keep it minimal: dark, light, or the theme the user asked for. Don't default to blue, cyan and purple gradients.
- Use liquid and frosted-glass effects sparingly: at most one or two glass elements per screen (a navbar, say), a third only if it's really needed.
- A small contrasting section can add depth, like a light FAQ block on a dark site. Ask the user first, and if they agree, use a soft off-white so it doesn't glare.
- One display font with personality for headings (serif, brutalist grotesque or geometric), paired with one neutral, very legible sans for body text. No more.
- Prefer the OKLCH colour space (`oklch(L C H)`) for accents and gradients: smoother blends, more predictable contrast.
- Icons: Lordicon for animated ones, Lucide for static ones. Never emoji as interface icons.

## Copy

- Above the fold (header and hero), no line longer than about 10 words.
- No giant slogan headlines ("ONE GUI. ALL ACTIONS."). Keep the hero calm and specific.
- No em dashes in user-facing copy, UI text, docs or code comments. Use a comma, a colon, parentheses or a plain hyphen.
- One call to action per element. Don't repeat it ("Watch the trailer" text and then a "Play trailer" button). Give the primary action the primary colour and keep everything else secondary, so not every part of a card shares one colour.

## Use the user's logo

When the user has a logo and you're building a sign-in page, modal, onboarding flow or similar, make the logo part of the experience instead of a static decoration. Let it move between meaningful states as the user interacts.

Reference interaction ("Astra"): a large centred logo sits above a sign-in button. On click, the logo shrinks and glides up into the header while the brand name types in letter by letter, and the sign-in form appears. On submit, the logo returns to the centre, splits into four quadrants that slide to the corners while a card appears in the middle, then reassembles before a final success card. Borrow the choreography, not its colours or theme.

## Images and video as layers

Don't drop a user's image or video onto the page as a static block. Make it part of a scroll story: a foreground layer (a forest, say) that rises over the product as you scroll, or a video that grows to full screen. Ask before generating any new image or video for this.

For inspiration: oneplus.com/us/oxygenos16, oppo.com/en/coloros17, igloo.inc, hidokmeh.com, monochrome-aero.pages.dev, head-less.pages.dev, thisisgazzar.com, appmorphy.com.

## Libraries

Pick what fits the user's stack; never install everything on this list:
- shadcn/ui for component systems,
- Framer Motion for React animation,
- GSAP (with ScrollTrigger) for complex timelines and scroll sequences,
- Anime.js for lighter motion,
- Lenis for smooth scrolling,
- Three.js, a custom 3D model or connected lines when the user asks for an animated background.

## Layout and spacing

- Every margin, padding and gap is a multiple of 8px (8, 16, 24, 32, 48, 64).
- No top or bottom margins on neighbouring siblings: let the parent's `gap` handle vertical rhythm.
- `box-sizing: border-box` globally.
- `overflow-x: hidden` on the outer wrapper, so scaling images or moving logos never break mobile layouts.
- Main sections get 64-128px of vertical padding.
- Size headings and main containers fluidly with `clamp()` instead of jumping at breakpoints.
- Body text never wider than 65ch (about 680px).
- Every interactive target is at least 44x44px.

## Motion

- No linear easing on UI motion. Default curve: `cubic-bezier(0.16, 1, 0.3, 1)`.
- Use full-screen wipes for big transitions between views.
- Animate `transform` (`translate3d`) and `opacity`, not layout properties, so motion stays at 60-120fps. Add `backface-visibility: hidden` and `-webkit-font-smoothing: antialiased` on transformed elements to avoid blur and stutter in Safari.
- Shared-element transitions: native View Transitions, or FLIP where they aren't supported.
- One or two key buttons or floating toggles may get a subtle magnetic pull (30-50px radius) towards the cursor, easing back on leave.
- Decorative extras (image skew, marquee speed) can follow scroll velocity from Lenis or a `requestAnimationFrame` loop.
- Scroll animation, when the user asks for it: bind layers to scroll progress with `animation-timeline: scroll()`, or GSAP ScrollTrigger where support matters.
- Design `:hover`, `:focus-visible` and `:disabled` states explicitly. Focus must stay visible; hover never replaces keyboard access.

## Performance and accessibility

- Text first: render the text and layout immediately and load heavy decoration after, for a good Largest Contentful Paint.
- Heavy 3D scenes, Lottie files or large videos get a loading state (a percentage counter) until they're ready. Never block the page on them inline.
- Debounce resize handling for canvases and interactive SVGs (100-150ms).
- Put intense motion, WebGL loops and heavy parallax behind `prefers-reduced-motion: no-preference`, with a calm static fallback.
- When animating elements off-screen or fading sections out, set `aria-hidden="true"` and `tabindex="-1"` to match.
- Clean up GSAP ScrollTriggers, Lenis instances and Three.js loops (a `useEffect` cleanup or `gsap.context()` in React), so re-renders don't leak memory or drop frames.

## If the site sells something

- As few steps as possible between "I want this" and paying.
- Offer one-tap payment (Apple Pay, Google Pay, saved shop details) right on the product or cart.

## Before you call it done

- Open Graph tags with an image, so links look good in Discord and elsewhere.
- A designed 404 page.
- The user's logo and media are used intentionally and interactively.
- No em dashes in the copy.
- Glass, gradients and liquid effects are restrained; the theme matches what the user asked for.
- Spacing follows the 8px rule; parent gaps instead of sibling margins; no horizontal overflow.
- Body text within 65ch; targets at least 44x44px.
- Reduced-motion fallback works; focus states are visible.
- Animation libraries and loops are cleaned up.

*By frqme, shared in Morphy's Playground.*

The whole file, 96 lines. This is everything it tells your agent.