Oasis Bath Solutions

Overview

Oasis Bath Solutions is a regional bathroom remodeling specialist serving the Puget Sound area, embodying a design philosophy rooted in 'Refined Pragmatism'—where technical expertise meets approachable, trustworthy visual communication. The brand aesthetic combines a dark, professional foundation (near-black #101014 as the primary text and surface anchor) with a vibrant teal-cyan accent (#179daf) and a signature electric blue primary (#0099ff) that signals action and confidence. The UI evokes a sense of craftsmanship and reliability: clean lines, generous whitespace, and a carefully curated color palette that avoids both sterility and excess. The emotional response is one of calm competence—users feel they are in the hands of experts who understand both the technical and human sides of home renovation.

The brand voice is honest, direct, and locally rooted. Oasis speaks in concrete terms: 'Licensed & Insured,' 'Lifetime warranty,' 'No high-pressure sales.' The vocabulary avoids marketing hyperbole; instead, it emphasizes guarantees, process clarity, and regional pride ('Trusted Puget Sound Bathroom Remodelers'). Tone is warm but professional, with occasional touches of personality (the golden-yellow accent #fdcf81 used sparingly for highlights and testimonials). Example sentence in brand voice: 'We handle the complexity so you can enjoy your new bathroom.'

Colors

The color system is built on a foundation of high-contrast, accessible surfaces paired with purposeful accent colors. The primary surface is pure white (#ffffff) with a carefully calibrated gray hierarchy: surface-container (#e9ecf2) for secondary backgrounds, surface-container-high (#e0e0e0) for interactive hover states, and on-surface (#101014) as the dominant text color—a near-black that avoids pure #000000 for improved readability and a softer, more refined appearance. The outline and outline-variant tokens (#999999 and #b8c7d9) provide subtle dividers and borders without visual harshness.

The primary accent color is electric blue (#0099ff), used exclusively for call-to-action buttons, links, and primary interactive elements. This color commands attention without aggression, signaling

Typography

The type system pairs Manrope (a geometric, humanist sans-serif) for headlines and display text with Inter (a highly legible, neutral sans-serif) for body copy and UI labels. This pairing creates a visual hierarchy that is both modern and approachable: Manrope's rounded letterforms convey warmth and accessibility, while Inter's precision ensures clarity at small sizes and in dense information layouts. Display text (60px, weight 500, line-height 68px, letter-spacing -0.02em) is reserved for hero headlines like 'Bathroom Remodeling, Done Right.' Headline-lg (40px, weight 500) anchors section introductions, while headline-md (28px, weight 500) breaks up content into digestible chunks. Body-lg (18px, weight 400, line-height 28px) is used for introductory paragraphs and testimonials, providing

Layout

The page layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on both desktop and tablet viewports. The spacing scale is semantic and hierarchical: unit (8px) as the base increment, with sm (12px) for tight component spacing, md (24px) as the standard gutter between sections, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Whitespace is treated as a design element, not an afterthought—generous margins around hero sections (lg spacing above and below) create visual breathing room and emphasize the hero's importance. Card-based layouts use md (24px) padding internally, with lg (40px) gaps between card rows to establish clear visual grouping. The container-max-width of 1280px prevents content

Elevation & Depth

Depth and hierarchy in this system are conveyed through subtle shadows and layering rather than dramatic elevation changes. The elevation scale consists of three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like form inputs and small badges, md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and component containers, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals, overlays, and hero-level content. Cards in the default state use md elevation; on hover, they transition to lg elevation with a 250ms cubic-bezier(0.4, 0, 0.2, 1) ease to signal interactivity. The

Shapes

The shape philosophy is 'Soft-Technical'—combining rounded corners with precision alignment to convey both approachability and professionalism. The rounded scale progresses from sm (0.25rem / 4px) for subtle, minimal rounding on inputs and small UI elements, through DEFAULT (0.5rem / 8px) for standard form fields and minor components, to md (0.75rem / 12px) for cards and larger containers. Buttons use lg (1rem / 16px) for secondary actions and md (0.75rem / 12px) for standard buttons, while primary call-to-action buttons employ full (9999px) border-radius to create pill-shaped buttons that fee

Components

Action Elements Buttons are the primary interaction mechanism and are designed with clear visual hierarchy. Primary buttons use the full primary color (#0099ff) with white text, full border-radius (9999px), and 12px 26px padding to create a 44px tall, pill-shaped button. On hover, the background shifts to #0066cc (a darker blue) with a 200ms transition, and a subtle box-shadow (0 3px 8px rgba(0, 0, 0, 0.15)) adds depth. Secondary buttons use a light gray background ({colors.surface-container}), primary text color, and a 1px outline in {colors.outline-variant}, with md (0.75rem) border-radius. Ghost buttons are used for tertiary actions and feature a semi-transparent white background (rgba(255, 255, 255, 0.1)) with white text and full border-radius, ideal for overlays and hero sections.

Do's and Don'ts

**Do**

• Do use primary blue (#0099ff) exclusively for primary CTAs and interactive elements—it is the brand's signature accent and must remain visually distinct.
• Do maintain high contrast between text and background; on-surface (#101014) on light backgrounds and white on dark overlays ensure WCAG AA compliance.
• Do apply md (24px) spacing as the default gutter between sections and lg (40px) for major transitions (hero to content); this rhythm creates visual breathing room and guides the eye.
• Do use Manrope for headlines (display, headline-lg, headline-md) and Inter for body copy and UI labels; this pairing is distinctive and reinforces the brand's approachable-yet-professional character.
• Do transition interactive elements smoothly (150–250ms cubic-bezier(0.4, 0, 0.2, 1)) on hover and focus to signal responsiveness and polish.
• Do reserve tertiary yellow (#fdcf81) for testimonials, trust badges, and accent text to inject warmth without overwhelming the neutral palette.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; instead, use on-surface (#101014) and on-primary (#ffffff) from the token system to maintain the brand's refined aesthetic.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to standard components; excessive shadow depth contradicts the clean, modern brand character.
• Don't mix Manrope and Inter within a single headline or body paragraph; maintain clear typographic hierarchy by using Manrope for headlines only and Inter for all body and UI text.
• Don't use secondary teal (#179daf) or tertiary yellow (#fdcf81) as primary interactive colors; these are supporting accents and must never compete with primary blue (#0099ff) for user attention.
• Don't reduce spacing below sm (12px) for section gutters or below xs (4px) for component padding; the brand relies on generous whitespace to feel refined and intentional.
• Don't apply border-radius smaller than DEFAULT (0.5rem / 8px) to buttons or cards; the soft-technical shape philosophy requires consistent, visible rounding to convey approachability.