Deep, saturated dark background with vibrant, cosmic gradient highlights and clean white typography.
03
Typography
geometric-sans
display64px · 600
display-sm40px · 600
body18px · 400
Headlines are large, bold, and tracked tight for impact. · Body text is clean and legible at a medium size. · Text is white or light gray against the dark background for high contrast.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
128px
Generous vertical spacing to let content breathe.
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(255, 255, 255, 0.1)
0 4px 24px rgba(0, 0, 0, 0.3)
06
Layout
1200container
12columns
24pxgutter
768 / 1024breakpoints
Centered, single-column layout for focused communication.
07
Motion & Interaction
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle fade-ins for content sections as you scroll.
Buttons likely have a subtle opacity change or color shift on hover. · Standard click behavior for links and buttons.
08
Components
buttonPrimary button is a solid, vibrant purple/blue (#4a40e8) with white text, pill shape. Secondary is an outlined pill.
cardNot visible in the hero, but implied for content sections.
chipThe 'Introducing...' banner is a pill-shaped chip with a border.
inputThe email input is a white pill with dark text, integrated with the CTA button.
heroA full-width, immersive hero with a cosmic gradient background, large typography, and a prominent email capture form.
09
Voice & Don'ts
ToneConfident, professional, and visionary.
HeadlinesBold, aspirational statements about the future of business and community.
CTAsDirect and action-oriented, focusing on starting for free or learning more.
Don't use a light or white background — the screenshot shows a dark, immersive hero.
Don't use rounded serif fonts — the typography is clean, geometric, and sans-serif.
Don't use a cluttered layout — the design uses generous whitespace and a centered focus.
Don't use muted, earthy colors — the palette relies on deep blues/purples and vibrant accents.
Don't use thin, outlined buttons as primary actions — the main CTA is a solid, filled pill button.
Don't use small, cramped typography — headlines are large, bold, and tracked tightly.
Avoid: Jargon-heavy or overly technical language
Avoid: Uncertainty or hedging
Avoid: Playful or informal slang
11
System prompt
A premium SaaS platform for community and digital business building, positioned as an all-in-one home. Key colors are a deep navy (#0d1025) background with vibrant cosmic gradients (purples, pinks) and white text. Font categories are geometric sans-serif for a modern, clean feel. Critical donts: avoid light backgrounds, avoid serif typography, and avoid cluttered layouts. The design is spacious, focused, and uses bold, aspirational headlines.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
