{
  "id": "depot",
  "title": "Depot",
  "url": "https://depot.dev",
  "tags": [
    "dev",
    "infra"
  ],
  "colors": {
    "principle": "Deep dark backgrounds create a focused environment for technical content, with vibrant green accents highlighting speed and performance.",
    "bg": "#04040B",
    "bgSoft": "#121113",
    "bgQuiet": "#323035",
    "ink": "#EEEFF0",
    "inkSoft": "#B5B2BC",
    "muted": "#7C7A85",
    "mutedSoft": "#323035",
    "accent": "#71D083",
    "line": "rgba(60, 57, 63, 1.0)"
  },
  "typography": {
    "rules": [
      "Display headlines use negative letter-spacing for a tight, modern feel",
      "Body text maintains comfortable line-height for readability",
      "Monospace font used for technical data and code-like elements"
    ],
    "scaleUses": [
      "Hero headline",
      "Section headings",
      "Main content",
      "Supporting text",
      "Labels and metadata"
    ],
    "display": "humanist-sans",
    "body": "humanist-sans",
    "mono": "monospace",
    "scale": [
      {
        "token": "display",
        "size": 56,
        "lh": 1.0,
        "weight": 700,
        "ls": "-1.2px"
      },
      {
        "token": "headline",
        "size": 24,
        "lh": 1.2,
        "weight": 500,
        "ls": "-0.5px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.5,
        "weight": 400,
        "ls": "0px"
      },
      {
        "token": "small",
        "size": 14,
        "lh": 1.4,
        "weight": 400,
        "ls": "0px"
      },
      {
        "token": "micro",
        "size": 12,
        "lh": 1.3,
        "weight": 500,
        "ls": "0.3px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Consistent 4px base grid with logical spacing progression",
    "base": 4,
    "scale": [
      4,
      8,
      12,
      16,
      24,
      32,
      48,
      64,
      96
    ]
  },
  "surfaces": {
    "shadows": [
      "0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset",
      "0px 10px 15px -3px rgba(0, 0, 0, 0.1)",
      "0px 4px 6px -4px rgba(0, 0, 0, 0.1)"
    ],
    "borders": "1px solid rgba(60, 57, 63, 1.0)",
    "radius": {
      "sm": 4,
      "md": 8,
      "lg": 12,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Centered content with generous whitespace, organized in clear vertical sections",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Smooth color transitions for interactive elements",
      "Opacity changes for hover states",
      "Transform animations for micro-interactions"
    ],
    "durations": {
      "micro": 220,
      "small": 400,
      "medium": 800
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "Developer Tools",
      "Performance",
      "CI/CD",
      "Speed",
      "Infrastructure"
    ],
    "analogy": "A high-performance engine for modern development pipelines",
    "oneLiner": "Depot accelerates every part of your build pipeline."
  },
  "components": {
    "button": "Pill-shaped primary buttons with green background, secondary buttons with subtle borders",
    "card": "Dark cards with subtle borders and rounded corners, often containing performance metrics",
    "chip": "Small pill-shaped labels for status indicators and categories",
    "input": "Dark input fields with subtle borders and rounded corners",
    "hero": "Full-width hero section with large headline, descriptive text, and prominent CTAs"
  },
  "interaction": {
    "hover": "Subtle color changes and opacity adjustments",
    "click": "Immediate visual feedback through color transitions",
    "transition": "All properties transition with 0.3s duration using cubic-bezier easing",
    "keyboard": "Standard keyboard navigation with visible focus states"
  },
  "voice": {
    "tone": "Direct, confident, and technically precise",
    "headlineStyle": "Short, impactful statements that emphasize speed and efficiency",
    "ctaStyle": "Clear action-oriented labels with supporting information",
    "avoid": [
      "Jargon without explanation",
      "Overly casual language",
      "Excessive exclamation marks"
    ]
  },
  "donts": [
    "Don't use bright primary colors — screenshot shows muted green accent on dark background",
    "Don't use decorative fonts — screenshot shows clean humanist-sans typography",
    "Don't add heavy shadows or gradients — screenshot shows minimal depth effects",
    "Don't use excessive animations — screenshot shows subtle, purposeful transitions",
    "Don't overcrowd the layout — screenshot shows generous whitespace and clear hierarchy",
    "Don't use complex navigation patterns — screenshot shows simple, logical menu structure"
  ],
  "systemPrompt": "Depot is a developer tool platform for CI/CD acceleration with a dark, performance-focused aesthetic. The design uses deep charcoal backgrounds (#04040B) with vibrant green accents (#71D083) to highlight speed and efficiency. Typography is humanist-sans for display and body text, with monospace for technical data. The layout is clean and centered with generous whitespace, organized in clear vertical sections. Key interactions include smooth color transitions and subtle hover effects. The voice is direct and technically precise, avoiding jargon while maintaining confidence. Critical design rules: use muted green accents sparingly, maintain dark color consistency, keep typography clean and readable, avoid excessive animations, preserve generous spacing, and maintain clear visual hierarchy."
}