TradeApp · 2025
A new identity, carried through the whole website
I redesigned TradeApp's brand and website, connecting a new mark and visual direction with 40 page templates.
The work included the account-comparison layout, responsive page designs and the shared components behind them.
- Role
- Sole designer
- Scope
- Brand identity, website UI and design system
- Delivery
- 40 page templates
- Status
- Website launched
01 · The project
The project
TradeApp presents trading challenges and account options. The website needs to explain how the offer works and place the conditions for each account where people can compare them.
The engagement began with a logo brief and grew into the wider identity and website design.
02 · Design decisions
Design decisions
- 01
Compare the offer in one place
The previous layout used four fixed account cards. I designed a table with account sizes arranged above a shared set of conditions: profit share, targets, drawdown limits, trading days and price.
The design example shown here accommodates seven account sizes. The row structure gives each option the same place for the same information.
This is the functional part of the redesign to inspect first: how the offer is organized, where differences appear and how each account leads to challenge selection.
Production capture · Account sizes share the same rows for targets, limits, trading days and price.
- 02
Carry the identity beyond the logo
I replaced the orange identity with cyan on deep navy and developed the mark, typography and page styling together.
The cyan gradient appears in selected headline phrases, while action styles and illustration treatments repeat across the templates. The brand is expressed through the page system as well as the wordmark.
TRADEAPPHow it WorksCommunitiesTrading ResourcesAbout UsFAQLog InSign UpPower Up Your TradingEmpower YourTrading Journey
Join a Prop firm built for growth, transparency, and long-term success.
Get StartedLearn More- No Consistency Rules
- Fast Payments
- No Hidden Fees
- Clear Trading Rules
Reconstructed from the design file · The cyan gradient in a headline phrase, with the shared button treatment.
- 03
Design the mobile arrangement
The mobile hero keeps the same headline hierarchy with stacked actions and a vertical benefit list. Those changes are shown alongside the desktop composition.
Desktop · 1440
Phone · 375
The same hero content arranged for desktop and mobile. Desktop from the production site; phone from the delivered design file.
03 · What I delivered
What I delivered
A brand identity, shared design foundations and 40 page templates, including the account-comparison layout and responsive website designs.
04 · What I would revisit
What I would revisit
I would establish the planned account range earlier in the brief. The table design accommodates additional sizes, but that requirement should be explicit before detailed layout work begins.
Project note
The visuals document the design shown in this case study. The current website may contain a different offer or later implementation changes.
05 · Explore the system
Explore the system
One cyan ramp on one deep navy. Four stops, and the brighter the stop the less of the screen it covers.
- Ramp stops
- 4
- Lowest contrast on navy
- 6.7:1
- Proportion bands
- 6
Colour and typography6 colours · Fustat, 5 weights · 2 brand sheets
- 10%White
- 25%Eerie black
- 32%Deep navy
- 16%Gradient
- 8%Moray
- 9%Aquamarine
The book rations the colours: two thirds of any layout is ground before a drop of cyan is spent.
- Primary cyan
- #05adc9Buttons and links. 6.7:1 on the deep navy.
- Cyan mid
- #15b8d0Gradient stop between primary and bright. 7.6:1.
- Cyan bright
- #3dd4e3Highlights and gradient text. 10.1:1.
- Cyan glow
- #75fbfdGlows and small accents only. 14.6:1.
- Deep navy#001923The page ground everything sits on.
- Raised navy#142d37Cards and panels, one step off the ground.
Hexes read from the live stylesheet; ratios measured against the brand's own ground, #001923.
Fustat
- Light
- Regular
- Medium
- Bold
- ExtraBold
The primary face across print and digital. Regular carries all body text.
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numbers
0123456789
Display face
The display face, kept for headlines. Wide, flat-sided, deliberately unlike the body text.
Book spec — stroke/outlining centred at 5px, mitre join.
Clearspace
The exclusion zone is measured in the mark's own geometry, not pixels, so it holds at any size.
Monochrome discipline
The one-colour cuts: greys on the brand navy, white on black.
Full page designsthe homepage, end to end
The homepage end to end, at the width it ships.
Contact