---
name: Promlyapp
description: "The site effectively uses high-contrast photography to convey its mission of youth empowerment and connection."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#FFFFFF99"
  tertiary: "#A957FE"
  neutral: "#333333"
  bg-soft: "#040723"
  muted-soft: "#FFFFFF80"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-3px"
  h2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "0.25px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A vibrant digital community center for youth advocacy.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#FFFFFF99`)** — uses `ink-soft` token
- **Accent (`#A957FE`)** — uses `accent` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Vertical rhythm established through large sections and consistent padding.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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