Pulse Blue
#3898ecPrimary filled action background (CTA buttons, active nav) — the only chromatic fill in the system, acts as the single notification LED against the dark canvas
Promly
promlyapp.comWebsite preview
The design language
Promly operates in a midnight-violet register: deep near-black canvas (#040723) bathed in purple gradient light, with a single cool blue action color that cuts through the darkness like a notification LED. The visual language is youth-documentary — rounded-corner photo collages of real teens dominate the right half of every hero, while confident Avenir type carries the narrative on the left. Components are soft and tactile: large corner radii (20–30px on imagery, 12px on controls), violet-tinted shadows, and pill buttons that feel like app controls rather than web CTAs. Color is restrained and functional — a vivid green accent appears only on links and highlight tags, purple lives on outlined actions, and the blue filled button is the single loudest element on each screen.
Color palette
brand
Iris
#755effOutlined action border, secondary accent — the violet identity color applied to ghost buttons and decorative strokes
Lavender Lightning
#aa57ffOutlined action border, gradient start — lighter violet for tertiary buttons and gradient origins
Dusk Fade
#47246aGradient mid-stop — deep violet that bridges bright lavender to black in hero gradient washes
accent
Neon Sprout
#0be014Link borders, icon borders, active state highlights — vivid green used sparingly as functional punctuation on links and tags
neutral
Void Indigo
#040723Page background, primary surface — near-black with a violet undertone that makes the whole canvas feel tinted rather than neutral
Abyss Plum
#140f33Elevated card surface, shadow tone — a step lighter than Void Indigo, used to lift cards off the canvas with violet ambient
Onyx
#000000Deep contrast surface for cards, input fills, and the darkest band behind photo content
Glacier
#e4ebf3Off-white section backgrounds, light card surfaces — cool-tinted to harmonize with the violet system
Paper
#ffffffPrimary text on dark surfaces, button labels, image overlays — the dominant non-background color in the system
Smoke
#999999Secondary/muted body text, disabled labels
Ash
#808080Tertiary text and subtle borders on light sections
Graphite
#333333Image borders, input strokes, secondary link text on light surfaces
Charcoal
#222222Button borders on light surfaces, heavy text emphasis
Cinder
#ccccccInput field borders, form dividers
Typography
Type scale
Minor Third (1.2) · 14px basetext-64
64px · 700 · 1.25The quick brown fox jumps
display
60px · 700 · 1.07 · -4.02px trackingThe quick brown fox jumps
text-59
59px · 700 · 1.36The quick brown fox jumps
heading-lg
45px · 700 · 1.11 · -2.3px trackingThe quick brown fox jumps
heading
35px · 300 · 1.17 · -1.79px trackingThe quick brown fox jumps
text-28
28px · 700 · 1.07The quick brown fox jumps
heading-sm
25px · 300 · 1.4 · -0.78px trackingThe quick brown fox jumps
subheading
20px · 300 · 1.43 · -0.94px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Avenir
- Weights
- 300, 400, 700
- Sizes
- 14px, 16px, 18px, 20px, 25px, 28px, 35px, 45px, 59px, 60px, 64px
- Line height
- 1.07, 1.11, 1.17, 1.25, 1.36, 1.39, 1.40, 1.43, 1.50, 1.57, 1.69
- Letter spacing
- -0.067em at 59-64px display, -0.051em at 35-45px headings, -0.047em at 25-28px subheadings, -0.031em at 20px, normal to +0.018em at 14-18px body and captions
- Fallback
- Nunito Sans, Inter, DM Sans
Primary typeface across all contexts — headings, body, navigation, buttons, cards. Light 300 for large display headings creates a soft documentary feel; bold 700 for buttons and tag labels; regular 400 for body and supporting text.
Additional typeface
Poppins
- Weights
- 700
- Sizes
- 18px
- Line height
- 1.50
- Fallback
- Poppins
Rare single-use bold label — appears on one decorative badge/button context, providing a geometric contrast to Avenir's humanist curves
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 20px
Border radius
nav
12pxcards
25pximages
20pxinputs
12pxbuttons
12pxSpacing scale
1px3px5px6px8px10px11px12px15px16px20px24px27px30px31px36px55px58px60px80px88px100px160px242pxGuidelines
Do
- Use the Hero Dusk gradient (linear-gradient(216deg, #a755fb 20%, #47246a 37%, #000000 90%)) as the only hero background — never substitute a flat color or a different gradient angle.
- Apply 20px border-radius to all documentary photos and 30px to larger featured crops; 12px to all buttons and inputs; 25px to section cards.
- Set headlines at 60px Avenir weight 300 with -4px letter-spacing — the light weight is the signature, not bold.
- Use Pulse Blue (#3898ec) filled buttons for the single primary action per screen; Iris (#755eff) outlined buttons for secondary actions.
- Anchor each hero with a right-side photo collage of 8-10 rounded images with 1px white borders, arranged in offset rows.
- Let the violet-tinted shadow (rgba(102, 77, 255, 0.2) 0px 4px 100px) be the only elevation effect on cards — no gray drop shadows.
- Set section gap to 80px and card padding to 20px as the structural rhythm baseline.
Don’t
- Do not use bold (700) or extra-bold weights for display headings — weight 300 is the system's identity choice; bold headlines break the whisper-tone.
- Do not introduce new colors for action buttons — the system has exactly one filled chromatic action (Pulse Blue) and outlined actions must use Iris, Lavender Lightning, or Neon Sprout.
- Do not apply flat black (#000000) as the page background — Void Indigo (#040723) is the system canvas; pure black is reserved for deepest card surfaces only.
- Do not use sharp corners (0px radius) on any image or card — every visual element must carry at least 8px radius, most 12-20px.
- Do not place green on filled buttons or backgrounds — Neon Sprout (#0be014) is link-border and icon-border only.
- Do not stack shadows or use gray-toned drop shadows — the single violet glow shadow is the only allowed elevation effect.
- Do not alternate text alignment arbitrarily — heroes are consistently left-aligned text with right-side photo collage; do not center-align long-form content.
Components
Primary Filled Button
Main conversion action — donations, sign-ups, primary CTAsFilled rectangle, 12px radius, 20px vertical × 24px horizontal padding, Pulse Blue (#3898ec) background, Paper (#ffffff) text at 18px Avenir weight 700. Letter-spacing slightly positive. No border. Hovers deepen or shift to Iris (#755eff) for branded contexts.
Outlined Action Button
Secondary conversion — ghost CTAs on dark and light sectionsTransparent background, 1px Iris (#755eff) border, 12px radius, 18-20px padding, Iris text. Used for 'Join Our GenZ Team', 'Learn More' style actions where the primary fill would feel too heavy.
Navigation Pill Button
Header CTA — the persistent 'Donate' action in the top navFilled Pill Blue variant of the primary button, slightly smaller (18px text), sits in the top-right of the dark navigation bar with full vertical centering.
Navigation Bar
Sticky site header with brand, dropdown nav, and CTAFull-width dark bar on Void Indigo (#040723) with no visible border. Logo (Promly wordmark with globe icon) left-aligned, nav links with caret indicators centered, CTA button right. Dropdown menus open on hover. Nav text at 18px Avenir weight 400, Paper color.
Hero Section
Above-the-fold headline + photo collageFull-bleed Hero Dusk gradient (linear-gradient(216deg, #a755fb 20%, #47246a 37%, #000000 90%)), 80px+ vertical padding, left-aligned headline at 60px display weight 300, subhead at 18-20px, filled CTA. Right half: photo collage of 8-10 rounded images in a masonry-like grid, each image 20px radius with a subtle 1px white border.
Photo Collage Grid
Decorative youth imagery on hero and section right sidesAsymmetric grid of 8-12 documentary-style photos, each rounded to 20px (or 30px for larger featured crops). Images are real, candid, colorful, with no overlay treatment. Arranged in offset rows creating a scrapbook rhythm. 1px white border on each image creates separation against dark backgrounds.
Gradient Feature Card
Highlighted content section with light-violet backgroundFull-width card on Void Indigo canvas, internal padding 20-24px, background Lavender Wash gradient (linear-gradient(135deg, #9e58fe 39%, #ffffff)). 25px corner radius. Contains left-aligned heading (35px Avenir 300), body text in Graphite, row of outlined action buttons, and right-side photo collage.
App Mockup Display
Product visual showing the Promly app interfaceTwo phone mockups side by side (or overlapping) on a dark band, showing app screens with internal UI. Phone frames have rounded corners matching device bezel. App interior uses pink, green, and blue chat-style cards against dark phone backgrounds — internal contrast to the page's violet system.
Credential/Award Row
Social proof — awards, recognitions, media featuresHorizontal row of circular or shield-shaped badge logos at section bottom. Gold, blue, and white badges on dark background. No text labels needed — the badges carry the credibility visually. Centered alignment.
Achievement List
Founder/organization accolades in text formStacked text lines on dark canvas, 18-20px Avenir weight 400, Paper color, 12px row-gap. Items read as a simple bulleted-free list with generous breathing room. Used below the app mockup section.
Event Feature Section
Immersive content section — concerts, festivals, eventsFull-bleed dark section with a half-width atmospheric photo (concert crowd, warm-lit) on the left, bold headline ('Join us at the Changemakers Music Festival') right-aligned at 45-60px Avenir 300. Photo bleeds to the left edge, text is vertically centered.
Footer
Site footer (implied, not fully visible in screenshots)Dark canvas matching Void Indigo, 20px padding, Avenir 14-16px body text in Smoke, links in Paper, bordered by a 1px subtle divider line.
Input Field
Form inputs for newsletter, contact, or app signupDark fill (Onyx #000000), 1px Cinder (#cccccc) border, 12px radius, 20px vertical padding, Paper text. Placeholder in Smoke.
Highlight Link
In-body links that need to stand out on dark backgroundsPaper text with 1-2px Neon Sprout (#0be014) bottom border, 8px offset from text. Used for inline references and tag links that need to read as interactive without being a full button.
Surfaces & elevation
Level 0
Void Indigo
#040723Page canvas — the default dark surface every section sits on
Level 1
Onyx
#000000Deep card/band background for darkest content blocks
Level 2
Abyss Plum
#140f33Elevated card with violet ambient — cards float above the canvas with this tint
Level 3
Glacier
#e4ebf3Light-mode card surface for sections that break out of the dark theme
Level 4
Paper
#ffffffHighest elevation — buttons, badges, modal surfaces
Shadow is used as accent, not structure — the single shadow pattern is a wide 100px-blur violet glow (rgba(102, 77, 255, 0.2)) that makes cards feel like they emit light rather than sit on a surface. The system relies on background-tint elevation (dark → plum → glacier) rather than drop shadows to communicate depth.
Elevated Card
0px 4px 100px 0px rgba(102, 77, 255, 0.2)
Layout & imagery
Layout
Max-width 1200px centered content, but heroes are full-bleed edge-to-edge. The page rhythm is alternating dark bands (Void Indigo or Onyx) with occasional light breakouts (Glacier or Lavender Wash gradient card). Each major section follows a left-text + right-photo-collage split: headline and CTA on the left (40-45% width), rounded photo grid on the right (55-60% width). Vertical spacing is generous (80px section gaps) creating a cinematic scroll rhythm. Navigation is a sticky dark top bar. No sidebar, no mega-menu visible — the dropdowns in the nav are simple hover-reveals. Grid usage is limited to the photo collages; content text blocks are single-column stacks. The overall density is spacious, never information-dense.
Imagery
The visual language is documentary youth photography — real teens in candid, naturally-lit settings (classrooms, streets, events, backstage). Photos are colorful, slightly saturated, and never staged-corporate. Treatment: always rounded (20-30px), often with 1px white borders that make them feel like printed polaroids on the dark canvas. Photos are arranged in offset masonry collages, never a single hero image, creating a scrapbook-of-teenage-life rhythm. Role: emotional storytelling and social proof rather than product explanation. Density: image-heavy — photo collages occupy 40-50% of hero real estate, and almost every section includes a right-side or full-bleed photographic element. No illustrations, no abstract graphics, no 3D renders.
Design notes
Agent Guide
Quick Color Reference: - Text (primary on dark): #ffffff - Background (page canvas): #040723 - Border (subtle): #808080 / #333333 - Accent (links, tags): #0be014 - Brand violet (outlined actions): #755eff - primary action: #3898ec (filled action) Example Component Prompts: 1. Create a Primary Action Button: #3898ec background, #222222 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. Create a feature highlight card: full-width card on Void Indigo (#040723) canvas, internal background Lavender Wash gradient (linear-gradient(135deg, #9e58fe 39%, #ffffff)), 25px corner radius, 24px padding. Heading at 35px Avenir weight 300, #000000. Body text at 18px Avenir weight 400, #333333. Row of three outlined buttons: transparent background, 1px #755eff border, 12px radius, #755eff text at 18px Avenir weight 700. Right side: photo collage of 6-8 rounded images, 20px radius. 4. Create an event feature section: full-bleed dark Onyx (#000000) background. Left half: atmospheric concert crowd photo (warm-lit, full saturation) bleeding to the left edge, 20px radius on the right edge only. Right half: headline 'Join us at the Changemakers Music Festival' at 60px Avenir weight 300, #ffffff, vertically centered. Below headline: two action buttons (one filled Pulse Blue, one outlined Iris #755eff). 5. Create a credential row: full-width dark band on Void Indigo (#040723), centered horizontal row of 5-6 circular award/badge logos, each ~80px diameter, gold and white badges, 40px gap between badges. No text labels — the badges carry the credibility.
Similar brands
Bumble
Same dark-violet canvas with a single accent color and rounded photo collages of real people dominating hero compositions
Headspace
Same generous 80px section rhythm, soft rounded card surfaces, and documentary-style photography replacing stock illustration
Calm App
Same dark-mode-first layout with violet-tinted ambient lighting and large light-weight display headlines that prioritize atmosphere over density
Afterpay
Same bold gradient hero (violet-to-black), pill-shaped primary CTAs, and youth-energy photo treatment on marketing pages
Geneva (community app)
Same near-black indigo canvas, oversized rounded photo collages, and 12px-radius pill buttons with single-color action hierarchy
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
