The making-of guide
How we built 25 worlds in one system.
This showcase is itself a case study. Here’s the creative process, the structure, the tools, and the design approach behind the collection — and a blueprint for building something like it yourself.
What the collection covers
07
Software & Product
04
AI & Automation
05
Commerce
03
Brand & Identity
02
Marketing Engines
04
Experience & 3D
The creative process
Eight moves, repeated twenty-five times.
Set one impossible brief
Twenty-five works, each fundamentally different — different business, audience, interface, palette, and type. The constraint that made it work: no two could share a template or a visual world. Difference was the requirement, not a nice-to-have.
Map the capability, not the categories
Rather than 25 random ideas, each work was assigned a discipline to prove — software, AI & automation, commerce, brand, marketing, experience — and a real Limited Labs service it maps to. The collection is a coverage map of what the studio actually does.
Design a data model, then the art
Every work is a typed record: theme tokens, a brand system, mock-screen definitions, a marketing angle, and a service mapping. Building the model first meant the design system stayed consistent while each work's world stayed unique.
Give every work its own type & palette
Each work ships its own font pairing and color tokens, injected as scoped CSS variables. A luxury-fintech serif, an industrial condensed grotesk, a friendly rounded face — the type does as much brand work as the color.
Build interfaces, not screenshots
The product screens are real, responsive components — dashboards, chat, booking, checkout, kanban, workflows — driven by each work's theme. They scale like screenshots but are coded, so every pixel stays on-brand.
Generate cinematic hero imagery
Each work has an AI-generated 16:9 hero photograph, art-directed with a reference note (a Dribbble/Behance-style direction), then composited under the work's pattern and wordmark so image and identity read as one system.
Write the business, then the copy
Every work has a revenue model, an audience, and an outcome target before a single headline. The marketing angle and campaign come out of the business logic — so the copy sells something real, not just vibes.
Iterate at least three times
No work was 'approved' until it passed three review passes across typography, spacing, color, storytelling, conversion, originality and wow-factor. Polish was a gate, not a final coat.
How each work is structured
Every detail page follows the same ten-part spine, so the collection reads as one system even though each world looks entirely its own.
- 01Name & concept
- 02Business explanation
- 03Brand direction
- 04Visual identity
- 05Homepage / product interface
- 06Key product screen
- 07Marketing angle & campaign
- 08What Limited Labs built
- 09Service demonstrated
- 10Polished presentation
Tools & design approach
Framework
Next.js (App Router) + React, statically generated per work
Styling
Tailwind v4 CSS-first tokens; per-work themes via scoped --w-* CSS variables
Type
Fontshare + Google Fonts — a distinct display/text pairing per work
Motion
Lenis smooth scroll + GSAP scroll-reveals, gated on prefers-reduced-motion
Imagery
AI image generation (16:9 heroes) + generative CSS scenes as a no-image fallback
Interfaces
Hand-built responsive mock-screen components sized in container units (cqw)
Build one yourself
The five-step blueprint.
Start with a capability map
List the disciplines you want to prove. Assign each a real service. Aim for even coverage — that's what turns a portfolio into a proof-of-capability.
Model a work as data
Define one schema: identity tokens, brand system, screen specs, marketing, service mapping. Author works as records so the system stays consistent and the worlds stay distinct.
Theme with scoped variables
Give each work its own font + color tokens injected as CSS variables on a wrapper. Build the UI against the variables, not hard-coded values, and one component set renders infinite worlds.
Composite image + identity
Generate a cinematic hero, then layer your pattern and wordmark on top at reduced opacity. Keep a pure-CSS fallback so the layout never shifts if an image is missing.
Gate on iteration
Review every work three times against a fixed rubric. Don't ship until it feels unique, premium, and worthy of being shown publicly. The gate is the product.
Your business could be work 26.
The same process that built this showcase builds real systems for real businesses — brand, product, and marketing designed as one.