Design System · v1

Ultra refined,
all of a piece.

The building blocks of Starlays: ink, ivory and champagne gold, hairlines, editorial type and silky motion.

Explore components Motion Deutsch
01

Tokens

Ink, ivory, champagne

Lots of black, lots of air, few precise gold accents. Components use these tokens exclusively.

ink · backgrounds
ink-950 #040303
ink-900 #070605
ink-850 #0b0a08
ink-800 #100e0c
ink-750 #15120f
ink-700 #1b1814
ink-600 #25211b
ink-500 #352f27
ink-400 #4d453a
ivory · text
ivory-50 #fbf8f2
ivory-100 #f3ede2
ivory-200 #e6dccb
ivory-300 #cfc3ae
ivory-400 #a99f8f
ivory-500 #827869
ivory-600 #5f584d
status (sparingly)
success #8fc79a
danger #e08a7e
warning #e7bf6a
info #9cbbe0
gold · accent
gold-50 #fdf8ea
gold-100 #f7ebcb
gold-200 #eedba8
gold-300 #e2c486
gold-400 #d2ab6a
gold-500 #bb9152
gold-600 #9a7440
gold-700 #765832
gold-800 #523d24
gold-900 #2e2215
--gradient-gold
--gradient-gold-soft
hairlines & glass
.glass
.hairline
02

Cormorant Garamond · Manrope

Editorial typography

Headlines light and large, often with an italic gold word. Everything else calm in Manrope.

text-display-2xl … sm font-display · 300

Starlays

Exclusive encounters

Unforgettable evenings

Clubs & Locations

Private hosts worldwide

body Manrope · 16/28

Discretion is not a promise here but a principle. Every profile is personally verified.

Whether dinner in Paris, a gala in Monaco or a private evening in Berlin: Starlays connects people of style – safely, confidentially and with a sense for the perfect moment.

Fine print, hints, metadata.

accents

Eyebrow · .eyebrow

Eyebrow muted · .eyebrow-muted

Caps · .caps

1.248 · 4,9

.link-gold · .link-underline · .text-gold-shimmer

03

Actions

Buttons & icon buttons

Primary: metallic gold with a light sweep. Secondary: gold line that fills. Ghost: text with a drawing underline.

variants primary · secondary · ghost · dark
sizes sm 36 · md 48 · lg 56
icons & states
IconButton outline · ghost · glass · solid · gold · pressed · badge
04

Inputs

Forms without browser chrome

Small-caps label above the field, gold focus ring, errors clear and quiet. 16 px on mobile (no zoom).

Input · Select · Textarea
Forgot?

At least 10 characters.

cm

Please choose a future date.

96/240
Checkbox · Toggle

Please confirm.

Chip selectable · removable · count
Berlin Verifiziert 25–30
RadioGroup list · pills · cards
Request type
I am
Membership
05

Trust & status

Badges, ratings, avatars

Badge
Verified Available now Premium VIP New in Berlin International
New Pending Accepted Confirmed Declined Cancelled Completed Paid Failed Refunded Active Rejected Expired Draft
Verified Paid VIP
Verified Available now
VIP Premium
Rating
(128 reviews)
Avatar
MT DK IR
Lena
Sofia
 VM
06

Surfaces

Cards with depth

Ink, hairline, soft shadow. On hover: lift, light spot or 3D tilt with glare.

Lena
Verified Available now

Lena

27 · Berlin

Sofia
Verified

Sofia

29 · Madrid

Charlotte
Verified Available now

Charlotte

31 · London

Amélie
Verified

Amélie

26 · Paris

surface

Default surface

For content, forms, lists.

glass · hover

Glass

Only for floating layers.

outline · glare

Light spot

Follows the pointer.

gold

VIP Black

Metallic frame for the special.

07

Order

Structure & navigation

SectionHeading with action · centred

Discover

Popular destinations

The most sought-after cities this season.

All cities

Membership

The Black Club

Personal concierge, private travel, access to closed events.

Tabs underline · ?tab= in the URL

Stylish, open-minded companion for special occasions. I love good conversation, fine dining and travel.

Tabs pills · with icons

Active: all

Open search ⌘K · Close Esc
Accordion lines · FAQ

Your data stays with us. Profiles never show addresses or contact details – requests run exclusively through our messaging system.

Payments appear neutrally on your statement.

Every provider identifies with ID and a selfie. Only then does the gold verified badge appear.

Yes. Many hosts accompany you on travels – look for the “International” attribute.

Accordion cards · multiple · sm

Pagination links (SEO) · buttons · compact on mobile
08

Floating

Modal, drawer, menus

Everything in the top layer: focus trap, ESC, click outside. On mobile, modals become bottom sheets you can drag away.

Modal
Drawer
Menu · Popover · Tooltip
Toast
09

States

Loading, empty, calm

Skeleton
Spinner
Loading profiles …
EmptyState

No favourites yet

Tap the heart to save profiles.

Discover
10

<Img>

Images with poise

AVIF/WebP srcset from the registry, LQIP blur-up, gentle zoom. If an image is still missing, a calm placeholder holds the right format.

blur-up · zoom
A toast at the bar
placeholder 3/4
placeholder 1/1 · 16/9
11

$motion

Silky motion

Expo-out, nothing bounces. Reveals 0.8–1.2 s, staggered; respects reduced motion.

use:reveal fade-up · fade · blur-in · clip-up · scale-in
fade-up
fade
blur-in
clip-up
scale-in

group, staggered · use:reveal={{ stagger: 80 }}

use:splitReveal lines · words · chars

Lines glide out of their masks – like a curtain rising.

Word by word, never in a hurry.

Starlays · People · Clubs · Destinations

use:parallax ±10 %
use:tilt · use:magnetic
VIP Black Card 0042 · 2026
use:countUp

1,248

Profiles

38

Cities

4.9

Rating

24/7

Concierge

<GoldDust>

Gold dust in the light

canvas · 60–140 motes · pauses offscreen

<Marquee>
Berlin Paris Monaco London Dubai Milano Wien Zürich Barcelona New York
<Cursor> · <Grain>

Cursor with Label

Desktop: move the mouse over this area. Film grain covers the whole page.

12

$lib/i18n

Bilingual, precise

t(), l(), ll() and fmt.* read the language from page.data.lang – SSR-safe, fixed time zone Europe/Berlin.

DE EN
fmt · en
fmt.price(1200)
€1,200
fmt.money(4990)
€49.90
fmt.money(250000)
€2,500
fmt.number(1248)
1,248
fmt.date(d)
10/10/2026
fmt.date(d, 'medium')
10 Oct 2026
fmt.date(d, 'long')
10 October 2026
fmt.date(d, 'weekday')
Saturday 10 October
fmt.date('2026-12-31', 'long')
31 December 2026
fmt.dateTime(d)
10 Oct 2026, 21:00
fmt.time('21:00', { suffix: true })
21:00
fmt.timeRange('18:00-02:00')
18:00 – 02:00
fmt.relative(−5 min)
5 minutes ago
fmt.relative(+3 Tage)
in 3 days
fmt.monthName('2026-10')
October 2026
fmt.weekdays('short')
Mon · Tue · Wed · Thu · Fri · Sat · Sun
fmt.list(['Deutsch', 'English', 'Español'])
Deutsch, English and Español
plural(128, 'Bewertung', …)
128 reviews
fmt.compact(12400)
12.4k

Starlays · Design System · 2026