Styleguide · Starlays

01

Tokens

Tinte, Elfenbein, Champagner

Viel Schwarz, viel Luft, wenige präzise Goldakzente. Komponenten nutzen ausschließlich diese Tokens.

ink · Hintergründe

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 (sparsam)

success #8fc79a

danger #e08a7e

warning #e7bf6a

info #9cbbe0

gold · Akzent

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

Haarlinien & Glas

.glass

.hairline

02

Cormorant Garamond · Manrope

Editoriale Typografie

Überschriften leicht und groß, gern mit kursivem Goldwort. Alles andere ruhig in Manrope.

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

Starlays

Exklusive Begegnungen

Unvergessliche Abende

Clubs & Locations

Private Gastgeber weltweit

Fließtext Manrope · 16/28

Diskretion ist bei uns kein Versprechen, sondern Grundhaltung. Jedes Profil wird persönlich geprüft.

Ob Dinner in Paris, Gala in Monaco oder ein privater Abend in Berlin: Starlays verbindet Menschen mit Stil – sicher, vertraulich und mit Sinn für den perfekten Moment.

Kleingedrucktes, Hinweise, Metadaten.

Auszeichnungen

Eyebrow · .eyebrow

Eyebrow muted · .eyebrow-muted

Caps · .caps

1.248 · 4,9

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

03

Aktionen

Buttons & Icon-Buttons

Primär: metallisches Gold mit Lichtstreif. Sekundär: Goldlinie, füllt sich. Ghost: Text mit einziehendem Unterstrich.

Varianten primary · secondary · ghost · dark

Größen sm 36 · md 48 · lg 56

Mit Icons & Zuständen

IconButton outline · ghost · glass · solid · gold · pressed · badge

04

Eingaben

Formulare ohne Browser-Optik

Label in Kapitälchen über dem Feld, goldener Fokusring, Fehler klar und leise. 16 px auf Mobilgeräten (kein Zoom).

05

Vertrauen & Status

Badges, Bewertungen, Avatare

Rating

Avatar

MT DK IR

VM

06

Flächen

Karten mit Tiefe

Tinte, Haarlinie, weicher Schatten. Beim Hover: Anheben, Lichtfleck oder 3D-Neigung mit Glanz.

Verifiziert Jetzt verfügbar

Lena

27 · Berlin

Verifiziert

Sofia

29 · Madrid

Verifiziert Jetzt verfügbar

Charlotte

31 · London

Verifiziert

Amélie

26 · Paris

surface

Standardfläche

Für Inhalte, Formulare, Listen.

glass · hover

Glasfläche

Nur für schwebende Ebenen.

outline · glare

Lichtfleck

Folgt dem Zeiger.

gold

VIP Black

Metallischer Rahmen für Besonderes.

07

Ordnung

Struktur & Navigation

SectionHeading mit Aktion · zentriert

Entdecken

Beliebte Destinationen

Die gefragtesten Städte dieser Saison.

Alle Städte

Mitgliedschaft

Der Black Club

Persönlicher Concierge, private Reisen, Zugang zu geschlossenen Events.

Tabs underline · ?tab= in der URL

Stilvolle, offene Begleitung für besondere Anlässe. Ich liebe gute Gespräche, feines Essen und Reisen.

Tabs pills · mit Icons

Aktiv: all

Suche öffnen ⌘K · Schließen Esc

Accordion lines · FAQ

Ihre Daten bleiben bei uns. Profile zeigen nie Adressen oder Kontaktdaten – Anfragen laufen ausschließlich über unser Nachrichtensystem.

Zahlungen erscheinen neutral auf Ihrer Abrechnung.

Jede Anbieterin und jeder Anbieter weist sich mit Ausweis und Selfie aus. Erst danach erscheint das goldene Verifiziert-Abzeichen.

Ja. Viele Gastgeberinnen begleiten Sie auf Reisen – achten Sie auf das Merkmal „International“.

Accordion cards · multiple · sm

Pagination Links (SEO) · Buttons · mobil kompakt

08

Schwebend

Modal, Drawer, Menüs

Alles im Top-Layer: Fokusfalle, ESC, Klick daneben. Mobil werden Modals zu Bottom-Sheets, die man wegziehen kann.

Modal

Drawer

Menu · Popover · Tooltip

Toast

09

Zustände

Laden, leer, ruhig

Skeleton

Spinner

Profile werden geladen …

EmptyState

Noch keine Favoriten

Tippen Sie auf das Herz, um Profile zu merken.

Entdecken

10

<Img>

Bilder mit Haltung

AVIF/WebP-srcset aus dem Register, Blur-up aus LQIP, sanfter Zoom. Fehlt ein Bild noch, steht ein ruhiger Platzhalter im richtigen Format.

Platzhalter 3/4

Platzhalter 1/1 · 16/9

11

$motion

Seidige Bewegung

Expo-out, nichts hüpft. Reveals 0,8–1,2 s, gestaffelt; respektiert „Bewegung reduzieren“.

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

use:splitReveal lines · words · chars

Zeilen gleiten aus ihren Masken – wie ein Vorhang, der sich hebt.

Wort für Wort, ganz ohne Eile.

Starlays · People · Clubs · Destinations

use:tilt · use:magnetic

VIP Black Card 0042 · 2026

use:countUp

1.248

Profile

38

Städte

4,9

Bewertung

24/7

Concierge

Goldstaub im Licht

Canvas · 60–140 Partikel · pausiert außerhalb des Bildes

Berlin Paris Monaco London Dubai Milano Wien Zürich Barcelona New York

Cursor mit Label

Desktop: Maus über diese Fläche bewegen. Filmkorn liegt über der ganzen Seite.

12

$lib/i18n

Zweisprachig, präzise

t(), l(), ll() und fmt.* lesen die Sprache aus page.data.lang – SSR-sicher, feste Zeitzone Europe/Berlin.

DE EN

fmt · de

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. Okt. 2026
fmt.date(d, 'long'): 10. Oktober 2026
fmt.date(d, 'weekday'): Samstag, 10. Oktober
fmt.date('2026-12-31', 'long'): 31. Dezember 2026
fmt.dateTime(d): 10. Okt. 2026, 21:00
fmt.time('21:00', { suffix: true }): 21:00 Uhr
fmt.timeRange('18:00-02:00'): 18:00 – 02:00
fmt.relative(−5 min): vor 5 Minuten
fmt.relative(+3 Tage): in 3 Tagen
fmt.monthName('2026-10'): Oktober 2026
fmt.weekdays('short'): Mo · Di · Mi · Do · Fr · Sa · So
fmt.list(['Deutsch', 'English', 'Español']): Deutsch, English und Español
plural(128, 'Bewertung', …): 128 Bewertungen
fmt.compact(12400): 12.400

Ultra edel,aus einem Guss.

Wie diskret ist Starlays?

Wie werden Profile verifiziert?

Kann ich international buchen?

Kategorien

Sprachen

Reisebereitschaft

Noch keine Favoriten

Ultra edel,
aus einem Guss.