# Design System Document: The Pastoral Editorial ## 1. Overview & Creative North Star **Creative North Star: "The Silent Concierge"** This design system moves away from the "booking engine" aesthetic toward a high-end editorial experience. It is designed to feel like a premium lifestyle magazine—quiet, confident, and deeply intentional. We break the rigid, boxy nature of standard web design through **intentional asymmetry**, "breathing" white space, and a typographic scale that prioritizes emotion over density. The goal is to evoke the sensory experience of an Italian countryside villa: the warmth of sun-bleached stone, the depth of a twilight sky, and the tactile quality of handmade paper. We achieve this not through lines and borders, but through layered tones and sophisticated transitions. --- ## 2. Colors & Atmospheric Depth Our palette is rooted in the natural landscape, moving from the warmth of `surface` (terracotta and cream) to the intellectual depth of `primary` (Italian dusk blue). ### Surface Hierarchy & Nesting To achieve a premium look, we abandon the flat grid. Instead, we use **Tonal Nesting**. - Use `surface_container_lowest` for the most prominent foreground elements (e.g., an "Availability" card). - Place these against `surface_container_low` or `surface` sections to create natural separation. - **The "No-Line" Rule:** 1px solid borders are strictly prohibited for sectioning. Boundaries must be defined solely through background color shifts or extreme negative space. ### The "Glass & Gradient" Rule To add "soul" to the digital interface, use Glassmorphism for floating navigation or mobile overlays. - **Glass Effect:** Use `surface` color at 70% opacity with a `backdrop-filter: blur(20px)`. - **Signature Textures:** For primary CTAs (e.g., "Prenota Ora"), apply a subtle linear gradient from `primary` (#30558f) to `primary_container` (#4a6ea9). This prevents the UI from looking "flat" and adds a silk-like sheen. --- ## 3. Typography: The Editorial Voice We pair the timeless authority of a serif with the modern clarity of a geometric sans-serif to create an "Old World meets New World" tension. * **Display & Headlines (Noto Serif):** Used for storytelling and emotional hooks. The large scale (`display-lg` at 3.5rem) should be used with generous leading to let the Italian language's natural rhythm shine. * **Body & Labels (Manrope):** A sophisticated sans-serif that ensures legibility for room descriptions and amenities. * **The Identity Gap:** High contrast between `display-md` (headings) and `body-md` (content) is essential. Small text should feel like a caption to a beautiful photograph, never competing with the headline. --- ## 4. Elevation & Depth In this system, depth is felt, not seen. We avoid the heavy shadows of traditional Material Design in favor of **Ambient Light**. * **The Layering Principle:** Place a `surface_container_lowest` card on a `surface_container_low` section. This creates a "soft lift" that mimics paper resting on a wooden table. * **Ambient Shadows:** When a floating element is required (e.g., a modal), use: * `box-shadow: 0 20px 40px rgba(28, 28, 17, 0.06);` * The shadow is tinted with `on_surface` (#1C1C11) at a very low opacity to feel like a natural occlusion of light. * **The "Ghost Border" Fallback:** If a boundary is required for accessibility (e.g., input fields), use `outline_variant` at 15% opacity. Never use 100% opaque lines. --- ## 5. Components ### Buttons & Interaction * **Primary (CTA):** Rounded corners (`md`: 0.375rem). Background: Gradient `primary` to `primary_container`. Text: `on_primary` (#FFFFFF). * **Secondary:** Ghost style. No background. `Ghost Border` (15% `outline_variant`). Text: `primary`. * **Tertiary:** All-caps `label-md` with a 1px underline in `tertiary_fixed_dim`. Used for "Scopri di più." ### Cards & Lists * **Forbid Dividers:** Do not use horizontal lines to separate list items. Use 32px–48px of vertical whitespace (`Spacing Scale`) or subtle shifts between `surface_container_low` and `surface_container_high`. * **Editorial Cards:** Images should feature `xl` (0.75rem) or `none` (0px) corner radius. For a boutique feel, use asymmetrical corner radii (e.g., top-left: 100px, others: 0px) for hero imagery. ### Inputs & Forms * **Style:** Minimalist. No background fill—only a bottom "Ghost Border." * **Focus State:** The bottom border transitions to `primary` with a 2px weight. ### Signature Component: The "Gallery Reveal" A specialized component for luxury hotels: A full-bleed image container where text overlays are housed in `surface` glassmorphic chips, allowing the photography of the Cerreto countryside to remain the hero. --- ## 6. Do’s and Don’ts ### Do: * **Embrace Asymmetry:** Place a heading on the left and the body text on the right with a 2-column offset. * **Use Italian Rhythm:** Italian words are often longer; ensure your `headline` scales account for "Benvenuti nella nostra dimora" without awkward breaking. * **Prioritize Photography:** Every layout should be 60% image, 40% negative space/type. ### Don’t: * **Don’t use 100% Black:** Always use `on_surface` (#1C1C11) for text to maintain a soft, organic look. * **Don’t use "Heavy" UI:** Avoid thick buttons, dark shadows, or cluttered navigation. If a menu has more than 5 items, hide them in a "Glass" overlay. * **Don’t use standard Dividers:** If you feel the urge to draw a line, add 24px of padding instead. --- ## 7. Token Reference Summary * **Core Background:** `surface` (#fdfae7) * **Main Action:** `primary` (#30558f) * **Accent/Nature Tone:** `tertiary` (#61543c) * **Heading Font:** Noto Serif * **Body Font:** Manrope * **Border Radius:** `md` (0.375rem) for UI; `xl` (0.75rem) for containers.