promly___style_reference:
  info: "> Midnight pulse through violet glass — a youth sanctuary lit by neon accents on near-black surfaces, where rounded photo collages float like screensavers behind sharp confident type."

  theme: "dark"

  info: "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."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Indigo | `#040723` | `--color-void-indigo` | Page background, primary surface — near-black with a violet undertone that makes the whole canvas feel tinted rather than neutral |"
    info: "| Abyss Plum | `#140f33` | `--color-abyss-plum` | Elevated card surface, shadow tone — a step lighter than Void Indigo, used to lift cards off the canvas with violet ambient |"
    info: "| Onyx | `#000000` | `--color-onyx` | Deep contrast surface for cards, input fills, and the darkest band behind photo content |"
    info: "| Glacier | `#e4ebf3` | `--color-glacier` | Off-white section backgrounds, light card surfaces — cool-tinted to harmonize with the violet system |"
    info: "| Paper | `#ffffff` | `--color-paper` | Primary text on dark surfaces, button labels, image overlays — the dominant non-background color in the system |"
    info: "| Smoke | `#999999` | `--color-smoke` | Secondary/muted body text, disabled labels |"
    info: "| Ash | `#808080` | `--color-ash` | Tertiary text and subtle borders on light sections |"
    info: "| Graphite | `#333333` | `--color-graphite` | Image borders, input strokes, secondary link text on light surfaces |"
    info: "| Charcoal | `#222222` | `--color-charcoal` | Button borders on light surfaces, heavy text emphasis |"
    info: "| Cinder | `#cccccc` | `--color-cinder` | Input field borders, form dividers |"
    info: "| Pulse Blue | `#3898ec` | `--color-pulse-blue` | Primary filled action background (CTA buttons, active nav) — the only chromatic fill in the system, acts as the single notification LED against the dark canvas |"
    info: "| Iris | `#755eff` | `--color-iris` | Outlined action border, secondary accent — the violet identity color applied to ghost buttons and decorative strokes |"
    info: "| Lavender Lightning | `#aa57ff` | `--color-lavender-lightning` | Outlined action border, gradient start — lighter violet for tertiary buttons and gradient origins |"
    info: "| Neon Sprout | `#0be014` | `--color-neon-sprout` | Link borders, icon borders, active state highlights — vivid green used sparingly as functional punctuation on links and tags |"
    info: "| Dusk Fade | `#47246a` | `--color-dusk-fade` | Gradient mid-stop — deep violet that bridges bright lavender to black in hero gradient washes |"

  tokens___typography:

    avenir___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_____font_avenir:
      - "**Substitute:** Nunito Sans, Inter, DM Sans"
      - "**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"
      - "**Role:** 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."

    poppins___rare_single_use_bold_label___appears_on_one_decorative_badge_button_context__providing_a_geometric_contrast_to_avenir_s_humanist_curves____font_poppins:
      - "**Substitute:** Poppins"
      - "**Weights:** 700"
      - "**Sizes:** 18px"
      - "**Line height:** 1.50"
      - "**Role:** Rare single-use bold label — appears on one decorative badge/button context, providing a geometric contrast to Avenir's humanist curves"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.25 | 0.25px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.69 | -0.9px | `--text-body` |"
      info: "| subheading | 20px | 1.43 | -0.94px | `--text-subheading` |"
      info: "| heading-sm | 25px | 1.4 | -0.78px | `--text-heading-sm` |"
      info: "| heading | 35px | 1.17 | -1.79px | `--text-heading` |"
      info: "| heading-lg | 45px | 1.11 | -2.3px | `--text-heading-lg` |"
      info: "| display | 60px | 1.07 | -4.02px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| cards | 25px |"
      info: "| images | 20px |"
      info: "| inputs | 12px |"
      info: "| buttons | 12px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(102, 77, 255, 0.2) 0px 4px 100px 0px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    primary_filled_button:
      role: "Main conversion action — donations, sign-ups, primary CTAs"

      info: "Filled 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:
      role: "Secondary conversion — ghost CTAs on dark and light sections"

      info: "Transparent 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:
      role: "Header CTA — the persistent 'Donate' action in the top nav"

      info: "Filled 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:
      role: "Sticky site header with brand, dropdown nav, and CTA"

      info: "Full-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:
      role: "Above-the-fold headline + photo collage"

      info: "Full-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:
      role: "Decorative youth imagery on hero and section right sides"

      info: "Asymmetric 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:
      role: "Highlighted content section with light-violet background"

      info: "Full-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:
      role: "Product visual showing the Promly app interface"

      info: "Two 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:
      role: "Social proof — awards, recognitions, media features"

      info: "Horizontal 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:
      role: "Founder/organization accolades in text form"

      info: "Stacked 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:
      role: "Immersive content section — concerts, festivals, events"

      info: "Full-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:
      role: "Site footer (implied, not fully visible in screenshots)"

      info: "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:
      role: "Form inputs for newsletter, contact, or app signup"

      info: "Dark fill (Onyx #000000), 1px Cinder (#cccccc) border, 12px radius, 20px vertical padding, Paper text. Placeholder in Smoke."

    highlight_link:
      role: "In-body links that need to stand out on dark backgrounds"

      info: "Paper 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."

  do_s_and_don_ts:

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

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void Indigo | `#040723` | Page canvas — the default dark surface every section sits on |"
    info: "| 1 | Onyx | `#000000` | Deep card/band background for darkest content blocks |"
    info: "| 2 | Abyss Plum | `#140f33` | Elevated card with violet ambient — cards float above the canvas with this tint |"
    info: "| 3 | Glacier | `#e4ebf3` | Light-mode card surface for sections that break out of the dark theme |"
    info: "| 4 | Paper | `#ffffff` | Highest elevation — buttons, badges, modal surfaces |"

  elevation:

    - "**Elevated Card:** `0px 4px 100px 0px rgba(102, 77, 255, 0.2)`"

  imagery:

    info: "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."

  layout:

    info: "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."

  agent_prompt_guide:

    info: "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)"

    info: "Example Component Prompts:"

    - "Create a Primary Action Button: #3898ec background, #222222 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

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


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

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

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-indigo: #040723;
          --color-abyss-plum: #140f33;
          --color-onyx: #000000;
          --color-glacier: #e4ebf3;
          --color-paper: #ffffff;
          --color-smoke: #999999;
          --color-ash: #808080;
          --color-graphite: #333333;
          --color-charcoal: #222222;
          --color-cinder: #cccccc;
          --color-pulse-blue: #3898ec;
          --color-iris: #755eff;
          --color-lavender-lightning: #aa57ff;
          --color-neon-sprout: #0be014;
          --color-dusk-fade: #47246a;
        
          /* Typography — Font Families */
          --font-avenir: 'Avenir', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.25;
          --tracking-caption: 0.25px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.69;
          --tracking-body: -0.9px;
          --text-subheading: 20px;
          --leading-subheading: 1.43;
          --tracking-subheading: -0.94px;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.78px;
          --text-heading: 35px;
          --leading-heading: 1.17;
          --tracking-heading: -1.79px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -2.3px;
          --text-display: 60px;
          --leading-display: 1.07;
          --tracking-display: -4.02px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-100: 100px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
          --radius-3xl-2: 30px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-cards: 25px;
          --radius-images: 20px;
          --radius-inputs: 12px;
          --radius-buttons: 12px;
        
          /* Shadows */
          --shadow-xl: rgba(102, 77, 255, 0.2) 0px 4px 100px 0px;
        
          /* Surfaces */
          --surface-void-indigo: #040723;
          --surface-onyx: #000000;
          --surface-abyss-plum: #140f33;
          --surface-glacier: #e4ebf3;
          --surface-paper: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-indigo: #040723;
          --color-abyss-plum: #140f33;
          --color-onyx: #000000;
          --color-glacier: #e4ebf3;
          --color-paper: #ffffff;
          --color-smoke: #999999;
          --color-ash: #808080;
          --color-graphite: #333333;
          --color-charcoal: #222222;
          --color-cinder: #cccccc;
          --color-pulse-blue: #3898ec;
          --color-iris: #755eff;
          --color-lavender-lightning: #aa57ff;
          --color-neon-sprout: #0be014;
          --color-dusk-fade: #47246a;
        
          /* Typography */
          --font-avenir: 'Avenir', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.25;
          --tracking-caption: 0.25px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.69;
          --tracking-body: -0.9px;
          --text-subheading: 20px;
          --leading-subheading: 1.43;
          --tracking-subheading: -0.94px;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.78px;
          --text-heading: 35px;
          --leading-heading: 1.17;
          --tracking-heading: -1.79px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -2.3px;
          --text-display: 60px;
          --leading-display: 1.07;
          --tracking-display: -4.02px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-100: 100px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 25px;
          --radius-3xl-2: 30px;
        
          /* Shadows */
          --shadow-xl: rgba(102, 77, 255, 0.2) 0px 4px 100px 0px;
        }