CURATED · OPEN · FREE

Promlyapp

A bold, photography-driven site promoting youth connection and advocacy.

Non-profitYouthEmpowermentCleanPhotographic

↓ Download design system (34 MB)Open in OpenDesign

Visit: http://promlyapp.com

📦 Browse pack contents →

Identity DNA

empowermentyouthconnectionsafetychangemakers

A vibrant digital community center for youth advocacy.

Color

#A957FEAccent

#FFFFFFInk

#FFFFFF99Ink soft

#000000BG

#040723BG soft

#333333Muted

rgba(255, 255, 255, 0.2)Line

High contrast dark mode with a vibrant purple accent for emotional engagement.

Typography

humanist-sans · monospace

display60px · 300
h228px · 300
body18px · 300

Use Poppins for primary headings and Avenir for body text. · Maintain generous line-height for readability. · Strictly limit letter-spacing.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

Vertical rhythm established through large sections and consistent padding.

Surfaces

sm · 4px

md · 8px

lg · 20px

pill · 999px

Thin 1px solid rgba(255, 255, 255, 0.5)

rgba(150, 163, 181, 0.08) 0px 4px 24px 0px · rgba(102, 77, 255, 0.2) 0px 4px 100px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Hero section splits text and image grid; secondary sections use full-width or card grids.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transitions on hover for buttons and links.

Subtle color shifts and opacity changes. · Immediate response with visual feedback.

Components

button Solid purple rounded rectangles with white text.
card Photo cards with large border-radius.
chip Badges and tags with small border-radius.
input Standard forms with subtle borders.
hero Split layout with large typography and a photo collage.

Voice & Don'ts

Tone Empowering, inclusive, and urgent.
Headlines Direct and inspiring.
CTAs Clear calls to action.

Don't use a bright or pastel background — screenshot shows a deep black (#000000) background.
Don't use thin, condensed fonts — screenshot shows a geometric, humanist sans-serif (Poppins/Avenir).
Don't use square corners for images — screenshot shows rounded corners (up to 20px).
Don't use a wide range of accent colors — screenshot shows a single dominant purple accent.
Don't use small, dense text — screenshot shows large, readable typography with generous line-height.
Don't use a grid-heavy, rigid layout — screenshot shows a fluid, photography-driven collage.
Avoid: Cynicism
Avoid: Complex jargon
Avoid: Passive voice

Inside the pack — real screenshots

Promlyapp — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Promly is a non-profit dedicated to reforming connections for youth, using a bold, high-contrast dark-mode aesthetic. The palette is dominated by deep black (#000000) and vibrant purple (#A957FE) accents, creating a sense of urgency and empowerment. Typography uses humanist sans-serifs (Poppins and Avenir) to balance approachability with professionalism. Critical constraints: Never use light backgrounds or thin, condensed fonts. Always maintain generous spacing and rounded corners (20px) for imagery. Focus on high-quality photography and direct, inspiring copy. Ensure the design feels safe and welcoming, reflecting the organization's mission.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko