# Joinlava · Design system migration spec

> Source: https://www.joinlava.com  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Joinlava's design system is built on a dark foundation, like a night sky punctuated by the vivid glow of neon light. The multi-color gradient is not mere decoration but a core identifier, representing the platform's energy and the diversity of creative voices it hosts.

**One-liner:** A social audio platform that uses vibrant gradients and bold typography to create an energetic, expressive identity.
**Keywords:** social audio · expressive · vibrant · youthful · creative
**Analogy:** A vibrant neon light show against a midnight sky, representing the energy of diverse voices.

## 2. Color

The system is anchored by a deep, near-black background, providing a canvas for high-contrast white text and a signature multi-color gradient that supplies all accent energy. This gradient defines interactive borders, labels, and key visual moments, avoiding any reliance on solid, single-color accents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#010101` | main background |
| `--bg-soft` | `#1f2023` | card background |
| `--bg-quiet` | `#333333` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#333333` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

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

The principle is clear: vibrancy and energy are communicated through a chromatic gradient, never through isolated hues.

## 3. Typography

Typography establishes a bold, expressive voice. Headlines are set in a tight grotesque-sans with heavy weight and negative tracking for impact, while body text uses a humanist-sans for clear, comfortable reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 53.2px | 1.0 | 900 | -1px | Primary headline, e.g. 'Audio has never been this social' |
| subtitle | 18.2px | 1.5 | 400 | 0px | Sub-headline, e.g. 'Create, curate, & discover stories...' |
| body | 14px | 1.43 | 400 | 0px | General body text and UI elements |
| label | 11px | 1.2 | 700 | 4px | Small caps labels, e.g. 'FIND YOUR VOICE' |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a strict 4px grid, with generous vertical padding that gives content room to breathe against the dark background.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px grid with generous vertical padding (e.g., ~37px) to give elements room to breathe on the dark background.

## 5. Surfaces

Surfaces are defined by deep shadows and subtle borders. A large, diffuse glow creates depth, while thin, light or dark gray lines provide clean structural separation without competing with the gradient accents.

- **Radius:** sm 4px · md 8px · lg 15px · pill 300px
- **Shadows:**
  - None: None
- **Borders:** Primary borders are subtle white or dark grays, often 1px solid, sometimes used to separate grid areas.

## 6. Layout

The layout skeleton is centered and focused, beginning with a commanding single-column hero section. It then expands into a two-column structure to display feature content, maintaining a strong central axis throughout.

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

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

## 7. Motion & Interaction

Motion is subtle and purposeful, serving interaction rather than spectacle. Smooth, quick transitions guide the user through state changes, with gradient elements offering the potential for dynamic, glowing animations.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Subtle hover transitions on interactive elements.
  - Gradient animations or glows on key accent areas like the top border.

- **Hover:** Buttons and interactive elements likely feature subtle color shifts or border glows.
- **Click:** Standard pointer cursor for all primary interactive elements.
- **Transition:** All elements are configured with 'all' transitions for smooth state changes.
- **Keyboard:** Standard tab focus for accessibility.

## 8. Voice & Don'ts

The voice is energetic, confident, and community-focused, matching the visual boldness. Language is direct and action-oriented, avoiding corporate formalism in favor of expressive clarity.

- **Tone:** Energetic, confident, and community-focused.
- **Headline style:** Bold, expressive, and direct, often using large, heavy type.
- **CTA style:** Simple and action-oriented, e.g., 'Get The App'.
- **Avoid:** Formal or overly corporate language. / Muted or monochromatic palettes that lack vibrancy. / Thin, fragile typography that feels weak.

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

The system deliberately forgoes muted palettes, white backgrounds, and fragile typography to preserve its distinct, high-energy character.

## System Prompt (paste into AI tool)

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