# Promlyapp · Design system migration spec

> Source: http://promlyapp.com  ·  Curated by OpenDesign  ·  en

> The site effectively uses high-contrast photography to convey its mission of youth empowerment and connection.

## 1. Identity DNA

Promly's design system operates like a vibrant digital community center for youth advocacy—a space built with intention, where every visual decision reinforces connection and safety. The identity is anchored in high-contrast photography and a bold, single-accent palette, creating a digital environment that feels both urgent and welcoming.

**One-liner:** A bold, photography-driven site promoting youth connection and advocacy.
**Keywords:** empowerment · youth · connection · safety · changemakers
**Analogy:** A vibrant digital community center for youth advocacy.

## 2. Color

The color system is defined by stark contrast: a deep black background provides a serious, focused foundation, while a vibrant purple accent carries the emotional weight of the platform's mission. This is a palette of advocacy, not decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#040723` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#FFFFFF99` | secondary text |
| `--muted` | `#333333` | placeholder |
| `--muted-soft` | `#FFFFFF80` | weak hint |
| `--accent` | `#A957FE` | single accent |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** High contrast dark mode with a vibrant purple accent for emotional engagement.

The system is deliberately restricted to a single dominant accent, ensuring visual clarity and reinforcing a unified brand message.

## 3. Typography

Typography balances approachability with professionalism through the pairing of geometric humanist sans-serifs: Poppins for assertive headings and Avenir for clear body text. The voice is direct and generous, prioritizing readability over stylistic flourish.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 300 | -3px | hero headlines |
| h2 | 28px | 1.2 | 300 | -1px | section headings |
| body | 18px | 1.2 | 300 | 0.25px | paragraphs |

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

## 4. Spacing

Vertical rhythm is established through generous section padding and consistent spacing, creating a calm, breathable structure beneath the vibrant photography.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Vertical rhythm established through large sections and consistent padding.

## 5. Surfaces

Surface treatments are minimal yet purposeful, using subtle elevation to lift key elements from the deep background. Thin, semi-transparent borders provide delicate structure without visual clutter.

- **Radius:** sm 4px · md 8px · lg 20px · pill 999px
- **Shadows:**
  - rgba(150, 163, 181, 0.08) 0px 4px 24px 0px
  - rgba(102, 77, 255, 0.2) 0px 4px 100px 0px
- **Borders:** Thin 1px solid rgba(255, 255, 255, 0.5)

## 6. Layout

The layout skeleton begins with a split hero section, dividing attention between large typography and a compelling photo collage. Secondary content flows through a flexible system of full-width sections and fluid card grids.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is understated and functional, limited to smooth transitions on interactive elements like buttons and links. The philosophy is one of immediate, clear feedback that supports usability without distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on hover for buttons and links.

- **Hover:** Subtle color shifts and opacity changes.
- **Click:** Immediate response with visual feedback.
- **Transition:** all 0.2s ease-in-out
- **Keyboard:** Standard focus states.

## 8. Voice & Don'ts

The editorial voice is empowering, inclusive, and urgent—using direct headlines and clear calls to action to foster a sense of agency. Language avoids cynicism and jargon, opting for inspiring clarity.

- **Tone:** Empowering, inclusive, and urgent.
- **Headline style:** Direct and inspiring.
- **CTA style:** Clear calls to action.
- **Avoid:** Cynicism / Complex jargon / Passive voice

### Don'ts
- ❌ 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.

The system deliberately rejects light backgrounds, thin typography, and rigid grids in favor of a dark, photography-driven experience that feels safe and focused.

## System Prompt (paste into AI tool)

```
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.
```