FLOWSTAY DESIGN SYSTEM

Unreasonable hospitality,
rendered in code.

The tokens, type, motifs, and voice rules that make FlowStay feel like FlowStay. One source of truth lives in src/styles/global.css. This page shows what's in there, in the form you'll actually use.

Palette Naming debt Typography Buttons Motifs Motion Bot family Voice Do / Don't Two systems
01 · PALETTE

Twelve tokens. Every color on the site.

Gold is reserved for FlowStay wins, positive outcomes, and brand moments. Teal appears only in CRM-system highlights.

--bg
#151213
Dominant background. Page default.
--bg1
#0d0d12
Darker section bg. Footer, deep panels.
--bg2
#1c191a
Elevated surface. Media frames, cards.
--bg3
#221f20
Warmer panel tone. Inline callouts.
--gold
#C9A96E
Primary accent. FlowStay wins only.
--gold2
#E0C48A
Hover + highlight gold.
--limeLIES
#3BBFCC
TEAL, not lime. Secondary accent (CRM highlight).
--lime2LIES
#5ED4DF
Lighter teal. Same naming caveat as --lime.
--text
#FFFFFF
Primary text.
--muted
#aaaaaa
Body copy, subheads.
--dim
#444444
Deemphasized labels, placeholders.
--border
rgba(255,255,255,0.08)
Hairline rules + card borders.
02 · NAMING DEBT

Two tokens lie. Read this before using them.

