Brand & UI · v1

The LUXXY design system.

A dark, glassmorphic, navy-and-rose interface with animated chromatic blooms, layered translucent surfaces, and quiet luxury typography. This page is a living style guide — every element below is built from the production tokens it documents.

Naming convention

Wordmarks.

LUXURYX and LUXXY are wordmarks — always set in ALL CAPS in any human-readable copy.

Apply the all-caps rule to all display copy: headings, body text, eyebrows, labels, buttons, page / tab titles, alt text, and marketing. The full company lockup is LUXURYX AGENTS — both words all caps.

Always

LUXURYX AGENTS
Welcome to LUXXY
the LUXXY portal

Never

Luxxy
Luxuryx / LuxuryX
luxxy portal
LUXURYX Agents

Exempt — leave exactly as written. The rule applies to display copy only, never to code identifiers: filenames (luxxy.css, assets/luxuryx-logo.png), CSS classes, config keys (window.LUXXY_CONFIG), URLs / domains (luxxy.app, luxxy-marketwatch.com), and email / Workspace handles (@luxuryx.co). Uppercasing those would break the app.

Design tokens

Color.

One warm accent (rose / bronze) against navy. Never introduce a new accent hue.

Body ground

#06182f

--navy

#0c233e

--navy-deep

#081a2f

--electric

#1a3a6e

--bronze

#b88560

--rose

#e3a48a

--rose-soft

#f4d5bf

--rose-dark

#a06a4e

--danger

#e07b6a

Primary gradient

rose-dark → soft → dark

Typography

Type scale.

Montserrat for display & labels, Poppins for body. Titles take a trailing period; eyebrows are always UPPERCASE.

Welcome back.Montserrat 300 · clamp 40–76px
Your apps.Montserrat 300 · clamp 28–42px
Market WatchMontserrat 500 · 22px
WorkspaceMontserrat 500 · 11px · 0.32em
Track Dubai's luxury market in real time, with quiet, expensive restraint in every label.Poppins 300 · 15px

Core component

The glass surface.

Translucent fill + backdrop blur + a gradient hairline border + the paired shadow — these four always ride together.

Light · 6%

Small cards — announcements, buyer cards. blur(24px)

Strong · 12%

Hover state of medium cards. blur(28px)

Navy · 72%

Dropdowns, modals, login & admin panels.

Actions

Buttons.

One warm primary per view. Everything is a pill, uppercase Montserrat — except the white Google sign-in.

Secondary Ghost

Signature component

App cards.

Hoverable glass tiles that tilt toward the cursor with a follow spotlight. Move your pointer across them.

New Featured In build Beta