{
  "name": "Stacklist",
  "displayName": "Stacklist",
  "tagline": "the discovery network for AI",
  "description": "Stacklist is the discovery network for AI — connecting people with the AI products, tools, and services worth their attention. The visual language is minimal and confident: a black-and-white foundation, generous space, Inter throughout, and a single orange accent that signals what matters.",
  "url": "https://www.stacklist.com",
  "version": "1.0",
  "generatedBy": "brandkit",
  "voice": {
    "summary": "Stacklist sounds clear, confident, and human. We explain complex technology in plain language, lead with value over hype, and respect the reader's time. Knowledgeable but never jargon-heavy; direct but never cold. Mechanics: sentence case everywhere (titles, buttons, labels), spell words out (avoid abbreviations and Latin like e.g./etc.), use specific, scannable headings, and keep one term per concept.",
    "do": [
      "Find the right AI tool in minutes, not weeks.",
      "Every listing is verified and ranked by what actually works.",
      "Plain language about complex technology."
    ],
    "dont": [
      "Leverage our revolutionary AI-powered synergy engine to 10x your stack!",
      "The only AI platform you'll ever need.",
      "Unlock next-gen, best-in-class, game-changing solutions."
    ]
  },
  "color": {
    "accent": {
      "fill": "#FF6900",
      "onFill": "#000000",
      "asText": "#BF4D00",
      "contrast": {
        "onFill": {
          "ratio": "7.3:1",
          "rating": "AAA"
        },
        "asTextOnWhite": {
          "ratio": "4.9:1",
          "rating": "AA"
        }
      }
    },
    "primary": {
      "fill": "#000000",
      "onFill": "#FFFFFF",
      "contrast": {
        "onFill": {
          "ratio": "21.0:1",
          "rating": "AAA"
        }
      }
    },
    "brand": [
      {
        "name": "Black",
        "hex": "#000000",
        "oklch": "oklch(0 0 0)",
        "role": "Foundation — logo, headings, body text, primary actions. Pairs with white text (21:1, AAA).",
        "token": "--color-black"
      },
      {
        "name": "Orange",
        "hex": "#FF6900",
        "oklch": "oklch(0.700 0.202 44.4)",
        "role": "Key accent — fills, highlights, active states. Text on orange must be black (7.27:1, AAA), never white (2.89:1, fails).",
        "token": "--accent"
      }
    ],
    "neutral": [
      {
        "name": "Graphite",
        "hex": "#374151",
        "oklch": "oklch(0.37 0.03 257)",
        "role": "Secondary text — descriptions, supporting labels",
        "token": "--graphite"
      },
      {
        "name": "Slate",
        "hex": "#6B7280",
        "oklch": "oklch(0.55 0.02 265)",
        "role": "Tertiary text, captions",
        "token": "--slate"
      },
      {
        "name": "Mist",
        "hex": "#F3F4F6",
        "oklch": "oklch(0.96 0.01 265)",
        "role": "Section backgrounds",
        "token": "--mist"
      },
      {
        "name": "Cloud",
        "hex": "#F9FAFB",
        "oklch": "oklch(0.98 0.00 265)",
        "role": "Page background",
        "token": "--cloud"
      },
      {
        "name": "Platform",
        "hex": "#E5E7EB",
        "oklch": "oklch(0.928 0.006 264)",
        "role": "Background of the Stacklist platform",
        "token": "--platform"
      }
    ],
    "semantic": [
      {
        "name": "Success",
        "hex": "#10B981",
        "oklch": "oklch(0.70 0.17 163)",
        "role": "Confirmations, positive states",
        "token": "--success"
      },
      {
        "name": "Warning",
        "hex": "#F59E0B",
        "oklch": "oklch(0.78 0.16 80)",
        "role": "Attention, caution states",
        "token": "--warning"
      },
      {
        "name": "Error",
        "hex": "#EF4444",
        "oklch": "oklch(0.59 0.22 27)",
        "role": "Errors, destructive actions",
        "token": "--error"
      }
    ]
  },
  "gradient": {
    "brand": "linear-gradient(135deg, #FF6900 0%, #E65C00 100%)",
    "subtle": "linear-gradient(135deg, rgba(255, 105, 0, 0.06) 0%, rgba(255, 105, 0, 0) 100%)",
    "usage": {
      "do": [
        "Use the brand gradient for hero moments, featured cards, and key marketing surfaces.",
        "Use the subtle tint for card backgrounds and hover states.",
        "Place black text on the brand gradient — it meets contrast across both stops."
      ],
      "dont": [
        "Don't run the gradient behind long body copy.",
        "Don't put white text on the gradient — it fails contrast on the lighter end.",
        "Don't introduce other hues — the gradient stays within the orange family."
      ]
    }
  },
  "type": {
    "display": {
      "family": "Inter",
      "googleImport": "Inter:wght@400;500;600;700",
      "description": "Inter at 600–700. Tight tracking on large sizes gives headlines a crisp, modern presence. Used for display sizes, headings, and high-impact moments."
    },
    "body": {
      "family": "Inter",
      "googleImport": "Inter:wght@400;500;600;700",
      "description": "Inter at 400–500. Built for screens, it stays highly legible from captions to long-form reading, with a neutral, contemporary tone. Used for body copy and UI text."
    },
    "scale": [
      {
        "name": "Display XL",
        "size": "72px",
        "weight": 700,
        "font": "display"
      },
      {
        "name": "Display",
        "size": "56px",
        "weight": 700,
        "font": "display"
      },
      {
        "name": "H1",
        "size": "44px",
        "weight": 700,
        "font": "display"
      },
      {
        "name": "H2",
        "size": "36px",
        "weight": 700,
        "font": "display"
      },
      {
        "name": "H3",
        "size": "28px",
        "weight": 600,
        "font": "display"
      },
      {
        "name": "H4",
        "size": "22px",
        "weight": 600,
        "font": "display"
      },
      {
        "name": "Body LG",
        "size": "18px",
        "weight": 400,
        "font": "body"
      },
      {
        "name": "Body",
        "size": "16px",
        "weight": 400,
        "font": "body"
      },
      {
        "name": "Body SM",
        "size": "14px",
        "weight": 400,
        "font": "body"
      },
      {
        "name": "Caption",
        "size": "12px",
        "weight": 500,
        "font": "body"
      },
      {
        "name": "Overline",
        "size": "11px",
        "weight": 700,
        "font": "body"
      }
    ]
  },
  "spacing": [
    {
      "token": "space-1",
      "px": 4
    },
    {
      "token": "space-2",
      "px": 8
    },
    {
      "token": "space-3",
      "px": 12
    },
    {
      "token": "space-4",
      "px": 16
    },
    {
      "token": "space-6",
      "px": 24
    },
    {
      "token": "space-8",
      "px": 32
    },
    {
      "token": "space-12",
      "px": 48
    },
    {
      "token": "space-16",
      "px": 64
    },
    {
      "token": "space-24",
      "px": 96
    }
  ],
  "logos": [
    {
      "name": "Wordmark — Black",
      "description": "Full Stacklist wordmark in black. Use on light backgrounds.",
      "use": "light backgrounds",
      "formats": [
        "png",
        "jpg"
      ],
      "src": "logos/logo-black_2x.png",
      "variants": {
        "png": "logos/logo-black_2x.png",
        "jpg": "logos/logo-black_2x.jpg"
      }
    },
    {
      "name": "Sign — White",
      "description": "Stacklist icon/mark in white. Use on dark backgrounds.",
      "use": "dark backgrounds",
      "formats": [
        "svg",
        "png",
        "jpg"
      ],
      "src": "logos/sign-white.svg",
      "variants": {
        "svg": "logos/sign-white.svg",
        "png": "logos/sign-white_2x.png",
        "jpg": "logos/sign-white.jpg"
      }
    },
    {
      "name": "Sign — White on Black",
      "description": "White icon on a black background. Self-contained mark for app icons, social avatars, and tight placements.",
      "use": "dark backgrounds",
      "formats": [
        "png",
        "jpg"
      ],
      "src": "logos/sign-white-on-black_2x.png",
      "variants": {
        "png": "logos/sign-white-on-black_2x.png",
        "jpg": "logos/sign-white-on-black_2x.jpg"
      }
    },
    {
      "name": "Sign — Circle",
      "description": "White icon on a black circle. Use for circular avatars and chip-style placements.",
      "use": "dark backgrounds",
      "formats": [
        "png"
      ],
      "src": "logos/sign-white-on-black-circle_2x.png",
      "variants": {
        "png": "logos/sign-white-on-black-circle_2x.png"
      }
    }
  ],
  "accessibility": [
    {
      "pair": "White on Black",
      "fg": "#FFFFFF",
      "bg": "#000000",
      "ratio": "21:1",
      "rating": "AAA"
    },
    {
      "pair": "Black on Orange",
      "fg": "#000000",
      "bg": "#FF6900",
      "ratio": "7.27:1",
      "rating": "AAA"
    },
    {
      "pair": "White on Orange",
      "fg": "#FFFFFF",
      "bg": "#FF6900",
      "ratio": "2.89:1",
      "rating": "Fail — never use"
    }
  ]
}
