WeiBook

Overview

WeiBook is an all-in-one SaaS platform engineered for beauty and wellness businesses across Latin America—salons, barbershops, spas, and aesthetic centers. The design language embraces "Vibrant Professionalism": a bold, energetic aesthetic that combines vivid cobalt blues (#2c5bff primary, #1f7dfe secondary) with warm cream surfaces (#fbf9f4), creating an interface that feels both trustworthy and dynamic. The UI evokes clarity and efficiency, transforming complex business operations (scheduling, payments, inventory, AI automation) into intuitive, delightful interactions. Users encounter a platform that respects their time and celebrates their business growth.

The brand voice is direct, empowering, and solution-focused. WeiBook speaks in the language of business owners: practical, outcome-driven, never patronizing. Vocabulary emphasizes automation, intelligence, and growth—"Wanda AI por WhatsApp," "reservas automatizadas," "reportes en tiempo real." The tone is confident without arrogance, supportive without hand-holding. Example: "Reservas confirmadas automáticamente. Tu negocio crece mientras duermes."

Colors

The color system is anchored by a primary cobalt blue (#2c5bff) deployed on all call-to-action buttons, interactive states, and brand-critical moments. This primary is paired with a secondary bright blue (#1f7dfe) for supporting actions, gradients, and secondary CTAs. A tertiary purple (#a855f7) adds sophistication to accent elements, modals, and premium features. The surface palette ranges from warm cream (#fbf9f4 base) through soft beige (#f1efea) to pure white (#ffffff), creating visual depth without coldness. On-surface text is near-black (#0b0b12) for maximum legibility at 16px body size. Supporting colors include success green (#25d366) for confirmations and status badges, and error red (#d32f2f) for destructive actions. Gradients frequently blend primary (#2c5bff) and secondary (#1f

Typography

The type system pairs Bricolage Grotesque (display, headline, title weights: 600–800) with Geist (body, label weights: 400–600), creating a distinctive contrast between expressive headlines and efficient body copy. Bricolage's geometric, slightly geometric character conveys modernity and precision—ideal for feature names and hero messaging. Geist's humanist proportions ensure body text remains warm and readable at 16px/24px line-height. Display text (74px, 600 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; headline-lg (48px, 600 weight) breaks major sections; body-md (16px, 400 weight, 24px line-height) maintains comfortable reading rhythm. Labels use Geist 600 at 14px with 0.01em letter-spacing for button text and form labels. Apply text-shadow: 0 2px 4px

Layout

The layout operates on a 12-column grid with a 1400px max-width container, using 24px gutter spacing for desktop and 12px for tablet. The page rhythm emphasizes generous white space: section separation uses 64px (lg spacing) vertically, while internal card padding uses 24px (md spacing). Hero sections occupy full-width with 40px horizontal padding (lg spacing) on desktop, creating breathing room around the primary CTA. The container-max-width of 1400px ensures readability on ultra-wide displays while maintaining focus. Responsive breakpoints collapse to single-column at 768px, with gutter reducing to 12px (sm spacing). The spacing scale (4px unit, 12px sm, 24px md, 40px lg, 64px xl) is applied consistently: button padding uses md (24px), card padding uses md, section margins use lg. This c

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering. Level 1 (Base): surface-bright (#ffffff) with no shadow, used for primary content cards and input fields. Level 2 (Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to standard cards, modals, and hover states—this 8px blur radius creates perceived lift without heaviness. Level 3 (Floating): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for dropdowns, popovers, and top-layer modals. Interactive states amplify depth: button-primary-hover receives 0 6px 16px rgba(44, 91, 255, 0.2), adding a colored shadow

Shapes

The shape philosophy is "Approachable Precision"—rounded corners are generous but not organic, signaling friendliness while maintaining professional structure. Buttons use full-radius (9999px / border-radius: 999px) to create pill-shaped CTAs that feel inviting and modern; this is applied to all primary and secondary buttons (48px height, 12px vertical padding). Cards use xl radius (1.5rem / 24px) for a softer, more welcoming appearance than sharp corners, reinforcing the warm, supportive brand personality. Input fields use DEFAULT radius (0.5rem / 8px) for subtle rounding that doesn't distrac

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** (backgroundColor: #2c5bff, textColor: #ffffff, height: 48px, padding: 12px 24px, border-radius: 999px, fontWeight: 600) is deployed on all CTAs: "Empieza gratis," "Pruébalo gratis," "Ver demo en vivo." On hover, the background shifts to #1f4a9f with box-shadow: 0 6px 16px rgba(44, 91, 255, 0.3), creating tactile feedback. On active/press, background becomes #154db3 with reduced shadow (0 2px 4px) to signal engagement. **button-secondary** uses a transparent background with a 2px border in primary blue (#2c5bff), maintaining the same height and padding; on hover, it fills with primary-container (#dce6ff) and text becomes on-primary-container (#0b2a6b). **button-ghost** is used for tertiary actions (navigat

Do's and Don'ts

**Do**

• Do use primary blue (#2c5bff) exclusively on CTAs and interactive elements—never on passive text or backgrounds.
• Do apply 24px (md spacing) padding inside cards and 40px (lg spacing) between major sections to maintain breathing room.
• Do use Bricolage Grotesque 600 for headlines (48px+) and Geist 400 for body text (16px) to maintain the expressive-yet-readable hierarchy.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated surfaces and increase to 0 8px 24px on hover for depth feedback.
• Do use full-radius (9999px) on all buttons and badges to reinforce the approachable, modern brand personality.
• Do pair primary blue (#2c5bff) with secondary blue (#1f7dfe) in gradients for hero backgrounds, using rgba(96, 165, 250, 0.1–0.3) for transparency.

**Don't**

• Don't use near-black (#0b0b12) as a background—reserve it for text and dark-mode contexts only; use warm cream (#fbf9f4) or white (#ffffff) for primary surfaces.
• Don't apply shadows larger than 0 8px 24px; excessive depth creates visual clutter and contradicts the clean, efficient aesthetic.
• Don't mix Bricolage and Geist weights arbitrarily—use Bricolage 600+ for headlines only, Geist 400–600 for body and labels.
• Don't use tertiary purple (#a855f7) on CTAs or primary actions; reserve it for accents, modals, and premium feature highlights.
• Don't reduce padding below 12px (sm spacing) on interactive elements; maintain minimum 48px height for buttons to ensure touch-friendly targets.
• Don't apply border-radius smaller than 8px (DEFAULT) on cards or inputs; the brand uses generous rounding to signal approachability.