Tubrax

Overview

Tubrax is a premium Brazilian e-commerce platform specializing in high-end kitchen and bathroom fixtures, serving architects, designers, and discerning homeowners. The design system embodies "Architectural Minimalism with Warmth"—a philosophy that combines the precision and clean lines of modern architecture with the approachable, trustworthy character of a family-owned brand. The interface evokes confidence and craftsmanship: deep navy headers (#140B3E) ground the experience in sophistication, while warm teal accents (#457A8F) guide users toward purchase decisions. The emotional response is one of curated expertise—users feel they are shopping with knowledgeable professionals, not faceless retailers.

Tubrax's voice is professional yet personable, precise yet welcoming. The brand speaks in clear, direct Portuguese, avoiding jargon while respecting the technical knowledge of its audience. Vocabulary emphasizes quality, durability, and design heritage. Example sentence in brand voice: "Escolha a Cuba 50x40 Gourmet—onde a funcionalidade encontra o design atemporal." (Choose the 50x40 Gourmet Sink—where functionality meets timeless design.)

Colors

The Tubrax color system is anchored by three strategic roles: a sophisticated navy primary (#140B3E) that commands the header and establishes brand authority; a professional teal secondary (#457A8F) deployed on CTAs, interactive elements, and checkout flows; and a vibrant green accent (#2ECC71) reserved for promotional badges and success states. The surface stack progresses from pure white (#FFFFFF) for content areas through carefully calibrated grays (#F5F5F5, #E8E8E8, #DDDDDD) that create visual hierarchy without introducing color noise. On-surface text (#333333) maintains 4.5:1 contrast against white backgrounds for WCAG AA compliance; on-surface-variant (#8E96A5) is used for secondary information and placeholder text. Primary (#457A8F) is applied exclusively to action buttons, form foc

Typography

The Tubrax type system uses Chillax as the primary brand typeface for headlines and UI labels, paired with Nunito-Regular for body content and form inputs. This pairing communicates premium accessibility: Chillax's geometric warmth signals design-forward thinking, while Nunito's clarity ensures legibility at small sizes (12px–16px). Display (60px, 700 weight, -0.04em tracking) is reserved for hero sections and major announcements; headline-lg (40px, 700 weight) anchors product category pages; headline-md (28px, 700 weight) introduces section groups. Body-lg (18px, Nunito, 400 weight, 28px line-height) is used for product descriptions and long-form content, ensuring 1.55 line-height ratio for comfortable reading. Label-md (14px, Chillax, 600 weight, 0.01em tracking) is applied to button tex

Layout

Tubrax uses a 12-column fluid grid with a fixed max-width of 1100px, centered on the viewport. This constraint balances product showcase needs (images require breathing room) with mobile responsiveness (breakpoints at 992px and below). The gutter spacing is 24px between columns, maintained consistently across desktop and tablet. Section separation uses lg spacing (40px) for major content blocks (hero, category showcase, testimonials, footer), md spacing (24px) for subsections within a category, and sm spacing (12px) for items within a list or grid. The header bar (background: #140B3E, padding: 25px 0) sits flush with the viewport top, creating a visual anchor. Product cards use md spacing (24px) for internal padding, with 10px border-radius for a slightly softer appearance than buttons. Th

Elevation & Depth

Depth in Tubrax is achieved through a restrained shadow system that avoids the flat aesthetic while maintaining clarity. Level 1 (Base): white background (#FFFFFF) with no shadow—the default surface for content. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to product cards, input fields, and dropdown panels. This shadow creates subtle separation from the background without drawing attention away from content. Level 3 (Modals & Overlays): box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16) for modals, cookies consent banner, and floating elements—a slightly stronger shad

Shapes

Tubrax employs a philosophy called "Soft Precision"—rounded corners that soften the geometric rigor of e-commerce interfaces without sacrificing professional appearance. Buttons use lg radius (1rem / 16px), creating a friendly, approachable CTA that feels less corporate than sharp corners. Input fields use lg radius (1rem) to match buttons, creating visual cohesion in form groups. Cards and product containers use md radius (0.75rem / 12px), a middle ground that suggests structure without excessive softness. Badges and status indicators use full radius (9999px), creating pill-shaped elements th

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: #457A8F, color: #FFFFFF, padding: 6px 12px, height: 42px, border-radius: 1rem, and box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16). On hover, the background darkens to #3d6a7a with a 0.3s ease transition, signaling interactivity. The button-primary-hover state is defined separately to allow AI agents to apply it consistently. Button-secondary uses the brand navy (#140B3E) for less prominent actions (e.g., "Continue Shopping"), with padding: 12px 24px and height: 48px for larger touch targets. Button-ghost is a transparent variant with a 1px border in primary color, used for tertiary actions like "Learn More" or "View Details."

Containers & Surfaces The card component establish

Do's and Don'ts

**Do**

• Do use primary color (#457A8F) exclusively on CTAs, focus states, and interactive elements—never on passive surfaces or backgrounds.
• Do apply box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16) to all elevated surfaces (cards, inputs, modals) for consistent depth.
• Do pair Chillax (headlines, labels) with Nunito-Regular (body, inputs) to maintain the premium-yet-accessible brand voice.
• Do maintain 24px gutter spacing between grid columns and 40px section separation (lg spacing) for visual breathing room.
• Do use the full rounded radius (9999px) only for badges and status indicators; use lg (1rem) for buttons and inputs, md (0.75rem) for cards.

**Don't**

• Don't use the secondary navy (#140B3E) on buttons or CTAs—it's reserved for the header bar and footer to create visual anchors.
• Don't apply glassmorphism effects, blur filters, or color overlays; Tubrax uses clean shadows and solid colors for clarity.
• Don't mix typefaces within a single component; use Chillax for all labels/headings and Nunito-Regular for all body/input text.
• Don't exceed the 1100px container max-width; content must remain centered and constrained to maintain the architectural precision aesthetic.
• Don't use intermediate font weights (500, 600) in body text; stick to 400 (regular) and 700 (bold) for visual clarity and brand consistency.