{
  "name": "Logo",
  "source": "src/components/Logo.tsx",
  "propsType": "LogoProps",
  "description": "The full lockup: mark + wordmark, matching Figma's `Logo-Ionbase`\n(52:21369).\n\nFigma also has a `Property=Name` axis — wordmark only, no mark — but both\nof its variants currently render the placeholder text \"raza\" rather than\n\"IonBase\", in an unbound raw colour. That is leftover debug content, not a\nreal asset, so it is not implemented here. Reproducing it would ship a\nstranger's name into a design system; extending `LogoMark` alone already\ncovers \"no wordmark\" for the cases that are real.",
  "import": "import { Logo } from 'ionbase-ui';",
  "status": "stable",
  "summary": "The full IonBase lockup — mark plus wordmark.",
  "useWhen": [
    "the product needs to identify itself: header, sign-in page, empty state, marketing surface"
  ],
  "useInstead": [
    {
      "when": "space is tight, or a wordmark already appears nearby",
      "use": "LogoMark"
    },
    {
      "when": "you need any graphic that is not the brand",
      "use": "Icon"
    }
  ],
  "variants": {
    "size": {
      "sm": {
        "use": "the default — a 24px mark, which is what a header bar wants"
      },
      "lg": {
        "use": "a 32px mark — sign-in, splash, or anywhere the brand is the subject"
      }
    },
    "wordmark": {
      "vector": {
        "use": "the default and the safe choice — Figma's serif logotype as frozen artwork, immune to font substitution and visually distinct from the UI type"
      },
      "text": {
        "use": "live, selectable Host Grotesk at `text/tertiary` — for surfaces where the name should behave like text (copyable, searchable) rather than like a mark"
      }
    }
  },
  "a11y": {
    "guarantees": [
      "the wordmark carries the accessible name, so the mark beside it is not announced twice",
      "artwork uses `currentColor` rather than Figma's baked hex, so it themes with the rest of the icon layer"
    ]
  },
  "antiPatterns": [
    {
      "dont": "recolouring the lockup with your own fill",
      "why": "it inherits `icon/default`; overriding it is how a brand mark ends up failing contrast in one theme"
    },
    {
      "dont": "putting the Logo inside a Link with its own text \"IonBase\"",
      "why": "the name is announced twice; label the link, not both"
    }
  ],
  "stylesheet": "src/styles/logo.css",
  "tokens": [
    "--font-family-sans",
    "--font-weight-medium",
    "--icon-default",
    "--spacing-4",
    "--spacing-8",
    "--text-tertiary",
    "--type-body",
    "--type-body-line-height"
  ],
  "props": {
    "size": {
      "type": "LogoSize | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches Figma's `Size` variant: Small (24px mark) or Large (32px).",
      "values": [
        "sm",
        "lg"
      ]
    },
    "wordmark": {
      "type": "LogoWordmark | undefined",
      "required": false,
      "origin": "own",
      "description": "Matches Figma's `Type` variant. `vector` is the serif logotype Figma\ncalls \"Logo\" — what `Header` uses, immune to font substitution and\nvisually distinct from the sans-serif UI type everywhere else. `text` is\nwhat Figma calls \"Icon\": a live `Host Grotesk` run, real and selectable,\nat `text/tertiary` rather than the mark's `icon/default`.",
      "values": [
        "text",
        "vector"
      ]
    }
  },
  "propCounts": {
    "own": 2,
    "aria": 0,
    "dom": 278,
    "other": 0
  }
}