Design System & Style Guide
Single source of truth for design tokens, typography, atomic components, custom SVG leaf cursors, interactive button states, and layout patterns across the Bambu Hospitality digital platform.
Color Palette & Root Tokens
Tier 1 (Base & Surfaces), Tier 2 (Semantic Text), and Tier 3 (Semantic Borders) tokens defined in _variables.scss powering global theme switching and component contrasts.
Tier 1: Base Palette & Surfaces
Deepest dark base for immersive transitions.
Standard dark mode background for hero/pillars.
Warm editorial paper light background.
Crisp white card and disclosure surface.
Subtle contrast surface for badges & icons.
Primary organic bamboo accent green.
Bright accent green hover state.
Deep forest green for high-contrast pills on light.
Tier 2: Semantic Text Hierarchy
Primary deep ink text on light surfaces.
Secondary body copy on light surfaces.
Muted editorial notes & subtitle labels.
Subtle metadata and secondary card labels.
High-contrast text on dark backgrounds.
Body copy and descriptions on dark backgrounds.
Muted subtexts on dark backgrounds.
Tier 3: Semantic Borders & Lines
Subtle divider lines & dashed section borders.
Card outline & panel border separator.
Typography Scale ($font-main: Poppins)
Fluid clamp-based type tokens engineered for seamless responsiveness from 320px mobile screens through 4K displays.
| Semantic Element / Token | Scale Range / Spec | Live Rendered Preview |
|---|---|---|
|
Display / H1 |
A Marketing Partner |
|
|
Section Heading / H2 |
Five pillars. One system. |
|
|
Card Title / H3 |
Direct Booking & Performance Media |
|
|
Body Text |
A direct-booking growth system for independent hotels and boutique groups, engineered to reduce OTA commission dependency within 90 days. |
|
|
Body Small / Meta |
Full-funnel hospitality marketing. | |
|
Caption / Micro |
01 DEMAND GENERATION |
Spacing & Layout Rhythm
Consistent fluid block spacing and horizontal gutters powering the 100% fluid width standard (Rule 14).
Brand Geometry & Border Radii
Signature leaf-inspired organic asymmetric corner radii paired with subtle card rounding.
Leaf Bullets, Feature Lists & Badges
Atomic leaf SVG icon markers used for structured bulleted value props, feature lists, and inline value chips across light and dark surfaces.
Feature Checklist (Light Surface)
Component- Full-funnel Google Hotel Ads & metasearch bidding optimization
- Direct booking engine conversion rate engineering (CRO)
- First-party guest CRM & automated post-stay lifecycle retargeting
Feature Checklist (Dark Surface)
Component- Intercept high-intent travelers before OTA conversion moment
- Measurable 90-day direct revenue growth sprints
- Zero vanity metrics — pure hospitality P&L alignment
Perk Badges & Value Chips
ComponentButtons & Interactive Controls
Atomic button components featuring interactive magnetic reveals, brand green offset drop-shadows, and keyboard accessibility.
Headline Vector Strips (data-vector-strip)
4-tier organic bamboo vectors animated on entrance, positioned above major section headings in both dark and light contexts.
More direct revenue, less OTA commission.
Direct Booking Growth System
FAQ & Interactive Disclosure Cards
Atomic disclosure component featuring the signature brand green leaf marker, expanding animated answer body, and interactive plus/minus trigger.
We build and run full-funnel direct-booking growth systems for independent hotels and boutique groups, turning ad spend and guest attention into high-margin direct reservations that systematically reduce OTA commission dependency.
General agencies focus on vanity clicks, impressions, and top-of-funnel traffic. We focus purely on net direct room revenue, booking engine conversion rate optimization, and hospitality P&L alignment with measurable 90-day sprints.
Draggable Infinite Marquee (.marquee-track)
Continuous horizontal logo marquee ticker with GSAP Draggable support, auto-scrolling seamless loop, and interactive hover elevation states.
Custom Needle Progress Dial (.sg-custom-dial)
Zero-allocation needle progress dial built with 70 micro-bars. Supports direct pointer drag, tap-to-seek, and bidirectional synchronization with scrollable tracks.
Full-funnel approach drove direct bookings at scale during a market shutdown.
Direct-booking engine CRO and metasearch rate-parity campaign management.
Targeted high-intent guest interception across paid search and metasearch.
Full guest data and CRM infrastructure turning one-time visitors into direct loyalists.
Scalable 90-day growth sprints aligned directly with resort P&L targets.
Luxury storytelling and reputation signals driving ultra-high ADR direct bookings.
Interactive Custom Cursors Lab
High-precision SVG leaf cursors designed with zero clipping, 32x32 viewbox, and precise contextual color states.
Logos & Brand Assets
Vector brand lockups and favicon formats across high and low contrast surfaces.
