# Sprout Place · Design system migration spec

> Source: https://sprout.place  ·  Curated by OpenDesign  ·  en

> Worth including for its unique, warm personality and effective use of high-contrast serif typography in a modern social context.

## 1. Identity DNA

Sprout Place establishes itself as a digital environment whose architecture is intentionally social. The system is built around the analogy of a physical hangout space—warm, inviting, and structured for spontaneous interaction rather than solitary browsing.

**One-liner:** A warm, playful platform for creating virtual hangout spaces with friends.
**Keywords:** social · collaborative · virtual space · playful · warm
**Analogy:** A playful, inviting digital hangout space for friends.

## 2. Color

The palette is built on a foundation of warm, high-contrast earth tones. A dominant mustard yellow provides energetic highlights against a deep burgundy base, creating a vibrant yet grounded feel.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F3D468` | main background |
| `--bg-soft` | `#FCF6F1` | card background |
| `--ink` | `#3E0808` | body text |
| `--muted` | `#F3D468` | placeholder |
| `--muted-soft` | `#FCF6F1` | weak hint |
| `--accent` | `#F39369` | single accent |
| `--line` | `rgba(62,8,8,1.0)` | divider |

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

The principle is warmth and high contrast, avoiding any clinical or cool-toned alternatives.

## 3. Typography

Typographic voice is split between a high-contrast didone serif for display headlines and a clean humanist sans-serif for body text. This pairing establishes a clear hierarchy, using the serif's drama for emotional impact and the sans-serif's clarity for legible content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 104px | 1.0 | 400 | -2px | Hero headline |
| headline | 24px | 1.33 | 400 | -0.32px | Subheadline / navigation |
| body | 16px | 1.33 | 400 | -0.32px | Default text |

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

## 4. Spacing

Spacing follows an 8px base grid, creating a predictable rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with generous vertical spacing between sections (96px).

## 5. Surfaces

Surfaces are defined by soft depth and clear boundaries. Subtle shadows lift interactive elements, while thin, solid borders in a dark burgundy hue provide crisp definition without harshness.

- **Radius:** sm 4px · md 8px · lg 15px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 4px 10px 0px
- **Borders:** 1px solid rgba(62,8,8,1.0)

## 6. Layout

The layout skeleton consists of full-width sections with centered content containers. Generous vertical padding between these sections creates breathing room and a clear, scrollable rhythm.

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

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

## 7. Motion & Interaction

Motion philosophy prioritizes calm, perceptible transitions over flashy effects. Opacity shifts and smooth hover states are timed between 0.25s and 0.75s, ensuring feedback feels responsive but never jarring.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Opacity transitions on scroll (0.75s linear).
  - Smooth hover states on interactive elements (0.25s linear).

- **Hover:** Cursor changes to pointer on interactive elements.
- **Click:** Subtle opacity or color shift.
- **Transition:** Smooth transitions for opacity and color (0.25s to 0.75s).
- **Keyboard:** Standard focus states implied by pointer cursor on links/buttons.

## 8. Voice & Don'ts

The editorial voice is inviting, casual, and playful, matching the platform's social purpose. Language is direct and benefit-oriented, using short, evocative headlines.

- **Tone:** Inviting, casual, and playful.
- **Headline style:** Bold, short, and evocative ('Your space, Your call').
- **CTA style:** Direct and benefit-oriented ('Get Sprout for free').
- **Avoid:** Formal corporate language / Overly technical jargon / Dense text blocks

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

The system deliberately avoids formal corporate language, dense text blocks, and any cold or technical tone.

## System Prompt (paste into AI tool)

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