Dark, calm, with one accent
The style comes from the VXLT concept: a dark base, plenty of space, soft corners and a single acid accent for anything that is an action. Photos do the work; the interface stays quiet.
01 · Logo
The wordmark is set in capitals with generous letter spacing and a gradient from white into acid. On dark surfaces always this way, never inverted.
02 · Colour
Five greys carry the whole thing; acid is the only colour that asks for something. Green means online, red means block or escalate. No further colours get added.
Surfaces
bg
#0A0A0A
Page background
bg-2
#111111
Alternating sections
card
#161616
Cards and panels
elevated
#1A1A1A
Chips, secondary button
hover
#1F1F1F
Hover state
Lines
line
#222222
Default border
line-2
#2A2A2A
Border on hover or focus
Text
fg
#F5F5F5
Headings and primary text
fg-2
#999999
Body copy
fg-3
#666666
Meta, labels, hints
Accent
acid
#C8FF00
Actions, tokens, emphasis
acid-2
#D4FF33
Hover on primary button
Status
success
#2ED573
Online
danger
#FF4757
Block, escalate
03 · Typography
Inter throughout. Headings are heavy (700-800) with -0.02em letter spacing; body copy is 15 or 16 px with generous line height. Labels are small caps with wide tracking.
h1 · clamp 2.5 – 4.5rem
Someone to talk to
h2 · clamp 1.8 – 3rem
Who is around tonight?
h3 · clamp 1.15 – 1.5rem
Chat with Noor
Body and labels
Lead, 18 px. For the first paragraph under a heading.
Body, 15 px. For running text in cards and messages.
Meta, 13 px. Times, hints and footnotes.
Eyebrow, 12 px, 0.14em
04 · Components
Buttons are pills: acid for the main action, elevated with a border for the second. Cards have a 1 px border and lift on hover.
05 · Imagery and locking
Profile photos sit in a 3/4 frame with a gradient over the top for the labels. Locked media gets a 28 px blur at 55% brightness with a lock in the middle and the price in tokens.
Locked photo set
5 tokensImage rules
- Current images are placeholders from the VXLT concept.
- Six photos are shared across eight profiles using different crops.
- Keep it clothed and everyday: this is a chat product, not an adult platform.
- Every profile needs its own set of 15-25 images before launch.
06 · Shape and motion
Radius
8 / 12 / 16 / 24 px; buttons and chips are always fully rounded
Shadow
sm, md, lg plus a 40 px acid glow under the primary button
Motion
200 ms with cubic-bezier(.4,0,.2,1); cards lift 4 px on hover
Entrance
fade-in-up over 24 px with 0.1 s steps
Grid
1200 px for marketing, 1440 px for app screens, 24 px gutters
Imagery
3/4 for profile cards, circles for avatars, 16/11 for feed photos
07 · Screens