---
name: Getcoco
description: "A great example of a modern, playful SaaS landing page that uses bold typography and vibrant accents to create a friendly and empowering brand voice."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.6)"
  tertiary: "#23C4F7"
  neutral: "#808080"
  bg-soft: "#F7F7F7"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "-0.32px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "0"

rounded:
  sm: 3px
  md: 16px
  lg: 24px
  pill: 100px

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

---

## Overview

A playful, utility-focused SaaS landing page that uses bold typography and vibrant accents to market a social selling app.

*A vibrant, approachable toolkit for modern social entrepreneurs.*

## Colors

High-contrast neutral base with a single vibrant electric blue accent for primary actions.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.6)`)** — uses `ink-soft` token
- **Accent (`#23C4F7`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Use Geometric Sans (GT America) for all text.
- Use bold weight (700) for headlines and medium weight (500) for body text.

## Layout

Standard centered container layout with generous vertical spacing.

*Rhythm:* Consistent padding of 24px, 40px, and 48px is used to separate content blocks.

## Elevation & Depth

- 0px 1px 3px 0px rgba(0, 0, 0, 0.1)
- 0px 0px 0px 1px rgba(0, 0, 0, 0.1)
- Borders: 1px solid rgba(0,0,0,0.1) for interactive elements like inputs.

## Shapes

- `sm`: 3px
- `md`: 16px
- `lg`: 24px
- `pill`: 100px

## Components

- **button:** Primary CTA is a pill-shaped button with a vibrant blue background and white text. Secondary is a plain text link.
- **card:** Cards use very large border-radius (24px-32px) and minimal borders.
- **chip:** Status indicators in the app UI use pill-shaped backgrounds with vibrant colors.
- **input:** Inputs feature a subtle inset shadow and rounded corners.
- **hero:** A bold, centered headline followed by a large video/media container and descriptive text.

## Do's and Don'ts

**Don't:**
- Don't use small, tight fonts — screenshot shows large, bold geometric type.
- Don't use muted, earthy palettes — screenshot shows a bright, high-contrast palette with vibrant accents.
- Don't use sharp corners — screenshot shows highly rounded, pill-like shapes.
- Don't use thin, light weights — screenshot shows medium to bold weights for clarity.
- Don't use dark mode — screenshot shows a predominantly white background with dark text.
- Don't use complex, busy layouts — screenshot shows a clean, spacious, single-column layout.

---

## System Prompt (paste into AI agent)

```
This is a SaaS landing page for a social selling app called Coco. It features a clean, white background with bold, geometric sans-serif typography (GT America). Key hex colors include #FFFFFF for the background, #000000 for the main ink, and a vibrant electric blue (#23C4F7) for primary CTAs and accents. The layout is spacious with generous padding (24px-48px). Critical donts: do not use small font sizes, do not use sharp corners, and do not use a dark color scheme. The design is playful, utility-focused, and high-contrast.
```