About this template
This is the portfolio page from AI Workflow Agents, published with the brief that produced it rather than as a screenshot. “Axon — Digital Workers for Mundane Workflows” is the line the layout is built to carry. The palette runs white #E8E6F1 underneath, deep indigo #1B133C for the type and magenta #7A4064 carrying the accents, and the type is Instrument Serif. The reference is built with a single component, and the layout decisions are stated independently of it. The motion budget is a looping video bed. It is most useful when the AI & SaaS portfolio page has to survive a copy change without a redesign.
Designed for
- Studio teams briefing a build and looking for a single component to react to.
- Front-end developers rebuilding this in a single component who want the transitions specified rather than guessed.
- The page serves front-end developers rebuilding an AI or SaaS product portfolio page in a single component and looking for the numbers behind the look.
What's included
- Top row, one action. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #7A4064 action, all of it sitting above the portfolio page without a background of its own. The links are set below the wordmark in size, and the #7A4064 action is the only element in the bar with any weight.
- Measured, not eyeballed. The brief states its sizes at capture (100vh sections), so a rebuild can be verified instead of approximated. Values are quoted from the captured prompt rather than inferred, so they survive a re-render.
- A clip, not an illustration. The 1444x1080 frame is filled by a single loop that plays behind the copy and asks for no controls. Export at 1444x1080 or wider and the cover crop keeps working.
- One face, used with discipline. Typography is Instrument Serif, and the brief assigns the face a job rather than mixing for variety. Weight, tracking and size steps are all specified, so the hierarchy survives a substitution. Substituting the face is possible, but the proportions have to survive the swap. One family with clear roles beats two that compete.
Motion & interaction
Hover, but sparingly
The page answers only where it can be acted on: hover states on the buttons and links rather than on every card. The states are drawn from the page's own palette rather than from a component default.
A loop, not a timeline
One 6.9s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The clip is muted and inline, so the first frame is available without an interaction. Shoot or export at 1444x1080 or wider.
How the portfolio page reflows
There is no separate mobile design to maintain. the section is held at 100vh, and the same hierarchy carries across. The narrow layout is a decision rather than a squeeze, and the hierarchy survives it.
What moves in AI Workflow Agents
The trade-off is that nothing here rewards a second look for its animation. What it rewards is the reading order, with hover and press states and a 6.9s media loop confirming state rather than decorating it. Nothing animates for its own sake in this portfolio page.
What to change first in AI Workflow Agents
Start with the copy, not the colour. Rewrite “Axon — Digital Workers for Mundane Workflows” as one sentence about your product, then set it in Instrument Serif at the size the brief uses. Rewrite the display line before you touch the colour.
Frequently asked questions
Is the AI Workflow Agents prompt a finished spec or a starting point?
The captured brief runs 3,215 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Do I need a single component to rebuild AI Workflow Agents?
No. The brief is a specification, not a dependency list. It was written for a single component, but the same composition rebuilds in whatever you already use. The stack is named so you know how the reference was made.
How should I handle the AI Workflow Agents media in a client build?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 1444x1080.
