Glow.GE

Overview

Glow.GE is a beauty services marketplace designed for the Georgian market, embodying a philosophy of "Accessible Elegance"—where sophisticated beauty discovery meets everyday usability. The platform serves beauty enthusiasts and professionals alike, presenting a curated catalog of lashes, nails, brows, makeup, hair, and cosmetology services through a light, airy interface that prioritizes clarity and trust. The aesthetic is rooted in contemporary minimalism with warm, humanizing accents: a deep burgundy primary (#680005) anchors the brand as a symbol of beauty and confidence, while soft grays and whites create breathing room. The design evokes a sense of calm professionalism—like stepping into a well-organized, welcoming beauty studio.

The brand voice is direct, encouraging, and locally grounded. Glow.GE speaks to users in Georgian, respecting cultural context while maintaining international polish. Tone: warm but efficient, never condescending. Example sentence in brand voice: "იპოვე შენი ზუსტი სპეციალისტი — ყველა რეიტინგი, ფოტო და ღირებულება ერთ ადგილზე." (Find your exact specialist — all ratings, photos, and pricing in one place.)

Colors

The color system balances a bold, heritage-inspired primary with a neutral, light foundation. Primary (#680005) is the signature accent used exclusively on primary CTAs ("ქალაქი" button), active states, and brand moments—it commands attention without overwhelming. Secondary (#e8112d) provides a vibrant supporting accent for alerts, highlights, and status indicators. Tertiary (#7c3aed) adds a contemporary accent for interactive elements and secondary actions. The surface stack is predominantly white (#ffffff) with carefully calibrated grays for depth: surface-container-low (#f9f9f9) for input backgrounds, surface-container-high (#efefef) for hover states, and outline-variant (#c9c7c7) for subtle borders. On-surface text is a near-black (#1a1c1c) for maximum readability at 16px body size. Th

Typography

The type system uses Manrope exclusively, a geometric sans-serif that conveys modern professionalism while remaining warm and approachable. Display (60px, 700 weight, -0.02em tracking) anchors hero moments; Headline-lg (40px, 700) and Headline-md (30px, 700) structure page sections with strong visual hierarchy. Body-lg (18px, 400) and Body-md (16px, 400) carry primary content at comfortable reading sizes with 28px and 24px line-heights respectively. Label-md (14px, 600, 0.01em tracking) and Label-sm (12px, 500, 0.02em tracking) handle UI labels, buttons, and metadata. All headlines use negative letter-spacing (-0.01em to -0.02em) to tighten letterforms and create visual impact. For small labels over busy backgrounds (e.g., service category tags), apply text-shadow: 0 2px 4px rgba(0, 0, 0,

Layout

The layout follows a 12-column fluid grid with a max-width of 1600px, allowing the design to scale gracefully from mobile (single column) to desktop (multi-column). The gutter is consistently 24px (md spacing), applied between grid columns and as outer margins on smaller screens. Hero section uses full-width background with centered content container; search and filter controls sit in a card-like container with 24px padding and 1px outline-variant border. Service cards are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile, each with 20px gap. The map section on the right occupies 40% width on desktop, stacking below on mobile. White-space is generous: 40px (lg spacing) separates major sections (hero, filters, results, map), while 24px (md spacing) separates sub

Elevation & Depth

Elevation is conveyed through subtle shadows and strategic use of borders rather than dramatic depth. Level 1 (Base): flat white surface (#ffffff) with 1px outline-variant border (#c9c7c7) and no shadow—the foundation. Level 2 (Cards & Inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) with 1px border, creating gentle separation from the background. Level 3 (Modals, Dropdowns, Hover States): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with 1px border, signaling prominence and focus. On hover, cards transition from md to lg shadow over 200ms (ease-in-out), providing tactile feedback. Focus stat

Shapes

The shape philosophy is "Soft-Technical Accessibility"—rounded corners are generous enough to feel modern and approachable, yet restrained enough to maintain clarity and hierarchy. Buttons use xl radius (1.5rem / 24px), creating a pill-like, inviting form that encourages interaction. Cards and modals use lg radius (1rem / 16px), balancing softness with definition. Input fields and search boxes use lg radius (1rem / 16px) to align with cards and create visual consistency. Chips and smaller interactive elements use full radius (9999px) for a playful, badge-like appearance. Dropdown menus and lis

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (#680005 background, white text, 48px height, 24px horizontal padding, xl radius) use label-md typography (14px, 600 weight) and transition to #5a0004 on hover (200ms ease-in-out). Secondary buttons are transparent with a 1px outline-variant border, same dimensions, and transition to surface-container-high background on hover. Ghost buttons are minimal—transparent background, on-surface text, sm padding (8px 16px), and md radius—used for tertiary actions. All buttons include a focus ring (3px rgba(104, 0, 5, 0.1)) for keyboard accessibility.

Containers & Surfaces Cards are the primary content container: white background, lg radius (16px), md padding (24px), 1px outline-variant border, and md shadow (0 4

Do's and Don'ts

**Do**

• Do use primary (#680005) exclusively for primary CTAs and active states—it's the brand's signature and must remain distinctive.
• Do apply md shadow (0 4px 12px rgba(0, 0, 0, 0.1)) to all cards and elevated surfaces to create consistent visual hierarchy.
• Do use Manrope at 16px body-md with 24px line-height for all body copy to ensure readability and comfort.
• Do maintain 24px (md spacing) as the default gutter between grid columns and major sections—it's the rhythm of the system.
• Do include a 3px focus ring at rgba(104, 0, 5, 0.1) on all interactive elements for keyboard accessibility.
• Do use outline-variant (#c9c7c7) for all 1px borders—it's subtle, neutral, and defines edges without harshness.

**Don't**

• Don't use secondary (#e8112d) or tertiary (#7c3aed) on primary CTAs—they dilute the primary brand signal and confuse hierarchy.
• Don't apply shadows darker than rgba(0, 0, 0, 0.12) or with warm tints—they conflict with the clean, professional aesthetic.
• Don't use system fonts or fallbacks in place of Manrope—the geometric warmth is essential to brand recognition.
• Don't round corners more than xl (24px) on buttons or less than md (12px) on interactive elements—consistency is critical.
• Don't use on-surface text (#1a1c1c) at sizes smaller than 12px without increasing contrast or weight—readability suffers.
• Don't mix border styles (solid, dashed, dotted) or widths—always use 1px solid outline-variant for consistency.