LiveOnlyWin UI · v0.3.1

Exact by default. Fun where it counts.

The design system behind every OnlyWin screen: one token source, one component API in Svelte and React. Calm, precise consoles for money and RTP, and a bright brand layer for the pages players see.

Get started Components

Frameworks: Svelte 5, React 19
Themes: Dark, light
Contrast: WCAG 2.2 AA
Output: Typed ESM

RTP formatter · example96.50%

Return to player

--ow-color-brand#01CE2C · on ink 9.4:1

import { Button } from '@onlywin/ui-svelte';

<Button variant="primary">Play demo</Button>

Live

One APIWrite it once. Ship it in Svelte or React.

Both packages export the same 44 components with the same props, markup and classes, so a screen looks the same whichever you build with.

Svelte 5

<script lang="ts">
  import { Money, StatTile } from '@onlywin/ui-svelte';
</script>

<StatTile label="GGR, 7 days" value="€ 12 400"
  delta={{ good: true, trend: 'up', value: '+4.2%' }} />
<Money currency="EUR" minor={124_000} />

React 19

import { Money, StatTile } from '@onlywin/ui-react';

<StatTile label="GGR, 7 days" value="€ 12 400"
  delta={{ good: true, trend: 'up', value: '+4.2%' }} />
<Money currency="EUR" minor={124_000} />

Money and RTPExact to the last cent, in every language.

Amounts travel as integer minor units and never touch floating point. RTP is the certified decimal as written. The reader’s language decides separators, symbols and order.

English

Big win: 1,240.00 EUR
Stake: 0.20 USD
Jackpot: 999,999,999.99 GBP
RTP: 96.50%

Русский

Big win: 1 240,00 EUR
Stake: 0,20 USD
Jackpot: 999 999 999,99 GBP
RTP: 96,50 %

Accessible by defaultBuilt for keyboards, screen readers and calm eyes.

Every interactive part follows the WAI-ARIA patterns, every colour pair is measured, and motion stops when the reader asks for less.

74 / 74

Colour pairs pass WCAG 2.2 AA

Text, controls and charts, in both themes.

⌨

Keyboard first

Arrows, Home, End, typeahead and Escape where you expect them; focus always visible, always returned.

2 languages

English and Russian built in

Every label, announcement and format comes from the catalogs, with dates and money in the reader’s locale.

TokensOne source for colour, type, space and motion.

The tokens build the CSS variables, the dark and light themes and the contrast checks. Change a value once and every screen follows.

--ow-color-brand #01ce2c

--ow-color-brand-text #34e058

--ow-color-accent-yellow #ffc83d

--ow-color-accent-pink #ff5fa2

--ow-color-surface #0c0f0d

--ow-color-bg #070908

Start in a minute.

Import the stylesheet, pick the components for your framework, and wrap the app in the provider for its language.

Read the guide Brand assets

main.ts

import '@onlywin/ui-styles';
import '@onlywin/ui-styles/fonts';