---
title: "VEGAS123 — Slot Gacor Page design system"
variant: extended
source: https://moderne.st/
captured_at: 2026-10-12
theme: light
industry: gaming
generator: Design DNA (https://four.wiralomi.com/style/moderne-st)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# VEGAS123 — Slot Gacor Page · Design System

> Neon casino drama meets compact storefront utility

**Theme:** light · **Industry:** gaming · **Source:** https://moderne.st/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A dense gaming landing page pairs a dark storefront header and vivid slot-machine artwork with a pale blush content canvas. Red glow accents, prominent account actions, FAQ panels, and testimonial cards create a promotional casino aesthetic.

## North star

Balance a pale, compact storefront layout with oversized slot artwork, dark burgundy content bands, and clearly prioritized account actions.

## Overview

The page contrasts a charcoal-navy storefront header and deep burgundy FAQ band against a pale blush-white main canvas. The measured neutral canvas is #f4f4f5, while the screenshot renders it with a pink cast; preserve the measured value and let imagery and nearby red accents supply warmth. Near-black #151523 carries headings and utility text. Red gradients, luminous zigzag motifs, and vivid blue account controls give the interface its gaming character. A large, highly detailed slot-game promotional image dominates the left side of the hero, with a narrow text column to its right. Bold, compact headings sit above tightly set body copy; Roobert is the main sans voice, with Sharp Grotesk used for display headings and Inter for emphatic actions. The FAQ and review section switches to a burgundy field with stacked bordered cards. Spacing is compact and content-heavy, while rounded buttons and cards soften the otherwise assertive, high-contrast treatment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Periwinkle Edge | `#99a7f5` | `--color-periwinkle-edge` | accent | Lavender-blue outlines around buttons and pill-like brand links. |
| Harbor Teal | `#4ba0af` | `--color-harbor-teal` | semantic | Teal border on secondary FAQ-style buttons; a small component detail, not a dominant brand color. |
| Pale Canvas | `#f4f4f5` | `--color-pale-canvas` | neutral | Main page canvas and the light band behind the hero and bottom tag area. |
| Hot Signal Red | `#e10600` | `--color-hot-signal-red` | accent | Red link and heading accents, plus red glows and gradient details on promotional controls. |
| Midnight Ink | `#151523` | `--color-midnight-ink` | neutral | Primary text and the dark storefront navigation background. |
| Casino Burgundy | `#2a0406` | `--color-casino-burgundy` | surface | Full-width FAQ and review band, with related dark card and control surfaces. |
| Garnet Glow | `#8b0a18` | `--color-garnet-glow` | accent | Subtle dark-red gradient and interactive details within the casino-themed controls. |
| Blush Lettering | `#ffe5e5` | `--color-blush-lettering` | neutral | Muted light text and links on dark cards and burgundy sections. |
| Violet Spark | `#5139a6` | `--color-violet-spark` | accent | Minor violet button-gradient detail; treat as a supporting accent. |
| Electric Periwinkle | `#6c7ee4` | `--color-electric-periwinkle` | accent | Small button-border detail and cool counterpoint to red effects. |
| Soft Silver | `#e9e9ec` | `--color-soft-silver` | surface | Pale card or text surface and secondary tag-link treatment. |
| Account Blue | `#4e64df` | `--color-account-blue` | brand | Primary account registration button and compact blue action accent. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Navigation labels, button text, and high-contrast content on dark backgrounds. |
| Black Cherry | `#3d0610` | `--color-black-cherry` | surface | Dark red gradient base within cards and promotional controls. |
| Ember Maroon | `#5a0a0a` | `--color-ember-maroon` | surface | Red gradient endpoint in dark cards and links. |
| Slate Border | `#3b475d` | `--color-slate-border` | semantic | Thin outline around testimonial cards, separating them from the burgundy section. |
| Brick Link | `#9c1b1b` | `--color-brick-link` | accent | Small red link accent; subordinate to the brighter promotional red. |

### Semantic aliases

`--color-canvas` → `#f4f4f5` (Pale Canvas) · `--color-surface` → `#2a0406` (Casino Burgundy) · `--color-surface-2` → `#e9e9ec` (Soft Silver) · `--color-surface-3` → `#151523` (Midnight Ink) · `--color-text` → `#151523` (Midnight Ink) · `--color-text-muted` → `#ffe5e5` (Blush Lettering) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#99a7f5` (Periwinkle Edge) · `--color-accent` → `#4e64df` (Account Blue) · `--color-accent-2` → `#e10600` (Hot Signal Red) · `--color-accent-3` → `#9c1b1b` (Brick Link) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151523` | `#f4f4f5` | 16.42:1 | AAA |
| `#151523` | `#2a0406` | 1.04:1 | fail |
| `#151523` | `#e9e9ec` | 14.9:1 | AAA |
| `#ffe5e5` | `#f4f4f5` | 1.09:1 | fail |
| `#ffe5e5` | `#2a0406` | 15.73:1 | AAA |
| `#ffe5e5` | `#e9e9ec` | 1.01:1 | fail |
| `#ffe5e5` | `#151523` | 15.12:1 | AAA |
| `#ffffff` | `#f4f4f5` | 1.1:1 | fail |
| `#ffffff` | `#2a0406` | 18.78:1 | AAA |
| `#ffffff` | `#e9e9ec` | 1.21:1 | fail |

### Gradients

- `radial-gradient(circle at 16% 7%, rgba(225, 6, 0, 0.14), rgba(0, 0, 0, 0) 31%), radial-gradient(circle at 86% 88%, rgba(109, 76, 255, 0.11), rgba(0, 0, 0, 0) 34%), linear-gradient(145deg, rgb(255, 245, 245), rgb(255, 229`
- `radial-gradient(circle at 12% 8%, rgba(225, 6, 0, 0.18), rgba(0, 0, 0, 0) 28%), radial-gradient(circle at 88% 90%, rgba(115, 67, 255, 0.15), rgba(0, 0, 0, 0) 32%), none`
- `linear-gradient(155deg, rgb(61, 6, 16), rgb(42, 4, 6) 56%, rgb(42, 4, 6))`
- `linear-gradient(145deg, rgb(61, 6, 16), rgb(90, 10, 10))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert-Medium | `--font-body` | webfont | 400, 500, 700 | Primary body copy, product labels, and search text. | Inter |
| Inter | `--font-inter` | system | 400, 900, 800 | Uppercase CTA and link labels, plus review and FAQ copy. | Inter |
| Arial | `--font-arial` | system | 700, 400 | Small bold captions and secondary utility button text. | Arial |
| SharpGrotesk-Bold | `--font-display` | webfont | 700, 400 | Display title and prominent page headings. | Space Grotesk |
| Roobert-Bold | `--font-roobert-bold` | webfont | 400, 700, 500 | Section headings and secondary headline hierarchy. | Inter |
| Roobert-SemiBold | `--font-roobert-semibold` | webfont | 600, 700 | Navigation labels and account-related controls. | Inter |

- **Roobert-Medium:** Regular-weight sans; keep body copy compact and plain, without decorative tracking.
- **Inter:** Heavy action text uses uppercase and noticeable positive tracking; card copy remains regular.
- **Arial:** Use bold for compact captions; keep utility labels small and straightforward.
- **SharpGrotesk-Bold:** Strong geometric display face; bold visual presence, tight line height, no measured tracking.
- **Roobert-Bold:** Bold sans headings, compact leading, and sentence-style capitalization.
- **Roobert-SemiBold:** Semibold utility text; navigation uses capitalized labels rather than all caps.

### Type scale — Major Third (ratio ≈ 1.26, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1 | 0 | — | SharpGrotesk-Bold | Main product-page title in the hero text column. |
| h2 | 28px | 400 | 1 | 0 | — | Roobert-Bold | Hero section heading and FAQ or review section titles. |
| h3 | 24px | 700 | 1.15 | 0 | — | SharpGrotesk-Bold | Subsection headings within the product description. |
| body | 16px | 400 | normal | 0 | — | Roobert-Medium | Compact explanatory copy beside the promotional image. |
| caption | 13.5px | 700 | normal | 0 | — | Arial | Small supporting labels and short utility captions. |
| button | 16px | 900 | normal | 0.05em | uppercase | Inter | Prominent uppercase login and registration actions. |
| nav | 16px | 700 | 1.25 | 0 | capitalize | Roobert-SemiBold | Storefront account, cart, and category navigation. |
| link | 16px | 900 | normal | 0.053em | uppercase | Inter | Uppercase login links and emphasized actions. |
| eyebrow | 16px | 900 | normal | 0.053em | uppercase | Inter | Short uppercase labels introducing action or content groups. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 20 px.
- Section rhythm 32px · element gap 4px · card padding 14px · max content width 1230px.

The measured content max width is 1230px, with compact spacing and a small base unit. The first section uses a two-column product-detail composition: a large media area on the left and a narrower, left-aligned text stack on the right. A dark, full-width navigation sits above the content, followed by paired login and registration strips. The FAQ and reviews switch to a single-column burgundy band; the closing tag area returns to the pale canvas. Keep section transitions distinct and vertical gaps restrained.

## Shape & elevation

- Radius: button `9999px` · input `12px` · card `10px` · media `20px` · nav `12px` · link `8px` · xs `8px` · sm `9px` · md `10px` · lg `12px` · xl `14px` · 2xl `20px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0.3) 0px 6px 16px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`
- Shadow `inset-2` (card): `rgba(0, 0, 0, 0.24) 0px 5px 14px 0px, rgba(58, 108, 255, 0.05) 0px 0px 18px 0px inset`
- Shadow `sm` (link, button): `rgba(21, 21, 35, 0.2) 0px 2px 4px 0px`
- Shadow `inset-3` (link, button): `rgba(225, 6, 0, 0.06) 0px 0px 0px 1px, rgba(225, 6, 0, 0.2) 0px 0px 14px 0px, rgba(0, 0, 0, 0.34) 0px 9px 20px 0px, rgba(225, 6, 0, 0.1) 0px 0px 22px 0px inset`
- Shadow `inset-4` (link, button): `rgba(225, 6, 0, 0.1) 0px 0px 0px 1px, rgba(225, 6, 0, 0.3) 0px 0px 18px 0px, rgba(0, 0, 0, 0.34) 0px 10px 22px 0px, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset`
- Shadow `inset-5` (card): `rgba(0, 0, 0, 0.42) 0px 14px 34px 0px, rgba(225, 6, 0, 0.08) 0px 0px 0px 1px, rgba(225, 6, 0, 0.06) 0px 0px 28px 0px inset`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

The page mixes flat section bands with rounded, outlined cards. FAQ and testimonial panels use thin borders and dark burgundy fills; the measured testimonial outline is slate. Buttons and cards use layered shadows, including red glows on promotional actions. Keep shadows concentrated on interactive elements and let the major image provide most of the visual depth.

## Imagery

The hero is led by a large, static promotional slot-game graphic: gold-on-black casino motifs, game tiles, prize messaging, and a portrait are combined into one dense media panel. Small thumbnails sit beside it. The image is high contrast and richly detailed, so keep surrounding text and layout relatively clean. No video is measured; supporting sections rely on text, gradient treatments, and compact controls rather than new photography.

## Components

### Storefront header

Dark horizontal header with a logo, wide search field, account and cart utilities, and a blue registration action.

### Category navigation

Compact row of category links with small promotional icons beneath the main header.

### Login and registration strips

Two side-by-side red-gradient actions spanning the content width, with luminous decorative zigzags.

### Product-detail hero

Large slot-game artwork and thumbnails on the left; product title, price, copy, and paired actions on the right.

### FAQ accordion

Stacked question rows inside the full-width burgundy section, using rounded red-gradient controls.

### Testimonial cards

A vertical stack of dark cards with pale text, thin slate outlines, and subtle inset glow.

### Trending tags

Closing light section with red title, compact outlined pill links, and sharing utilities.

### Measured component styles

- **Primary button** (“DAFTAR AKUN”): background #4e64df · text #ffffff · radius 12px · padding 8px 16px · 700 16px Roobert-SemiBold · capitalize
- **Secondary button** (“Apa itu VEGAS123 di platform Keiseikai? ”): transparent background · text #ffffff · border 1px solid #4ba0af · radius 10px · padding 12px 13px · 400 13.3333px Arial · shadow rgba(0, 0, 0, 0.3) 0px 6px 16px 0px, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px in
- **Link** (“VEGAS123”): transparent background · text #e9e9ec · radius 8px · padding 4px 8px · 600 12px Roobert-SemiBold
- **Input**: background #ffffff · text #151523 · radius 12px · padding 6px 15px · 400 16px Roobert-Medium
- **Card** (“Ardi Saya biasa membuka VEGAS123 untuk m”): transparent background · text #ffe5e5 · border 1px solid #3b475d · radius 10px · padding 13px 14px 13px 17px · 400 13px Inter · shadow rgba(0, 0, 0, 0.24) 0px 5px 14px 0px, rgba(58, 108, 255, 0.05) 0px 0px 18px 0px 
- **Navigation item** (“Search On 'VEGAS123'”): transparent background · text #151523 · radius 0px · padding 0px · 400 16px Roobert-Medium

## Do

- Keep the navigation dark and visually separate from the pale content canvas.
- Give the promotional slot artwork the strongest visual emphasis in the hero.
- Use burgundy section bands to group FAQ and review content.
- Reserve Account Blue #4e64df for the primary registration action.
- Use Hot Signal Red #e10600 for restrained link and glow accents.
- Keep headings bold, compact, and clearly separated from body copy.

## Don't

- Do not replace the measured pale canvas with a dark page-wide background.
- Do not let small interface accents compete with the hero artwork.
- Do not use blue as the dominant section or background color.
- Do not spread the dense content into oversized, airy editorial layouts.
- Do not flatten every action; preserve rounded controls and selective glow.
- Do not treat colors inside the promotional graphic as core interface palette.

## Agent prompt

Build a new page in the VEGAS123 visual style using a pale #f4f4f5 canvas, a #151523 storefront header, and a deep #2a0406 content band for dense supporting modules. Use Hot Signal Red #e10600 for small emphatic accents and red glow effects; use Account Blue #4e64df for the primary account action with white text. Create a compact two-column hero with a large, detailed gaming promotion image beside a narrow text stack. Use bold geometric display headings, Roobert-like sans body copy, and heavy uppercase action labels. Keep the layout dense, left-aligned, and restrained in spacing. Round buttons and cards, outline secondary panels, and apply shadows selectively. Finish with a light tag-link area rather than extending the dark section across the whole page.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-detail | Storefront navigation above paired action strips; hero splits large promotional media left and product copy right. | clear account actions, product information hierarchy, thumbnail media selection | dark utility header, red-gradient action strips, two-column hero, bold display headings |
| 2 | faq | Full-width burgundy band containing a single centered column of accordion questions and stacked testimonials. | expandable FAQ rows, social proof, scannable question labels | dark section band, red-gradient accordion rows, outlined review cards |
| 3 | footer | Light full-width closing band with a left-aligned heading, pill-shaped trending links, and sharing controls. | related navigation, social sharing | pale canvas, red title accent, outlined tag pills |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/moderne-st