Amadora Wellness & Spa

Overview

Amadora is a luxury Vietnamese wellness and spa brand that embodies the philosophy of 'Architectural Warmth'—a design movement that marries minimalist spatial clarity with the tactile richness of natural materials. The brand serves affluent wellness seekers who value Eastern holistic practices (particularly the concept of 'Ki' or life force energy) combined with contemporary comfort. The visual identity evokes a serene sanctuary: warm earth tones (terracotta #d26e4b, deep brown #4d2e22, sage green #7a9c59), natural wood textures, and refined geometric simplicity create an atmosphere of calm sophistication. Users experience the interface as an extension of the physical spa—unhurried, intentional, and deeply restorative.

The brand voice is meditative yet knowledgeable: precise, never flowery, grounded in wellness expertise. Amadora speaks in short, declarative sentences that convey both luxury and accessibility. Example: 'Trải nghiệm tại Amadora—nơi Y học truyền thống gặp công nghệ hiện đại' (Experience at Amadora—where traditional medicine meets modern technology). Vocabulary emphasizes harmony, balance, and natural authenticity. The tone avoids hyperbole; instead, it builds trust through specificity about ingredients, techniques, and the philosophical underpinnings of each service.

Colors

The color system is rooted in natural earth pigments and the Vietnamese aesthetic of balance. Primary (#d26e4b, a warm terracotta) is the signature accent—used on all CTAs ('TÌM HIỂU THÊM' buttons), interactive states, and brand-defining moments. This warm coral-rust bridges the gap between the cool blues of water/serenity and the warm browns of wood and clay, making it feel both energizing and grounded. Secondary (#446084, a muted slate-blue) supports the primary as a secondary accent for informational elements, links, and supporting UI; it evokes trust and contemplation. Tertiary (#7a9c59, a soft sage green) is reserved for wellness-specific badges, status indicators, and nature-aligned highlights—reinforcing the botanical and natural-remedy positioning.

The surface stack is deliberatel

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that conveys modern professionalism while remaining warm and approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero statements and brand declarations with commanding presence; Headline-lg (40px, 600 weight) frames major section titles; Headline-md (28px, 600 weight) breaks content into digestible chapters. Body-lg (18px, 400 weight, 28px line-height) is used for service descriptions and narrative content, with generous line-height (1.56x) to enhance readability and create visual breathing room. Body-md (16px, 400 weight) serves as the default for UI labels and secondary content. Label-md (14px, 600 weight, 0.05em tracking) is applied to buttons and interactive elements, with increased letter-spacing to enh

Layout

The layout follows a 12-column grid system with a max-width of 1270px, maintaining a fluid, responsive structure that adapts gracefully from desktop to mobile. The design philosophy prioritizes white-space and breathing room: sections are separated by lg spacing (40px) vertically, with gutter spacing (24px) used for horizontal padding within containers. The hero section spans full-width with a dramatic image backdrop (the spa interior), establishing immersive context before content begins. Content cards and service blocks use md spacing (24px) for internal padding, creating a consistent rhythm. The container-max-width of 1270px ensures that on ultra-wide displays, content remains readable and intimate rather than stretched. Asymmetrical layouts are avoided; instead, the design uses centere

Elevation & Depth

Depth is conveyed through subtle, diffused shadows rather than harsh contrast—reflecting the soft, ambient lighting of a spa environment. Level 1 (Base/Surface): no shadow or minimal shadow (0 1px 2px rgba(0, 0, 0, 0.06)) for flat, grounded elements like body text and input fields. Level 2 (Standard Card/Hover): 0 3px 8px rgba(0, 0, 0, 0.15) for cards, buttons, and interactive elements in their default state—this creates a gentle lift without drama. Level 3 (Elevated/Active): 0 4px 10px rgba(0, 0, 0, 0.20) for modals, expanded cards, and hover states—a deeper shadow that signals interaction an

Shapes

The shape philosophy is 'Organic Minimalism'—curves are used sparingly and purposefully, never decoratively. Buttons and primary CTAs use rounded: lg (1rem / 16px border-radius), creating a soft, approachable form that feels inviting without being playful. Cards and containers use rounded: lg (1rem) for consistency and a refined, contemporary look. Input fields use rounded: DEFAULT (0.5rem / 8px), a subtle curve that signals interactivity without distraction. Badges and small accent elements use rounded: full (9999px) to create pill-shaped forms that feel compact and badge-like. The rationale:

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background: {colors.primary} (#d26e4b), text-color: white, padding: 12px 32px, height: 48px, rounded: lg (16px), and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background shifts to #c25a38 (a 10% darker terracotta), shadow deepens to 0 4px 10px rgba(0, 0, 0, 0.20), and a 200ms ease-in-out transition applies. Button-secondary uses a transparent background with a 2px solid border in primary color, text in primary color, and the same padding/height. On hover, the background fills with primary-container (#f0d5c8) and text shifts to on-primary-container (#4d2e22). All buttons use typography: label-md (14px, 600 weight, 0.05em tracking) for clear, legible labels.

Containers & Surfaces Cards

Do's and Don'ts

**Do**

• Do use primary (#d26e4b) exclusively for CTAs and interactive focus states—it is the brand's signature accent and should never be diluted or overused on non-interactive elements.
• Do maintain generous white-space (lg spacing: 40px) between major sections to reinforce the meditative, unhurried brand personality.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to create depth; avoid harsh drop-shadows or glows that feel artificial or corporate.
• Do use Montserrat exclusively for all typography; its geometric warmth reinforces the brand's balance of modern professionalism and human approachability.
• Do apply 200–250ms ease-in-out transitions on all interactive state changes (hover, focus, active) to feel responsive without jarring the user.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) for backgrounds or text; instead, use the warm off-white (#f5f5f2) and warm charcoal (#333333) to maintain the tactile, natural aesthetic.
• Don't apply rounded: full (9999px) to buttons or cards—reserve it for badges and small accent elements; excessive rounding dilutes the refined, architectural aesthetic.
• Don't use secondary (#446084) or tertiary (#7a9c59) as primary CTAs; these are supporting colors and should never compete with the primary accent.
• Don't apply shadows with opacity > 0.20 or blur > 10px; the brand's soft, diffused lighting requires restraint—heavy shadows feel oppressive and contradict the serene wellness positioning.
• Don't mix typefaces; Montserrat is the sole font family. Introducing Georgia, Arial, or system fonts breaks the cohesive, premium brand identity.