Skip to content
KR.
← All work
Zenstox

Zenstox · Redesign proposal

From scattered styles to a documented system

I developed a redesign proposal for Zenstox's website, covering page structure, interface design and the foundations needed to build it.

The file includes 23 designed pages and 12 scaffold pages, with their coverage documented separately.

Role
Sole designer — audit, information architecture, UI and documentation
Scope
Website redesign and shared design foundations
Coverage
23 designed pages; 12 scaffold pages
Status
Not launched
Zenstox's redesigned first screen, rebuilt from the design file: a meditation photograph under a glass navigation bar, the headline “Trade the Zen way.” and a floating 4.2 out of 5 TrustRating card
Reconstructed from the design file. A redesign proposal that was not launched; the rating card is part of the proposal, not a measured score.

01 · The project

The project

zenstox.com runs on a theme whose stylesheet is 144,575 bytes with no custom properties: 68 hex values written in place and six typefaces loaded. White text on the brand green, the fill of its most repeated button, measures 2.79:1 against the 4.5:1 AA minimum. I reviewed the site's page structure and styles, then developed shared typography, colour roles and components for the proposed site.

The work brings the page designs and their supporting rules into one documented file.

02 · Design decisions

Design decisions

  1. 01

    Give repeated market pages a shared structure

    The market pages use a common layout with sections added where a market needs specific information.

    This keeps repeated content organized consistently while allowing differences such as trading-hour information to remain visible.

    WHAT YOU CAN TRADE

    300+ markets · One account

    Majors, minors, and exotics. Variable spreads, published pre-trade.

    Forex62Indices24Commodities18Stocks180Crypto
    GBP/USDPound · Dollar$1.26366-0.13%
    USD/JPYDollar · Yen$149.916+0.44%
    AUD/USDAussie · Dollar$0.65916-0.12%
    USD/CADDollar · Loonie$1.35888+0.11%
    USD/CHFDollar · Franc$0.88391+0.10%
    NZD/USDKiwi · Dollar$0.61256-0.24%
    EUR/GBPEuro · Pound$0.85602+0.08%
    54+ moreforex pairsView all →
    EUR/USDEuro · Dollar$1.08510+0.30% todayDAY HIGH$1.08654DAY LOW$1.08453SPREAD0.1 pip

    Reconstructed from the design file · One market-page layout, with sections added where a market needs them.

  2. 02

    Reconsider the mobile content

    The mobile versions change the page structure where necessary, including merging or removing sections.

    The navigation becomes a grouped drawer. The desktop and mobile examples show which content remains, which changes its position and which sections are treated differently.

    ONE OBJECT, TWO WIDTHS

    The pill becomes the sheet at 1100.

    Platform and Markets open to their ten links; Trading and Company stay shut. A drawer that expands everything at once has stopped being a navigation and become a sitemap.

    zenstoxPlatformMarketsTradingCompanyENSign inStart Trading
    zenstox
    • PLATFORM
      • Overview
      • Xcite Web App
      • Mobile App
      • TrustRating Score
    • MARKETS
      • Forex
      • Indices
      • Commodities
      • Stocks
      • ETFs
      • Crypto
    • TRADING
    • COMPANY
    Sign inStart Trading

    Reconstructed from the design file · The page structure and navigation adapted for the mobile layout.

  3. 03

    Define the shared styles

    The proposed system uses a single typeface with defined text roles, semantic colour variables and reusable component masters.

    Action colours and text styles are documented alongside the layouts. The component examples show how those rules appear in market rows, account information and tier cards.

    Three of the things the palette was spent on: the market row, the account strip, one tier card.

    The market row

    Direction carried by a glyph and a sign before a colour. Each bar is drawn at the percentage above it.

    • My watchlist (8)
    • Stock (244)
    • Index (27)
    • Commodity (26)
    • Crypto (11)
    • Currency (42)
    • ETF (17)
    • AUDUSD +0.50%0.71160.7182Sell 0.71637Buy 0.7164144% Sell56% Buy56% of this instrument’s open positions are buying, 44% selling.
    • EURGBP -0.36%0.86910.8727Sell 0.86938Buy 0.8694238% Sell62% Buy62% of this instrument’s open positions are buying, 38% selling.
    • EURJPY +0.25%184.42185.00Sell 184.966Buy 185.00652% Sell48% Buy48% of this instrument’s open positions are buying, 52% selling.
    • EURUSD +0.28%1.16061.1655Sell 1.16452Buy 1.1645639% Sell61% Buy61% of this instrument’s open positions are buying, 39% selling.
    • GBPUSD +0.63%1.33001.3400Sell 1.33938Buy 1.3394247% Sell53% Buy53% of this instrument’s open positions are buying, 47% selling.

    The account strip

    Five cells, and only the first wears the accent. Balance plus unrealised gives the equity exactly.

    • +$23.85Unrealised P&L · +0.48%
    • 7036%Margin level
    • $5,023.85Account equity
    • $5,000.00Balance
    • $4,952.45Available

    The account tier card

    One rung of six, with its equity band in the text accent.

    Level 01Beginner$200 – $999

    The starting point — full platform access from the first trade.

    Spread & rollover discountNone

    Every string, price and percentage read from the design file's own nodes.

    Every string, price and percentage read from the design file's own nodes.

    Reconstructed from the design file · A market row, the account strip and a tier card.

  4. 04

    Make unfinished coverage visible

    The coverage board distinguishes the 23 designed pages from 12 scaffold pages.

    That distinction matters for handoff: a route appearing in the file does not mean its content and interface are complete.

