> ## Documentation Index > Fetch the complete documentation index at: https://docs.kinematic.run/llms.txt > Use this file to discover all available pages before exploring further. > ## Agent Instructions > These are the customer docs for kinematic, a name written in lowercase except at the start of a sentence. Kinematic provides provably fair casino games, served to a casino's site by a game server: a Cloudflare Worker that the kinematic dashboard deploys into the casino's own Cloudflare account. > Never put SESSION_SECRET or WALLET_SECRET in code, prompts, logs, commits or chat. Read them from environment variables and ask the person you work with to set them. The dashboard's Integration page shows each secret once. > Values such as lucky-star, luckystar.example, og-rgs-lucky-star.luckystar.workers.dev, games.luckystar.example and player_48213 are examples. Use the casino's own casino ID, game server origin, element tag, session issuer and currencies: the Instructions for your coding agent on the dashboard's Integration page hold them, or ask the person you work with. > To debug, start at https://docs.kinematic.run/troubleshooting and https://docs.kinematic.run/reference/errors. The wallet contract is at https://docs.kinematic.run/api/wallet.openapi.yaml. > Sandbox bets are recorded on Solana devnet. Live game servers record nothing on Solana until the audited mainnet program is deployed. # Appearance > Theme the games from your website, upload your logo, name the element and fine-tune colours, shape and type, with a live preview of every change. The **Appearance** page sets how the games look on your site. It has four parts, in this order: **Theme from your site**, **Logo**, **The element** and **Fine-tuning**. Beside them (or under the theme section on a narrow window) is the preview: the real games in your theme, playing scripted rounds. When more than one game is on, a switcher above it chooses the game to preview. The note under it reads `You see scripted rounds with demo credits. Nothing here reaches your game server.` Owners and admins change these settings. Other members see the page with the banner `Only the casino's owners and admins can change these settings.` ## Theme from your site Type your site's address in the address bar, after its fixed `https://` prefix (for example `luckystar.example`), and select **Suggest themes**. Nothing on your site changes. The run takes about a minute, and you can use other pages of the dashboard meanwhile. You see four steps as they happen: 1. Opening `` 2. Reading its colours and fonts 3. Looking for its logo 4. Writing three themes Select **Cancel** to stop the run. When the site has been read, the page shows its screenshot and what it found: its colours, its fonts, its main button and its logo. Three themes follow, **Matched**, **Bold** and **Quiet**, each with one sentence written for your site: * **Matched** stays as close to your site as it can. * **Bold** lets your brand carry more of the frame, with deeper coloured surfaces. * **Quiet** keeps a restrained, neutral frame with modest corners. Choose a theme to see it on the preview. Nothing changes for your players until you use it. If the scan found a logo, it shows on your site's header colour with the switch **Use this logo**; when your casino already has a logo, the hint says `It replaces your current logo.` * **Use this theme** saves the theme, and the logo if you switched it on, at once. The page confirms with `The theme is saved. Your game server gets it within a minute.` * **Keep my current look** forgets the suggestion and saves nothing. Once your casino has a theme, the section offers **Get a new suggestion from your site** instead. ### Upload a screenshot instead Select **Upload a screenshot instead** at any time to get the three themes from a screenshot of your home page: a PNG or JPEG up to 4 MB, taken at full width. The run then shows one step, Writing three themes from your screenshot. The page also offers the upload when your site is blocked. The screenshot window dims and says why: your site showed a Cloudflare challenge, a bot check or another security check, a notice for the region the scan's browser runs in, a captcha or an error page instead of its page, or its page stayed empty. You can scan your site 10 times an hour and ask for 30 suggestions an hour for each casino. The setup wizard's look step offers the same themes, from the address you gave when you created the casino. ## Logo Your page can show your logo above the games. Select **Upload a logo** and choose an SVG, PNG, JPEG, GIF, WebP or AVIF up to 512 KB. It is kept as a PNG of at most 512 × 160 pixels and 24 KB, and it saves as soon as you upload it, apart from **Save**. **Replace** and **Remove** change it later. The games do not draw it: your page reads it from the loader as `config.logo` for its header. ## The element Players' browsers can see the element's name, so it never carries kinematic's. **Element name** is the tag your page writes where the games show, `og-game` by default. You can choose your own, such as `luckystar-games`: * At most 40 characters, starting with a lowercase letter, then lowercase letters, digits, hyphens or underscores. * No dot: `Leave out the dot. The loader finds your elements with a CSS selector, and a dot there starts a class name.` * At least one hyphen: `A custom element name needs a hyphen, such as casino-game.` * Not a name HTML reserves, such as `font-face`. * Not containing kinematic: `Players see this name, so it cannot contain kinematic.` When you change it, change the tag in your pages too. The [embed](https://docs.kinematic.run/integrate/embed.md) uses whichever tag you choose. The switch **Show the kinematic mark while a game loads** is off by default, so your games stay white-label. ## Fine-tuning Open **Fine-tuning** to set the colours, shape and type by hand. **Start from** offers six presets: Default, Dark, Verdant, Harbor, Crimson and Aurum. A preset replaces every value below it, and nothing changes for your players until you save. The settings come in three groups. Under **Colour**, **More colours** shows the colours that follow the accent and scheme unless you set them. Each colour has a swatch and a hex field, and **Default** clears a value you set. When the games adjust a colour for contrast, the page shows the colour they use. | Group | Setting | What it sets | | - | - | - | | Colour | Accent | Your brand colour. The bet key, highlights and the screen's line of light come from it. | | Colour | Scheme | Light or Dark: the panels around the game screen. | | Colour | Game screen | Dark or Follows the scheme. Dark keeps the play area dark in both schemes. | | More colours | Background | The level behind the game's frame. | | More colours | Surface | The frame: title bar, controls and toolbar. | | More colours | Text | Main text on the frame. | | More colours | Secondary text | Labels and captions. | | More colours | Bet key label | The label on the bet key. | | More colours | Accent highlight | The lighter accent for highlights. | | More colours | Win | Win digits, the win plate and history. | | More colours | Danger | Hazards and errors only. | | Shape | Corner radius | The game's outer corners, 0 to 48 px. | | Shape | Roundness | Controls from sharp (0) to round (1). The bet key is a pill from 0.5. | | Shape | Density | Comfortable or Compact. Compact tightens the controls for short embeds. | | Type | Font | Your text face as a CSS font list, such as `Inter, sans-serif`. Geist by default. | | Type | Numbers font | The face for amounts and multipliers. Geist Mono by default. | Your page loads these fonts. The preview shows them only if your computer has them. ## Save your changes One **Save** keeps the element name, the mark and the theme together. A logo upload and **Use this theme** save on their own. While changes are unsaved, a bar at the foot of the window says `You have unsaved changes.` with **Discard** and **Save**. Leaving the page then asks `Leave without saving?`, with **Stay** and **Leave without saving**. After a save the page says `Saved. Your game server gets the new settings within a minute.` ## Your page can override the theme A `--og-*` token set inline on an element, in its `style` attribute or with `element.style.setProperty()` before `connect()`, wins over the dashboard's value for that element. So does a call to `applyTheme()`. A token set in your stylesheet loses to the dashboard's value unless it is `!important`. [Element](https://docs.kinematic.run/reference/element.md#styling) lists every token. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.