# Design System: Luminous Earth & Tactile Silk ## 1. Overview & Creative North Star The Creative North Star for this design system is **"The Sculpted Glow."** This system rejects the cold, flat rigidity of traditional material design in favor of an experience that feels organic, high-end, and deeply emotional. We are moving away from the "digital grid" toward a "physical atelier" aesthetic. The design mimics the tactile quality of soft clay, hand-poured creams, and the ethereal radiance of healthy skin. To break the "template" look, we employ **intentional asymmetry** and **tonal depth**. Layouts should prioritize large, breathing negative space and "heroic" typography scales that overlap surfaces. Elements are not just placed; they are "sculpted" into the interface using soft neomorphism and luminous transitions. --- ## 2. Colors: Tonal Radiance The palette is a sophisticated curation of earthy terracotta, sun-dried clay, and warm creams. It is designed to feel "lit from within." ### The "No-Line" Rule **Borders are strictly prohibited for sectioning.** We do not use 1px lines to separate content. Instead, boundaries are defined by: - **Background Shifts:** Use `surface-container-low` (#f5f3f1) against a `background` (#fbf9f7) to denote a new zone. - **Tonal Transitions:** Use soft, multi-stop gradients for large sections to guide the eye. ### Surface Hierarchy & Nesting Think of the UI as layers of fine silk or stacked pottery. - Use the `surface-container` tiers (Lowest to Highest) to create "nested" importance. - **The Depth Stack:** A `surface-container-lowest` card (#ffffff) sits on a `surface-container` (#efedec) section to create a soft, natural lift that feels premium and intentional. ### The Glass & Gradient Rule To achieve the "luminous glow," floating elements (like navigation bars or modals) must utilize **Glassmorphism**. Combine `surface` colors at 70-80% opacity with a `backdrop-blur` of 20px-40px. - **Signature Glow:** Apply a subtle radial gradient using `primary` (#9f402d) to `primary-container` (#e2725b) for high-impact CTAs. This adds "visual soul" that a flat hex code cannot provide. --- ## 3. Typography: The Editorial Voice Our typography pairing is a dialogue between timeless elegance and modern precision. - **Display & Headlines (Noto Serif):** These are our "Emotional" anchors. Use them with generous tracking and varied weights to create a high-fashion editorial feel. Don't be afraid to let a `display-lg` headline bleed over an image or onto a neighboring surface container. - **Body & Titles (Manrope):** These are the "Functional" partners. Manrope provides a clean, breathable counterpoint to the decorative nature of the serif. Its geometric nature ensures legibility while maintaining the "Smooth" vibe. - **Hierarchy:** Use extreme scale differences. A `display-lg` (3.5rem) paired closely with `body-sm` (0.75rem) creates a sophisticated, curated tension common in luxury branding. --- ## 4. Elevation & Depth: Soft Neomorphism Traditional shadows are too heavy for this system. We use **Tonal Layering** and **Ambient Light.** - **The Layering Principle:** Softness is achieved through subtle color contrast. A `surface-container-high` (#eae8e6) element placed inside a `surface` (#fbf9f7) container creates depth without a single shadow pixel. - **Ambient Shadows:** When an element must float (e.g., a primary action button), use an ultra-diffused shadow. - **Shadow Formula:** `0px 20px 40px rgba(86, 66, 62, 0.06)` (A tinted version of `on-surface-variant`). This mimics natural, warm ambient light rather than a synthetic black drop shadow. - **The "Ghost Border" Fallback:** If a boundary is legally or functionally required, use the `outline-variant` (#ddc0ba) at **15% opacity**. This creates a suggestion of an edge rather than a hard wall. - **Soft Neomorphism:** Use "Inner Glows" (white semi-transparent top-left, darker clay bottom-right) on cards to create the "pressed" or "sculpted" clay look inspired by the reference imagery. --- ## 5. Components: Tactile Objects ### Buttons & Chips - **Primary Button:** Uses the `primary` (#9f402d) fill with a soft radial gradient. Shape is `md` (0.75rem) for a modern, slightly rounded but structured feel. - **Secondary/Tertiary:** Strictly borderless. Use a `surface-container-highest` fill or a simple `on-surface` label with an icon. - **Chips:** Should feel like "smooth pebbles." Use `full` roundedness and `surface-container-low` backgrounds. ### Input Fields - **Styling:** Avoid traditional boxes. Use a "pressed" neomorphic effect using `surface-container-lowest` with a subtle inner shadow. - **States:** On focus, the container should "glow" slightly using a 2px `surface-tint` (#9f402d) blur, rather than a harsh solid outline. ### Cards & Lists - **No Dividers:** Lists are separated by `24px` of vertical whitespace or alternating `surface-container` tiers. - **Product Cards:** Use a `xl` (1.5rem) corner radius. The image within the card should have a very subtle `primary-fixed` overlay at 5% to keep the warm terracotta "glow" consistent across photography. ### Signature Component: The "Glow Slider" For beauty-tech applications, use a custom slider where the track is a gradient of `primary-fixed` to `primary`, and the thumb is a `surface-container-lowest` circle with a high-diffusion ambient shadow. --- ## 6. Do's and Don'ts ### Do: - **Do** use "Breathing Room." If you think a section has enough padding, add 16px more. - **Do** overlap elements. Let a Noto Serif title sit 10% over the edge of a container. - **Do** use tinted grays. Every "neutral" must have a hint of terracotta or clay to maintain the "Warm" vibe. ### Don't: - **Don't** use pure #000000 or #FFFFFF for text. Use `on-surface` (#1b1c1b) for readability that isn't jarring. - **Don't** use "Card-in-Card" layouts with borders. Use shifts in `surface-container` levels to denote nesting. - **Don't** use sharp corners. This system is "Smooth and Organic"; stick to the `md` to `xl` roundedness scale.