Brand Kit

Logos

Logo lockup

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

On light background

SVG PNG

On dark background

SVG PNG

On brand blue

SVG PNG

Symbol only

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

On light background

SVG PNG

On dark background

SVG PNG

On brand blue

SVG PNG

Logo usage

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

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

#1A8BFF

primary-500 — UI, links, interactive elements

#48A2FF

primary-400 — dark mode variant of primary-500

Full primary scale

Token	Hex	Swatch
primary-50	`#E8F3FF`
primary-100	`#B8DBFF`
primary-200	`#96CAFF`
primary-300	`#66B1FF`
primary-400	`#48A2FF`
primary-500	`#1A8BFF`
primary-600	`#187EE8`
primary-700	`#1263B5`
primary-800	`#0E4C8C`
primary-900	`#0B3A6B`

Neutrals

Full neutral scale

Token	Hex	Swatch
neutral-50	`#FFFFFF`
neutral-100	`#F8F9FC`
neutral-200	`#F2F4F9`
neutral-250	`#C2C9DB`
neutral-300	`#9297B4`
neutral-400	`#697098`
neutral-500	`#555B7C`
neutral-600	`#2C3251`
neutral-650	`#232539`
neutral-700	`#1B1D2C`
neutral-800	`#141625`
neutral-900	`#0F1121`

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.

Heading

#141625 light / #F8F9FC dark — H1–H6, prominent body text

Caption

#697098 light / #C2C9DB dark — secondary/muted text

Button

#FFFFFF (both modes) — button label on primary backgrounds

State colors (reserved)

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

#2BD4A1

success-500 — positive / good

#D52A4C

error-500 — negative / bad

#D55D2A

warning-500 — caution

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`

Chart colors

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

#1A8BFF

#64B5F6

#0D5EBF

#8B5CF6

Accent palettes

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

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`

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`

The dot is part of the name. Never write vaultsfyi, VaultsFYI, vaults.FYI, or VAULTS.FYI.

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.

Press and media

For press inquiries or co-marketing requests, reach out at gm@wallfacer.io or via @vaultsfyi on X.

Start Here

Core Concepts

Methodology

SDK

AI & Agents

Plans & Billing

Resources

Logos

Logo lockup

On light background

On dark background

On brand blue

Symbol only

On light background

On dark background

On brand blue

Logo usage

Colors

Primary

Neutrals

State colors (reserved)

Chart colors

Accent palettes

Name and usage

Typography

Press and media

​Logos

​Logo lockup

On light background

On dark background

On brand blue

​Symbol only

On light background

On dark background

On brand blue

​Logo usage

​Colors

​Primary

​Neutrals

​State colors (reserved)

​Chart colors

​Accent palettes

​Name and usage

​Typography

​Press and media

Logos

Logo lockup

Symbol only

Logo usage

Colors

Primary

Neutrals

State colors (reserved)

Chart colors

Accent palettes

Name and usage

Typography

Press and media