---
name: Joinlava
description: "The site is an excellent example of a modern, expressive dark-mode design that uses a vibrant gradient to create a unique and memorable brand identity."
version: alpha

colors:
  background: "#010101"
  primary: "#ffffff"
  neutral: "#333333"
  bg-soft: "#1f2023"
  bg-quiet: "#333333"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 53.2px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-1px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 18.2px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "4px"

rounded:
  sm: 4px
  md: 8px
  lg: 15px
  pill: 300px

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

---

## Overview

A social audio platform that uses vibrant gradients and bold typography to create an energetic, expressive identity.

*A vibrant neon light show against a midnight sky, representing the energy of diverse voices.*

## Colors

A dark mode foundation using a vibrant, multi-color gradient to denote energy and creativity.

- **Background (`#010101`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- Headlines use a tight grotesque-sans with heavy weight (900) and negative tracking.
- Body text uses a highly readable humanist-sans at 14px.
- Accent labels use a wider tracked uppercase style with a rainbow gradient fill.

## Layout

Centered single-column layout for the hero, transitioning to a two-column feature layout.

*Rhythm:* A consistent 4px grid with generous vertical padding (e.g., ~37px) to give elements room to breathe on the dark background.

## Elevation & Depth

- None: None
- Borders: Primary borders are subtle white or dark grays, often 1px solid, sometimes used to separate grid areas.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 15px
- `pill`: 300px

## Components

- **button:** Pill-shaped buttons with a black background, white text, and a 1px multi-color gradient border.
- **card:** Rounded cards (15-20px radius) often containing imagery or UI mockups, sometimes with deep drop shadows.
- **chip:** Small, rounded tags or labels, often with a dark background and light text.
- **input:** Minimalist input fields with dark backgrounds and subtle borders.
- **hero:** A large, centered section featuring bold, oversized white text on a dark background, accented by colorful floating elements.

## Do's and Don'ts

**Don't:**
- don't use a white background — screenshot shows a deep black (#010101) background.
- don't use a serif font for headlines — screenshot shows a heavy, tight grotesque-sans.
- don't use solid, single-color accent buttons — screenshot shows buttons with multi-color gradient borders.
- don't use wide, airy tracking on headlines — screenshot shows tight, negative letter-spacing (-1px).
- don't use delicate, thin font weights for body text — screenshot shows clear, readable medium weights.
- don't use a single, static color for branding — screenshot shows a prominent multi-color gradient as a key identifier.

---

## System Prompt (paste into AI agent)

```
Design a vibrant, dark-mode consumer audio app. Use a deep black (#010101) background with bright white (#ffffff) text. Incorporate a signature multi-color gradient for accents, borders, and labels. Typography should be bold and expressive, using a heavy grotesque-sans for headlines with tight tracking. Use a humanist-sans for body text at 14px. Key elements include pill-shaped buttons with gradient borders, generous vertical spacing, and rounded UI cards (15-20px radius). Critical donts: never use a white background, never use serif fonts for headlines, never use solid single-color buttons, and never use wide tracking on display type.
```