{
  "id": "drizzle",
  "title": "Drizzle ORM",
  "url": "https://orm.drizzle.team",
  "tags": [
    "devtools",
    "orm"
  ],
  "colors": {
    "principle": "High contrast on a clean white background with subtle gray structural elements.",
    "bg": "#FFFFFF",
    "bgSoft": "#FAFAFA",
    "bgQuiet": "#F1F2F3",
    "ink": "#222222",
    "inkSoft": "#444444",
    "muted": "#71687B",
    "mutedSoft": null,
    "accent": null,
    "line": "rgba(33, 39, 46, 0.12)"
  },
  "typography": {
    "rules": [
      "System sans-serif stack is the primary typeface.",
      "Monospace font is used for code snippets and technical labels.",
      "Handwritten font is used selectively for playful annotations."
    ],
    "scaleUses": [
      "Hero headlines",
      "Section headlines",
      "General text",
      "Captions and metadata"
    ],
    "display": "sans-serif",
    "body": "sans-serif",
    "mono": "monospace",
    "scale": [
      {
        "token": "display",
        "size": 48,
        "lh": 1.1,
        "weight": 700,
        "ls": "-0.5px"
      },
      {
        "token": "h2",
        "size": 32,
        "lh": 1.2,
        "weight": 600,
        "ls": "0"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.5,
        "weight": 400,
        "ls": "0"
      },
      {
        "token": "small",
        "size": 12,
        "lh": 1.5,
        "weight": 400,
        "ls": "0"
      }
    ]
  },
  "spacing": {
    "rhythm": "Consistent 4px base grid with generous padding in sections.",
    "base": 4,
    "scale": [
      4,
      8,
      12,
      16,
      20,
      24,
      32,
      40,
      64
    ]
  },
  "surfaces": {
    "shadows": [
      "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px",
      "rgba(0, 0, 0, 0.075) 0px 2px 4px 0px",
      "rgb(255, 255, 255) 0px 0px 1px 1px inset"
    ],
    "borders": "1px solid rgb(229, 231, 235)",
    "radius": {
      "sm": 2,
      "md": 8,
      "lg": 20,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Centered content container with responsive stacking.",
    "container": 1200,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Smooth color transitions on hover",
      "Opacity fade-ins"
    ],
    "durations": {
      "micro": 200,
      "small": 300,
      "medium": 800
    },
    "easing": "ease-in-out"
  },
  "identity": {
    "keywords": [
      "ORM",
      "TypeScript",
      "JavaScript",
      "Database",
      "Developer"
    ],
    "analogy": "Like a clean, fast toolkit for developers to manage data efficiently.",
    "oneLiner": "A modern, fast ORM for TypeScript and JavaScript."
  },
  "components": {
    "button": "Ghost or outlined styles with rounded corners.",
    "card": "White surface with subtle border and soft shadow.",
    "chip": "Small rounded badge with background color.",
    "input": "Clean outlined input with rounded corners.",
    "hero": "Large left-aligned text with accompanying playful illustration."
  },
  "interaction": {
    "hover": "Subtle background color change or color transition.",
    "click": "No dramatic change, standard pointer cursor.",
    "transition": "All properties transition smoothly over 0.2s.",
    "keyboard": "Standard focus outlines."
  },
  "voice": {
    "tone": "Technical but accessible, slightly playful.",
    "headlineStyle": "Direct, action-oriented, and concise.",
    "ctaStyle": "Simple text links or outlined buttons.",
    "avoid": [
      "Overly corporate language",
      "Dense walls of text without visual breaks",
      "Aggressive or loud colors"
    ]
  },
  "donts": [
    "don't use dark mode — screenshot shows a bright white background",
    "don't use gradient backgrounds — screenshot shows flat solid colors",
    "don't use rounded pill buttons everywhere — screenshot shows standard rectangular or slightly rounded buttons",
    "don't use drop shadows on all elements — screenshot shows mostly flat surfaces with subtle borders",
    "don't use a single high-chroma accent color — screenshot shows a mostly monochrome palette",
    "don't use decorative serifs — screenshot shows clean sans-serif typography"
  ],
  "systemPrompt": "This is a developer tools SaaS site for an ORM, featuring a clean, minimalist design with a white background. Key colors include deep charcoal text (#222222) and light gray borders (#E5E7EB). Typography uses a standard sans-serif stack for body text and a monospace stack for code. The design relies on generous white space and subtle borders rather than heavy shadows. Critical donts: don't use dark mode, don't add gradient backgrounds, and don't use decorative fonts. The layout is centered and responsive, with a focus on clear hierarchy and readability."
}