Kermit Siargao

Overview

Kermit Siargao is a tropical island resort and lifestyle destination that merges surf culture, wellness, and hospitality into a cohesive brand experience. The design system embraces 'Warm Minimalism'—a philosophy that pairs clean, light surfaces with sunset-inspired accent colors to evoke the golden-hour tranquility of island life. The brand serves adventure seekers, wellness enthusiasts, and travelers seeking authentic connection in Siargao, Philippines. The aesthetic communicates approachability and sophistication simultaneously: white and neutral grounds provide breathing room, while the vibrant orange-coral primary (#ff8230) and ocean-blue secondary (#2b7fff) punctuate moments of action and discovery. Voice: conversational yet grounded, poetic but practical. Example: 'Whether you're here for a surf lesson, a wood-fired pizza, a week-long island adventure, or simply a place to connect, welcome to Kermit—where every day follows a simple rhythm.'

Colors

The color palette is rooted in the natural environment: warm sunset tones, tropical ocean blues, and clean white surfaces. Primary (#ff8230) is the signature accent—used exclusively on CTAs ('Join Our Team'), active navigation states, and brand-defining interactive moments. It commands attention without aggression, evoking the golden hour light that defines the resort's aesthetic. Secondary (#2b7fff) supports primary as a complementary accent for secondary actions, badges, and informational highlights. Tertiary (#435b77) grounds the palette with a sophisticated slate tone for headings and structural elements. The surface stack (white #ffffff down to #e9ecef container) provides a clean, airy foundation; on-surface text (#000000) ensures legibility. Outline (#6c757d) and outline-variant (#a2

Typography

The type system pairs serif and sans-serif to balance warmth with clarity. Averia Serif Libre (fontFamily: averia-serif-libre-9li814, weights 300–700) is reserved for display and headline levels, lending personality and editorial presence to hero sections and major headings. Its organic, slightly irregular letterforms evoke handcrafted island aesthetics. Nunito (fontFamily: Nunito, weights 400–700) handles body, label, and navigation text, providing excellent screen legibility and a friendly, approachable tone. Display text (56px, 700 weight, -0.03em letter-spacing) commands attention on hero sections; headline-lg (40px, 700 weight) anchors section introductions. Body-md (16px, 400 weight, 24px line-height) is the baseline for paragraph text, ensuring 1.5x line-height for comfortable readi

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered with equal margins on desktop. Spacing uses a semantic scale: 24px (md) for section gutters and card padding, 40px (lg) for major section separation, and 12px (sm) for internal component spacing. The page rhythm alternates between full-width hero imagery (with overlay text in display/headline-lg) and constrained content sections. White-space is generous—sections breathe with 40–64px vertical separation to reflect the unhurried island pace. Horizontal padding on mobile (12px sm) scales to 24px (md) on tablet and 40px (lg) on desktop. Cards use 24px padding with 1px borders in surface-variant (#e9ecef) to define boundaries without visual weight. The container-max of 1280px ensures readability on ultra-wide screen

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for cards and subtle surfaces, md (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements on hover, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. Buttons transition from no shadow (resting) to md shadow on hover, signaling interactivity. Cards use sm shadow by default, elevating to md on hover with a 250ms cubic-bezier(0.4, 0, 0.2, 1) transition. The white background (#ffffff) and light surface containers (#

Shapes

The shape philosophy is 'Soft Geometric'—rounded corners are applied consistently but conservatively to maintain sophistication. Buttons use 0.75rem (12px) border-radius (rounded.md), creating a friendly, approachable feel without excessive roundness. Cards and containers use 1rem (16px, rounded.lg) for a slightly softer appearance that suggests comfort and relaxation. Input fields use the DEFAULT radius (0.5rem / 8px) for a neutral, functional look. Navigation links and badges use full (9999px) border-radius only when appropriate (badges, pill-shaped elements). The rationale: sharp corners (0

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#ff8230) background with white text, 48px height, 12px 32px padding, and {rounded.md} (12px radius). On hover, the background shifts to #ff6f00 with a 200ms ease-in-out transition and {elevation.md} shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Button-secondary is transparent with a 2px solid primary border, same dimensions, and fills with {colors.primary-container} (#ffe4d0) on hover. Both use {typography.label-md} (14px, 600 weight, 0.02em letter-spacing) for clear, scannable text.

Containers & Surfaces Cards are the foundational container component: white background (#ffffff), {rounded.lg} (16px), {spacing.md} (24px) padding, and a 1px border in {colors.surface-variant} (#e9ecef). Resti

Do's and Don'ts

**Do**

• Do use the primary color (#ff8230) exclusively on CTAs and active states—it is the brand's signature and must remain distinctive.
• Do maintain generous white-space (40–64px vertical separation) between sections to reflect the unhurried, meditative island pace.
• Do apply the serif font (Averia Serif Libre) only to display and headline levels; reserve Nunito for body and labels to preserve legibility.
• Do transition all interactive elements (buttons, cards, inputs) over 150–250ms using cubic-bezier(0.4, 0, 0.2, 1) to signal responsiveness without jarring motion.
• Do layer shadows subtly (sm/md/lg elevation scale) rather than relying on high contrast to maintain the calm, sophisticated aesthetic.

**Don't**

• Don't use the primary color (#ff8230) on body text, backgrounds, or non-interactive elements—it must remain reserved for actions and focus states.
• Don't apply border-radius greater than 1.5rem (rounded.xl) on standard components; excessive rounding undermines the brand's sophistication.
• Don't mix serif and sans-serif fonts within a single paragraph or heading; maintain clear typographic hierarchy by reserving serif for display/headline only.
• Don't use shadows heavier than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components; the brand favors subtle depth over dramatic contrast.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements or cards; breathing room is essential to the brand's calm, luxurious feel.