---
name: Sprout Place
description: "Worth including for its unique, warm personality and effective use of high-contrast serif typography in a modern social context."
version: alpha

colors:
  background: "#F3D468"
  primary: "#3E0808"
  tertiary: "#F39369"
  neutral: "#F3D468"
  bg-soft: "#FCF6F1"
  muted-soft: "#FCF6F1"
  line: "rgba(62,8,8,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 104px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2px"
  headline:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.32px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "-0.32px"

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

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

---

## Overview

A warm, playful platform for creating virtual hangout spaces with friends.

*A playful, inviting digital hangout space for friends.*

## Colors

Warm, high-contrast earth tones with a dominant mustard yellow and dark burgundy.

- **Background (`#F3D468`)** — uses `bg` token
- **Primary text (`#3E0808`)** — uses `ink` token
- **Accent (`#F39369`)** — uses `accent` token
- **Muted (`#F3D468`)** — uses `muted` token
- **Borders (`rgba(62,8,8,1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans

- Display headlines use a high-contrast didone serif with tight tracking.
- Body text uses a clean humanist sans-serif.
- Navigation and secondary text are smaller sans-serif weights.

## Layout

Full-width sections with centered content containers, generous vertical padding.

*Rhythm:* 8px base grid with generous vertical spacing between sections (96px).

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 4px 10px 0px
- Borders: 1px solid rgba(62,8,8,1.0)

## Shapes

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

## Components

- **button:** Dark burgundy pill-shaped button with white text and hover transitions.
- **card:** Rounded containers (15px radius) for interface mockups and user avatars.
- **chip:** Small, pill-shaped tags for user names (e.g., 'May-Li', 'Julius').
- **input:** Light background with subtle borders and rounded corners.
- **hero:** Large centered text over a solid background with floating avatar elements.

## Do's and Don'ts

**Don't:**
- don't use a cold, clinical color palette — screenshot shows a warm, dominant mustard yellow (#F3D468) and dark burgundy (#3E0808).
- don't use a purely geometric sans-serif for headlines — screenshot shows a high-contrast didone serif for display text.
- don't use small, cramped spacing — screenshot shows generous padding (96px) and clear visual separation between sections.
- don't use sharp, 0px corners on primary containers — screenshot shows consistent use of rounded corners (15px+).
- don't use a flat, gray-scale interface — screenshot shows a vibrant, high-contrast warm palette with colorful accents.
- don't use dense, paragraph-heavy layouts — screenshot shows short, punchy headlines and minimal body text.

---

## System Prompt (paste into AI agent)

```
Sprout is a playful, social platform for creating virtual hangout spaces. The design is defined by a warm, high-contrast palette of mustard yellow (#F3D468) and dark burgundy (#3E0808), with secondary whites and oranges. Typography uses a high-contrast didone serif for display headlines and a clean humanist sans-serif for body text. The layout is spacious and centered, with generous vertical padding and rounded containers. Key critical donts: don't use a cold or clinical color scheme, don't use purely geometric sans-serifs for headlines, and don't use sharp, unrounded corners on primary UI elements.
```