The Kinetic brand kit
Everything you need to represent Kinetic — logo lockups, the signature gradient, colour tokens, typography and voice. All assets are free to download.
Download the markCyan · Blue · Violet — the signature Kinetic gradient
Two lockups, one system
The mark for spot uses (favicons, app icons, splash screens). The wordmark for headers, decks and any surface that needs the full name.
Clear space
Keep padding equal to the height of the inner diamond on all four sides. Doubled clear space is fine — never less.
Minimum size
Never render the mark below 24 px. Below that the outer gradient stroke fights the inner core and the shape stops reading as a diamond.
Four palettes, one system
Every colour Kinetic uses ships here. Click any swatch to copy its hex — the CSS and JSON token files below are ready to drop into any codebase.
Brand colours
The three-hue signature gradient defines Kinetic. Blue leads, violet accents, cyan sparks. Use in that order of prominence.
Surfaces
Every product surface stacks on Void. Panels and cards move up the greyscale by hairline steps — never by more than one shade in a row.
Text
Three tiers. Primary for headlines and numbers, Secondary for prose, Muted for labels and hints.
Semantic
Reserved meaning. Green for gains, red for losses, amber for caution, cyan for info. Do not use for decoration.
Two signature gradients
Signature
linear-gradient(90deg, #38BDF8 0%, #4F7CFF 50%, #8B5CF6 100%)
Diagonal
linear-gradient(135deg, #4F7CFF 0%, #8B5CF6 100%)
Geist, top to bottom
Display and body both use Geist. Geist Mono handles tickers, hashes, transaction ids — anything monospaced by nature.
Geist · Display
One platform for all your crypto.
Geist · Body
Kinetic brings the full spectrum of digital assets — spot, futures, on-chain, staking — into one clean, secure interface.
Geist · Numbers
$1,240,873.42 · +2.47% · BTC 68,431
Geist Mono
0xabc…4f2 · block #21,048,592 · 4h · 4h · 1D
Every asset, ready to grab
Direct downloads. Each file is served straight from Kinetic — no auth, no strings.
Kinetic mark
SVG · gradient · works on dark or light
kinetic-mark.svg
Kinetic wordmark
SVG · horizontal lockup with tagline
kinetic-wordmark.svg
Colour tokens · CSS
CSS custom properties, ready to drop into any project
brand-colors.css
Colour tokens · JSON
Same tokens as JSON for design tooling
brand-colors.json
Print one-pager
Standalone HTML overview — great for offline reference
onepager.html
3D logo motion
WebGL / Three.js animated mark for splash & loading
logo-3d-motion.html
Do this, not that
Do
- Give the mark clear space equal to the height of the inner diamond.
- Anchor the gradient with a Void background — it's the intended contrast.
- Pair one accent colour with plenty of dark surface — restraint is the point.
- Use Geist for everything display and body; Geist Mono for tickers and hashes.
Don't
- Recolour the mark outside the palette.
- Stretch, rotate or add drop shadows to the mark.
- Place the mark on low-contrast backgrounds (test at 50 % zoom).
- Mix the signature gradient with unrelated hues in the same composition.
- Use the semantic red/green for decoration.
Confident, clear, never cocky
Say the thing. If a fee is 1.5%, that's the sentence — no hedging.
Numbers before adjectives. "$1.2B in AUM" is stronger than "significant".
Address the trader like a peer, not a beginner. If jargon fits, use it.
Never oversell risk. Every yield claim carries its trade-off in the same paragraph.
Building with Kinetic?
Grab the assets, hit the do's and don'ts, and you're set. Questions? Reach out at support@odyssey.trade.