Gate CeFi
From brand identity
to clarity in trading.
Geometry, color, and information hierarchy connect the brand with the centralized trading experience.
01 / OVERVIEW
Connecting identity
with interaction.
Basic geometry, blue, and neutrals establish a professional identity. The app concepts span home navigation, markets, positions, and asset management.
The visual system and product refresh were developed in separate phases. This case study brings their guidelines and interface concepts together, from brand to product.
02 / BRAND DEFINITION
A professional identity, built on simple geometry.
Layered shapes and interlocking color blocks create depth, while a consistent palette builds brand recognition.
Layered geometry / Color blocks / Green accents
Blue leads the identity; black, gray, and white support structure and content. Green marks key accents. Layered, combined shapes create a clear visual language with depth.
VISUAL SHOWCASE / LIGHT
VISUAL SHOWCASE / DARK
03 / COLOR LANGUAGE
Brand blue as the primary signature
Blue leads, gray and black create depth, and green highlights key details. Color proportions vary by illustration level.
Brand blue
#0055FF
Structural gray
#D7DBE4
Near black
#070808
Accent
green
#A7F757
Supporting dark #485062
White space & contrast #FFFFFF
04 / ILLUSTRATION HIERARCHY
A visual hierarchy shaped by the task
Four illustration levels, with distinct color proportions, support hero moments, functional guidance, and empty states.
LEVEL 1
Hero moments
Key visual placements
Illustrations >140×140px
Blue / Gray / Black / Green
3 : 3 : 3 : 1
LEVEL 2
Banners & campaigns
Banners and promotions
Green varies by context
Blue / Gray / Black / Green
5 : 2 : 2 : 1
LEVEL 3
Functional guidance
Functional explanations
Illustrations <80×80px
Blue / Gray / Black / Green
2 : 5 : 2 : 1
LEVEL 4
Empty states
Empty-state feedback
Blue, gray, and black
Blue / Gray / Black
2 : 5 : 3
One brand palette, with a different visual emphasis for each size and context.
VISUAL GALLERY / ILLUSTRATION SERIES
One visual language, across different contexts
Gift boxes, functional guidance, and empty states, presented in paired light and dark versions.
GIFT BOX / LIGHT
FUNCTIONAL GUIDANCE / LIGHT
EMPTY STATE / LIGHT
GIFT BOX / DARK
FUNCTIONAL GUIDANCE / DARK
EMPTY STATE / DARK
Original illustrations · LIGHT / DARK
04.2 / VISUAL CONSTRUCTION EXPLORATIONS
Exploring the building blocks of a visual language
Studies in supporting colors, layered geometry, and corner radii explore different expressions of the same visual language.
Layered geometry / Two accent colors
Phone / Square corners
Phone / Rounded corners
Folder / Rounded corners
Alert / Rounded corners
Bell / Rounded corners
05 / MARKETING TOUCHPOINTS
A consistent brand across marketing touchpoints
One palette and graphic language connect Dual Investment, Quantitative Fund, GUSD, CandyDrop, AirDrop, and Launchpool.
Dual Investment / Countdown banner
Quantitative Fund / Trend graphics
GUSD Minting / Yield information
CandyDrop / Event countdown
AirDrop / Allocation & rotor graphics
Launchpool / Pickaxe & event countdown
06 / BRAND IN PRODUCT
One visual system, in light and dark
Blue and green stay recognizable as neutrals adapt to each background. The guidelines use the same banners in both modes.
LIGHT / HERO VISUAL
DARK / HERO VISUAL
LIGHT / HOME TOUCHPOINT
DARK / HOME TOUCHPOINT
CeFi Visual 6.0 · Application examples from the guidelines
07 / PRODUCT — V5.1 HOME
A clear hierarchy for assets, shortcuts, and markets
The V5.1 home concept uses type scale, white space, and module spacing to establish priorities, with the same reading order in both modes.
BEFORE / ORIGINAL DESIGN
AFTER / V5.1 · LIGHT
AFTER / V5.1 · DARK
08 / PRODUCT — MARKET STRUCTURE
A clear reading flow for dense market data
Watchlists, spot markets, and expanded charts share filters, price columns, and label hierarchy. Wider charts reduce nested cards.
FAVORITES / WATCHLIST
SPOT MARKETS
EXPANDED CHART / IN-LIST VIEW
09 / PRODUCT — POSITIONS
A clear hierarchy for accounts and position controls
Assets, unrealized P&L, and positions sit in distinct layers. Details stay with their controls, and 'Positions' matches the trading module.
FUTURES ACCOUNT / FULL SCREEN
POSITIONS / DETAIL VIEW
Detail view: metrics are grouped by P&L, size, and price, with TP/SL, Reverse, and Close actions below.
10 / PRODUCT — ASSET STATES
From first-time guidance to everyday asset management
For new users, illustration and the Deposit button set the focus. Funded accounts emphasize total value, returns, and asset lists.
NEW USER / ONBOARDING DETAIL
FUNDED ACCOUNT / OVERVIEW
A larger total balance and bolder daily returns lead the page. Four core actions sit together, with assets organized by coin.
SPOT ACCOUNT / ASSETS
11 / STATE & CONSISTENCY
A consistent language, even in empty states
Clear explanations and next steps keep supporting illustrations focused on the user's task.
Explain the state.
Show the next step.
The signed-out watchlist pairs a state illustration with an explanation and a login entry point. Both modes keep the same information structure.
LIGHT / SIGNED-OUT WATCHLIST DETAIL
DARK / SIGNED-OUT WATCHLIST DETAIL