Skip to main content

Design preview

Design systemIntegration notes
WTT
Log In
WTT
Explore TournamentsTry PracticeLog In
Internal, not on the public site

WTT design system

Tokens, contrast checks and every shared component in its states. Ratios below are calculated live from the token values with the WCAG 2 formula, including tinted badge fills blended over the panel.

Palette

Values live once in :root in globals.css and reach Tailwind through the @theme mapping (bg-panel, text-primary, text-achievement and so on). Gold appears only on achievements: first place and awarded prizes.

  • Graphite

    #080D16 · background

    Page background

  • Panel

    #121C2B · panel

    Elevated surfaces, cards

  • Panel raised

    #18253A · panel-raised

    Hover and nested surfaces

  • Field

    #0B1322 · field

    Form control fill

  • Off-white

    #F5F7FB · foreground

    Primary text

  • Muted

    #AAB7CA · muted-foreground

    Secondary text

  • Electric cyan

    #45D6FF · primary

    Primary action, links, focus

  • Violet

    #9A82FF · highlight

    Restrained secondary accent

  • Championship gold

    #E8C879 · achievement

    Achievements only

  • Success

    #5BE3A1 · success

    Open, paid, confirmed

  • Warning

    #FF9F5A · warning

    Needs attention

  • Danger

    #FF7A7A · danger

    Errors, cancelled

  • Input border

    #5E6E86 · input

    Form control borders

  • Border

    #22314A · border

    Decorative dividers

Contrast checks

Text needs 4.5:1 (AA) at body sizes; component boundaries and focus indicators need 3:1. The two failing pairs are recorded so nobody uses them: CTA fills always carry graphite text.

Text pairs

PairSampleRatioResult
Off-white on graphite#F5F7FB on #080D16Aa 16px18.14:1AAA
Off-white on panel#F5F7FB on #121C2BAa 16px15.96:1AAA
Off-white on panel raised#F5F7FB on #18253AAa 16px14.35:1AAA
Muted on graphite#AAB7CA on #080D16Aa 16px9.57:1AAA
Muted on panel#AAB7CA on #121C2BAa 16px8.43:1AAA
Muted on panel raised#AAB7CA on #18253AAa 16px7.57:1AAA
Cyan text on graphite#45D6FF on #080D16Aa 16px11.41:1AAA
Cyan text on panel#45D6FF on #121C2BAa 16px10.04:1AAA
Graphite on cyan (primary button)#080D16 on #45D6FFAa 16px11.41:1AAA
Graphite on cyan hover#080D16 on #7BE3FFAa 16px13.22:1AAA
Violet text on graphite#9A82FF on #080D16Aa 16px6.49:1AA
Violet text on panel#9A82FF on #121C2BAa 16px5.72:1AA
Gold text on graphite#E8C879 on #080D16Aa 16px12.01:1AAA
Gold text on panel#E8C879 on #121C2BAa 16px10.57:1AAA
Success text on panel#5BE3A1 on #121C2BAa 16px10.55:1AAA
Warning text on panel#FF9F5A on #121C2BAa 16px8.44:1AAA
Danger text on panel#FF7A7A on #121C2BAa 16px6.78:1AA
Danger text on field#FF7A7A on #0B1322Aa 16px7.36:1AAA
Cyan badge (text on 10% tint over panel)#45D6FF on #172f40Aa 16px8.12:1AAA
Violet badge (text on 10% tint over panel)#9A82FF on #202640Aa 16px4.96:1AA
Gold badge (text on 10% tint over panel)#E8C879 on #272d33Aa 16px8.59:1AAA
Success badge (text on 10% tint over panel)#5BE3A1 on #193037Aa 16px8.52:1AAA
Danger badge (text on 10% tint over panel)#FF7A7A on #2a2533Aa 16px5.89:1AA
Muted text on panel at 60% over graphite#AAB7CA on #0e1623Aa 16px8.93:1AAA
Off-white on cyan (never used)#F5F7FB on #45D6FFAa 16px1.59:1Fail
Off-white on violet (never used)#F5F7FB on #9A82FFAa 16px2.79:1Fail

Component boundaries and focus

PairSampleRatioResult
Input border against field fill#5E6E86 on #0B1322Boundary3.58:1UI only
Input border against panel#5E6E86 on #121C2BBoundary3.30:1UI only
Input border against graphite#5E6E86 on #080D16Boundary3.75:1UI only
Focus outline (cyan) against graphite#45D6FF on #080D16Boundary11.41:1UI only
Focus outline (cyan) against panel#45D6FF on #121C2BBoundary10.04:1UI only
Checked checkbox (cyan) against field#45D6FF on #0B1322Boundary10.89:1UI only
Decorative border against graphite (decorative only)#22314A on #080D16Boundary1.49:1Fail

Typography

Barlow Condensed (display, short headlines only, uppercase) and Inter (body and interface), both under the SIL Open Font License, self-hosted through next/font with system fallbacks. Body text starts at 16px.

text-display-2xl · Barlow Condensed 800

Trading, played as a sport.

text-display-xl · 700

Tournaments on the calendar

text-display-lg / text-display-md

Results you can check

Final results

Inter · 20 / 18 / 16 / 14px

Lead text at 20px for page introductions.

Section descriptions at 18px in muted text.

Body text at 16px with a 1.6 line height.

Metadata and helper text at 14px.

