DerivioBrand + Product Ecosystem2024

High-performance Ethereum L2 / Onchain trading

Built to move
at market speed.

A refractive identity and connected product ecosystem for a network built around onchain trading—from its first visual signal to agent and growth surfaces.

Explore the system

$Derivio brand identity cover with a refractive gemstone$

01 Context

One visual language for infrastructure, trading, and participation.

Derivio positions itself as “the turbocharged network built for onchain trading without compromise.” The design challenge was to make that technical promise feel tangible across very different touchpoints.

I treated the system as a connected product story. The identity creates recognition, the interfaces turn performance into usable actions, and the growth layer gives the community reasons to return.

Role: Brand, visual, and product design
Scope: Identity, web, trading, AI, growth
Platform: Ethereum L2 / Web3
Guidelines: Version 1 / June 2024

02 Innovation logic

Make performance visible through refraction.

The letter D and a cut gemstone became one flexible device. Hard cuts communicate precision; chromatic refraction turns speed, liquidity, and many market signals into a recognizable visual behavior.

Cut

Precision over decoration.

Angular letterforms and clipped frames give every surface a decisive, engineered edge.

Refract

One signal, many outcomes.

The gemstone splits light into the palette, mirroring how one network supports many assets and strategies.

Accelerate

Motion without visual noise.

Directional light, depth, and contrast create momentum while product information stays legible.

03 Brand system

A disciplined shell for an iridescent core.

Black provides the infrastructure layer. Chakra Petch adds a technical cadence. Sapphire-inspired accents—orange, pink, emerald, and tanzanite—bring energy where hierarchy or action needs it.

Derivio black and sapphire-inspired color palette — Color / controlled chromatic refraction

Derivio Chakra Petch primary typeface specification — Typography / technical, modular, precise

Lockups / one recognizable mark across constrained spaces

Color usage / preserve contrast without losing the refractive signature

04 Brand in use

The identity behaves like a system, not a logo stamp.

Across social media and the website, the same ingredients shift scale without losing recognition: black space, cut geometry, luminous materials, and tightly controlled type.

Social / modular campaign language

Derivio infrastructure landing page on a laptop — Web / performance made cinematic

Social in context / the identity survives outside the campaign canvas

Campaign kit / reusable compositions for launches and explainers

Desktop / luminous depth around a focused content hierarchy

Responsive web / the same visual logic at a tighter scale

05 Core product

From network promise to market action.

The product layer carries the brand into trading and minting experiences. Information-dense controls stay anchored in black, while color is reserved for navigation, focus, and moments of participation.

Derivio trading experience displayed on a laptop — 01 Trading discovery / a high-energy entry into markets

Derivio trading product interface — 02 Product / market information and execution

Derivio NFT mint experience — 03 Mint / a focused brand participation moment

06 AI product layer

Solver–S20

Turn a complex market stack into a conversation.

The agent workspace organizes events, portfolio, market pulse, and trading around a single prompt surface. The innovation is not a chatbot skin—it is a clearer command layer over multiple onchain jobs.

Derivio Solver-S20 AI agent home interface — Capability map / choose the job before prompting

Derivio Solver-S20 response showing wallet balance — Response state / wallet-aware answers in context

Job-first entry

Events, portfolio, market pulse, and trade clarify what the agent can do before the user types.

Wallet context

Connection state and account history stay visible, preserving trust in every response.

Action continuity

Research and execution live in the same workspace, reducing handoffs between tools.

07 Growth loop

Progress makes participation tangible.

The mobile layer translates community activity into a simple loop: build an egg, complete tasks, and invite friends. A louder graphic language differentiates the playful reward surface without abandoning the core angular system.

Derivio egg progression screen — Visual progress creates a reason to return.

Derivio community tasks and claimed reward screen — Tasks turn community actions into clear rewards.

Derivio invite friends reward screen — Referral mechanics extend the loop socially.

Derivio egg hatching instructions inside the mobile growth experience — Understand Instructions turn the reward system into a visible sequence: collect, level up, then hatch.

Derivio mobile reward confirmation after earning Denno — Celebrate The reward state closes the loop with a clear milestone and the next progression goal.

08 Contribution

I connected the brand promise to the product behavior.

My contribution spans the identity system, visual direction, website applications, product UI, agent experience, and mobile growth surfaces. The core design decision was to make every layer feel like part of one refractive network while giving each job its own level of expression.

Brand systemArt directionProduct designInteraction logicGrowth UX

Next project

Visual DesignCampaign systems across Web3 and markets

Built to moveat market speed.