name: neon-slots-design
version: alpha
description: >
  A provably-fair crypto-casino landing in lacquer-indigo night. The ground is a
  deep indigo (#13182B) dusted with a faint washi paper-grain, surfaces raised in
  washi-indigo (#1B2138 / #222949), and washi-cream ink (#F3EAD6) for text. Three
  signal voltages do all the talking: persimmon (#FF5A2C) for CTA/live/payout,
  jade (#27C29A) for verify/safety, and gold (#E8B23A) for jackpot/featured/rank-1
  seams. The signature move is the chamfered corner — every button, chip, panel and
  field is clipped with a notched clip-path polygon, never a normal border-radius.
  Type is a Japanese-arcade pairing: Anton condensed uppercase for every display
  cut, Spline Sans for body, Spline Sans Mono for labels, terminals and numeric
  readouts. Scroll-pinned compositions (card-swap hero deck, split provably-fair
  text-swap, sticky-stacked vault) carry the motion.
colors:
  # Surface
  bg: '#13182B'            # lacquer indigo night ground (page background)
  panel: '#1B2138'        # raised washi-indigo surface (cards, panels, ticker)
  panel-2: '#222949'      # secondary raised surface (hero cards, lobby tiles)
  # Text
  ink: '#F3EAD6'          # washi cream — primary heading + body ink
  muted: '#9AA0BE'        # fog-indigo — secondary/label/meta text
  # Brand voltages
  persimmon: '#FF5A2C'    # CTA / live / payout / rank-3 / "doesn't"
  jade: '#27C29A'         # verify / confirm / safety / responsible-play
  gold: '#E8B23A'         # jackpot / featured / rank-1 / seams / nav-hover / focus
  # Hairlines
  line: 'rgba(243,234,214,.10)'   # faint cream hairline (header, dividers)
  line-2: 'rgba(243,234,214,.20)' # stronger cream hairline (panel/chip/btn borders)
  # On-voltage text (dark ink dropped on bright fills)
  on-voltage-indigo: '#13182B'    # used on persimmon/gold fills
  on-voltage-jade: '#0a1410'      # near-black green used on jade fills
typography:
  display:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(44px, min(7.4vw, 11vh), 112px)   # hero h1
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: 0.01em
    textTransform: uppercase
  section-heading:
    fontFamily: "'Anton', sans-serif"
    fontSize: clamp(38px, 5vw, 62px)                 # section h2
    fontWeight: 400
    lineHeight: 0.94
    textTransform: uppercase
  body:
    fontFamily: "'Spline Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.62
  body-lead:
    fontFamily: "'Spline Sans', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
  mono:
    fontFamily: "'Spline Sans Mono', monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.75
  label:
    fontFamily: "'Spline Sans Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.14em
    textTransform: uppercase
rounded:                  # chamfered, not rounded — radii are minimal; corners are clipped
  none: 0
  card: 14px              # hero card / lobby tile (one of the only real radii)
  tile: 10px
  full: 9999px           # dots, crests, range thumbs
spacing:                  # base unit ~4px; section rhythm in larger steps
  xs: 4px
  sm: 8px
  md: 16px
  lg: 28px
  xl: 46px
  section: 96px
components:
  btn-fill:
    backgroundColor: '{colors.persimmon}'
    textColor: '{colors.on-voltage-indigo}'
    typography: '{typography.display}'   # Anton, 14px, uppercase, .06em
    rounded: '{rounded.none}'            # chamfered via clip-path polygon (10px notch)
    padding: '15px 26px'
  btn-gold:
    backgroundColor: '{colors.gold}'
    textColor: '{colors.on-voltage-indigo}'
    padding: '15px 26px'
  btn-jade:
    backgroundColor: '{colors.jade}'
    textColor: '{colors.on-voltage-jade}'
    padding: '15px 26px'
  btn-line:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.line-2}'   # hover -> border + text gold
    padding: '15px 26px'
  chip:
    backgroundColor: 'transparent'
    textColor: '{colors.muted}'
    typography: '{typography.label}'      # mono 11px, .1em, uppercase
    border: '1px solid {colors.line-2}'
    rounded: '{rounded.none}'             # 5px clip-path notch
    padding: '5px 10px'
  panel:
    backgroundColor: '{colors.panel}'
    border: '1px solid {colors.line-2}'
    rounded: '{rounded.none}'             # 14px clip-path notch
  card:
    backgroundColor: '{colors.panel-2}'
    border: '1px solid {colors.line-2}'
    rounded: '{rounded.card}'
    elevation: '0 30px 60px -28px rgba(0,0,0,.7)'
  terminal:
    backgroundColor: '{colors.panel}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    border: '1px solid rgba(232,178,58,.5)'  # gold-tinted hairline
    rounded: '{rounded.none}'                # 14px clip-path notch
  term-input:
    backgroundColor: '{colors.bg}'
    textColor: '{colors.gold}'
    border: '1px solid {colors.line-2}'      # focus -> gold border
    rounded: '{rounded.none}'                # 5px clip-path notch
    padding: '9px 11px'
motion:
  hero-deck: 'Scroll-pinned card-swap: cards flick up/forward/rotate off one by one as scroll progresses (translate3d + rotateY/rotateZ + scale + opacity), driven by rAF.'
  pf-split: 'Pinned split — three text panels cross-fade/slide (opacity + 24px translateY) per scroll segment; strike line scales X in.'
  vault-stack: 'Sticky-stacked panels — deposit recedes/dims (scale to .96) while activity rises from below (translateY 100%->0).'
  ticker: 'Marquee drift (translateX ~0.6px/frame) with scroll-velocity boost up to 7x; track rotated -1.4deg.'
  hero-headline: 'Line-mask reveal — each .ln span translates Y 110%->0, .9s staggered (0/.09/.18s).'
  entrances: 'IntersectionObserver adds .is-in -> tiles/rows/cols translate up/in with staggered nth-child delays.'
  mouse-tilt: 'Desktop pointer parallax — hero stack rotateY/X up to 9/7deg; lobby tiles rotateY/X 4deg.'
  hover: 'Buttons translateY(-2px) + brighter fill; chips/tiles/rows shift border to gold or persimmon.'
  pulse: '@keyframes pulse — live dots fade .55<->1 over 1.4s; @keyframes blink — terminal cursor.'
  easing: 'var(--ease) = cubic-bezier(.16,1,.3,1) for the signature decelerated entrances.'
icons:
  library: inline SVG (hand-drawn paths)
  style: outline (1.2–2px stroke) with a few currentColor fills; mono glyph dingbats (◆ ▣ ◈ ▲ ● ✦) in leaderboard
  stroke: 1.6px typical
  sizes: { sm: 14px, md: 15px, lg: 28px }
  color: 'currentColor / {colors.gold} for verify + wallet glyphs'

NEON.SLOTS

neon-slots-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + :root CSS variables + class rules. Fictional/sample product; described factually.

Overview

NEON.SLOTS is a provably-fair crypto-casino landing rendered in lacquer-indigo night with a Japanese-arcade attitude. The ground is #13182B ("lacquer indigo night"), overlaid with a fixed paper-grain texture (.lacquer-grain: two faint rgba(243,234,214,.022) 1px line gradients on a 72px grid at .5 opacity) — no orbs, no glow blobs. Raised surfaces step up through #1B2138 and #222949, text is washi-cream #F3EAD6 with fog-indigo #9AA0BE for secondary copy. Three voltages carry every signal: persimmon #FF5A2C (CTA, live, payout), jade #27C29A (verify, safety, responsible play), and gold #E8B23A (jackpot, featured, rank-1, every seam). The signature visual move is the chamfer: buttons, chips, panels, inputs and the terminal are all cut with notched clip-path polygons (a 5/10/14px corner bite) rather than rounded radii — only the hero cards and lobby tiles use real border-radius. Type is a tight pairing — Anton condensed uppercase for all display, Spline Sans for body, Spline Sans Mono for labels, terminals and tabular readouts. Scroll-pinned set pieces (a card-swap hero deck, a pinned split provably-fair text-swap, a sticky-stacked vault, a velocity-boosted winners marquee) provide all the motion.

Colors

Surface. bg #13182B is the page ground. panel #1B2138 is the standard raised surface (cards, the ticker, life-card, vault snapshot, terminal). panel-2 #222949 is a slightly lighter raised tone for hero cards and lobby tiles. Translucent overlays of these appear frequently — rgba(27,33,56,.4–.6) shades the vault and footer, rgba(19,24,43,.82–.95) darkens image gradients and the sticky header (rgba(19,24,43,.92) + blur(8px)).

Text. ink #F3EAD6 (washi cream) is the primary text and heading color. muted #9AA0BE (fog indigo) is for secondary copy, labels, meta and inactive nav.

Brand voltages. persimmon #FF5A2C — primary CTA fill, live dots, payouts, rank-3, the highlighted word "doesn't"; hover brightens to #ff6f47. jade #27C29A — verify/confirm, the responsible-play (LIFELINE) system, "Don't. Verify."; hover #3ad6ad. gold #E8B23A — jackpot figures, featured/JACKPOT tags, rank-1, every gradient seam, nav hover, and the focus ring; hover #f0c25c. On bright fills, text drops to dark #13182B (on persimmon/gold) or #0a1410 (on jade).

Hairlines. line rgba(243,234,214,.10) for the faintest dividers (header border, section tops, meters). line-2 rgba(243,234,214,.20) for visible panel, chip and button borders. Gold-tinted hairlines rgba(232,178,58,.4–.6) mark jackpot/terminal/verified edges; persimmon rgba(255,90,44,.5–.55) and jade rgba(39,194,154,.55) tint the rank-3 crest and lifeline edges.

Gradients. Seams are linear-gradient(90deg, transparent, gold, transparent) (2px). Card faces fall back to diagonal linear-gradient(150deg, <hue>, panel-2) tints. Image scrims are vertical rgba(19,24,43,.94→transparent). The timeline axis runs gold→persimmon→transparent; the range slider track jade→gold.

Typography

Three Google-Fonts families, loaded via one fonts.googleapis.com/css2 link: Anton (single weight 400, used as the condensed display cut — always uppercase with .94–.95 line-height), Spline Sans (400–700, body), and Spline Sans Mono (400–600, every label / chip / terminal / numeric readout). Numbers use font-variant-numeric: tabular-nums. All are open-source on Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(44px, min(7.4vw,11vh), 112px)	400	0.95	.01em	Hero h1
section-heading	clamp(38px, 5vw, 62px)	400	0.94	.01em	Section h2 (.sec-h); .pf-h is clamp(44px,6.5vw,90px)
body	16px	400	1.62	—	Body copy
body-lead	17px	400	1.5	—	Hero lede (.hero-body)
mono	13px	400–600	1.75	—	Terminal, meta, addresses, readouts
label	11px	400	.14em	uppercase	.label eyebrows; chips at .1em; section eyebrows .18–.34em

Layout

Base unit ≈ 4px; section padding lands at 96px. Content is centered in a max-width: 1320px .wrap with 28px side padding (18px under 768px). The page is a vertical stack of pinned and flowing sections: a hero with a 380vh outer wrapper and a sticky/100vh inner pin holding an asymmetric 1.45fr / 1fr grid (left copy + jackpot + CTA row; right tilted card deck and a centered live-stats ledger); a rotated winners ticker (-1.4deg); a lobby in a 1fr / 348px layout — a 12-column tilt-grid of game tiles (feat spans 7×2, med spans 5, sm spans 3) beside a sticky responsible-play aside; a provably-fair pinned split (320vh outer) with a copy column that swaps three text panels and a "terminal" on the right; a vault sticky-stack (250vh) where an activity panel rises over a deposit form; a leaderboard with a 3-column podium and a meta-rail table; and a 3-column footer. Whitespace is generous and editorial — wide clamped section gaps, lots of mono micro-labels (區画 014, SECTION 02) anchoring each block.

Elevation & Depth

Depth comes mostly from borders and stacking, not soft shadows. Surfaces are distinguished by stepping bg → panel → panel-2 and by hairline borders. The few real shadows are reserved for floating cards: hero cards carry 0 30px 60px -28px rgba(0,0,0,.7) (40px/-22px on mobile) and the wax "SPIN" stamp 0 6px 16px -6px rgba(0,0,0,.6). The header is the only glass: rgba(19,24,43,.92) + backdrop-filter: blur(8px). 3D depth is created in the perspective scenes — hero deck (perspective:1600px, translateZ up to 70px) and lobby grid (perspective:1400px, tile content lifted on translateZ(34–46px)). The fixed paper-grain texture adds tactile depth without glow.

Shapes

The system is chamfered, not rounded. The hallmark is a notched clip-path polygon that bites one or two corners: ~5px on chips/inputs/small controls, 10px on buttons and the self-exclude/amount fields, 14px on panels/jackpot/life-card/ terminal/plinths. Genuine border-radius is rare and deliberate: hero cards (14px), lobby tiles (10px), and full circles (9999px/50%) for live dots, leaderboard crests, the wax stamp, and range-slider thumbs. The seam — a 2px gold gradient rule — is the recurring connective shape.

Components

• btn-fill — persimmon fill, dark #13182B text, Anton 14px uppercase .06em, 15px 26px, 10px chamfer; hover #ff6f47 + lift 2px. Label e.g. "Initiate Spin".
• btn-gold / btn-jade — same geometry, gold/jade fills (jade text #0a1410).
• btn-line — transparent, line-2 border, ink text; hover border+text → gold. Label e.g. "Verify a spin", "Withdraw".
• chip — transparent, line-2 border, mono 11px uppercase, 5px 10px, 5px chamfer; .on/voltage-tinted variants (gold/persimmon). Used for filters, badges, hero status (RTP 97.4%, LIVE · NEO-TOKYO).
• panel — panel fill, line-2 border, 14px chamfer; base of vault forms, vault snapshot, life-card.
• card (hero) — panel-2, 14px radius, big diffuse shadow; image + bottom scrim caption (Termite Swarm · RTP 97.4%), wax "SPIN" stamp, vertical spine.
• tile (lobby) — panel-2, 10px radius, line-2 border (hover persimmon); image at .62 opacity under a scrim, corner tags (FEATURED/JACKPOT/NEW/RTP), 3D-lifted body + a mono "term-card" readout.
• terminal — panel with gold-tint border, mono body, traffic-light dots (persimmon/gold/jade), labeled inputs and a gold compute button; line-by-line reveal output with a blinking cursor.
• term-input / vault inputs — bg fill, hairline border (focus → gold), gold or ink mono text, chamfered.
• meter / range / bars — responsible-play meters with jade fills, a jade→gold range track and jade circular thumb.
• podium + lb-row — circular crests (gold/per/line-tinted), Anton ranks, chamfered plinths; table rows are chamfered rgba(27,33,56,.5) cards with a gold meta-rail that scales in on the left edge, hover border → gold.

Motion

var(--ease) = cubic-bezier(.16,1,.3,1) powers the decelerated entrances. The hero headline reveals line-by-line (each masked .ln span slides Y 110%→0, .9s, staggered .09s). The three scroll set pieces are scrubbed by a single rAF loop: the hero deck flicks cards off one by one (3D translate+rotate+scale+opacity) as the 380vh wrapper scrolls; provably-fair swaps three text panels per scroll segment (with a strike-through that scales in and a staggered terminal-output reveal); the vault slides the activity panel up over a receding/dimming deposit form. The winners ticker drifts left continuously with a scroll-velocity boost (up to 7×). IntersectionObserver (.is-in) triggers staggered translate-in entrances for lobby tiles, leaderboard rows/podium, and footer columns. Desktop pointer parallax tilts the hero stack (±9/7°) and lobby tiles (±4°). Live dots pulse (1.4s) and the terminal cursor blink (1s). Buttons lift 2px and brighten on hover. (Pins and parallax drop below 1080/768px, where sections flow normally.)

Iconography

All icons are inline SVG drawn as hand-coded paths — the diamond/diamond logo mark (persimmon + gold rotated squares), the lightning "Initiate Spin" bolt, the shield-check verify glyph, the chain-link wallet glyph (gold stroke), the self-exclude door, the crown and animal-skull leaderboard crests. Stroke style is outline at ~1.2–2px (1.6px typical) with a few currentColor/voltage fills. Mono dingbat glyphs (◆ ▣ ◈ ▲ ● ✦) act as inline list/rank markers. Icons are sized 14–15px in UI and ~28px for the crown; color follows currentColor, with gold reserved for verify and wallet marks.

Do's and Don'ts

• Do chamfer with clip-path notches (5/10/14px), not rounded corners.
• Do keep the three voltages role-bound: persimmon=CTA/live/payout, jade=verify/safety, gold=jackpot/featured/seams.
• Do use Anton uppercase for every heading and big number; Spline Sans Mono for labels, addresses, and terminal text.
• Do lean on borders, hairlines and stacking for depth — keep shadows scarce.
• Do keep the paper-grain subtle and the ground flat (no glows/orbs).
• Don't introduce rounded buttons or soft drop-shadows on flat UI.
• Don't swap voltage roles or add a fourth accent hue.
• Don't set body copy in Anton or headings in the mono face.
• Don't brighten the indigo ground or add neon glow blooms.

Known Gaps

• The font @import is actually a <link> to a single fonts.googleapis.com/css2 URL (Anton + Spline Sans 400–700 + Spline Sans Mono 400–600); the same URL is used as each typography token's url.
• Spacing tokens are inferred from the recurring values (4px base; section rhythm at 96px; clamp-based hero/section gaps) — no explicit spacing scale exists in the CSS.
• rounded tokens describe the few real border-radius values; the dominant corner treatment is clip-path, which cannot be expressed as a radius token — the notch sizes (5/10/14px) are documented in prose/component notes instead.
• Scroll-driven transforms (deck flick, vault stack rise, ticker boost) are computed in JS from scroll progress; the values quoted are read from the script, not from static CSS.