Brand Guide
The full brand guide covers logo, color, typography, voice, components, and design tokens.
Quick reference
Section titled “Quick reference”Wordmark
Section titled “Wordmark”
Upside., Inter 800, letter-spacing -0.03em. The teal dot (#14B8A6) is part of the mark, not punctuation. Never separate the dot from the wordmark.
Logo assets
Section titled “Logo assets”Always use the official SVG files. Never recreate the wordmark.
Wordmark variants
Section titled “Wordmark variants”
| Variant | Background | Download |
|---|---|---|
| Dark | #0D1421 | upside-logo-dark.svg |
| Light | #F4F7FA | upside-logo-light.svg |
| Dark Transparent | None | upside-logo-dark-transparent.svg |
| Light Transparent | None | upside-logo-light-transparent.svg |
App icon & favicon
Section titled “App icon & favicon”
The U. mark is used at icon scale: app stores, browser tabs, social thumbnails. At 32px and below, the full wordmark loses legibility; use the icon mark instead.
Teal in logos vs UI: The logo SVGs use
#00E5B0for the teal dot (a brighter variant for logo use). The standard UI teal is#14B8A6. Do not edit the SVG color values.
Primary color
Section titled “Primary color”Upside Teal, #14B8A6
Used for buttons, badges, links, the floor guarantee indicator, and the wordmark dot. Never used decoratively.
Light mode alternative: #0F766E
Typefaces
Section titled “Typefaces”| Role | Typeface | Usage |
|---|---|---|
| Display + Interface | Inter | All text: 800 for display, 400/500/600 for UI |
| Data | JetBrains Mono | On-chain data only: APY, addresses, amounts |