> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vaults.fyi/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand Kit

> Logos, colors, and typography for vaults.fyi. For press coverage, integration listings, and co-marketing.

## Logos

### Logo lockup

The logo lockup pairs the symbol with the "vaults.fyi" wordmark. Three color variants are available depending on background.

<CardGroup cols={3}>
  <Card title="On light background">
    <div style={{background: "#F0F1F8", padding: "24px", borderRadius: "8px", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80px"}}>
      <img src="https://mintcdn.com/vaultsfyi/e2nu_rHbR1M8lgfT/images/Logo-384px-color.png?fit=max&auto=format&n=e2nu_rHbR1M8lgfT&q=85&s=36ec8009284a17de79a921cf82a9e0c7" alt="vaults.fyi logo — on light background" style={{height: "28px", width: "auto"}} width="2604" height="768" data-path="images/Logo-384px-color.png" />
    </div>

    <div style={{marginTop: "12px", fontSize: "13px", display: "flex", gap: "12px"}}>
      <a href="/images/Logo-24px-color.svg" download>SVG</a>
      <a href="/images/Logo-384px-color.png" download>PNG</a>
    </div>
  </Card>

  <Card title="On dark background">
    <div style={{background: "#141625", padding: "24px", borderRadius: "8px", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80px"}}>
      <img src="https://mintcdn.com/vaultsfyi/e2nu_rHbR1M8lgfT/images/Logo-384px-color-darkbg.png?fit=max&auto=format&n=e2nu_rHbR1M8lgfT&q=85&s=d9aaba8f5a98c8ffa4757be8aae9ce35" alt="vaults.fyi logo — on dark background" style={{height: "28px", width: "auto"}} width="2604" height="768" data-path="images/Logo-384px-color-darkbg.png" />
    </div>

    <div style={{marginTop: "12px", fontSize: "13px", display: "flex", gap: "12px"}}>
      <a href="/images/Logo-24px-color-darkbg.svg" download>SVG</a>
      <a href="/images/Logo-384px-color-darkbg.png" download>PNG</a>
    </div>
  </Card>

  <Card title="On brand blue">
    <div style={{background: "#1A8BFF", padding: "24px", borderRadius: "8px", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80px"}}>
      <img src="https://mintcdn.com/vaultsfyi/e2nu_rHbR1M8lgfT/images/Logo-384px-white.png?fit=max&auto=format&n=e2nu_rHbR1M8lgfT&q=85&s=83209def8b210124b3bf53b5ccc42449" alt="vaults.fyi logo — on brand blue" style={{height: "28px", width: "auto"}} width="2604" height="768" data-path="images/Logo-384px-white.png" />
    </div>

    <div style={{marginTop: "12px", fontSize: "13px", display: "flex", gap: "12px"}}>
      <a href="/images/Logo-24px-white.svg" download>SVG</a>
      <a href="/images/Logo-384px-white.png" download>PNG</a>
    </div>
  </Card>
</CardGroup>

### Symbol only

Use the symbol without the wordmark only at small sizes (favicons, app icons, UI contexts where the full lockup is too wide).

<CardGroup cols={3}>
  <Card title="On light background">
    <div style={{background: "#F0F1F8", padding: "24px", borderRadius: "8px", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80px"}}>
      <img src="https://mintcdn.com/vaultsfyi/e2nu_rHbR1M8lgfT/images/Logo-symbol-gradient.png?fit=max&auto=format&n=e2nu_rHbR1M8lgfT&q=85&s=8563b72f575d0a8728bc8c264c2cef2d" alt="vaults.fyi symbol — gradient on light background" style={{height: "48px", width: "auto"}} width="768" height="768" data-path="images/Logo-symbol-gradient.png" />
    </div>

    <div style={{marginTop: "12px", fontSize: "13px", display: "flex", gap: "12px"}}>
      <a href="/images/Logo-symbol-gradient.svg" download>SVG</a>
      <a href="/images/Logo-symbol-gradient.png" download>PNG</a>
    </div>
  </Card>

  <Card title="On dark background">
    <div style={{background: "#141625", padding: "24px", borderRadius: "8px", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80px"}}>
      <img src="https://mintcdn.com/vaultsfyi/e2nu_rHbR1M8lgfT/images/Logo-symbol-gradient.png?fit=max&auto=format&n=e2nu_rHbR1M8lgfT&q=85&s=8563b72f575d0a8728bc8c264c2cef2d" alt="vaults.fyi symbol — gradient on dark background" style={{height: "48px", width: "auto"}} width="768" height="768" data-path="images/Logo-symbol-gradient.png" />
    </div>

    <div style={{marginTop: "12px", fontSize: "13px", display: "flex", gap: "12px"}}>
      <a href="/images/Logo-symbol-gradient.svg" download>SVG</a>
      <a href="/images/Logo-symbol-gradient.png" download>PNG</a>
    </div>
  </Card>

  <Card title="On brand blue">
    <div style={{background: "#1A8BFF", padding: "24px", borderRadius: "8px", display: "flex", justifyContent: "center", alignItems: "center", minHeight: "80px"}}>
      <img src="https://mintcdn.com/vaultsfyi/e2nu_rHbR1M8lgfT/images/Logo-symbol-white.png?fit=max&auto=format&n=e2nu_rHbR1M8lgfT&q=85&s=41ff48317da19cd4b3d62d9059b89a6d" alt="vaults.fyi symbol — white on brand blue" style={{height: "48px", width: "auto"}} width="768" height="768" data-path="images/Logo-symbol-white.png" />
    </div>

    <div style={{marginTop: "12px", fontSize: "13px", display: "flex", gap: "12px"}}>
      <a href="/images/Logo-symbol-white.svg" download>SVG</a>
      <a href="/images/Logo-symbol-white.png" download>PNG</a>
    </div>
  </Card>
</CardGroup>

### Logo usage

<Warning>
  Never crop, distort, recolor, rotate, or add effects to the logo. Do not change the relative proportions of the symbol and logotype.
</Warning>

| Do                                                          | Don't                                                 |
| ----------------------------------------------------------- | ----------------------------------------------------- |
| Use the gradient symbol on light or dark backgrounds        | Place the color logo on busy or patterned backgrounds |
| Use the white logo on brand blue surfaces                   | Recolor the symbol to a non-brand color               |
| Use black or white versions for single-color print contexts | Stretch, skew, or rotate the logo                     |
| Keep clear space around the logo                            | Use the symbol alone where the full lockup fits       |

***

## Colors

### Primary

<div style={{display: "flex", gap: "16px", flexWrap: "wrap", margin: "16px 0"}}>
  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{width: "48px", height: "48px", background: "#1A8BFF", borderRadius: "8px", flexShrink: 0}} />

    <div>
      <div style={{fontWeight: 600}}>#1A8BFF</div>
      <div style={{fontSize: "13px", color: "#666"}}>primary-500 — UI, links, interactive elements</div>
    </div>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{width: "48px", height: "48px", background: "#48A2FF", borderRadius: "8px", flexShrink: 0}} />

    <div>
      <div style={{fontWeight: 600}}>#48A2FF</div>
      <div style={{fontSize: "13px", color: "#666"}}>primary-400 — dark mode variant of primary-500</div>
    </div>
  </div>
</div>

<Accordion title="Full primary scale">
  | Token       | Hex       | Swatch                                                                                                                                 |
  | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
  | primary-50  | `#E8F3FF` | <div style={{width:"20px",height:"20px",background:"#E8F3FF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-100 | `#B8DBFF` | <div style={{width:"20px",height:"20px",background:"#B8DBFF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-200 | `#96CAFF` | <div style={{width:"20px",height:"20px",background:"#96CAFF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-300 | `#66B1FF` | <div style={{width:"20px",height:"20px",background:"#66B1FF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-400 | `#48A2FF` | <div style={{width:"20px",height:"20px",background:"#48A2FF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-500 | `#1A8BFF` | <div style={{width:"20px",height:"20px",background:"#1A8BFF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-600 | `#187EE8` | <div style={{width:"20px",height:"20px",background:"#187EE8",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-700 | `#1263B5` | <div style={{width:"20px",height:"20px",background:"#1263B5",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-800 | `#0E4C8C` | <div style={{width:"20px",height:"20px",background:"#0E4C8C",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | primary-900 | `#0B3A6B` | <div style={{width:"20px",height:"20px",background:"#0B3A6B",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
</Accordion>

### Neutrals

<Accordion title="Full neutral scale">
  | Token       | Hex       | Swatch                                                                                                                                 |
  | ----------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
  | neutral-50  | `#FFFFFF` | <div style={{width:"20px",height:"20px",background:"#FFFFFF",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-100 | `#F8F9FC` | <div style={{width:"20px",height:"20px",background:"#F8F9FC",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-200 | `#F2F4F9` | <div style={{width:"20px",height:"20px",background:"#F2F4F9",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-250 | `#C2C9DB` | <div style={{width:"20px",height:"20px",background:"#C2C9DB",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-300 | `#9297B4` | <div style={{width:"20px",height:"20px",background:"#9297B4",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-400 | `#697098` | <div style={{width:"20px",height:"20px",background:"#697098",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-500 | `#555B7C` | <div style={{width:"20px",height:"20px",background:"#555B7C",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-600 | `#2C3251` | <div style={{width:"20px",height:"20px",background:"#2C3251",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-650 | `#232539` | <div style={{width:"20px",height:"20px",background:"#232539",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-700 | `#1B1D2C` | <div style={{width:"20px",height:"20px",background:"#1B1D2C",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-800 | `#141625` | <div style={{width:"20px",height:"20px",background:"#141625",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
  | neutral-900 | `#0F1121` | <div style={{width:"20px",height:"20px",background:"#0F1121",borderRadius:"4px",border:"1px solid #e0e0e0",display:"inline-block"}} /> |
</Accordion>

**Text colors**

Text colors are semantic and mode-aware — always reference by token name in code, not by hex. The three most commonly used are below; hex values are for reference only.

<div style={{display: "flex", gap: "16px", flexWrap: "wrap", margin: "16px 0"}}>
  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{display: "flex", flexShrink: 0, borderRadius: "8px", overflow: "hidden", border: "1px solid #e0e0e0"}}>
      <div style={{width: "24px", height: "48px", background: "#141625"}} />

      <div style={{width: "24px", height: "48px", background: "#F8F9FC"}} />
    </div>

    <div>
      <div style={{fontWeight: 600}}>Heading</div>
      <div style={{fontSize: "13px", color: "#666"}}>#141625 light / #F8F9FC dark — H1–H6, prominent body text</div>
    </div>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{display: "flex", flexShrink: 0, borderRadius: "8px", overflow: "hidden", border: "1px solid #e0e0e0"}}>
      <div style={{width: "24px", height: "48px", background: "#697098"}} />

      <div style={{width: "24px", height: "48px", background: "#C2C9DB"}} />
    </div>

    <div>
      <div style={{fontWeight: 600}}>Caption</div>
      <div style={{fontSize: "13px", color: "#666"}}>#697098 light / #C2C9DB dark — secondary/muted text</div>
    </div>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{width: "48px", height: "48px", background: "#FFFFFF", borderRadius: "8px", flexShrink: 0, border: "1px solid #e0e0e0"}} />

    <div>
      <div style={{fontWeight: 600}}>Button</div>
      <div style={{fontSize: "13px", color: "#666"}}>#FFFFFF (both modes) — button label on primary backgrounds</div>
    </div>
  </div>
</div>

### State colors (reserved)

Reserved for status indicators only — never for data series, decorative elements, or general UI.

<div style={{display: "flex", gap: "16px", flexWrap: "wrap", margin: "16px 0"}}>
  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{width: "48px", height: "48px", background: "#2BD4A1", borderRadius: "8px", flexShrink: 0}} />

    <div>
      <div style={{fontWeight: 600}}>#2BD4A1</div>
      <div style={{fontSize: "13px", color: "#666"}}>success-500 — positive / good</div>
    </div>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{width: "48px", height: "48px", background: "#D52A4C", borderRadius: "8px", flexShrink: 0}} />

    <div>
      <div style={{fontWeight: 600}}>#D52A4C</div>
      <div style={{fontSize: "13px", color: "#666"}}>error-500 — negative / bad</div>
    </div>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "12px"}}>
    <div style={{width: "48px", height: "48px", background: "#D55D2A", borderRadius: "8px", flexShrink: 0}} />

    <div>
      <div style={{fontWeight: 600}}>#D55D2A</div>
      <div style={{fontSize: "13px", color: "#666"}}>warning-500 — caution</div>
    </div>
  </div>
</div>

<Accordion title="Full state scales">
  | Token       | Hex       |   | Token       | Hex       |   | Token     | Hex       |
  | ----------- | --------- | - | ----------- | --------- | - | --------- | --------- |
  | success-50  | `#EAFBF6` |   | warning-50  | `#FBEFEA` |   | error-50  | `#FBEAED` |
  | success-100 | `#BDF2E2` |   | warning-100 | `#F2CDBD` |   | error-100 | `#F2BDC8` |
  | success-200 | `#9DEBD4` |   | warning-200 | `#ECB49D` |   | error-200 | `#EC9DAD` |
  | success-300 | `#71E2C0` |   | warning-300 | `#E39270` |   | error-300 | `#E37087` |
  | success-400 | `#55DDB4` |   | warning-400 | `#DD7D55` |   | error-400 | `#DD5570` |
  | success-500 | `#2BD4A1` |   | warning-500 | `#D55D2A` |   | error-500 | `#D52A4C` |
  | success-600 | `#27C193` |   | warning-600 | `#C25526` |   | error-600 | `#C22645` |
  | success-700 | `#1F9772` |   | warning-700 | `#97421E` |   | error-700 | `#971E36` |
  | success-800 | `#187559` |   | warning-800 | `#753317` |   | error-800 | `#75172A` |
  | success-900 | `#125944` |   | warning-900 | `#592712` |   | error-900 | `#591220` |
</Accordion>

### Chart colors

Reserved for data visualization — charts, graphs, and sparklines only. Never for UI elements.

<div style={{display: "flex", gap: "12px", flexWrap: "wrap", margin: "16px 0"}}>
  <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
    <div style={{width: "32px", height: "32px", background: "#1A8BFF", borderRadius: "6px"}} />

    <code>#1A8BFF</code>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
    <div style={{width: "32px", height: "32px", background: "#64B5F6", borderRadius: "6px"}} />

    <code>#64B5F6</code>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
    <div style={{width: "32px", height: "32px", background: "#0D5EBF", borderRadius: "6px"}} />

    <code>#0D5EBF</code>
  </div>

  <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
    <div style={{width: "32px", height: "32px", background: "#8B5CF6", borderRadius: "6px"}} />

    <code>#8B5CF6</code>
  </div>
</div>

### Accent palettes

Extended palettes for multi-series charts and data visualizations. Each palette has stops at 50, 400, 500, 600, and 950.

<Accordion title="All accent palettes">
  | Palette | 50        | 400       | 500       | 600       | 950       |
  | ------- | --------- | --------- | --------- | --------- | --------- |
  | teal    | `#F0FDFA` | `#2DD4BF` | `#14B8A6` | `#0D9488` | `#042F2E` |
  | violet  | `#F5F3FF` | `#A78BFA` | `#8B5CF6` | `#7C3AED` | `#2E1065` |
  | fuchsia | `#FDF4FF` | `#E879F9` | `#D946EF` | `#C026D3` | `#4A044E` |
  | pink    | `#FDF2F8` | `#F472B6` | `#EC4899` | `#DB2777` | `#500724` |
  | orange  | `#FFF7ED` | `#FF8905` | `#FF6900` | `#F54900` | `#441306` |
  | emerald | `#ECFDF5` | `#00D492` | `#00BC7D` | `#009966` | `#002C21` |
  | cyan    | `#ECFEFF` | `#00D3F2` | `#00B8DB` | `#0092B8` | `#073345` |
  | rose    | `#FEF1F2` | `#FF637E` | `#FF1F57` | `#EC0040` | `#4D0218` |
  | blue    | `#EFF9FF` | `#50A2FF` | `#2C7FFF` | `#145DFB` | `#162455` |
  | yellow  | `#FEFCE8` | `#FEC700` | `#F0B000` | `#D18700` | `#431F05` |
</Accordion>

***

## Name and usage

The brand name is **vaults.fyi** — always lowercase, always with the dot. Lowercase is intentional, not a typo.

| Context                                                  | Form                           |
| -------------------------------------------------------- | ------------------------------ |
| Prose, social, UI copy                                   | `vaults.fyi`                   |
| Document titles, app store listings, co-marketing tables | `Vaults.fyi`                   |
| URLs                                                     | `vaults.fyi`, `app.vaults.fyi` |

<Warning>
  The dot is part of the name. Never write `vaultsfyi`, `VaultsFYI`, `vaults.FYI`, or `VAULTS.FYI`.
</Warning>

**Sentence starts.** Restructure to avoid opening with the name — `"vaults.fyi launched..."` reads as a typo to most people. Lead with context instead: `"Today we launched..."` or `"The new vaults.fyi feature..."`.

**Products.** `app.vaults.fyi` and the vaults.fyi API are distinct products under the vaults.fyi brand. Use the full product name when referring to a specific one, not just "vaults.fyi."

***

## Typography

| Font           | Use                               |
| -------------- | --------------------------------- |
| **Geist**      | Body text, headings, UI labels    |
| **Geist Mono** | Table headers, code, numeric data |

Both fonts are available from [Vercel's Geist font page](https://vercel.com/font).

***

## Press and media

For press inquiries or co-marketing requests, reach out at [gm@wallfacer.io](mailto:gm@wallfacer.io) or via [@vaultsfyi](https://twitter.com/vaultsfyi) on X.