Color

Tokenized via Tailwind 4 @theme. Swap --color-accent + --color-accent-soft to rebrand. Neutrals stay on the native zinc-* scale.

--color-accent

#DC2626

Brand accent — URGENT, destructive actions

--color-accent-soft

#FEF2F2

Accent background tint — pills, banners

--color-surface

#FFFFFF

Card surface

--color-surface-muted

#FAFAFA

Page background

--color-surface-subtle

#F4F4F5

Inbound chat bubble, neutral pill

--color-border

#E4E4E7

Default border

zinc-500

#71717A

Muted text

zinc-900

#18181B

Body text + primary button surface

Typography

System font stack (Tailwind default font-sans). To swap to Inter, self-host and prepend it to the stack — one line.

h1 · text-2xl font-bold

Inbox

h2 · text-lg font-semibold

Section heading

h3 · text-sm font-semibold

Card heading

body · text-sm

Body text — used in chat bubbles, descriptions, list rows.

small · text-xs text-zinc-500

Hints, captions, meta-lines.

eyebrow · text-[10px] uppercase tracking-wide

Section eyebrow

monospace · font-mono text-xs

api_key=sk-…

Spacing

Tailwind's default scale. Lean on multiples of 4 (1, 2, 3, 4, 6, 8, 12).

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

Radii

Card surfaces use rounded-xl (12px). Pills use rounded-full.

rounded-md

rounded-xl

rounded-full

Buttons

Use ui_button_classes(variant:, size:) on link_to / button_to / form#submit. Render shared/components/button for plain <button>.

sm

md

Badges & pills

Pills retokenized: urgent → accent, others → zinc tones. Used in inbox rows, classification section, override picker.

urgent needs reply trivial fyi neutral soon success warning

Cards

Outlined for content surfaces; filled for muted info.

Outlined

bg-white · border · rounded-xl

Filled

bg-zinc-100 · border · rounded-xl

Icons

Lucide SVGs inlined as partials under app/views/shared/icons/. To add: copy SVG markup verbatim from lucide.dev into _<name>.html.erb, parameterize the class attr with `local_assigns[:class] || 'w-4 h-4'`. This page auto-lists every icon in that directory.

Form elements

Use ui_input_classes / ui_label_classes / ui_hint_classes.

Account name

Friendly label shown in the account picker.

Notes

Property

Disabled

Empty states

No threads yet

When guests message your accounts, threads will appear here.

No accounts yet

Connect your first Lodgify account to get started.

Add an account

Flash banners

Mounted in the layout; reads flash[:notice] / flash[:alert].

Account synced — 3 new bookings.

Could not send reply — Lodgify returned 500.

Inbox lane cards

Four cards across the top of the inbox. Active card fills (red for URGENT, zinc-900 for others); inactive is outlined.

2

Urgent

Now

4

Soon

Within the hour

7

Later

Batched review

3

Handled

AI auto-replies

0

Urgent

Now

4

Soon

Within the hour

7

Later

Batched review

3

Handled

AI auto-replies

Compact thread row

Used inside the active inbox lane. The arrival-window meta-line and red urgency dot are visual modifiers; the row partial reads them off the booking.

Chat bubbles

Inbound = white card on zinc-200 border. Outbound = inverted zinc-900.

Tom Chen

Hi! When can we check in tomorrow?

Apr 21, 2026 9:14 am

Anytime after 3pm — early check-in is fine if the room's ready.

Apr 21, 2026 9:18 am

Reply composer

With + without an AI draft. The sparkles pill replaces the old purple dot.

With AI draft

AI draft · Haiku · 412ms

Empty composer

Classification section

Renders above the message list on a thread when the latest inbound has been classified.

Classified

urgent

Guest reports broken hot water just before check-in

Change label

Safety banner

Always zinc-900 / white; the icon differentiates severity. ban = empty allowlist (nothing can send). lock = lockdown with one or more allowlisted bookings.

Lockdown active — outbound sends restricted to no bookings (nothing can go out).

Lockdown active — outbound sends restricted to 2 allowlisted bookings.