## Wordmark

The full "/baseline" text logo. Use the **Lime** variant on dark backgrounds (preferred). Use **Light** on dark backgrounds where color is not desired. Use **Dark** on light backgrounds.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-6 not-prose">
  <BrandAsset name="Lime" svg="/brand/logo-lime.svg" png="/brand/logo-lime.png" />

  <BrandAsset name="Light" svg="/brand/logo-light.svg" png="/brand/logo-light.png" />

  <BrandAsset name="Dark" svg="/brand/logo-dark.svg" png="/brand/logo-dark.png" preview="light" />
</div>

## Logomark

The "/" slash icon, used as an avatar or compact brand mark.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-6 not-prose">
  <BrandAsset name="Lime" svg="/brand/logomark-lime.svg" png="/brand/logomark-lime.png" />

  <BrandAsset name="Light" svg="/brand/logomark-light.svg" png="/brand/logomark-light.png" />

  <BrandAsset name="Dark" svg="/brand/logomark-dark.svg" png="/brand/logomark-dark.png" preview="light" />
</div>

## Token Icons

Official \$B token icons for exchange listings, portfolio trackers, and DeFi integrations.

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6 not-prose">
  <BrandAsset name="Circle" svg="/brand/B-token-circle.svg" png="/brand/B-token-circle.png" />

  <BrandAsset name="Square" svg="/brand/B-token-square.svg" png="/brand/B-token-square.png" />
</div>

## Colors

<table className="not-prose w-full my-6">
  <thead>
    <tr className="border-b border-[#2a2a2a]">
      <th className="text-left py-3 pr-4 font-semibold text-[#e0e0e0]">
        Role
      </th>

      <th className="text-left py-3 pr-4 font-semibold text-[#e0e0e0]">
        Hex
      </th>

      <th className="py-3 pr-4 font-semibold text-[#e0e0e0]" />

      <th className="text-left py-3 font-semibold text-[#e0e0e0]">
        Usage
      </th>
    </tr>
  </thead>

  <tbody>
    <tr className="border-b border-[#2a2a2a]">
      <td className="py-3 pr-4 text-[#b8b8b8]">
        Primary (Baselime)
      </td>

      <td className="py-3 pr-4 font-mono" style={{ color: '#BDEE63' }}>
        \#BDEE63
      </td>

      <td className="py-3 pr-4">
        <div className="w-10 h-5 rounded" style={{ backgroundColor: '#BDEE63' }} />
      </td>

      <td className="py-3 text-[#b8b8b8]">
        Brand color, buttons, accents, links
      </td>
    </tr>

    <tr className="border-b border-[#2a2a2a]">
      <td className="py-3 pr-4 text-[#b8b8b8]">
        Background
      </td>

      <td className="py-3 pr-4 font-mono">
        <span className="rounded px-1.5 py-0.5" style={{ color: '#111111', backgroundColor: '#cccccc' }}>#111111</span>
      </td>

      <td className="py-3 pr-4">
        <div className="w-10 h-5 rounded border border-[#2a2a2a]" style={{ backgroundColor: '#111111' }} />
      </td>

      <td className="py-3 text-[#b8b8b8]">
        Page and card backgrounds
      </td>
    </tr>

    <tr className="border-b border-[#2a2a2a]">
      <td className="py-3 pr-4 text-[#b8b8b8]">
        Foreground
      </td>

      <td className="py-3 pr-4 font-mono" style={{ color: '#D9D9D9' }}>
        \#D9D9D9
      </td>

      <td className="py-3 pr-4">
        <div className="w-10 h-5 rounded" style={{ backgroundColor: '#D9D9D9' }} />
      </td>

      <td className="py-3 text-[#b8b8b8]">
        Body text
      </td>
    </tr>

    <tr className="border-b border-[#2a2a2a]">
      <td className="py-3 pr-4 text-[#b8b8b8]">
        Border
      </td>

      <td className="py-3 pr-4 font-mono">
        <span className="rounded px-1.5 py-0.5" style={{ color: '#2A2A2A', backgroundColor: '#ccc' }}>#2A2A2A</span>
      </td>

      <td className="py-3 pr-4">
        <div className="w-10 h-5 rounded border border-[#444]" style={{ backgroundColor: '#2A2A2A' }} />
      </td>

      <td className="py-3 text-[#b8b8b8]">
        Subtle borders and dividers
      </td>
    </tr>

    <tr>
      <td className="py-3 pr-4 text-[#b8b8b8]">
        Muted foreground
      </td>

      <td className="py-3 pr-4 font-mono" style={{ color: '#9CA3AF' }}>
        \#9CA3AF
      </td>

      <td className="py-3 pr-4">
        <div className="w-10 h-5 rounded" style={{ backgroundColor: '#9CA3AF' }} />
      </td>

      <td className="py-3 text-[#b8b8b8]">
        Secondary text, captions
      </td>
    </tr>
  </tbody>
</table>

## Usage Guidelines

* **Preferred placement**: Use the lime wordmark or logomark on dark backgrounds (`#111111` or darker).
* **Minimum clear space**: Maintain at least the height of the "/" slash mark as clear space on all sides.
* **Do not** recolor, rotate, distort, add effects to, or place on busy/patterned backgrounds that reduce legibility.
* **Token icons**: Use the circle variant for general token listings. Use the square variant where a non-circular format is required.
* **Attribution**: When referencing Baseline, link to [baseline.markets](https://baseline.markets).