Obol · Brand kit
Brand kit.
Everything you need to talk about Obol: logos, banners, colors, type, motion and animated assets. Every value on this page is the one the product ships with.
01 · Logo
The mark.
One mark, three colorways. Download it transparent or on a square tile.
Keep clear space equal to half the mark's height on every side. Minimum size: 16 px on screen, 8 mm in print. Only recolour the mark with Foreground, Background or Primary.
03 · Colors
Warm soil, sage.
A dark, earthy base with one living accent. Click any value to copy it (hex or oklch, as shipped in globals.css).
Brand
Sage
--primary
Actions, accents, active states
Moss
--accent
Gradients, secondary emphasis
Ink
--primary-foreground
Text on sage
Apricot
--warning
Warnings only
Brick
--destructive
Errors, losses
Surfaces
Soil
--background
Page background
Bark
--card
Cards and panels (70% + blur)
Inset
--surface-2
Inputs, nested panels
Loam
--muted
Tracks, chips, hovers
Root
--border
Every 1px line
Text
Bone
--foreground
Headlines, body
Ash
--muted-foreground
Secondary copy, labels
Liquidity ramp
Chart 1
--chart-1
Volume, deep fills
Chart 2
--chart-2
Series
Chart 3
--chart-3
Quote-side bins
Chart 4
--chart-4
Highlights
04 · Typography
Tight sans, soft serif.
Display · Plus Jakarta Sans 600 + Lora italic
Liquidity, shaped.
Headlines are set tight (-0.05em) in the sans. One word (never more than a short phrase) switches to Lora italic in Sage to carry the emphasis.
UI and headlines
Deposit once, earn forever.
Accent words only
shaped, trusted, to work.
Numbers, labels, prices
$225.80 · 0.30% · 40 BINS
05 · Shape
Round, concentric.
sm 8px
Bins, tags
md 12px
Small square controls
lg 16px
Insets, dropdowns, fields
xl 24px
Cards
2xl 32px
Hero panels, modals
full pill
Buttons, chips, tabs, inputs
Rule of thumb: anything 40 px tall or less is a pill. Containers step up the scale as they grow (inset → card → panel), so nested radii always read concentric. No sharp corners, no chamfers, no skews.
Base unit --spacing: 0.27rem (4.32 px). Sections breathe at 24–32 units, cards pad at 6–8.
06 · Motion
Everything settles.
Liquidity, shaped.
Enter
expo.out · 0.9–1.4s · masked, staggered 0.03–0.12s
Morph
power2.inOut · 1.1s · ripple from center
Pull
Magnetic CTAs · 0.5s follow, elastic release
Glow
Spotlight follows the cursor on every interactive card
Motion only uses transform and opacity, loops pause off-screen, and everything settles to its final state when the visitor prefers reduced motion.
07 · Components
The same parts.
These are the components the app is built with, not mockups.
Buttons
Chips, tabs & pairs
Card
surface-card
Card at 70% over a 8px blur, 1px Root border, 24px radius. Interactive cards add the Sage spotlight and a primary/40 border on hover.
Token logos
Always the token's official logo (as listed on CoinGecko), in a full circle. Pairs overlap by 30%, base token in front.
Liquidity bins
Base side in Sage, quote side in Chart 3, 8px top radius.
08 · Animations
Features, in motion.
The live feature cards from the site, and their MP4 exports (1500×900, 60fps), frame-for-frame the same animation.
Fees that follow the market
The pool fee adjusts to volatility and trading activity on its own. Busier, riskier markets pay LPs more, with nothing for you to manage.
Up to 2.1x the fees
Concentrated ladders earn up to 2.1x what a standard full-range LP earns on the same capital.
Any asset that trades
Tokenized stocks, stablecoins, bluechips or brand-new tokens. If there's a pool, you can shape liquidity around it.
Dynamic pricing
MP4 · 1500×900 · 60fps · 5s loop
Amplified yields
MP4 · 1500×900 · 60fps · 5s loop
Any asset class
MP4 · 1500×900 · 60fps · 5s loop
Product film
MP4 · 1500×900 · 60fps · 14.8s loop
10 · Guidelines
Do, don't.
Do
- Use the mark in Bone, Soil or Sage only
- Emphasise one word per headline with Lora italic in Sage
- Set numbers, prices and labels in IBM Plex Mono
- Make controls pills and step container radii up with size
- Let motion ease out (expo.out) and settle
Don't
- Recolour, outline, stretch or rotate the mark
- Bring back the old lime, forest green or gold accents
- Use Montserrat, Inter or any other typeface
- Use sharp corners, chamfers or skewed shapes
- Loop animations that never pause or ignore reduced motion
09 · Social
Every link, on brand.
Open Graph and X cards generated for every route.