The Remagine design system, on one page.
One display face, one mono face. Black ink as the conversion pill. Canvas-dark alternated with canvas. A three-stop gradient as the entire decorative chrome. That's the whole system.
Accents.
Surfaces and hairlines.
The brand gradient.
- One unified object. Orange → magenta → periwinkle, in that order — never reorder, never miniaturize, never add a fourth stop.
- Used only at hero scale. Section dividers may use a 1px gradient bar; everything smaller stays neutral (ink or hairline).
- The gradient never appears on the same surface as the black CTA pill — they trade off, never compete.
Display sans — Outfit.
Mono caps — JetBrains Mono.
Buttons.
Radii.
Elevation — hairlines, not shadows.
All cards on canvas use 1px hairline borders. Shadows are reserved for the floating chat-launcher orb only. Surface contrast (canvas ↔ canvas-dark) does the rest of the elevation work.
Taglines.
Build full videos by chatting with an agent.
Hero — describes the core motion
Describe a video. Get the cut.
Final CTA — punchy, action-led
Chat. Preview. Render.
Workflow eyebrow — the three-beat verb stack
Stop editing. Start shipping.
Pain-point flip · alt CTA
How Remagine writes.
“The agent writes Remotion React in your workspace” — not “AI-powered creative SaaS solution.”
“Final 1080p MP4 in well under a minute.” Specific. Not “blazingly fast.”
Headlines stay sentence-case. Mono caps are for labels only.
We describe what the agent does, with the same precision the agent uses in its own messages.