XTASY PLAY
Liquid Noir · default theme Desktop 1440 · Mobile 390 18+

Component and token sheet · consumer shell

Design System

Xtasy Play reuses the mid-platform red-black-gold tokens, with Liquid Noir as the default, and adds only the consumer components: coins pill, cost tag, tab bar, state cards and the age gate.

Source of truth

design/tokens.css holds every value on this sheet. Artboards use its classes and never hard-code a color.

Pending D1. If Play ships as a separate brand, this token set is replaced as a whole; components and rules below stay.

01 · Tokens · color

Two themes, one bordeaux

Neutrals stay warm in both themes. Liquid Noir ships on every product artboard; Gallery Ivory is kept in tokens.css as a reference and is not used for Play screens.

:root · [data-theme="light"]

Liquid Noir

Dark · default on every product artboard

Default
Surface & text
background#0c0908
card#181216
foreground#e9e4ec
muted-foreground#8a8090
border#2c242b
Bordeaux · every free action
primary#9c3a42
primary-gradient#c76a64
.btn gradientprimary-gradient to primary
Gold
gold#dac49b
gold-grad-1#f2e3c2
gold-grad-2#dac49b
gold-grad-3#b89460
star-gold#ecb43d
Iris
iris-1#6fa694
iris-2#9176c2
iris-3#c76a64
iris-4#dac49b
spectrum1 to 4
Semantic
success#52b89a
warning#d9a053
info#7cb6c6

Status and feedback only. Warning also marks a coin balance under 100.

Gallery Ivory

Light · reference swatch only, no Play screens

Reference
Surface & text
background#f2ede4
card#fbf8f1
foreground#3a2e28
muted-foreground#8a7b6e
border#e0d6c6
Bordeaux · every free action
primary#8c333c
primary-gradient#a8444c
.btn gradientprimary-gradient to primary
Gold · antique bronze
gold#a8854b
gold-grad-1#d9bc85
gold-grad-2#bd9a5d
gold-grad-3#96743d
star-gold#ecb43d
Iris
iris-1#4e7a6c
iris-2#6e589e
iris-3#a8444c
iris-4#bd9a5d
spectrum1 to 4
Semantic
success#2f8a6c
warning#a06b22
info#4a7e96

Star-gold is theme-constant: favorites never turn bronze.

Rule

Gold = paid / featured / scarce only

Gold
Generate (50) Top up Pro 640

Coin-spending and selling actions, premium labels, the coins pill, the mobile Create tab.

Not gold
Start chat Follow Save 0:14

Free actions stay bordeaux: Start chat, Enter, Follow, Post, Lock this look.

Rule

Iris = generating state only

Iris
Night drive loopIn progress · 64%

.iris-progress, .iris-spinner, .iris-ring, .ring-progress. Removed the moment a result is Ready or Refunded.

Not iris
Rooftop shortcut · playback0:08 of 0:14

Watch playback, quotas and storage use the plain .progress. No iris on logos, titles or dividers.

02 · Typography

Inter for UI, mono for numbers, serif for moments

Three families, each with one job. Every count, balance, price and duration is tabular so columns never jitter.

--font-sans · --font-mono · --font-display

Inter · type scale

.t-xs to .t-5xl
48 / 48 · 700Plan headline, hero

Talk, watch, create.

32 / 40 · 600Page title

Trending characters

24 / 32 · 600Section title

Stories this week

18 / 28 · 700Dialog title

Are you 18 or older?

16 / 24 · 600Card title

Rooftop shortcut

14 / 20 · 400Body, buttons at 500

Fast-talking courier who knows every shortcut in the city and every rumor in the undercity.

13 / 18 · 400Meta line

Neon courier · Rain-slick megacity, 2087

12 / 16 · 500Labels, badges

AI-generated · Official · 128.4K chats

Aa400Regular · body
Aa500Medium · controls
Aa600Semibold · titles
Aa700Bold · dialogs, hero

JetBrains Mono · numbers

.tabular
640
Coins every month, Plus1,000
Coins every month, Pro5,000
Chats with Seraphine151,900
The throne room at dawn0:22
3,000 coin pack$44.99
50 coins · 5 s · 480p.eyebrow cost line

Instrument Serif italic · brand moments

.font-display

Characters you can talk to.

Seraphine

Brand lines, character names and empty states. Never on buttons, labels or prices.

03 · Buttons & badges

Bordeaux by default, gold when coins move

Default and gold lift 2px on hover; outline and ghost only tint. The price is part of the label, never a separate chip.

button.tsx · badge.tsx
Variantxs · 24sm · 32default · 36lg · 40icon · 36Hover / disabled
Default.btnBordeaux gradient · free actions
Start chat
Start chat
Start chat
Start chat
Start chatStart chat
Gold.btn-goldSpends coins or sells · CTA
Generate (50)
Generate (50)
Generate (50)
Generate (50)
Top upTop up
Outline.btn-outlineSecondary action
Save
Save
Save
Save
SaveSave
Ghost.btn-ghostCancel, close, toolbar
Cancel
Cancel
Cancel
Cancel
CancelCancel
Nav.shell-linkTop nav item · 14 / 500
Discover Watch Chat Create

Active: primary-gradient text and a 2px underline on the nav edge. Hover: foreground. Rest: muted-foreground.