tabular-nums (prices and standings)

  • 1,284.6 pts
  • 1,111.1 pts
  • USD 12,000

proportional (avoid for numbers in columns)

  • 1,284.6 pts
  • 1,111.1 pts
  • USD 12,000

Motion

Every animation is switched off under prefers-reduced-motion.

Section reveal
420ms, opacity and 14px of travel, ease-snap. Only for content that starts below the fold.
Feedback
150ms on buttons, cards and links: colour, border and a 2px lift.
Hero lighting
Two blurred light fields drifting over 22 to 28 seconds, plus a one-time 1.6s line draw.
Never
Scroll hijacking, flashing, autoplay audio, infinite tickers or animated rank changes.

Buttons and badges

PlannedRegistration openRegistration closedLive nowCompletedResults publishedCancelled
AdvertisedAwardedPaidPracticeVerification required

Tournament card

One component for every state. The accent line, status badge and call to action follow the status; availability is whatever the eligibility service returns.

  • Registration openSample data

    Forex majors5-day sprint

    Meridian FX Sprint

    Five trading days on the major currency pairs. One simulated balance, one scoreboard, ranked by the published scoring method.

    Starts
    Entry
    USD25Cash entry or voucher
    Prize pool
    USD5,000Advertised, rules apply

    Eligibility: Your eligibility is confirmed for your account when you enter.

    View tournament: Meridian FX Sprint
  • Registration openPracticeSample data

    Forex majorsOpen practice

    Practice Arena: FX Majors

    Learn the platform and the scoring at your own pace. Practice standings are for your own review and award no prizes.

    Starts
    Entry
    FreeNo entry fee
    Prize pool
    NonePractice only

    Available: Practice is open to registered members.

    View practice: Practice Arena: FX Majors
  • Live nowSample data

    Gold · Crude oil · Stock indices3-week league

    Northstar Commodities Cup

    A three-week league across commodities and indices, with weekly standings checkpoints and a final ranking at the close.

    Ends
    Entry
    USD50Cash entry
    Prize pool
    USD12,000Advertised, rules apply

    Not available: Paid tournaments are not offered in your region under the current eligibility policy.

    Follow standings: Northstar Commodities Cup
  • PlannedSample data

    Forex majors5-day sprint

    Planned variant

    Five trading days on the major currency pairs. One simulated balance, one scoreboard, ranked by the published scoring method.

    Starts
    Entry
    USD25Cash entry or voucher
    Prize pool
    USD5,000Advertised, rules apply

    Verification required: Complete identity verification before you can claim a cash prize.

    View tournament: Planned variant

Price display and prize breakdown

  • Free practice

    FreeNo entry fee

  • Cash only

    USD50Cash entry

  • Cash or voucher

    USD25Cash entry or voucher

  • Voucher only

    VoucherVoucher entry only
Prize breakdown by finishing place
PlacePrize per playerStatus
1stUSD 2,000Advertised
2ndUSD 1,250Advertised
3rdUSD 750Advertised
4th–8thUSD 200Advertised
Total poolUSD 5,000Advertised

Cash prizes are paid under the published rules, after results are confirmed, eligibility is checked and the winner completes identity verification.

Availability

Server-provided state and wording, shown verbatim. The loading state is used while the eligibility service answers.

Eligibility: Your eligibility is confirmed for your account when you enter.

Available: This tournament is available to your account.

Verification required: Complete identity verification before you can claim a cash prize.

Not available: Paid tournaments are not offered in your region under the current eligibility policy.

Checking availability for your account

Result rows

A table from 640px; compact rows below that keep rank, player, score, prize and status.

  1. 1 placemeridian_kAEMax drawdown 2.9%USD 3,000Paid1,412.8 pts
  2. 2 placesparrow.mktSGMax drawdown 3.6%USD 1,500Paid1,377.1 pts
  3. 3 placetessellateMYMax drawdown 4.1%USD 750Awarded1,350.4 pts
  4. 4 placenorthwindSGMax drawdown 2.4%USD 250Awarded1,318.9 pts
  5. 5 placeq.voltaAEMax drawdown 5.0%USD 250Awarded1,290.2 pts
  6. 6 placekestrelIDMax drawdown 3.3%No prize1,254.7 pts
  7. 7 placeridgelineMYMax drawdown 4.4%No prize1,231.0 pts
  8. 8 placeharbour.fxHKMax drawdown 6.8%No prize1,209.6 pts

Trust metric

A figure always carries its period and a verified source. Without them it is an internal placeholder and never reaches the public site.

  • Tournaments completed

    Awaiting figure

    Period
    Not set
    Source
    Not verified

    Internal placeholder · hidden until verified

  • Layout example, not WTT data

    1,234

    Period
    Example period
    Source
    Example source, verified 31 Oct 2026

Form controls

Labels always visible, 48px controls, errors in text with an icon, linked with aria-describedby. The full working form is on the For Brands page.

Enter an email address like name@company.com

Radio cards

Confirm that we may use your details to reply

Empty, error and loading states

No tournaments are open right now

New tournaments appear here as soon as they're announced.

Standings couldn't load

The scoreboard service didn't answer. The last confirmed standings are still shown below.
Loading standings

Approved media slot

Event reel, 10 to 20 seconds, muted

Approved footage with a poster frame and a captions file. It plays muted only while on screen and has a visible pause control.