Design System Analysis of 1win

A near-black crypto casino and sportsbook where two action colors carry everything — a vivid green for Registration and primary confirms, an electric blue for secondary actions and live betting. Inter is set at heavy weights, the surface ladder is a flat dark grey, and dense rails of full-bleed game tiles supply all the colour.

01 — Foundations

Color Palette

primary

#00b24b

Action Green — Registration CTA, primary confirm, place-bet

primary-bright

#00d95b

Win Green — positive emphasis, win / payout highlights

secondary

#0075ff

Electric Blue — Log In, links, Show more, active tabs, live

on-primary

#ffffff

White text/icons on accent fills

canvas

#141415

Page background, nav, sidebar rail — near-black

surface

#2e3035

Cards, game tiles, panels, utility buttons, inputs

hairline

#2d2f33

Faint 1px divider / card border

ink

#f0f2f5

Primary text, wordmark, headings — off-white

muted

#9aa1b1

Secondary labels, inactive glyphs, footer

faint

#53575f

Tertiary / placeholder / disabled

black

#000000

Max-contrast text on bright fills

error

#ff1f01

Live indicators, hot/urgent, destructive

02 — Foundations

Typography

Inter, set at heavy weights only — 600 (semibold) and 800 (extrabold). There is no regular-weight body; even running copy is semibold, which gives the dense, data-heavy UI its punchy, app-like feel.

display
Display — 33px / 800
Welcome Bonus 500%
heading
Heading — 20px / 800
Top Games
title
Title — 16px / 600
Lucky Jet
body
Body — 14px / 600
Bet online with the best odds on all major sports and esports.
ui
UI / odds — 13px / 600
Live · 2.45 odds
caption
Caption — 12px / 600
18+ Play responsibly
03 — Components

Button Variants

button-primary · green CTA

The green action color — Registration, primary confirm, place-bet.

button-secondary · blue

Electric blue — secondary action, links, Show more.

button-tertiary · dark utility
pill-badge / pill-outline
NEWAll games
bet-odds-button
1 · 2.45X · 3.10
04 — Components

Cards & Surfaces

Game Tile

Full-bleed game artwork inside 16px corners — the art supplies all the colour.

Promo Card

Dark card with full-bleed promotional photography, a title, and favorite / category chips.

Betslip Panel

Docked dark panel — odds, stake input, and a green place-bet confirm.

05 — Components

Form Elements

text-input · 8px
text-input · amount
06 — Foundations

Spacing Scale

8px base unit. Controls run tight — 8×12px button padding; cards and panels use 16–24px interiors.

xxs · 2px
xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 20px
xxl · 24px
xxxl · 32px
07 — Foundations

Border Radius

Modest 10–12px on buttons, 8px on inputs and odds chips, 16px on game tiles / cards / panels, and fully-round 999px on pills and badges.

4px
xs
6px
sm
8px
md
10px
lg
12px
xl
16px
card
full
full
08 — Foundations

Elevation & Depth

Flat ladder — depth from surface shift + faint hairline: canvas → surface.
Floating — soft rgba(0,0,0,0.4) drop shadow lifts modals, dropdowns, the docked betslip.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxIcon rail → bottom/hamburger nav; betslip becomes a bottom sheet; rails shorten
Tablet768–1023pxCondensed rail; fewer tiles per rail; 2-up promo grid
Laptop1024–1439pxFull rail + multi-tile rails
Desktop≥ 1440pxWidest rails + persistent betslip panel
375
768
1024
1280
1440

Touch targets: buttons carry 8×12px padding; the green Registration CTA is the largest tap surface. Collapsing: the left icon rail collapses first to a bottom/hamburger nav; tab strips and odds rows become horizontally scrollable; game rails keep their carousel and show fewer tiles; the betslip docks right on desktop, becomes a bottom sheet on mobile.