Sprout

# Sprout — Style Reference
> Earthy, shifting canvases

**Theme:** mixed

Sprout embraces a playful, textured aesthetic with a warm, desaturated color palette that shifts between earthy tones, creating distinct spatial zones. Bold, almost cartoonish typography pairs with a more functional, condensed sans-serif, giving the brand a friendly yet authoritative voice. Components feature soft, rounded edges and light borders, suggesting a tactile, approachable interface. The design feels grounded and unconventional, prioritizing character over stark minimalism.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Earth Berry | `#3e0808` | `--color-earth-berry` | Red action color for filled buttons, selected navigation states, and focused conversion moments |
| Sunbeam Yellow | `#f3d468` | `--color-sunbeam-yellow` | Hero background, decorative accents, highlighted UI elements |
| Terracotta | `#f39369` | `--color-terracotta` | Section backgrounds, secondary surface areas, decorative elements |
| Midnight Core | `#000000` | `--color-midnight-core` | Primary text on light backgrounds, strong accents, icon fills |
| Canvas White | `#ffffff` | `--color-canvas-white` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Paper Cream | `#fcf6f1` | `--color-paper-cream` | Subtle surface backgrounds, elevated card backgrounds |
| Stone Gray | `#909090` | `--color-stone-gray` | Muted text, secondary borders, disabled states |
| Ink Wash | `#111111` | `--color-ink-wash` | Alternative dark text, button borders and text on light backgrounds |

## Tokens — Typography

### BrickDisplayPro — Display headlines and prominent feature titles. Its bold, almost irregular character gives the brand a distinctive, playful voice, emphasizing personality over traditional legibility at larger sizes. · `--font-brickdisplaypro`
- **Substitute:** Abril Fatface / Playfair Display
- **Weights:** 400, 600
- **Sizes:** 16px, 51px, 104px
- **Line height:** 0.90, 1.00, 1.14, 1.33
- **Letter spacing:** -0.0350em at 104px, -0.0200em at 51px, -0.0200em at 16px
- **Role:** Display headlines and prominent feature titles. Its bold, almost irregular character gives the brand a distinctive, playful voice, emphasizing personality over traditional legibility at larger sizes.

### SuisseIntl — Body copy, navigation, buttons, and functional text. Its condensed nature and varied weights provide a structured, readable counterpoint to the display font, maintaining clarity across interface elements. · `--font-suisseintl`
- **Substitute:** Inter / Public Sans
- **Weights:** 400, 600, 900
- **Sizes:** 16px, 18px, 19px, 24px
- **Line height:** 1.19, 1.30, 1.33, 1.50, 1.58
- **Letter spacing:** -0.0200em at 24px, -0.0180em at 19px, -0.0100em at 18px
- **OpenType features:** `'tnum'`
- **Role:** Body copy, navigation, buttons, and functional text. Its condensed nature and varied weights provide a structured, readable counterpoint to the display font, maintaining clarity across interface elements.

### Arial — System fallback for general interface text where custom fonts may not be available or for specific button labels. · `--font-arial`
- **Substitute:** Helvetica / system-ui
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Role:** System fallback for general interface text where custom fonts may not be available or for specific button labels.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.5 | -0.16px | `--text-body` |
| body-lg | 18px | 1.58 | -0.18px | `--text-body-lg` |
| subheading | 24px | 1.33 | -0.48px | `--text-subheading` |
| heading | 51px | 1.14 | -1.02px | `--text-heading` |
| display | 104px | 0.9 | -3.64px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** spacious

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Value |
|---------|-------|
| images | 30px |
| buttons | 20px |
| default | 15px |

### Layout

- **Section gap:** 40px
- **Card padding:** 24px
- **Element gap:** 10-24px

## Components

### Ghost Link Button
**Role:** Text-based actions and navigation links.

Transparent background, text in #000000 or #ffffff depending on context, no visible border, 0px border-radius, 0px padding. Uses SuisseIntl at 16px.

### Earth Berry Primary Button
**Role:** Main call-to-action.

