1WIN Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

10tokens

6type steps

6radius steps

2pxspacing base

1WIN, in one page

1win is a crypto casino and sportsbook that runs almost entirely on a near-black canvas ({colors.canvas} — #141415), a flat, slightly cool dark field that lets thousands of vibrant game thumbnails do the shouting. The chrome around the content is deliberately quiet: dark-grey surfaces ({colors.surface} — #2e3035), faint translucent hairlines, and off-white text ({colors.ink} — #f0f2f5). Against that restraint, two action colors carry the entire interactive layer — a vivid green ({colors.primary} — #00b24b) on the "Registration" CTA and every primary confirm, and an electric blue ({colors.secondary} — #0075ff) on "Log In", links, the "Show more" pill, active tabs, and bet highlights.

The layout is a high-density product surface, not a marketing page. A fixed left icon rail holds category navigation; the main column is a long stack of horizontally-scrolling rails — "Top games", "Slots", "Originals", game providers — each a row of full-bleed, brightly-illustrated game-tile thumbnails. Promotional bonuses ride in gradient-rich hero-banner cards at the top, and the sportsbook adds match rows with bet-odds-button chips and a right-hand betslip-panel. Typography is Inter set at heavy weights only (600 and 800) — even body copy is semibold — which gives the dense UI a punchy, app-like confidence rather than an editorial calm.

Color discipline is the key to reading this brand correctly: the loud purples, reds, ambers, and violets that fill the screen all live *inside* game artwork and bonus-card illustrations — they are content, not chrome. The system itself is monochrome dark plus exactly two signals: green for "go / win / register" and blue for "secondary / navigate / live". Everything structural is built from the dark surface ladder and those two accents.

Key Characteristics:

Near-black {colors.canvas} foundation with a flat {colors.surface} card/tile ladder — depth comes from surface shifts and faint {colors.hairline} borders, not heavy shadow.
Two-signal action system: green {colors.primary} for primary CTAs (Registration, confirm) and blue {colors.secondary} for secondary actions, links, and live/betting highlights.
Inter at heavy weights only (600 / 800) — even {typography.body} is semibold, giving the dense UI an app-like punch.
Content-forward game rails — full-bleed game-tile artwork supplies all the saturation; the surrounding frame stays monochrome dark.
Pill language for badges and status ({rounded.full}), modest {rounded.lg}–{rounded.xl} on buttons, and {rounded.card} (16px) on tiles, promo cards, and panels.
A left icon sidebar-rail + dense horizontally-scrolling rails define the shell, closer to a native app than a website.

Do's and don'ts

Do

Reserve {colors.primary} (green) for primary actions — Registration, confirm, place-bet — and {colors.secondary} (blue) for secondary actions, links, and live/betting highlights.
Build depth with the surface ladder ({colors.canvas} → {colors.surface}) plus a faint {colors.hairline} edge; avoid heavy shadows.
Set every label in Inter 600+ ({typography.body} / {typography.caption}); use the 800 weight for headlines and bonus figures.
Let game and promo artwork supply the color — keep the surrounding chrome monochrome dark.
Use {rounded.lg}–{rounded.xl} on buttons, {rounded.card} (16px) on tiles/cards/panels, and {rounded.full} on pills and badges.
Pair accent fills with {colors.on-primary} (white) text for legibility.

Don't

Don't promote game-tile or bonus-banner gradient colors (the purples, reds, violets, ambers) into the UI palette — they are content, not chrome.
Don't add a third structural accent; the system is green + blue only.
Don't use pure-regular weights — there is no Inter 400 here; body copy is semibold.
Don't pad game tiles — artwork is full-bleed inside {rounded.card} corners.
Don't rely on drop shadows for elevation; the surface brightness step is the elevation language.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the 1WIN design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #00b24b
- secondary: #0075ff
- on-primary: #ffffff
- canvas: #141415
- surface: #2e3035
- hairline: #2d2f33
- ink: #f0f2f5
- muted: #9aa1b1
- faint: #53575f
- black: #000000

Type:
- families: Inter
- scale: 12, 13, 14, 16, 20, 33
- weights: 600, 800

Shape:
- radius: 4, 6, 8, 10, 12, 16
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 12, 16, 20, 24, 32

Rules:
- Reserve `{colors.primary}` (green) for primary actions — Registration, confirm, place-bet — and `{colors.secondary}` (blue) for secondary actions, links, and li…
- Build depth with the surface ladder (`{colors.canvas}` → `{colors.surface}`) plus a faint `{colors.hairline}` edge; avoid heavy shadows.
- Set every label in Inter 600+ (`{typography.body}` / `{typography.caption}`); use the 800 weight for headlines and bonus figures.
- Let game and promo artwork supply the color — keep the surrounding chrome monochrome dark.
- Use `{rounded.lg}`–`{rounded.xl}` on buttons, `{rounded.card}` (16px) on tiles/cards/panels, and `{rounded.full}` on pills and badges.
- Pair accent fills with `{colors.on-primary}` (white) text for legibility.

Avoid:
- Don't promote game-tile or bonus-banner gradient colors (the purples, reds, violets, ambers) into the UI palette — they are content, not chrome.
- Don't add a third structural accent; the system is green + blue only.
- Don't use pure-regular weights — there is no Inter 400 here; body copy is semibold.
- Don't pad game tiles — artwork is full-bleed inside `{rounded.card}` corners.
- Don't rely on drop shadows for elevation; the surface brightness step is the elevation language.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages analyzed: home, promotions, betting, vip-club.

Brand & Accent

Action Green ({colors.primary} — #00b24b): The primary action color — the "Registration" CTA, primary confirms, betslip place-bet, and section accent icons. The brand's "go / win" signal.
Electric Blue ({colors.secondary} — #0075ff): The secondary action — "Log In", text links, the "Show more" pill, active tabs, badges, and live/betting highlights.
On Primary ({colors.on-primary} — #ffffff): White text/icons on the green and blue fills.

Surface

Canvas ({colors.canvas} — #141415): The page background and the fill of the nav and sidebar-rail — a flat near-black.
Surface ({colors.surface} — #2e3035): Cards, game tiles, promo cards, betslip panels, utility buttons, and input fields — the single elevated dark step.
Hairline ({colors.hairline} — #2d2f33): The faint 1px divider/card border, a translucent cool-grey edge that reads against both canvas and surface.

Text

Ink ({colors.ink} — #f0f2f5): Primary text, the wordmark, and headings — a soft off-white.
Muted ({colors.muted} — #9aa1b1): Secondary labels, inactive nav glyphs, footer text.
Faint ({colors.faint} — #53575f): Tertiary/placeholder text and disabled labels.
Black ({colors.black} — #000000): Maximum-contrast text used on the brightest accent fills and light promo surfaces.

Type scaleRead the full spec

Font Family

The entire system is set in Inter (Inter, sans-serif), and only at heavy weights — 600 (semibold) and 800 (extrabold). There is no regular-weight body text; even running copy is semibold, which is what gives the dense, data-heavy interface its punchy, native-app feel. Headlines and bonus figures use 800; everything functional uses 600.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display}`	33px	800	1.1	Hero / page headlines (bonus figures, "Promotions")
`{typography.heading}`	20px	800	1.2	Section + card titles
`{typography.title}`	16px	600	1.3	Game titles, row headers, outlined pills
`{typography.body}`	14px	600	1.4	Default body, button labels
`{typography.ui}`	13px	600	1.3	Inline UI text, odds, metadata
`{typography.caption}`	12px	600	1.3	Badges, chips, micro-labels

Principles

Hierarchy is built from size and the 600↔800 weight jump, never from a light/regular contrast. The heavy floor keeps small UI text legible against the dark, busy backdrop and matches the high-energy gambling context.

Note on Font Substitutes

Inter is an open-source Google Font, so no substitution is needed. If a fallback is required, any grotesque with a strong semibold (e.g. Manrope, Geist) preserves the heavy-weight character; keep body at 600+ to retain the app-like density.

Components and layoutRead the full spec

No hover states documented. Each spec covers Default and Active/Pressed only. Variants live as separate components: entries.

Buttons

button-primary — the green "Registration" / primary-confirm CTA, the highest-visibility control.

Background {colors.primary}, text {colors.on-primary}, type {typography.body}, rounded {rounded.lg}, padding {spacing.sm} {spacing.md} (8×12px).

button-secondary — the blue "Log In" / secondary action and the "Show more" pill.

Background {colors.secondary}, text {colors.on-primary}, type {typography.body}, rounded {rounded.lg}, padding 8×12px.

button-tertiary — the dark-grey utility button ("More events", "Read more").

Background {colors.surface}, text {colors.ink}, type {typography.body}, rounded {rounded.xl}, padding 8×12px.

button-ghost — a low-emphasis grey control on dense rows.

Background {colors.surface}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding 0 {spacing.sm} (0×8px).

Navigation

top-nav — the sticky header carrying the 1win wordmark, search, balance, and the green Registration + blue Log In CTAs.

Background {colors.canvas}, text {colors.ink}, padding 8×16px, with a {colors.hairline} base edge.

sidebar-rail — the fixed left icon rail (Casino, Sports, categories).

Background {colors.canvas}, glyphs {colors.muted}, padding {spacing.sm}. Active item marked in {colors.primary}.

Inputs & Forms

text-input — search and betslip amount fields.

Background {colors.surface}, text {colors.ink}, placeholder {colors.faint}, border {colors.hairline}, type {typography.body}, rounded {rounded.md}, padding 8×12px.

bet-odds-button — the odds chip in sportsbook match rows.

Background {colors.surface}, text {colors.ink}, type {typography.ui}, rounded {rounded.md}, padding 8×12px. Selected state highlights in {colors.secondary}.

Pills & Badges

pill-badge — the solid blue status/count badge.

Background {colors.secondary}, text {colors.on-primary}, type {typography.caption}, rounded {rounded.full}, padding 0 {spacing.xs} (0×4px).

pill-outline — the bordered filter/category pill.

Text {colors.ink}, type {typography.title}, rounded {rounded.full}, padding 0×8px, with a {colors.hairline} border.

Cards & Containers

game-tile — the core discovery unit: a full-bleed game thumbnail.

Background {colors.surface} (placeholder), rounded {rounded.card}. Artwork fills edge-to-edge with no padding.

hero-banner — the top welcome-bonus / promo banner.

Background {colors.surface} with edge-to-edge gradient imagery, headline {colors.ink} in {typography.display}, rounded {rounded.card}, padding {spacing.xxl}.

promo-card — a promotions-page card (full-bleed photo + title + chips).

Background {colors.surface}, title {colors.ink}, rounded {rounded.card}, padding {spacing.lg}.

feature-card — generic dark content card.

Background {colors.surface}, text {colors.ink}, border {colors.hairline}, rounded {rounded.card}, padding {spacing.lg}.

feature-card-elevated — a feature card lifted above the page (floating shadow), base for modal/toast surfaces.

Background {colors.surface}, text {colors.ink}, rounded {rounded.card}, padding {spacing.lg}, soft rgba(0,0,0,0.4) shadow.

betslip-panel — the docked sportsbook betslip / wheel-of-fortune panel.

Background {colors.surface}, text {colors.ink}, rounded {rounded.card}, padding {spacing.lg}. Confirm action uses button-primary.

footer — the page footer (support, information, categories columns).

Background {colors.canvas}, text {colors.muted}, headings {colors.ink}, padding {spacing.xxl}.

Examples (illustrative)

Kit-mirror demonstration surfaces. Each ex-* entry references 1win's brand-native primitives ({colors.surface}, {colors.primary}, {rounded.card}, the spacing scale) so downstream consumers re-skin the same 10 illustrative surfaces consistently. These are not extracted brand components.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-1win {--page-bg: #141415;
  --page-bg-gradient: none;
  --text-color: #f0f2f5;
  --heading-color: #f0f2f5;
  --link-color: #00b24b;
  --link-hover-color: #007f36;
  --border-color: #3c3c3d;
  --card-bg: #141415;
  --card-shadow: 0 1px 2px rgba(240,242,245,0.06);
  --card-hover-shadow: 0 6px 18px rgba(240,242,245,0.12);
  --header-bg: #272728;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #141415;
  --footer-text-color: #a3a4a7;
  --button-bg: #008538;
  --button-text-color: #ffffff;
  --button-hover-bg: #005223;
  --button-border: none;
  --button-border-radius: 10px;
  --button-secondary-bg: #212122;
  --button-secondary-text-color: #f0f2f5;
  --button-secondary-hover-bg: #2e2f30;
  --button-secondary-border: 1px solid #3c3c3d;
  --prompt-bg: #1f1f20;
  --prompt-text-color: #f0f2f5;
  --base-font: var(--font-inter);
  --heading-font: var(--font-inter);
  --card-border-radius: 10px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

linear.app 72.7%
spotify 71.9%

Where this came from

Source document: volt/design-md/1win/DESIGN.md · 23.1 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.