PANGAIA

Overview

PANGAIA is a materials science brand on a mission to save the environment through sustainable, performance-driven design. The brand serves conscious consumers seeking functional essentials made with innovative, recyclable fabrics and smart technology. The aesthetic is "Architectural Minimalism"—clean, purposeful, and rooted in scientific precision. The UI evokes clarity and trust through a restrained palette of deep navy accents (#394f8a) against neutral surfaces, with strategic use of warm earth tones (#ea3434, #ffefde) to signal innovation and sustainability. The visual language communicates that environmental responsibility and technical excellence are inseparable.

PANGAIA's voice is authoritative yet approachable, grounded in material facts rather than marketing hyperbole. The brand speaks with precision about fiber composition, durability, and environmental impact—never breathless or trendy. Example sentence: "Our PANGAIA-Grade 04 fabric uses 60% recycled polyester and biodegrades within 18 months." The typography system reinforces this: the custom PANGAIA typeface (weights 100–600) conveys both sophistication and accessibility, while generous whitespace and structured layouts reflect the brand's commitment to clarity over clutter.

Colors

The color system balances scientific restraint with purposeful accent colors. Primary (#394f8a, a deep navy) anchors the interface as the signature brand color, used exclusively on CTAs, focus states, and key interactive elements—it signals trust and technical authority. Secondary (#32508e, a slightly darker navy) provides subtle depth for hover states and secondary actions. Tertiary (#ea3434, a warm red) is reserved for alerts, error states, and sustainability-focused callouts, creating visual urgency without aggression. The surface stack progresses from pure white (#ffffff) through warm off-whites (#faf9f6, #f4eee8) to light grays (#e2e2e7, #dbdde4), creating a sophisticated neutral foundation. On-surface text is pure black (#000000) for maximum legibility; on-surface-variant (#535353) i

Typography

The type system is anchored by the custom PANGAIA typeface, a geometric sans-serif available in weights 100–600, paired with fallbacks to Helvetica and Arial for robustness. Display (60px, weight 400, -0.02em letter-spacing) is reserved for hero headlines and brand moments; its generous size and tight tracking create visual impact without aggression. Headline-lg (48px, weight 400) and headline-md (32px, weight 400) establish page structure and section breaks, maintaining the brand's restrained aesthetic by avoiding bold weights. Body-lg (18px) and body-md (16px) are the workhorses for product descriptions and long-form content, set at 28px and 24px line-height respectively to ensure comfortable reading at all sizes. Label-md (14px, weight 600, 0.01em tracking) is used for button text and f

Layout

The layout system uses a 12-column grid with a max-width of 1280px, accommodating both desktop and mobile experiences without compromise. The gutter is consistently 24px, creating breathing room between content blocks and maintaining visual rhythm. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Container padding is always md (24px) on tablet and desktop, reducing to sm (12px) on mobile to maximize screen real estate. The brand philosophy emphasizes whitespace as a design material—sections are never crowded, and negative space is used to establish visual hierarchy and reduce cognitive load. Hero sections span full-width wit

Elevation & Depth

Depth in PANGAIA's design system is achieved through subtle layering and strategic use of shadows, avoiding the flat aesthetic while maintaining sophistication. Level 1 (Base): The background is pure white (#ffffff) with no shadow; this is the canvas. Level 2 (Cards & Containers): Cards use a 1px solid border in outline color (#676986) and a soft shadow (0 4px 12px rgba(0,0,0,0.08)) to separate from the base. Level 3 (Modals & Elevated Content): Modals and overlays use a stronger shadow (0 16px 40px rgba(0,0,0,0.12)) and a semi-transparent dark overlay (rgba(0,0,0,0.5)) with a 4px blur backdro

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used sparingly and purposefully, reflecting the brand's balance between scientific precision and human-centered design. Buttons and inputs use the DEFAULT radius (0.5rem / 8px), providing a subtle softness without compromising legibility or visual weight. Cards and containers use md (0.75rem / 12px) for a slightly more pronounced roundness, creating visual distinction from buttons while maintaining consistency. Modals and elevated surfaces use lg (1rem / 16px) to signal importance and separation from the base layer. Secondary buttons

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use background {colors.primary} (#394f8a) with white text, 12px 24px padding, and a 48px height for touch-friendly targets. On hover, the background shifts to #313131 (a warm dark gray) with a 200ms transition, signaling interactivity without jarring color shifts. Active/pressed states add an inset 1px border in {colors.outline} (#676986) to provide tactile feedback. Secondary buttons are transparent with a 1px border in {colors.outline}, using {colors.primary} text; on hover, they fill with {colors.surface-container-high} (#e2e2e7) to indicate activation. All buttons use {typography.label-md} (14px, weight 600) for consistent visual weight.

Containers & Surfaces Cards are the primary container pattern, u

Do's and Don'ts

**Do**

• Do use {colors.primary} (#394f8a) exclusively for CTAs, focus states, and key interactive elements—never for decorative or background purposes.
• Do maintain consistent {spacing.md} (24px) gutters between major content sections to create visual breathing room and reduce cognitive load.
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.15) to all text rendered over complex hero imagery or gradients to ensure WCAG AA legibility.
• Do use the PANGAIA typeface (weights 100–600) for all headings and body copy; fallback to Helvetica/Arial only when the custom font fails to load.
• Do reserve {colors.tertiary} (#ea3434) for alerts, errors, and sustainability-focused callouts—never use it for neutral or secondary information.

**Don't**

• Don't use rounded corners larger than lg (1rem / 16px) on any component—aggressive rounding undermines the scientific, architectural aesthetic.
• Don't apply shadows to interactive elements (buttons, inputs) in their default state; shadows are reserved for hover/elevated states to signal interactivity.
• Don't use bold weights (600+) for body copy or long-form text—the PANGAIA typeface is designed for legibility at weights 100–500; bold is reserved for labels and CTAs.
• Don't mix primary and secondary colors in the same interactive element—use one accent color per component to maintain visual clarity and reduce cognitive load.
• Don't apply color overlays or filters to the custom PANGAIA logo; always display it at full opacity against {colors.surface} or {colors.on-surface} for maximum brand recognition.