Greenlight
Deep navy SaaS product landing page illuminated by vibrant cyan and purple neon gradient glows. High-contrast bold geometric typography frames crisp screenshot annotations and real-world collaboration workflows. The dark atmosphere cleanly breaks into crisp white for the closing conversion pitch.
Visit siteColour
Background#010d1a
Text#ffffff
Accent#2982ff
Surface#ffffff
Muted#5c6672
Typefaces
- Display
- Phantomsans
- Body
- Phantomsans
- Mono
- —
- Source
- self_hosted
- Scale
- 12 · 14 · 16 · 18 · 20 · 24
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 8px · 12px · 24px
Capture
- Category
- saas
- Sections
- 10
- Captured
- 2026-08-30
- Rhythm
- dark x8 → light x2
Type rules
- display headlines set in bold sentence case with tight leading
- body text measure kept under 50 characters for immediate readability
Colour rules
- navy #010d1a occupies 85 percent of the page canvas before flipping to white #ffffff for closing CTA
- cyan #00ddeb to purple #af40ff gradient is strictly reserved for primary CTA buttons and card backdrops
Voice rules
- lead with direct user benefit in headlines
- use relatable, humorous chaos quotes in problem-state showcases
Holds it together
- render product interface frames with glowing cyan-to-purple background halos
- pair every primary action button with a side-by-side outlined secondary button
- switch to a bright white #ffffff container at the bottom to reset momentum before the final call to action
Contrast
text on background19.6:1 AAA
muted text on background3.4:1 AA Large
accent on background5.3:1 AA
background on accent5.3:1 AA
Type, measured
- Body
- 24px / 1.3
- Measure
- 47 characters
- Display
- 64px / 1
- Tracking
- 0em display
- Scale ratio
- 1.28
Voice
- Tone
- direct, casual, solution-oriented
- Sentences
- short
- Person
- second
- Vocabulary
- plain
- Calls to action
- add, request, subscribe
Built with
- Builder
- webflow
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 3 items
- Length
- 9.8 screens
Sections in page order
3 marked strong · 10- 00
hero
A sleek, dark-mode hero section centered on a punchy value proposition framed by vibrant cyan-to-purple gradient accents.
- Mood
- bold + dreamy
- Layout
- 1 col · centered · airy
- 01
hero
A sunlit modern architectural estate stretches across the screen beneath a minimal translucent navigation bar.
- Mood
- luxurious + quiet
- Layout
- 16 col · full bleed · airy
- 02
testimonial
A clean and quiet dark-mode testimonial carousel framed by crisp geometric typography.
- Mood
- quiet + clinical
- Layout
- 1 col · stacked · balanced
- 03
feature
StrongDeep navy feature walkthrough with bold geometric typography on the left and a floating contextual UI annotation card on the right.
- Mood
- clinical + quiet
- Layout
- 2 col · split · airy
- 04
comparison
StrongA dark, playful problem-framing section displaying a dense stream of humorous client notification pills between bold transition prompts.
- Mood
- playful + bold
- Layout
- 1 col · stacked · dense
- 05
feature
Clean dark-mode feature showcase highlighting collaborative product UI framed against a vibrant cyan-purple gradient backdrop.
- Mood
- clinical + dreamy
- Layout
- 1 col · stacked · balanced
- 06
showcase
StrongA crisp, focused interface showcase demonstrating visual website commenting over an architectural photography layout on a deep navy canvas.
- Mood
- clinical + quiet
- Layout
- 1 col · centered · airy
- 07
feature grid
A crisp, dark three-column feature list with glowing circular icons highlighting core software capabilities with technical restraint.
- Mood
- clinical + quiet
- Layout
- 3 col · grid · airy
- 08
cta
A clean, airy call-to-action section centered on high-contrast typography and vibrant gradient-accented buttons.
- Mood
- quiet
- Layout
- 6 col · centered · airy
- 09
footer
A clean, airy light footer pairing minimal legal navigation on the left with a focused newsletter subscription form on the right.
- Mood
- quiet + clinical
- Layout
- 2 col · split · airy
