WELAUNCH / AGENT TEMPLATE
A system built to launch.
A practical reference for building new pages that feel like Welaunch. Reuse the styles, components, layouts, and rules shown here. Keep the work cinematic, direct, and unmistakably Welaunch.
Type /design-system in the Agent panel with your prompt to create your first page based on this design system.
Recommended model: GPT 5.6 Sol or above.
02 / COLOR SYSTEM
Dark canvas. Sharp contrast. One electric accent.
Use the existing color tokens. Keep most surfaces near-black, use warm white for primary text, and reserve the accent for moments that need attention.
bg-primary
Main canvas
#0A0A0A
bg-secondary
Raised surface
#111111
Text / Primary
Headings and key copy
#F5F5F5
Text / Secondary
Supporting copy
#888888
Accent
Primary accent
#00FFB3
bg-accent
Borders and subtle panels
#1E1E1E
Accent / White
High contrast text
#FFFFFF
03 / TYPOGRAPHY
A bold voice. A quiet supporting cast.
Bricolage Grotesque carries headlines and display moments. Inter handles readable body copy, numbers, and metadata. Use text styles, never one-off inline typography.
Display / 80px
We Launch Brands Into Motion.
Big statements and hero moments.
Heading 1 / 74px
Make the first frame count.
Primary page headline.
Heading 2 / 49px
Stories that move products forward.
Section headlines.
Heading 3 / 32px
A film with a clear point of view.
Card and subsection titles.
Heading 4 / 24px
Small details matter.
Small emphasis headings.
Body XL / 18px
Launch films that make people stop, watch, and remember.
Lead paragraphs and introductions.
Body Small / 14px
Built around the product, not a trend.
Body copy and descriptions.
Label / 13px
48H / 16:9 / READY TO SHIP
Technical labels, counters, and metadata.
Imagery
04 / REUSABLE COMPONENTS
The building blocks.
Use these existing components before creating new ones. Preserve their spacing, radius, hover behavior, and interaction. Component instances are editable through their exposed controls.
Buttons
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 13.264 0.631 L 7.58 0 L 0.632 0.631 L 0 6.947 L 0.632 13.263 L 6.948 14.053 L 13.264 13.263 L 13.895 6.789 Z" fill="rgb(255, 255, 255)" height="14.052999999999997px" id="f_IIzH190" transform="translate(5.052 5.053)" width="13.894999999999998px"/><path d="M 0.977 7.209 C 0.505 6.89 0.178 6.424 0 5.809 L 1.096 5.357 C 1.196 5.736 1.369 6.03 1.616 6.238 C 1.863 6.446 2.163 6.549 2.514 6.549 C 2.872 6.549 3.18 6.44 3.437 6.222 C 3.695 6.004 3.824 5.726 3.824 5.39 C 3.824 5.046 3.688 4.765 3.417 4.547 C 3.145 4.329 2.804 4.22 2.397 4.22 L 1.764 4.22 L 1.764 3.136 L 2.332 3.136 C 2.682 3.136 2.978 3.042 3.218 2.852 C 3.458 2.662 3.578 2.404 3.578 2.074 C 3.588 1.802 3.469 1.541 3.256 1.371 C 3.041 1.196 2.769 1.108 2.439 1.108 C 2.117 1.108 1.861 1.193 1.672 1.365 C 1.483 1.537 1.34 1.755 1.258 1.998 L 0.174 1.546 C 0.317 1.138 0.581 0.778 0.968 0.467 C 1.355 0.157 1.848 0 2.448 0 C 2.892 0 3.292 0.085 3.646 0.257 C 3.999 0.429 4.277 0.667 4.478 0.971 C 4.678 1.275 4.778 1.617 4.778 1.996 C 4.778 2.382 4.685 2.709 4.498 2.978 C 4.322 3.236 4.087 3.448 3.811 3.595 L 3.811 3.66 C 4.17 3.81 4.461 4.039 4.693 4.347 C 4.921 4.654 5.037 5.022 5.037 5.452 C 5.037 5.882 4.927 6.265 4.71 6.602 C 4.492 6.938 4.19 7.202 3.808 7.395 C 3.406 7.593 2.963 7.692 2.515 7.686 C 1.966 7.689 1.429 7.522 0.977 7.209 Z M 7.702 1.771 L 6.505 2.641 L 5.904 1.729 L 8.062 0.172 L 8.89 0.172 L 8.89 7.516 L 7.702 7.516 Z" fill="rgb(26, 115, 232)" height="7.686297129556399px" id="LkycSdiVU" transform="translate(7.298 8.274)" width="8.88999980545044px"/><path d="M 1.263 6.947 L 6.947 1.263 L 4.105 0 L 1.263 1.263 L 0 4.105 Z" fill="rgb(234, 67, 53)" height="6.947000000000003px" id="AL_qKR_Vh" transform="translate(17.053 17.053)" width="6.946999999999996px"/><path d="M 0 2.842 L 1.263 5.684 L 13.895 5.684 L 13.895 0 L 1.263 0 Z" fill="rgb(52, 168, 83)" height="5.684000015258803px" id="llEDNhF6h" transform="translate(4.421 18.316)" width="13.894999999999998px"/><path d="M 1.895 0 C 1.392 0 0.91 0.199 0.555 0.555 C 0.199 0.91 0 1.392 0 1.895 L 0 18.315 L 2.842 19.579 L 5.684 18.316 L 5.684 5.684 L 18.316 5.684 L 19.579 2.842 L 18.316 0 Z" fill="rgb(66, 133, 244)" height="19.579000264513738px" id="VTuoAQHfy" width="19.579000264513738px"/><path d="M 0 0 L 0 3.79 C 0 4.835 0.848 5.684 1.895 5.684 L 5.685 5.684 L 5.685 0 Z" fill="rgb(24, 128, 56)" height="5.684000015258803px" id="aGDWdOzqV" transform="translate(0 18.316)" width="5.6850000000000005px"/><path d="M 0 1.263 L 0 13.895 L 5.684 13.895 L 5.684 1.263 L 2.842 0 Z" fill="rgb(251, 188, 4)" height="13.894999999999998px" id="CGVzTXF76" transform="translate(18.316 4.421)" width="5.684000015258803px"/><path d="M 5.685 5.684 L 5.685 1.894 C 5.685 1.392 5.485 0.91 5.13 0.554 C 4.774 0.199 4.292 0 3.79 0 L 0 0 L 0 5.684 Z" fill="rgb(25, 103, 210)" height="5.684000264513715px" id="PoIsJEBqF" transform="translate(18.315 0)" width="5.6850000000000165px"/></svg>)
Cards & content
SERVICE CARD
01
Product Launch Film
TESTIMONIAL CARD
“Welaunch took our product launch from ‘meh’ to ‘wait, what is that?’ in the span of one brief.”
Alex Chen
CEO, Prism
TESTIMONIAL GRID
“Welaunch took our product launch from ‘meh’ to ‘wait, what is that?’ in the span of one brief.”
Alex Chen
CEO, Prism
“The team understood our product faster than our own sales team. The result speaks for itself — 3× demo requests the week we launched.”
Mia Torres
Head of Growth, Orbit
“We’ve done three videos with them now. Each one better than the last. That’s rare in this industry.”
Alexa. T
Founder, Vera
“Welaunch took our product launch from ‘meh’ to ‘wait, what is that?’ in the span of one brief.”
Alex Chen
CEO, Prism
“Welaunch took our product launch from ‘meh’ to ‘wait, what is that?’ in the span of one brief.”
Alex Chen
CEO, Prism
“The team understood our product faster than our own sales team. The result speaks for itself — 3× demo requests the week we launched.”
Mia Torres
Head of Growth, Orbit
STATS CARD
150+
Videos Delivered
Sections & offer
PRICING SECTION
Starter
$3,500
One-time
60-second product film
Script + voiceover
2 revisions
7-day delivery
Value 5
Value 6
Starter
POPULAR
$3,500
One-time
60-second product film
Script + voiceover
2 revisions
7-day delivery
Value 5
Value 6
FAQ GRID
What do we actually get?
How long does a project take?
What do you need from us to get started?
Can you help if we only have an idea?
How many revisions are included?
FAQ CARD
What do we actually get?
A launch film shaped around your product, audience, and message. Depending on the scope, that can include concept development, scripting, production, editing, sound design, and final exports.
Can you work from an existing concept?
Brand & navigation
LOGO
NAVIGATION
FOOTER
06 / SECTION PATTERNS
How the pieces work together.
New pages should feel like they belong to this site. Start from these patterns: strong headline, concise supporting copy, cinematic visual, structured content, clear next step.
Hero / statement
Oversized Bricolage headline, short Inter subhead, mono eyebrow, one primary action, one secondary action. Keep the hero visual central.
Work / showcase
Use the Showcase Project component. Lead with the film itself; keep project metadata secondary and consistent.
Process / steps
Use numbered steps, concise labels, and small visual demonstrations. Keep each step scannable.
Pricing / offer
Use the Pricing Section and Launch Video Offer Card. Show deliverables, timeline, and CTA clearly.
FAQ / objection handling
Use FAQ Grid with direct questions and short answers. Avoid long paragraphs.
Closing CTA / footer
One confident headline, one action, then the existing Footer component.
07 / RULES FOR THE AGENT
Keep the signal. Remove the noise.
01 / Layout
Use Main Template for every new page. Build full-width sections with a centered content container (max 1300px). Use consistent 24px mobile gutters and generous vertical spacing.
02 / Color
Use the named color styles only. Keep bg-primary as the main canvas and bg-secondary for elevated surfaces. Accent is for a few key actions, active states, and small visual signals — never large blocks of decoration.
03 / Type
Use the existing text presets for every text layer. Bricolage Grotesque for display and headings, Inter for body copy, Geist Mono for labels and metadata. Do not use inline font styling.
04 / Components
Reuse the components above and preserve their variants and interactions. Do not rebuild buttons, cards, FAQ items, navigation, pricing, or footer from scratch.
05 / Imagery & motion
Keep visuals cinematic, product-focused, high contrast, and restrained. Use motion to clarify hierarchy or create a reveal. Avoid unnecessary parallax, random gradients, and decorative effects.
06 / Copy tone
Write like a confident creative production partner. Short, direct, specific. Focus on product, audience, story, and outcome. No generic agency language or inflated promises.
07 / What stays unchanged
Keep the Welaunch wordmark, dark visual identity, accent color, component spacing, corner radii, and responsive behavior. Never modify the global styles or Main Template without explicit instruction.