03 · What I delivered

What I delivered

A redesign proposal with page designs, a coverage board, reusable components and documented foundations for further implementation.

04 · What I would revisit

What I would revisit

I would clarify business and content constraints before expanding the page file. For routes awaiting content, I would record the requirement on the coverage board rather than produce additional placeholder layouts.

Project status

This redesign was not launched. The visuals show the proposed design; the current Zenstox website is a separate implementation.

05 · Explore the system

Explore the system

Colour is two layers: fifteen primitives hidden from the pickers, eighteen semantic tokens aliasing them, each scoped to one job.

Collections
4
Variables
53
Text styles
11
Accent coverage, homepage capture
0.45%
Colour and typography9 colours · Manrope, 5 weights
green/accent — accent/default
#008a0cFills that carry white text. White on it is 4.53:1.
green/ink — text/accent
#0c7a16Green as text on a light ground: 4.97:1 on the canvas.
green/bright — accent/bright
#00b411The mark's own green. 7.24:1 on the deep ink, 2.51:1 on the canvas — dark grounds only.
zen/sage — text/secondary
#5f6862Body copy and secondary labels, at 5.20:1 on the canvas.
zen/whisper — text/tertiary
#66706aThe quietest tone that still clears AA on the page ground: 4.63:1.
zen/canvas — bg/canvas
#f1f4f1The default page ground. Warm and low-chroma — paper, not chrome.
zen/stone — bg/stone
#e9ece5Footer and secondary bands. It closes a page without going dark.
  • zen/ink — text/primary#1a221eAll primary type on light surfaces, at 14.67:1. Never pure black — it carries a green cast.
  • ink/deep — bg/dark#05070aThe only true dark: hero wash, glass nav, mobile drawer. White on it is 20.17:1.

Token names and hexes read from the file's own collections, ratios computed against the grounds beside them.

Manrope

  • Light
  • Regular
  • Medium
  • SemiBold
  • Bold

One family, eleven roles, 92px down to 13px. It replaces the six the live site loads.

Display/Hero · 92/98 · SemiBold · −3.5%

Trade the Zen way

Heading/Sub · 28/118 · Medium · −2%

A workspace that doesn’t shout at you.

Body/Lead · 18/170 · Regular · 0

Variable spreads, published pre-trade.

Components and states15 colour primitives + 3 alpha · 18 aliases

01 Primitives

The raw layer. 15 solid colours (plus 3 alpha tints, shown composited in the aliases), 13 spacing steps, 6 radii — and the only place in the system where a hex is written down.

  • green/accent#008a0c
  • green/hover#007a0a
  • green/ink#0c7a16
  • green/bright#00b411
  • ink/base#0a0f0b
  • ink/deep#05070a
  • white#ffffff
  • zen/paper#fbfcfb
  • zen/canvas#f1f4f1
  • zen/stone#e9ece5
  • zen/hair#dfe3dc
  • zen/hair-soft#eaede5
  • zen/ink#1a221e
  • zen/sage#5f6862
  • zen/whisper#66706a

Spacing

  • 4
  • 8
  • 12
  • 16
  • 20
  • 24
  • 32
  • 40
  • 48
  • 64
  • 80
  • 96
  • 120

Radius

  • sm · 8
  • md · 12
  • lg · 18
  • xl · 24
  • 2xl · 32
  • pill · 999

02 Semantic

The layer the interface actually spends. All 18 resolve to a primitive; not one holds a value of its own, which is what makes the palette re-pointable from a single collection.

  • bg/canvas→zen/canvas
  • bg/paper→zen/paper
  • bg/stone→zen/stone
  • bg/dark→ink/deep
  • bg/accent→green/accent
  • bg/glass→white 30%
  • text/primary→zen/ink
  • text/secondary→zen/sage
  • text/tertiary→zen/whisper
  • text/inverse→white
  • text/accent→green/ink
  • text/inverse-muted→white 72%
  • border/default→zen/hair
  • border/soft→zen/hair-soft
  • border/inverse→white 14%
  • accent/default→green/accent
  • accent/hover→green/hover
  • accent/bright→green/bright

Values read from the file's four collections, the alpha tokens composited over the ground they sit on.

Contact

Want to discuss a similar project?

Ask me about this projectExplore the design foundations
Next projectSimpl