HiLucyHelp Center

Branding & Customization

HiLucy Team·Updated 2026-04-17·3 min read

HiLucy uses three purpose-built design systems, each optimized for a different audience. The guest portal automatically applies the right visual language based on context, so your guests always experience a polished, professional interface.

Three Design Systems

Guest Portal -- Liquid Glass

The guest-facing design system used in the Guest Portal and AI chat at app.hilucy.com.

  • Primary color: Messenger blue (#2563EB)
  • Accent color: Online green (#059669)
  • Typography: Georgia for headings, Inter for body text
  • Style: Flowing glass surfaces, translucent elements, animated blur effects, and iridescent highlights
  • Mood: Boutique, warm, premium -- designed to feel like a high-end concierge app

This is what your guests see. The design prioritizes mobile-first readability, minimal cognitive load, and a sense of trust.

Operations Dashboard -- Data-Dense

The admin-facing design system used in the staff dashboard.

  • Primary color: Deep blue (#1E40AF)
  • Accent color: Amber (#D97706)
  • Typography: Fira Code (monospace) for headings, Fira Sans for body
  • Style: Dense data tables, charts, KPI cards, minimal padding, grid layouts
  • Mood: Analytical, precise, technical -- built for staff efficiency

This powers the admin dashboard where your team manages reservations, tasks, and analytics.

Marketing -- Vibrant & Block-Based

The public-facing design system used on hilucy.com and marketing pages.

  • Primary color: Teal (#0D9488)
  • Accent color: Orange (#EA580C)
  • Typography: Inter for both headings and body
  • Style: Bold geometric blocks, high contrast, duotone imagery
  • Mood: Clean, functional, conversion-focused

This drives the onboarding funnel and public pages where property owners sign up.

How the Guest Portal Adapts

The Guest Portal adapts its presentation based on the listing context:

  • Property branding -- your property name and details are displayed throughout the portal
  • Listing-specific content -- amenity lists, house rules, local recommendations, and arrival instructions are pulled from your property's knowledge base
  • AI personality -- LucyAI references your specific property details when chatting with guests

Page-Specific Design Overrides

Certain pages within the portal have specialized visual treatments:

  • AI Chat -- narrow 800px layout, dark/light mode support, mobile-first with minimal animations for fast conversation flow
  • Arrival Flow -- step-based wizard with progress indicators and color transitions (red to orange to green) as the guest completes each stage
  • Manager Dashboard -- dark/neutral palette with status colors (green/amber/red) and count-up animations for KPI cards

Accessibility Standards

All three design systems follow a shared accessibility checklist:

  • Lucide icon library with consistent sizing
  • Alt text on all images
  • Hover and focus states on interactive elements
  • WCAG contrast ratios for all text
  • Full keyboard navigation
  • Reduced-motion support for users who prefer it
  • Responsive breakpoints at 375px, 768px, 1024px, and 1440px
  • No horizontal scroll on mobile

Customization Options

Property-level customization is available for the guest portal:

  • Theme mode -- guests can switch between light and dark appearance in their portal settings
  • Property identity -- your property name, location, and listing details are displayed automatically
  • Knowledge base -- the content Lucy references is fully controlled by your property's data

For deeper branding customization (custom color palettes, logo placement, or white-labeling), contact the HiLucy team to discuss your requirements.

Was this article helpful?

Related Articles