---
name: Squadeasy
description: "This site effectively demonstrates how to create a warm, approachable brand personality through bold typography, dynamic photography, and vibrant color choices that break conventional corporate design"
version: alpha

colors:
  background: "#E1C19E"
  primary: "#000000"
  secondary: "#666666"
  tertiary: "#FF5A8F"
  neutral: "#E1C19E"
  line: "rgba(0,0,0,0.12)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-2px"
  heading:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.25px"

rounded:
  sm: 4px
  md: 14px
  lg: 100px
  pill: 100px

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

---

## Overview

A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection.

*A friendly community bulletin board with vibrant, overlapping photos and bold, encouraging messages.*

## Colors

Warm and vibrant palette emphasizing human connection and approachability.

- **Background (`#E1C19E`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#666666`)** — uses `ink-soft` token
- **Accent (`#FF5A8F`)** — uses `accent` token
- **Muted (`#E1C19E`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.12)`)** — uses `line` token

## Typography

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

- Use uppercase for all major headlines
- Use extreme weight (900) for primary display text
- Tight letter spacing (-2px) for large headlines

## Layout

Full-width hero section with overlapping, rotated images and centered text

*Rhythm:* Generous padding (40px 24px 140px 24px) creates breathing room around large content blocks.

## Elevation & Depth

- rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px
- Borders: 1px solid black on active elements

## Shapes

- `sm`: 4px
- `md`: 14px
- `lg`: 100px
- `pill`: 100px

## Components

- **button:** Pill-shaped buttons with high-contrast colors (black bg/white text or neon yellow bg/black text)
- **card:** Overlapping, rotated image cards with soft shadows and organic shapes
- **chip:** N/A
- **input:** N/A
- **hero:** Full-width section with dynamic, overlapping images and bold, centered typography

## Do's and Don'ts

**Don't:**
- Don't use a cold, corporate color palette — screenshot shows warm, human-centric colors instead
- Don't use thin, lightweight typography — screenshot shows ultra-bold, high-impact fonts
- Don't create rigid, grid-locked layouts — screenshot shows organic, overlapping, rotated images
- Don't use small, cramped spacing — screenshot shows generous padding and breathing room
- Don't use subtle, muted buttons — screenshot shows high-contrast, pill-shaped CTAs with neon accents
- Don't avoid photography — screenshot uses multiple dynamic, human-focused photos throughout

---

## System Prompt (paste into AI agent)

```
A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection. Key colors include warm beige (#E1C19E) backgrounds, black (#000000) typography, vibrant pink (#FF5A8F) accents, and neon yellow (#E4FF60) highlights. Typography features ultra-bold grotesque-sans for display text with tight letter spacing, and clean humanist-sans for body content. Critical design rules: embrace overlapping, rotated images for organic energy; use extreme typographic weight for maximum impact; maintain generous spacing and breathing room; avoid cold corporate aesthetics, thin fonts, rigid grid layouts, small cramped spacing, subtle buttons, and avoid human photography. The system emphasizes enthusiastic, encouraging communication with action-oriented CTAs.
```