Brand System

Haiku

Resources for presenting Haiku consistently.

DeFi’s execution engine.
Define the outcome, not the steps.

Color System

Core Palette

Brand Orange

#F74D17

Logo mark, brand moments

Action Orange

#E06943

Primary CTAs, active nav

Off-White

#FCFCFC

Light background

Near Black

#1A1A1A

Text, headings

Interaction States

Default

#E06943

Hover

#E97135

Pressed

#D2633E

Dark Terminal Tokens

TokenHexUsage
App Background
#0E1116Main terminal shell
Panel Background
#151A21Modules, side panels
Chart Background
#1A2029Chart canvas
Border
#27303BDividers, table lines
Muted Text
#8B99ABLabels, metadata
Primary Text
#E8EDF5High-emphasis content
Positive
#2ED47ASuccess, completed, up
Negative
#FF5B6EError, failed, down

Usage Examples

Primary button on terminal background

TradePortfolioHistorySettings

Active nav with Action Orange indicator

Available BalanceUSDC
42,180.00

Panel with muted label, primary value, accent token

ETH-USDCRebalanceCompleted
WBTC-DAIDelta NeutralExecuting

Table rows with border token and status colors

Rules

01

Brand Orange is identity only. Do not use for primary actions.

02

Action Orange is reserved for user action and selected state.

03

Orange buttons use Near Black text, never white.

04

Hover state brightens. Pressed state darkens.

05

Dark UI uses neutral contrast first, orange second.

Click any swatch or row to copy hex value.

Typography

Primary

Familjen Grotesk

RegularMediumSemibold

Headings, body copy, UI text.

Monospace

IBM Plex Mono

RegularMediumSemibold

Data, code, nav labels, buttons.

Use Familjen for explanation. Use IBM Plex Mono for data, controls, and execution states.

For Partners and Integrators

01

Write “Haiku” exactly. Never “haiku” or “HAIKU”.

02

Describe Haiku as “DeFi’s execution engine.”

03

Do not call Haiku a DEX aggregator, swap tool, or intent solver.

04

Use: “Complex strategies. Atomic execution.”

05

Press and co-marketing: contact@haiku.trade

Copied to clipboard
footer-image
footer-image