Kudanil Explorer

Overview

Kudanil Explorer is a luxury yacht expedition brand serving discerning travelers seeking immersive, bespoke journeys across Indonesia's remote archipelago. The design system embodies 'Oceanic Minimalism'—a sophisticated aesthetic that merges the vastness and tranquility of deep waters with warm, earthy terrestrial elements. The visual language evokes both the Persian blue depths of the Coral Triangle and the sun-bleached timber of traditional Indonesian vessels, creating an atmosphere of refined adventure. The brand personality is contemplative yet action-oriented: it speaks to the restless soul who craves discovery without sacrificing comfort or elegance. Voice is precise, evocative, and grounded in sensory detail—never breathless or hyperbolic. Example: 'Sail through crystalline waters where the horizon dissolves into sky, anchoring each night in coves untouched by commercial tourism.'

Colors

The color palette is anchored by Persian Blue (#003357), the primary accent that appears on CTAs, navigation highlights, and interactive focus states—representing the ocean's depth and the brand's authoritative expertise. This is paired with a warm Brown family (#846845 for secondary, #d6c9bc for containers) that grounds the palette in natural materials and Indonesian craftsmanship. The surface stack progresses from pure white (#ffffff) through warm beiges (#f2ebe3, #e6d9cd, #d6c9bc) to create visual hierarchy without harsh contrast. Accent blue (#3898ec) is reserved for tertiary interactions and data visualization. All text on light surfaces uses Persian Blue (#003357) at 100% opacity for legibility; inverse text on dark overlays uses white (#ffffff) with 80% opacity (rgba(255, 255, 255,

Typography

The type system uses Forma DJR's three weights—Display for hero moments (66.67px, 500 weight, -0.02em tracking), Deck for section headlines (48px, 500 weight, -0.015em tracking), and Micro for body and UI text (12–18px, 400–500 weight, 0.01–0.03em tracking). This three-family approach creates visual rhythm: Display commands attention with generous leading (76px) and negative letter-spacing that tightens the letterforms; Deck bridges hierarchy with moderate weight and 56px line-height; Micro maintains readability at small sizes through increased letter-spacing (0.03em at label-sm) and precise 16px line-height. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to white text overlaid on photographic backgrounds (hero sections, gallery cards) to ensure 4.5:1 contrast ratio. Body text uses 28px

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered with symmetric padding. Container padding is calculated as max((100vw - 1280px) / 2, 24px), ensuring the design breathes on all viewports while maintaining a fixed column gap of 24px. Section separation uses lg spacing (40px) on desktop, reducing to md (24px) on tablet and sm (12px) on mobile via CSS custom properties. The hero section spans full-width with a fixed aspect ratio (54rem × 40.5rem on desktop), using background-attachment: fixed on larger screens to create parallax depth. Card grids use auto-fit with minmax(280px, 1fr) to maintain responsive flexibility. Gutter spacing (24px) is applied consistently between content blocks, creating a predictable rhythm that guides the eye through the narrative journey.

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the brand's minimalist aesthetic. Level 1 (Base/Surface): no shadow, flat white or beige background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 51, 87, 0.15), with a 1px solid border at {colors.outline-variant} (#c5b7a9) to define edges subtly. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 51, 87, 0.12), with a 1px border at {colors.primary} (#003357) to signal prominence. Hover states transition shadows smoothly over 0.4s ease, increasing blur radius by 4–8px and opacity by 0.04. The scrollbar uses inset

Shapes

The shape philosophy is 'Refined Geometry'—sharp enough to feel contemporary and controlled, yet rounded enough to soften the luxury aesthetic and improve touch targets. Buttons use lg radius (1rem / 16px), creating a subtle pill effect that feels premium without being playful. Cards and input fields use DEFAULT (0.5rem / 8px) for a crisp, architectural appearance. Large containers and modals use xl (1.5rem / 24px) to signal importance and create visual breathing room. The scrollbar track uses 0.8rem width with 0.2rem transparent border, and the thumb applies inset shadows rather than border-r

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 16px vertical and 32px horizontal padding. Primary buttons (#003357 background, white text) display a 1px solid border matching the background, transitioning to primary-fixed-dim (#8bc0e8) on hover with a 0.65s cubic-bezier(0.785, 0.135, 0.15, 0.86) easing curve. Secondary buttons use transparent background with a 1px primary border, inverting to surface-container-high on hover. All buttons apply transform: translateY(-100%) on the inner text element (.btn-txt) during hover, creating a subtle vertical flip animation over 0.4s. Header buttons (#ffffff background, primary text) use a 1px border at rgba(255, 255, 255, 0.2) and scale to 0.95 on hover with box-shadow: 0 8px 24px rgba(0, 0, 0,

Do's and Don'ts

**Do**

• Do use Persian Blue (#003357) exclusively for primary CTAs, focus states, and brand-critical interactions—it is the signature accent and must never be diluted or overused.
• Do apply the cubic-bezier(0.785, 0.135, 0.15, 0.86) easing curve to all transitions over 0.4–0.65s; this creates the brand's signature smooth, sophisticated motion language.
• Do maintain 4.5:1 contrast ratio on all text; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to white text over photography to ensure legibility.
• Do use the warm brown family (#846845, #d6c9bc) for secondary accents and surface containers—these ground the palette in natural materials and Indonesian heritage.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; instead, use on-surface (#003357) or on-primary (#ffffff) from the token system.
• Don't apply shadows larger than 0 16px 40px rgba(0, 51, 87, 0.12); excessive depth contradicts the minimalist aesthetic and reduces visual clarity.
• Don't mix Forma DJR families within a single headline; use Display for hero, Deck for sections, and Micro for body—never combine them in a single text block.
• Don't reduce border-radius below 0.5rem (8px) on interactive elements; sharp corners feel harsh and reduce touch-target friendliness on mobile devices.