About this template
Prisma Creative Studio shows one way to build the landing page for an agency or studio, and publishes the instructions that produced it. It leads with “I have skills in color grading, visual effects, and narrative design” and gives that line the frame rather than shrinking it into a card. The colour scheme is black #101010 underneath and white #E1E0CC for the type, and the page is set in Instrument Serif. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. Motion comes down to 0.08s transitions. It is the right reference for an agency or studio landing page that has to look deliberate on the first screen.
Designed for
- Product managers who have to estimate the build will read a 455x800 frame as the scope of the work.
- People who brief a model on a landing page will use the 8,432-character prompt as the starting point.
- Made for content leads rewriting a landing page whose headline has to stay as long as Prisma Creative Studio's.
What's included
- The bar shares the page grid. A slim bar sits over the landing page with the wordmark on the left and the links set in Instrument Serif, so the composition reads as content first and chrome second. The bar sits over the 455x800 composition without a background of its own, so the media runs edge to edge underneath it.
- Values you can check. The list stays short (10px spacing steps and 0.08s transitions), which is why the whole system can be checked by hand. The list is short enough that a reviewer can check it element by element.
- One row, no drawers. One action per bar. The reference was captured at 455x800.
- Sizes fixed in the brief. Spacing is quoted the same way (10px spacing steps and 0.08s transitions), not as a scale that grows on its own.
Motion & interaction
One duration for the controls
Transitions are specified at 0.08s, which is the timing the controls are held to. Easing is specified alongside the duration (0.08s), so a rebuild cannot quietly substitute a different feel.
Sections arrive on scroll
Parallax is the only scroll behaviour in the brief, which keeps the page from feeling like a sequence of separate effects. Only one scroll behaviour is used, so the page never feels like a sequence of separate effects. The layout has to work with the effect disabled.
How the landing page reflows
Responsive here means the scale changes and the sequence does not. the scale is fluid rather than stepped, and the reading order stays where the brief put it. Autoplay and motion are handled honestly, so the page still communicates when they are unavailable.
Why the agency brief holds
Prisma Creative Studio works because its hierarchy is decided rather than decorated. The brief sets 10px spacing steps and 0.08s transitions, so new copy lands inside the frame instead of reopening it. Prisma Creative Studio states the offer once and lets the composition repeat it rather than adding a second claim.
What to change first in Prisma Creative Studio
A straight substitution has a limit: if your product needs a different hierarchy, 10px spacing steps and 0.08s transitions will fight it. Change the order first in that case, and the values second. Substitution is cheaper than composition, and that is the point.
Frequently asked questions
How long is the prompt behind Prisma Creative Studio?
It is a build brief rather than a mood description: it names the composition at 455x800, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
How much of Prisma Creative Studio depends on React and Tailwind CSS?
Prisma Creative Studio was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
Can I keep the Prisma Creative Studio transitions and change the timings?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the 0.08s range. The brief records the values so a port can match them without guessing.
