Naturcotta

Overview

Naturcotta is a conservation-focused cottage booking platform that celebrates authentic nature experiences through a design language rooted in Organic Minimalism—a movement that marries the warmth of natural materials with restrained, purposeful geometry. The brand serves eco-conscious travelers seeking genuine wilderness retreats, and the UI evokes a sense of grounded tranquility: earthy sage-green (#647d54) anchors the interface, while warm gold accents (#e0bd76) signal moments of discovery and delight. The aesthetic is neither rustic nor sterile, but rather a contemporary interpretation of heritage hospitality—think weathered timber and linen, rendered in pixels. The emotional response is one of calm anticipation: users feel they are stepping into a curated, trustworthy sanctuary.

The brand voice is warm, knowledgeable, and gently persuasive. Naturcotta speaks in the language of conservation and stewardship, avoiding hyperbole in favor of specificity and authenticity. Vocabulary leans toward sensory and ecological terms: 'wilderness,' 'authentic,' 'protected spaces,' 'comfort,' 'discovery.' The tone is conversational yet authoritative—a guide who knows the land. Example sentence in brand voice: 'Our cottages sit within protected conservation areas, so your stay directly funds habitat restoration.'

Colors

The color system is built on a foundation of natural earth tones and is organized around three primary roles: surface (white #ffffff and warm grays #f7f7f7 to #e0e0e0), primary action (sage green #647d54), and secondary accent (warm gold #e0bd76). Primary (#647d54) is deployed on all call-to-action buttons ('Book a Ticket,' 'Explore Our Cottages'), navigation highlights, and focus states—it is the signature color that signals interactivity and brand identity. Secondary (#e0bd76) appears in hero typography (the word 'Warm Cottage' in the headline), badges, and supporting UI elements that require visual distinction without competing for attention. Tertiary (#96989b) serves as a muted accent for metadata, timestamps, and secondary information layers. The surface stack progresses from pure whi

Typography

The type system employs a three-family strategy: DM Sans for display and headlines (64px, 500 weight for the hero; 40px, 600 weight for section headers), Archivo for titles and labels (20px, 600 weight), and Lato for body and UI text (16px, 400 weight for body; 14px, 700 weight for labels). This pairing communicates sophistication through restraint—DM Sans's geometric warmth pairs with Lato's friendly legibility, while Archivo bridges the two with a technical-yet-approachable character. Display text (64px, 500 weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks, commanding attention through scale rather than weight. Headline-lg (40px, 600 weight) anchors subsections and card titles. Body-md (16px, 400 weight, 24px line-height) is the workhorse for descri

Layout

The page employs a fluid 12-column grid with a max-width container of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The hero section spans the full width with a deep background color (#2d3a2f, a darkened sage), establishing visual weight and drawing the eye downward. Section separation is achieved through lg spacing (40px) between major blocks, with md spacing (24px) used for internal card groupings and gutter spacing (24px) applied to horizontal padding on the container. The stat cards in the hero are arranged in a 2-column layout on desktop (3 cards: 2 on top, 1 below), with each card receiving md padding (24px) internally and md spacing (24px) between them. This rhythm creates a sense of organized discovery—the eye moves from headline to stat cards

Elevation & Depth

Depth in Naturcotta is achieved through a restrained shadow system and subtle color shifts rather than aggressive layering. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and hover states on flat elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals that sit above the base surface, and lg (0 4px 10px -2px rgba(0, 0, 0, 0.1)) for elevated modals and floating elements. Cards use md elevation by default and transition to lg on hover, signaling interactivity through shadow expansion rather than color change. The stat cards in the hero e

Shapes

The shape language follows 'Warm Geometric Minimalism'—a philosophy that balances sharp, purposeful corners with occasional softness to avoid coldness. Buttons use full border-radius (9999px) to create pill-shaped forms that feel approachable and modern, contrasting with the more angular card corners. Cards and containers use lg radius (12px), a subtle rounding that suggests refinement without appearing playful. Input fields and form elements use md radius (8px), sitting between buttons and cards in the hierarchy. The most frequent radius observed in the codebase is 3px (20 occurrences), used

Components

Action Elements Buttons are the primary mechanism for user intent and come in three variants: primary (sage green #647d54 background, white text, 48px height, 16px 32px padding, full radius), secondary (warm gold #e0bd76 background, dark text #181d23, same dimensions), and ghost (transparent background, sage green text, 2px sage green border). All buttons use label-md typography (14px, 700 weight) and transition to their container variants on hover: primary-hover shifts to primary-container (#8fa876), secondary-hover to secondary-container (#f5d99a). Buttons should never exceed 48px height on desktop; on mobile, maintain the same height but reduce horizontal padding to 24px. Hover transitions occur over 200ms with ease-in-out timing, providing tactile feedback without feeling sluggish.

Do's and Don'ts

**Do**

• Do use primary (#647d54) exclusively for interactive elements and CTAs—never use it for backgrounds or body text.
• Do maintain md spacing (24px) between major sections and lg spacing (40px) between distinct content blocks to create visual rhythm.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and modals to establish clear hierarchy without visual heaviness.
• Do use DM Sans for headlines and Lato for body copy—never mix serif fonts or use system-ui as a fallback.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over busy backgrounds to ensure legibility.

**Don't**

• Don't use secondary (#e0bd76) as a primary action color—it is a supporting accent for badges and highlights only.
• Don't apply shadows larger than lg elevation (0 4px 10px -2px rgba(0, 0, 0, 0.1)) to avoid visual clutter and loss of hierarchy.
• Don't round button corners to less than full (9999px)—the pill shape is a core brand identifier.
• Don't use on-surface text (#333333) at sizes smaller than 14px without increasing font-weight to 600 or adding text-shadow for contrast.
• Don't exceed container max-width of 1280px, even on ultra-wide displays—content should remain centered and readable.