Active · Hover · Rest
Link.btn-linkInline and section links
View all characters Content Policy

Bordeaux text, underline on hover. Never gold, even next to a price.

Open Watch

Badges

rounded-full · 12 / 500
New.badgeBordeaux tint · plain status
Pro.badge-goldPremium label, coins pill
Best value.badge-gold-solidOne per view, on sellable items
0:14.badge-outlineNeutral facts, content mode
Sci-fi.badge-secondaryTags, Coming 2027
In progress Ready Refunded
.status-*The three money states

Play-specific badges

B-side
Most popularPlus plan card
Cinematic · ProCinematic tier templates
Coming 2027Voice note, not purchasable
18+Permanent in logged-out nav
Featured todayOne hero per day
In reviewPosts awaiting moderation
04 · Play components

The consumer pieces, as they ship on the screens

Rendered from the finished artboards, so this sheet cannot drift from them. Each tile names its class and the screen it comes from.

scripts/ds-specimens.mjs
Coins pill showing 640
Coins pill.shell-coinsAlways in the nav. Gold, tabular; turns warning under 100.
Content mode badge Standard
Content-mode badge.shell-modeCurrent mode stays visible on every signed-in page.
More menu with Report and Block
Report menu.cc-menuReport and Block on every character and clip.
Character card
Character card · 3:4.character-card · MainAI-generated label, origin, stats, free Start chat.
Mature placeholder card
Mature placeholder.mature-lock · MainNo media until the viewer is verified.
Clip card
Clip card · 9:16.clip-card · MainDuration and views as outline facts.
Template card with coin cost
Template card.template-card · MainFixed coin price on the card, before any tap.
Continue card
Continue card.resume-card · MainPicks up a chat, a story or a result.
Free, Plus and Pro plan cards
Plan cards.plan · PricingMonthly, yearly total and renewal side by side. Gold only on Most popular and Go Pro.
Coin pack tiles
Coin packs.pack · Pricing500 · 1,200 · 3,000 · 7,000 coins. No dollar value per coin, ever.
Policy footer
Policy footer.shell-footerTerms, Content Policy, Privacy, Cookies, 2257 statement; statement descriptor XTASY PLAY.
05 · Navigation

Same five words on every surface

Desktop uses a 64px glass top nav, not a left rail. Mobile moves the same destinations into an 84px tab bar with Create raised in the middle.

shell-nav · m-top · m-tabs
Signed-in top nav
Top nav · signed in.shell-nav · 64Discover · Watch · Chat · Create, then search, Library, mode badge, coins, account.
Signed-out top nav
Top nav · signed out.shell-nav · LandingPermanent 18+ badge; Start for free stays bordeaux because it costs nothing.
Account menu
Account menu.shell-account-menuMe, plan with renewal date, settings, sign out.
Chat conversation list
Chat list · 280.rail · ChatThe only side column in Play: context, not navigation.
Watch feed tabs
Feed tabs.feed-tabs · WatchFor You · Following · Saved.
Mobile header
Mobile header · 56.m-topWordmark, search, mode badge, coins. No drawn status bar.
Mobile tab bar
Mobile tab bar · 84.m-tabs56 of targets plus 28 safe area; Create raised in gold.
06 · Generating & states

Every coin has three endings: in progress, ready, refunded

Iris only while something is generating. Failures refund on their own and say so. Blocks before spending say nothing was charged.

.iris-* · .status-*
Generating, refunded and out-of-coins states in chat
In-chat money states.state · ChatGenerating with iris, refunded with Try again (10), out of coins with packs.
Out-of-coins sheet
Out-of-coins sheet.sheet · CreateNeeds 200, you have 120; packs or Pro.
Generation toast
Progress toast.toast · CreateKeep browsing while a clip renders.
Wallet banners
Balance banners.banner · WalletLow balance, out of coins, purchases paused.
Empty state
Empty state.empty · LibraryOne display-serif line and one action.
Age gate card
Age gate.gate-card · AgeGate18+ declaration over a solid ground; region shown, never asks orientation.
Cancel renewal confirmation
Cancel renewal.confirm · MeSecond step lists what happens next.
Character quota reached
Quota reached.quota-full · CreateCharacter10 of 10 on Plus; Go Pro for unlimited slots.
Advanced mode Studio hand-off
Studio hand-off.studio-swatch · CreateAdvanced mode only, always behind a confirm.
Mobile out-of-coins sheet
Mobile sheet.m-sheet · MobileChatHalf sheet over the thread; 44px targets.
07 · Layout grids

1440 with 12 columns, 390 with two or three

Content caps at 1280 with 80 margins and 24 gutters. Watch and Chat are the only pages that break the grid.

drawn at 50%
Top nav · 64
80
80
Desktop · 144012 col · 84.67 · gutter 24 · margin 80Character cards span 2 columns, six to a row; clip rows run 9:16 at 320 tall.
56
84
Mobile · 2 col390 · margin 16 · gap 12Character cards.
56
84
Mobile · 3 col390 · margin 16 · gap 12Clip rows.
Top nav · 64
Player 480 × 853 · 9:16
Info 360
Exception · Watchfull bleed · flat ambientCentered player, action rail beside it, character panel on the right.
Top nav · 64
Chats 280
Thread · fluid
Character 320
Exception · Chat280 · fluid · 320Three columns; the composer replaces the footer.