{
  "id": "squadeasy",
  "title": "Squadeasy",
  "url": "https://www.squadeasy.com",
  "tags": [
    "Consumer",
    "Friendly",
    "Mobile UI",
    "App UI",
    "Warm"
  ],
  "colors": {
    "principle": "Warm and vibrant palette emphasizing human connection and approachability.",
    "bg": "#E1C19E",
    "bgSoft": null,
    "bgQuiet": null,
    "ink": "#000000",
    "inkSoft": "#666666",
    "muted": "#E1C19E",
    "mutedSoft": null,
    "accent": "#FF5A8F",
    "line": "rgba(0,0,0,0.12)"
  },
  "typography": {
    "rules": [
      "Use uppercase for all major headlines",
      "Use extreme weight (900) for primary display text",
      "Tight letter spacing (-2px) for large headlines"
    ],
    "scaleUses": [
      "Hero headline",
      "Section headline",
      "Paragraphs and UI text"
    ],
    "display": "grotesque-sans",
    "body": "humanist-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 80,
        "lh": 1.0,
        "weight": 900,
        "ls": "-2px"
      },
      {
        "token": "heading",
        "size": 56,
        "lh": 1.0,
        "weight": 700,
        "ls": "-1px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.3,
        "weight": 400,
        "ls": "-0.25px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Generous padding (40px 24px 140px 24px) creates breathing room around large content blocks.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [
      "rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px"
    ],
    "borders": "1px solid black on active elements",
    "radius": {
      "sm": 4,
      "md": 14,
      "lg": 100,
      "pill": 100
    }
  },
  "layout": {
    "skeleton": "Full-width hero section with overlapping, rotated images and centered text",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Transform animations for image rotations (0.2s)",
      "Opacity fades for section reveals (0.4s - 0.8s)"
    ],
    "durations": {
      "micro": 220,
      "small": 400,
      "medium": 800
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "employee engagement",
      "approachable",
      "dynamic",
      "connection",
      "warm"
    ],
    "analogy": "A friendly community bulletin board with vibrant, overlapping photos and bold, encouraging messages.",
    "oneLiner": "A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection."
  },
  "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"
  },
  "interaction": {
    "hover": "Scale transform on interactive elements",
    "click": "Immediate visual feedback",
    "transition": "All properties transitioned (all 0.2s)",
    "keyboard": "Visible focus states on interactive elements"
  },
  "voice": {
    "tone": "Enthusiastic, encouraging, and human-centric",
    "headlineStyle": "Bold, uppercase declarations that create urgency and excitement",
    "ctaStyle": "Clear, action-oriented (DEMANDER UNE DÉMO) with directional arrows",
    "avoid": [
      "Corporate jargon",
      "Passive voice",
      "Small, timid typography"
    ]
  },
  "donts": [
    "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"
  ],
  "systemPrompt": "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."
}