Filled with Earth Berry (#3e0808), text in Canvas White (#ffffff), 20px border-radius, 11px vertical padding, 24px horizontal padding. Uses SuisseIntl at 16px.

### Outline Ghost Button
**Role:** Secondary call-to-action or subtle interactive elements.

Transparent background, text color in Earth Berry (#3e0808), 1px solid Earth Berry border, 20px border-radius, 11px vertical padding, 24px horizontal padding. Uses SuisseIntl at 16px.

### Hero Section Card
**Role:** Visual containers within the hero section.

Background in Paper Cream (#fcf6f1), 15px border-radius. Padding of 24px.

### Basic Card
**Role:** Standard content containers.

Background in Canvas White (#ffffff), 15px border-radius, no visible border or shadow. Padding of 24px.

## Do's and Don'ts

### Do
- Use Earth Berry (#3e0808) as the dominant background for body sections and primary calls to action.
- Employ BrickDisplayPro for all primary headings and display text, leveraging its distinct character at sizes 51px and 104px.
- Apply a 15px border-radius to general UI elements like cards and image containers for a softened, approachable feel.
- Ensure interactive elements like buttons consistently use a 20px border-radius.
- Utilize SuisseIntl for all body text, navigation items, and button labels, maintaining a compact and clear typographic hierarchy.
- Implement distinct background changes between sections, alternating between Earth Berry (#3e0808), Sunbeam Yellow (#f3d468), Terracotta (#f39369), and Canvas White (#ffffff).

### Don't
- Avoid using generic system fonts for headlines; BrickDisplayPro is key to brand identity.
- Do not deviate from the specified border-radii of 15px (default) and 20px (buttons) to preserve the brand's soft aesthetic.
- Refrain from introducing new accent colors; rely on Earth Berry, Sunbeam Yellow, and Terracotta to define highlights and section shifts.
- Do not apply heavy shadows or complex elevation; the system prefers subtle borders or background shifts to define layers.
- Avoid excessive letter-spacing on body text; SuisseIntl is designed for slightly tighter tracking (e.g., -0.0100em at 18px).
- Do not use dark text colors on Earth Berry (#3e0808) backgrounds; always use Canvas White (#ffffff) for readability.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Earth Berry Canvas | `#3e0808` | Base page background for dark-themed sections. |
| 1 | Terracotta Section | `#f39369` | Secondary section background, providing a warm contrast. |
| 2 | Sunbeam Yellow Hero | `#f3d468` | Prominent hero background, drawing immediate attention. |
| 3 | Paper Cream Card | `#fcf6f1` | Elevated card and container backgrounds on colored sections. |
| 4 | Canvas White Content | `#ffffff` | Primary content background for light-themed blocks and text-heavy areas. |

## Imagery

The site uses a mix of candid product screenshots featuring diverse users and abstract graphic elements. Product screenshots are contained within soft, rounded frames (15-30px radius) and often show video calls or interfaces with minimal contextual background, focusing on the human element. Icons are minimal, outlined, and monochromatic, primarily in Midnight Core (#000000) or Canvas White (#ffffff), serving functional purposes without drawing excessive attention. Imagery is used to explain features and showcase the product's social aspect, often taking up significant visual space.

## Layout

The page primarily uses a full-bleed layout, where hero sections and color bands stretch across the entire viewport width. Content within these sections often centers or uses alternating text-left/image-right compositions. Vertical spacing is generous, with 'sectionGap: 40px' creating clear visual breaks between different content blocks. The hero section is full-bleed, often containing centered text or a split visual, setting a distinct tone with changing background colors. Navigation is a sticky top bar with a clear call-to-action button, ensuring consistent access.

## Agent Prompt Guide

### Quick Color Reference
text: #000000 (on light backgrounds), #ffffff (on dark backgrounds)
background: #3e0808
border: #111111 (neutral), #3e0808 (primary action)
accent: #f3d468, #f39369
primary action: #3e0808 (outlined action border)

### 3-5 Example Component Prompts
1. Create a hero section: Sunbeam Yellow (#f3d468) full-bleed background. Centered headline 'Your space, Your call' using BrickDisplayPro at 104px, weight 400, color Midnight Core (#000000), letter-spacing -3.64px. Subtext 'Create a virtual space to meet, chat, and play with your favorite people.' using SuisseIntl at 18px, weight 400, color Midnight Core (#000000), letter-spacing -0.18px.
2. Create an Outlined Primary Action: Transparent background, #3e0808 border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.
3. Implement a Text Card: Canvas White (#ffffff) background, radius 15px, 24px padding. Headline 'Pull up a chair Facedock' using BrickDisplayPro at 51px, weight 600, color Earth Berry (#3e0808), letter-spacing -1.02px. Body text 'Facedocks are flexible, resizable, rearrangeable frames.' using SuisseIntl at 16px, weight 400, color Earth Berry (#3e0808), letter-spacing -0.16px.
4. Create an Outline Ghost Button: Transparent background, border 1px solid Earth Berry (#3e0808), text color Earth Berry (#3e0808). Radius 20px, 11px vertical padding, 24px horizontal padding. Label 'Try it with your face' using SuisseIntl at 16px, weight 400.

## Similar Brands

- **Framer** — Bold, expressive display typography coupled with a more functional sans-serif for UI elements.
- **Supabase** — Shifting background colors between sections to demarcate content blocks, using distinct earthy tones.
- **Linear** — Subtle border-radii on interactive elements and containers, creating a soft but not overly rounded aesthetic.
- **Read.cv** — Playful, almost quirky font choices for headlines that feel custom and convey personality.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-earth-berry: #3e0808;
  --color-sunbeam-yellow: #f3d468;
  --color-terracotta: #f39369;
  --color-midnight-core: #000000;
  --color-canvas-white: #ffffff;
  --color-paper-cream: #fcf6f1;
  --color-stone-gray: #909090;
  --color-ink-wash: #111111;

  /* Typography — Font Families */
  --font-brickdisplaypro: 'BrickDisplayPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.58;
  --tracking-body-lg: -0.18px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.48px;
  --text-heading: 51px;
  --leading-heading: 1.14;
  --tracking-heading: -1.02px;
  --text-display: 104px;
  --leading-display: 0.9;
  --tracking-display: -3.64px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 24px;
  --element-gap: 10-24px;

  /* Border Radius */
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;

  /* Named Radii */
  --radius-images: 30px;
  --radius-buttons: 20px;
  --radius-default: 15px;

  /* Surfaces */
  --surface-earth-berry-canvas: #3e0808;
  --surface-terracotta-section: #f39369;
  --surface-sunbeam-yellow-hero: #f3d468;
  --surface-paper-cream-card: #fcf6f1;
  --surface-canvas-white-content: #ffffff;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-earth-berry: #3e0808;
  --color-sunbeam-yellow: #f3d468;
  --color-terracotta: #f39369;
  --color-midnight-core: #000000;
  --color-canvas-white: #ffffff;
  --color-paper-cream: #fcf6f1;
  --color-stone-gray: #909090;
  --color-ink-wash: #111111;

  /* Typography */
  --font-brickdisplaypro: 'BrickDisplayPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.58;
  --tracking-body-lg: -0.18px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.48px;
  --text-heading: 51px;
  --leading-heading: 1.14;
  --tracking-heading: -1.02px;
  --text-display: 104px;
  --leading-display: 0.9;
  --tracking-display: -3.64px;

  /* Spacing */
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-xl: 15px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
}
```