---
title: "Promly — Teen Connection and Changemaking design system"
variant: extended
source: https://www.promly.org/promly
captured_at: 2026-10-12
theme: dark
industry: nonprofit
generator: Design DNA (https://four.wiralomi.com/style/promlyapp-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Promly — Teen Connection and Changemaking · Design System

> A dark canvas for bright youth voices.

**Theme:** dark · **Industry:** nonprofit · **Source:** https://www.promly.org/promly · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Promly pairs a near-black canvas with vivid violet gradients and candid youth photography to make its social-impact mission feel energetic and personal. Large Avenir headlines, open section spacing, and simple calls to action keep the long homepage approachable.

## North star

Keep the black canvas calm and spacious, then use violet gradients, candid youth photography, and clear white type to give each mission moment its energy.

## Overview

The page is built on a near-black canvas, with white headings and copy providing strong contrast across its long, mostly dark sections. Purple and violet gradients are the main expressive device: they energize the hero and selected promotional bands without turning every section into a coloured panel. Avenir carries the identity throughout, from oversized, tightly tracked bold headings to lighter supporting text and clear navigation. The hero combines a left-aligned mission statement and donation action with a dense mosaic of rounded candid photos on the right. Further down, app imagery, press cards, event photography, and a contact form create variety while preserving the dark ground. Content is organized into broad, generously separated bands; compact grids and rounded image crops add structure. Blue donation buttons and violet outlined join buttons stand out as distinct actions. Thin dark hairlines and restrained shadows define surfaces without competing with photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and navigation background; anchors the long sequence of dark sections. |
| Violet Signal | `#755eff` | `--color-violet-signal` | accent | Outlined Join Us actions and violet end of selected gradients. |
| Bright White | `#ffffff` | `--color-bright-white` | neutral | Primary headings, navigation, body copy, and text on coloured buttons. |
| Electric Orchid | `#a957fe` | `--color-electric-orchid` | accent | Vivid gradient and promotional accent; use for selective visual emphasis. |
| Action Blue | `#3898ec` | `--color-action-blue` | accent | Filled Donate and Submit buttons. |
| Soft Gray | `#999999` | `--color-soft-gray` | neutral | Muted secondary copy and supporting details. |
| Midnight Card | `#040723` | `--color-midnight-card` | surface | Deep blue-black card surface, including the featured social-impact content card. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Secondary muted text on less prominent content. |
| Hairline Charcoal | `#1a1a1a` | `--color-hairline-charcoal` | semantic | Subtle card and footer borders against the black page. |
| Deep Plum | `#47246a` | `--color-deep-plum` | accent | Intermediate tone within a measured purple-to-black section gradient. |
| Bright Lilac | `#9e58fe` | `--color-bright-lilac` | accent | Gradient color appearing in promotional card treatment; keep tied to those visual bands. |
| Input Gray | `#cccccc` | `--color-input-gray` | semantic | Measured form-field border color; a functional detail rather than a dominant page tone. |
| Cool Mist | `#e4ebf3` | `--color-cool-mist` | semantic | Measured section-level color, not a defining surface in the predominantly black screenshots. |
| Slate Border | `#4a4a4a` | `--color-slate-border` | semantic | Secondary measured border or detail tone; keep subordinate to the dark canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#040723` (Midnight Card) · `--color-text` → `#ffffff` (Bright White) · `--color-text-muted` → `#999999` (Soft Gray) · `--color-text-subtle` → `#808080` (Quiet Gray) · `--color-border` → `#1a1a1a` (Hairline Charcoal) · `--color-accent` → `#3898ec` (Action Blue) · `--color-accent-2` → `#755eff` (Violet Signal) · `--color-accent-3` → `#a957fe` (Electric Orchid) · `--color-on-accent` → `#ffffff` (Bright White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#040723` | 19.81:1 | AAA |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#999999` | `#040723` | 6.95:1 | AA |
| `#808080` | `#000000` | 5.32:1 | AA |
| `#808080` | `#040723` | 5.02:1 | AA |
| `#3898ec` | `#000000` | 6.87:1 | AA |
| `#3898ec` | `#040723` | 6.48:1 | AA |

### Gradients

- `linear-gradient(216deg, rgb(167, 85, 251) 20%, rgb(71, 36, 106) 37%, rgb(0, 0, 0) 90%)`
- `linear-gradient(135deg, rgb(158, 88, 254) 39%, rgb(255, 255, 255)), url("https://cdn.prod.website-files.com/60efa87157f5a44d7df847b5/673ed349f734e9a1b56e191f_CTA%203.png")`
- `linear-gradient(89deg, rgb(169, 87, 254), rgb(120, 94, 254) 55%)`
- `linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Avenir | `--font-body` | webfont | 700, 300, 400 | Site-wide identity across headings, body copy, navigation, and most buttons. | Nunito Sans |

- **Avenir:** Large bold display headings use tight negative tracking; supporting copy is lighter and roomy. Navigation is regular weight, and buttons are bold.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1.25 | -0.047em | — | Avenir | Large hero and prominent mission headlines. |
| h1 | 60px | 700 | 1.17 | -0.05em | — | Avenir | Primary page and section titles. |
| h2 | 59px | 700 | 1.36 | -0.051em | — | Avenir | Major section headings, including impact and contact content. |
| h3 | 45px | 700 | 1.11 | -0.067em | — | Avenir | Secondary headings for featured content blocks. |
| h4 | 35px | 300 | 1.57 | 0 | — | Avenir | Light-weight supporting headline or subheading. |
| body | 16px | 400 | 1.69 | 0 | — | Avenir | Paragraphs, card copy, and supporting descriptions. |
| button | 18px | 700 | 1.5 | 0 | capitalize | Avenir | Donation, join, and form submission actions. |
| nav | 18px | 400 | 1.39 | 0.014em | — | Avenir | Main navigation links across the header. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 10, 11, 12, 15, 20, 24, 27, 30, 100 px.
- Section rhythm 60px · element gap 20px · card padding 14px · max content width 1220px.

A long, single-page sequence sits on a full-width black canvas, with content arranged within a measured 1220px maximum page width. The hero uses a left text column and a multi-column photo mosaic on the right; later sections alternate between single-column storytelling, card grids, a photo strip, and centered contact content. Section spacing is generous, while card and form internals remain compact. Most text is left-aligned, with contact headings and form content centered.

## Shape & elevation

- Radius: button `12px` · input `12px` · card `25px` · media `20px` · xs `8px` · sm `12px` · md `20px` · lg `30px`
- Shadow `md` (media): `rgba(150, 163, 181, 0.08) 0px 4px 24px 0px`
- Shadow `xl` (card): `rgba(102, 77, 255, 0.2) 0px 4px 100px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The overall treatment is mostly flat: black section bands and dark surfaces do the structural work. A measured deep blue-black card uses a restrained violet-tinted shadow, while media can carry a faint neutral shadow. Thin charcoal borders separate the footer and cards; rounded crops and gradients create depth without stacking many panels.

## Imagery

Candid photographs of teens and young changemakers are the defining imagery, cropped into rounded rectangles and mosaics. The hero's portrait grid sits against a purple gradient, while later event, press, and community photos provide documentary context. App screens and award marks appear as supporting assets; imagery stays photographic and grounded rather than relying on illustration or 3D.

## Components

### Main navigation

Black horizontal header with white Avenir links, dropdown indicators, Promly logo, and a prominent blue Donate button.

### Hero mission block

Large left-aligned white headline and light supporting copy beside a rounded, multi-column collage of youth photographs over a violet gradient.

### Primary action

Filled #3898ec button with white bold Avenir text and a rounded 12px radius; used for donation and form submission.

### Outlined join action

Transparent button with #755eff text and a matching 1px border, rounded 12px.

### Featured content card

Deep #040723 surface with white copy, generous left inset, rounded 25px corners, and a subtle violet-tinted shadow.

### Press cards

Three-column editorial presentation with prominent image thumbnails, white linked headlines, and subdued dates.

### Contact form

Centered contact heading and compact fields on black; measured inputs use a #cccccc border and rounded corners.

### Footer

Minimal black closing band with white copyright text and a subtle #1a1a1a top border.

### Measured component styles

- **Primary button** (“Donate”): background #3898ec · text #ffffff · radius 12px · padding 12px 24px · 700 18px Avenir · capitalize
- **Secondary button** (“Join Us”): transparent background · text #755eff · border 1px solid #755eff · radius 12px · padding 12px 24px · 700 18px Avenir · capitalize
- **Link** (“Youth Representation at the United Natio”): transparent background · text #ffffff · radius 0px · padding 0px · 300 18px Avenir
- **Input**: transparent background · text #333333 · border 1px solid #cccccc · radius 12px · padding 8px 12px · 300 14px Avenir
- **Card** (“Find Your Voice & Lead Social Impact Sha”): background #040723 · text #ffffff · radius 25px · padding 0px 0px 0px 55px · 300 18px Avenir · shadow rgba(102, 77, 255, 0.2) 0px 4px 100px 0px
- **Navigation item** (“About Promly Changemakers Get Involved G”): transparent background · text #ffffff · radius 0px · padding 0px · 300 18px Avenir

## Do

- Use black as the page-wide foundation.
- Reserve violet gradients for hero and selected feature bands.
- Keep major headings large, white, and left-aligned where content-led.
- Use real, candid youth photography in rounded collage crops.
- Make donation actions clearly visible with blue fills.
- Separate long-form content into spacious dark section bands.

## Don't

- Do not replace the dark canvas with a light page theme.
- Do not apply gradients to every section or card.
- Do not make the photo collage feel like generic stock imagery.
- Do not introduce unmeasured colors as brand palette values.
- Do not rely on heavy borders or stacked shadows for hierarchy.
- Do not compress the long-page sections into a dense dashboard.

## Agent prompt

Build a new Promly-style nonprofit page on a near-black #000000 canvas, using Bright White #ffffff for clear headings and copy. Apply Avenir throughout, or use Nunito Sans as a free substitute; keep display headings bold with tight tracking and supporting copy lighter. Use Electric Orchid #a957fe and Violet Signal #755eff in selective gradients, not as full-page fills. Set primary actions in Action Blue #3898ec with white text; reserve outlined Violet Signal #755eff buttons for secondary participation actions. Structure content in broad, well-separated bands within the measured 1220px maximum width. Pair mission copy with candid youth photo mosaics, rounded crops, and occasional documentary event imagery. Use Midnight Card #040723 for featured surfaces, subtle charcoal hairlines, and restrained shadows. Preserve generous section breathing room and simple navigation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned mission copy beside a multi-column youth photo collage, below the navigation. | Donation CTA, Mission statement | Purple gradient, Rounded photo mosaic, White headline |
| 2 | logo-cloud | A compact centered row of award and partner marks on black. | Credibility signals | Logo strip, Dark background |
| 3 | feature-split | Single-column section with a heading and supporting product imagery. | Learn More link | App screen imagery, Open black space |
| 4 | stats | Single-column recognition area with supporting visual marks. | Achievement highlights | Award graphics, Sparse layout |
| 5 | feature-grid | Feature card and supporting content arranged in a broad multi-column band. | Join team, Podcasts and articles | Rounded feature card, Photo collage, Dark surface |
| 6 | cta | Two-column promotional section with a heading and join action. | Join Us CTA, Event promotion | Split layout, Gradient-backed image treatment |
| 7 | content-feed | Editorial press area with a three-column row of image-led stories. | Carousel navigation, Article links | Press thumbnails, White headlines, Dark canvas |
| 8 | contact | Centered heading and message in a single-column section above community photos. | Learn about opportunities | Centered copy, Dark background |
| 9 | gallery | Wide horizontal gallery arranged as a multi-column photo strip. | Browse community photos | Rounded photo crops, Edge-to-edge strip |
| 10 | contact | Centered contact heading above a compact multi-column form on black. | Name and email fields, Submit form | Rounded bordered inputs, Blue submit button |
| 11 | footer | A simple closing band with copyright content and a subtle top hairline. | Copyright, Footer links | Black background, Charcoal border |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/promlyapp-com