⚠
--lime is teal.
The token resolves to #3BBFCC. Historical naming from an earlier palette. Only used once in the codebase (CRM highlight on TheKnowing).
⚠
.btn-lime is gold.
The class renders a gold gradient (#DDB96E → #C9A96E → #B8934A). Inherited from the same earlier naming. All primary CTAs on the site use this.
Don't rename yet, global rename will touch every page. Planned. For now: trust the rendered output, not the token name.
03 · TYPOGRAPHY

Three families. One mono for signal.

Plus Jakarta Sans for everything body + UI. JetBrains Mono for overlines and technical labels — the visual signal that says "this is metadata, not prose." DM Serif Display for rare brand moments where warmth matters.

Display 72
var(--display)
Unreasonable hospitality.
H1 / Hero
var(--font)
A team of AI agents with a voice.
H2 / 56
var(--font)
The phone call that shows the hotel.
H2 / 72
var(--font)
Nine specialists. One Sol.
H3
var(--font)
The Orchestrator
Body 17
var(--font)
Other hotel AI has one agent trying to do every job. FlowStay has nine specialists, each trained deep for a specific part of your hotel.
Body 14
var(--font)
Treatments booked, preferences remembered.
Overline
var(--mono)
MEET THE TEAM
Mono 14
var(--mono)
Reads + writes across your stack
04 · BUTTONS

Two buttons ship. Plus one tertiary pill.

Resist the urge to add more. Three surfaces handle every CTA on the site.

Book a demo
.btn-lime.lg
Primary CTA. Gold gradient. Use sparingly — one per viewport, max.
See how it works
.btn-ghost.lg
Secondary. Glass + gold border. Pairs with primary.
Book a demo
.btn-lime
Regular size. Inline CTAs, nav.
See how it works
.btn-ghost
Regular size. Secondary inline.
Book a demo →
.footer-demo-link
Tertiary footer pill. Mono, dim gold, small. Never use above the fold.
05 · MOTIFS

Signature FlowStay elements.

Reuse these. Don't reinvent them per section.

OVERLINE EXAMPLE
.overline
Section labels. Mono 11px, gold, letter-spaced. Always in all caps.
LIVE
gold dot + pulse keyframe
Anchors "live," "always on," and guest-file-updating moments.
  • Gold dot bullet
  • Muted body text
  • Flush with feature copy
.feature-list
Feature breakdowns. 6px gold dot. 14px gap.
Gold-rule card. Fades in at edges. Used for Sol, footers, and kickers.
::before gold hairline
Gradient-edged rule at top of featured cards.
06 · MOTION

Easing lives in --spring.

cubic-bezier(.16,1,.3,1). Use for any UI transition. GSAP scrub patterns drive the pinned sections on the homepage + /technology. We don't re-implement per section.

--spring
Hover the box. Every micro-interaction on FlowStay uses this curve.
07 · BOT FAMILY

One character. Ten roles.

Matte-black ceramic humanoid with warm-gold seam inlays and a single gold visor light band. Every specialist reuses this silhouette, staged with one clear hospitality prop. Sol is the same character, distinguished by conductor stance, gold sun emblem, and constellation lines — never a different design.

Source prompts lock the character consistency. Generated with Nano Banana 2 (Gemini 3.1 Flash Image). Never swap the base design — edit variants by prop only.

Room Bookings
Room Bookings
Brass hotel key + tassel
/images/bots/bot-room-bookings.webp
Room Modifications
Room Modifications
Leather daybook + gold pen
/images/bots/bot-room-modifications.webp
Room Cancellations
Room Cancellations
Envelope with gold wax seal
/images/bots/bot-room-cancellations.webp
In-Room Dining
In-Room Dining
Silver domed cloche on tray
/images/bots/bot-in-room-dining.webp
Tables
Tables
Leather reservation book + gold pen
/images/bots/bot-tables.webp
Wellness & Spa
Wellness & Spa
White spa towel + lavender sprig
/images/bots/bot-wellness-spa.webp
Golf
Golf
Wood-grip putter + ball on tee
/images/bots/bot-golf.webp
Marina
Marina
Coiled white boat line
/images/bots/bot-marina.webp
Events & Weddings
Events & Weddings
Gold-rimmed champagne flute
/images/bots/bot-events-weddings.webp
Sol (Orchestrator)
Sol (Orchestrator)
Conductor stance + gold constellation lines
/images/bots/bot-sol.webp
08 · VOICE & COPY

Hard rules. No room for house style drift.

NO
No em dashes.
Use commas, periods, colons, or rewrite. Carryover from Eric's Jarvis voice preference. This rule is absolute.
YES
"Unreasonable hospitality" is the thesis.
Use this vocabulary when positioning the memory/anticipation layer. Borrowed from Will Guidara. Lives as the /technology H1 and the MeetTheTeam kicker.
YES
The OTA is the villain.
Always 15–30% commission. Always the alternative FlowStay routes around. Never named specifically, never shamed by brand.
YES
Real numbers only.
2.2% website conversion. 15–30% OTA commission. 25% of calls. These are the only hard stats. Do not invent FlowStay-specific conversion numbers until we have data.
YES
Nine specialists. One Sol.
The team is nine specialists plus Sol as orchestrator. Not "ten agents." Not "nine agents including Sol." Sol is a different role, framed separately every time.
NO
No "AI voice agents."
Voice is an attribute, not a category. The framing is "a team of AI agents with a voice." Matters because Sol isn't voice-first and the platform will grow past voice.
YES
FlowSense = anticipates.
Never "guest file," "shared database," or "customer record." FlowSense is a memory that anticipates, reads between the lines, surfaces needs before they're spoken.
09 · DO / DON'T

Patterns we keep breaking. Stop.

DON'T

"Answers every call — any hour, any language."

Em dash. Drifts into marketing boilerplate.
DO

"Answers every call, any hour, any language."

Comma. Same rhythm, no forbidden punctuation.
DON'T

"Nine specialized AI agents. One shared guest file."

"Guest file" is static and understates FlowSense. Doesn't teach what Sol does.
DO

"Nine specialists. One Sol. Powered by FlowSense, a memory that anticipates."

Introduces Sol as orchestrator, FlowSense as anticipation.
DON'T

"Bookings up 47% in the first month."

Fabricated FlowStay-specific stat. We don't have data yet.
DO

"Hotel websites convert at ~2.2%. FlowStay puts a voice on every page."

Real industry number, sharp framing, no invented claim.
DON'T

Render a new cartoon bot mascot per use case.

Breaks the one-character system. Kills instant recognizability.
DO

Edit the base bot PNG with image-to-image, prop-swap only.

Character stays identical. Prop signals the role. One family.
10 · TWO SYSTEMS LIVE IN THIS REPO

The Astro site and the legacy demos use different tokens.

Everything above is the Astro site system — the only one you should build against for new components.

/public/demo-*.html and the accompanying tests/design-tokens.spec.ts use a separate legacy system: Cormorant Garamond / DM Sans / Sacramento typography, gold #d4a853, background #0a0a0f. These demos ship as iframe content inside the phone and laptop scrubs and are frozen. Don't port them forward, don't reuse their tokens. The token test locks them in place so drift is caught.

If a new component should match the demo iframes (rare), reuse the demo-system tokens inline. Don't pollute global.css.