# Beseda Chat · Design system migration spec

> Source: https://beseda.chat  ·  Curated by OpenDesign  ·  en

> The site effectively combines a dark, premium aesthetic with vibrant accents to create an engaging and high-energy environment typical of modern online gaming platforms.

## 1. Identity DNA

Beseda Chat is built as a digital interior, its identity defined by the high-stakes atmosphere of a modern online casino and sportsbook. Like the architecture of a premium gaming hall, every design decision—from the deep teal backdrop to the vibrant yellow accents—serves the dual purpose of immersion and clear, rapid action.

**One-liner:** An online casino and sportsbook platform with a dark green theme and vibrant game imagery.
**Keywords:** Online Casino · Sports Betting · Gaming · Entertainment · Betting
**Analogy:** An online casino and sportsbook platform interface

## 2. Color

The color system establishes a high-contrast environment with a deep teal green (#0e2f2b) as the dominant field. A single, vibrant yellow (#f9c719) functions as the exclusive accent for primary actions, ensuring they cut through the dark canvas with immediate clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0e2f2b` | main background |
| `--bg-soft` | `#273028a6` | card background |
| `--bg-quiet` | `#024f4b` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#c1cfc5` | secondary text |
| `--muted` | `#7d9783` | placeholder |
| `--muted-soft` | `#91b7ae` | weak hint |
| `--accent` | `#f9c719` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast dark background with vibrant yellow accent for primary actions.

This strict two-tone hierarchy prevents visual noise and directs focus unerringly toward interactive elements.

## 3. Typography

Typographic voice is clean and commanding, using a sans-serif family to maintain a modern, legible baseline. Tight line heights for headlines create condensed, impactful blocks of text, while the selective use of uppercase labels adds structured emphasis without clutter.

- **Display:** sans-serif
- **Body:** sans-serif
- **Mono:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.2 | 600 | normal | Section headers |
| body | 16px | 1.15 | 400 | -0.32px | Body text |
| caption | 12px | 1.33 | 400 | normal | Captions and small labels |

**Type rules:**
- Use sans-serif font family.
- Maintain tight line heights for headlines.
- Use uppercase sparingly for labels.

## 4. Spacing

Spatial rhythm is governed by a strict 4px base unit, creating a predictable and consistent grid for all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** 4px base unit for consistent spacing.

## 5. Surfaces

Surfaces are defined by subtle depth and soft separation. Shadows are diffused and atmospheric rather than literal, and borders are rendered in near-translucent rgba values to maintain the dark, immersive field.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 4px 12px rgba(0, 0, 0, 0)
  - 0 0 80px rgba(116, 107, 93, 0.2)
- **Borders:** Subtle borders using rgba(0, 0, 0, 0.1)

## 6. Layout

The structural skeleton is a responsive three-column layout on desktop: a navigation sidebar, a central content area for game cards, and a dedicated panel for betting slips. This arrangement collapses to a single, focused column on mobile, prioritizing content flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Three-column layout on desktop (sidebar, main content, right panel), single column on mobile.

## 7. Motion & Interaction

Motion is implemented as functional feedback rather than decoration. Transitions are smooth and contained—used for hover states, carousel slides, and content fade-ins—to confirm user actions and guide navigation without creating distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states.
  - Carousel slide animations.
  - Fade-in for content loading.

- **Hover:** Subtle background color change or scale effect.
- **Click:** Immediate visual feedback (button press).
- **Transition:** 0.15s ease-in-out for most interactive elements.
- **Keyboard:** Standard focus rings for accessibility.

## 8. Voice & Don'ts

Editorial voice is direct, exciting, and promotional, with headlines and CTAs built for immediate comprehension and action. Language is active and inviting, stripped of passive constructions or complex jargon that could slow the user's momentum.

- **Tone:** Exciting, inviting, and promotional.
- **Headline style:** Direct and action-oriented.
- **CTA style:** Clear and encouraging (e.g., 'Play', 'Make a bet').
- **Avoid:** Passive language. / Overly complex legal jargon. / Dull or muted descriptions.

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows dark green theme.
- ❌ Don't use serif fonts — screenshot shows sans-serif typography.
- ❌ Don't use low-contrast text — screenshot shows high-contrast white text on dark backgrounds.
- ❌ Don't use sharp corners — screenshot shows rounded corners (12px).
- ❌ Don't use small, dense layouts — screenshot shows spacious cards with clear imagery.
- ❌ Don't use muted colors only — screenshot shows vibrant yellow accent for key actions.

The system deliberately avoids light backgrounds, serif typography, and muted color palettes, rejecting aesthetics that would dilute its focused, high-energy environment.

## System Prompt (paste into AI tool)

```
This is an online casino and sportsbook platform interface. It features a dark green (#0e2f2b) primary background with a vibrant yellow (#f9c719) accent color used for call-to-action buttons. The typography is a clean sans-serif font family with tight line heights for headlines. The layout is three-column on desktop with a sidebar for navigation, main content for games, and a right panel for betting slips. Critical donts: Do not use light backgrounds, serif fonts, or low-contrast text. Avoid sharp corners and overly dense layouts. Use the vibrant yellow accent sparingly for primary actions only.
```