Design system v0.1
Linger
A working brand for the demo: warm, a little romantic, never explicit. Every colour is a token with a light and a dark value; every component on this page is the one used in the app. In the real project this lives in Figma first, with these tokens exported to code.
Logo
A chat bubble that is also a heart. The wordmark is Fraunces italic; the mark works alone at 16 px (favicon) and as the app icon.
Colour
light mode
- Background
--color-bg - Surface
--color-surface - Ink
--color-ink - Muted
--color-muted - Rose · primary
--color-rose - Dusk · accent
--color-dusk - Gem
--color-gem - Success
--color-ok - Cooling
--color-warn - Cold
--color-cold - Danger
--color-bad - Demo / simulated
--color-sim
dark mode
- Background
--color-bg - Surface
--color-surface - Ink
--color-ink - Muted
--color-muted - Rose · primary
--color-rose - Dusk · accent
--color-dusk - Gem
--color-gem - Success
--color-ok - Cooling
--color-warn - Cold
--color-cold - Danger
--color-bad - Demo / simulated
--color-sim
Relationship states have their own colours and always a label and an icon, so they never rely on colour alone.
Type
Display · Fraunces (soft, optical size)
It's a match!
Be remembered.
Text · Manrope
Chats, buttons and everything you read quickly. 15 px body, 1.6 line height in bubbles.
Semibold for labels · Eyebrow
Components
Buttons
Chips & status
Input
Chat
You're chatting with an AI character.
How did the speech go? Did Mia cry?
She did! And so did the groom 😅
Character card
AI characterValentina 27
Tattoo artist · Mexico City
Full-bleed portrait, 3:4. Bottom gradient for legibility; the trope chip in rose; “AI character” always on the photo.
Gems
Gem
Gold to rose. Shown with the count, never alone. Gold is reserved for money.
Spacing & shape
Radius 20 px for cards, 14 px for controls, full for chips and avatars. 4 px spacing grid. Shadows warm-tinted; in dark mode they deepen instead of glowing.