Brand Guide

The full brand guide is a self-contained visual reference covering logo, color, typography, voice, components, and design tokens.

Open full brand guide

Quick reference

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

Always use the official SVG files — never recreate the wordmark.

Wordmark variants

Variant	Background	Download
Dark	`#0D1421`	upside-logo-dark.svg
Light	`#F4F7FA`	upside-logo-light.svg
Transparent	None	upside-logo-transparent.svg

App icon & favicon

App Icon · 512px

Favicon · 64px

Favicon · 32px

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 exclusively.

Teal in logos vs UI: The logo SVGs use #00E5B0 for the teal dot (a brighter luminous variant for logo contexts). The standard UI teal is #14B8A6. Do not edit the SVG color values.

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

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

Voice

Declarative, precise, builder-to-builder. We state facts and let the mechanism speak for itself.

Use	Don’t use
Contributor	Investor, user
Raise	Sale, IDO, token launch
Floor guarantee	Principal protection, refund, SAFU
Redeem at par	Get a refund, withdraw

Key surfaces

Token	Dark	Light
`--upside-void`	`#0D1421`	`#F4F7FA`
`--upside-surface`	`#131E2E`	`#FFFFFF`
`--upside-teal`	`#14B8A6`	`#0F766E`
`--upside-hero`	`#FFFFFF`	`#0D1421`
`--upside-primary`	`#E2EAF0`	`#1A2640`
`--upside-secondary`	`#6B8090`	`#5A7080`