TRAKY Hair Salon

Overview

TRAKY Hair Salon is a premium Vietnamese beauty destination that merges contemporary minimalism with warm, accessible luxury. The brand serves discerning clients seeking professional hair transformation in Ho Chi Minh City, positioning itself through an aesthetic movement called 'Refined Clarity'—a design philosophy that combines sharp, confident typography with soft, approachable color palettes and generous white space. The UI evokes a sense of calm professionalism: clients feel they are entering a space where expertise and care converge, where beauty is treated as both art and science.

The brand voice is confident yet welcoming, precise yet human. TRAKY speaks in clear, direct language without pretension—think 'Your hair deserves precision' rather than 'Luxurious tresses await.' The vocabulary emphasizes transformation, expertise, and personal confidence. Example sentence in brand voice: 'Book your consultation—our stylists specialize in cuts that work with your hair, not against it.'

Colors

The color system anchors on a vibrant primary blue (#007bff) that commands attention on CTAs, navigation highlights, and interactive states—this is the signature accent that signals action and brand confidence. The primary is paired with a clean white surface (#ffffff) and deep charcoal text (#212529), creating high contrast and legibility essential for a service-based brand. Secondary grays (#6c757d for on-surface-variant, #e9ecef for surface-container) provide visual rhythm and hierarchy without competing for attention. A warm tertiary accent (#a68857, a muted bronze-gold) appears on premium CTAs and special offers, evoking luxury and exclusivity—used sparingly on 'Book Now' buttons and promotional badges to signal elevated experiences. Error states use a clinical red (#dc3545) for form

Typography

The type system uses a single, modern sans-serif family (Segoe UI / Roboto fallback) across all scales, reinforcing the 'Refined Clarity' aesthetic—no serif/sans mixing, no decorative fonts. Display (60px, 700 weight) anchors hero sections and major announcements with tight -0.04em letter-spacing to convey confidence and control. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles, using -0.02em and -0.01em letter-spacing respectively to maintain visual tightness. Body text (16px–18px, 400 weight) sits at 24–28px line-height for comfortable reading on service descriptions and testimonials. Labels (12–14px, 500–600 weight) with 0.01–0.02em letter-spacing handle button text, form labels, and badges. On small labels over busy backgrounds (

Layout

The layout follows a 12-column grid system with a max-width of 1280px, allowing the design to scale fluidly from mobile (1 column) to desktop (12 columns) while maintaining breathing room. The gutter is consistently 24px, applied between grid columns and as the primary margin unit for section separation. Container padding uses lg spacing (40px) on desktop, reducing to md spacing (24px) on tablets and sm spacing (12px) on mobile, ensuring content never feels cramped. Hero sections and full-width carousels span edge-to-edge, while content cards and form sections nest within the 1280px container. White space is treated as a design element: section breaks use lg spacing (40px) vertically, card padding uses md spacing (24px), and internal component padding uses sm spacing (12px). This creates a

Elevation & Depth

Depth is conveyed through a three-tier shadow system that avoids heavy drop-shadows in favor of subtle, layered depth. Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px border in outline-variant (#ced4da), creating a soft separation from the white background without visual heaviness. Level 2 (Hovered Cards/Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), lifting elements slightly on interaction and signaling interactivity. Level 3 (Modal Overlays/Elevated Panels): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for modals and floating testimonial cards that d

Shapes

The shape philosophy is called 'Geometric Warmth'—sharp enough to convey professionalism, rounded enough to feel approachable. Buttons use lg radius (1rem / 16px), creating a modern, friendly appearance without the playfulness of full-round shapes. Cards and panels use xl radius (1.5rem / 24px) for a premium, contemporary feel. Input fields and smaller interactive elements use DEFAULT radius (0.5rem / 8px), maintaining visual consistency while keeping forms scannable. The booking button and primary CTAs use full radius (9999px) only when they appear as floating action buttons or standalone bad

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses primary blue (#007bff) background with white text, lg radius (16px), and md padding (24px horizontal, 12px vertical) for a 48px height. On hover, the background shifts to #0056b3 (a darker blue) with an elevated shadow (0 4px 12px rgba(0, 0, 0, 0.08)) and a 200ms transition. On active/focus, a 0.2rem ring of rgba(0, 123, 255, 0.25) appears, meeting WCAG AA contrast requirements. The button-secondary variant uses a transparent background with a 1px outline in outline color (#adb5bd), maintaining the same height and radius. On hover, the background fills with surface-container-high (#dee2e6), creating a subtle press effect. The button-tertiary uses the warm tertiary accent (#a68857) for premium

Do's and Don'ts

**Do**

• Do use primary blue (#007bff) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain distinctive.
• Do apply lg spacing (40px) between major sections to create breathing room and guide the eye through the page hierarchy.
• Do use the tertiary accent (#a68857) sparingly on premium or special offers to signal exclusivity without diluting the primary blue.
• Do maintain 48px minimum height for all buttons to ensure touch-friendly targets on mobile and desktop.
• Do apply the 200ms cubic-bezier transition to all interactive elements (buttons, cards, inputs) for consistent, professional motion feedback.
• Do use label-md (14px, 600 weight) for all button and form label text to maintain visual hierarchy and scanability.

**Don't**

• Don't use secondary gray (#6c757d) as a background color for interactive elements—it reduces contrast and signals disabled state.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12) on standard cards; reserve Level 3 shadows for modals and floating elements only.
• Don't mix serif and sans-serif fonts; the system uses a single modern sans-serif (Segoe UI / Roboto) to maintain 'Refined Clarity.'
• Don't use full radius (9999px) on standard buttons or cards—reserve it for floating action buttons and badge-style elements only.
• Don't reduce button padding below 12px or height below 48px; accessibility and touch-friendliness depend on these minimums.
• Don't apply text-shadow to body text or headlines; reserve it for small labels (12px or smaller) over busy backgrounds only.