--- version: alpha name: "De Soi" description: "Design system for De Soi — Katy Perry's non-alcoholic apéritif brand — built on warm linen, deep crimson, botanical pastels, and a sharp-edged editorial serif that channels French-Riviera ritual without a drop of alcohol." colors: # Surface / canvas background: "#eae5dd" # warm linen sand — dominant page canvas surface: "#121d47" # deep midnight navy — announcement bars, hero panels surface-white: "#ffffff" # Text / ink ink: "#000000" on-background: "#000000" on-surface: "#ffffff" # Brand accent primary: "#b42547" # deep crimson rose — CTAs, promo tags, active state on-primary: "#ffffff" primary-container: "#f4c3cb" # blush pink — badge backgrounds, soft accents # State / interaction primary-hover: "#8e1a33" # darkened crimson for hover — /* estimated */ surface-hover: "#1a2a58" # slightly lightened navy on hover — /* estimated */ # Flavor / SKU palette (each SKU has its own canvas) flavor-lavender: "#e7cdff" # Purple Lune flavor-sage: "#d4eb8e" # Golden Hour flavor-slate: "#cbd8e4" # St. Moritz Mule flavor-blush: "#f4c3cb" # Très Rosé flavor-straw: "#f3ebb4" # Classics Sampler warm flavor-sky: "#9ad4ea" # Spritz Italiano sky # Botanical shape accents (decorative cutout shapes per product) botanical-forest: "#005345" # deep forest — tear shape (Purple Lune) botanical-tomato: "#e74d3a" # signal red — hourglass (Haute Margarita) botanical-citrus: "#ff671f" # vivid orange — citrus shape (Spritz Italiano) botanical-dusty: "#d47271" # dusty rose — star shape (Très Rosé) botanical-olivegold: "#aa981b" # olive gold — vase shape (Golden Hour) botanical-mahogany: "#bb6b1e" # mahogany brown — blackcurrant shape # Semantic success: "#039d00" # deep green — link hover, confirmation states error: "#dc3545" # Bootstrap danger — form validation warning: "#ffc107" # Bootstrap warning # Borders border: "#000000" # 1px solid black — inputs, checkboxes, all outlines border-subtle: "#d2cec6" # warm gray divider — review list separators # Shadow tints shadow-soft: "#000000" # the brand uses no decorative shadows; depth is flat # Focus focus-ring: "#171c8f" # deep navy blue — close icon color, keyboard focus typography: display-hero: fontFamily: "GrandSlang-Roman, Georgia, 'Times New Roman', serif" fontSize: 72px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px display: fontFamily: "GrandSlang-Roman, Georgia, 'Times New Roman', serif" fontSize: 60px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px heading-section: fontFamily: "GrandSlang-Roman, Georgia, 'Times New Roman', serif" fontSize: 48px fontWeight: 400 lineHeight: 1.48 letterSpacing: 0px heading-sub: fontFamily: "GrandSlang-Roman, Georgia, 'Times New Roman', serif" fontSize: 32px fontWeight: 400 lineHeight: 1.19 letterSpacing: 0px heading-small: fontFamily: "GrandSlang-Roman, Georgia, 'Times New Roman', serif" fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px body-large: fontFamily: "Manrope, 'Josefin Sans', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0px body: fontFamily: "Manrope, 'Josefin Sans', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0px nav-link: fontFamily: "Manrope, 'Josefin Sans', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0.1em button-ui: fontFamily: "Manrope, 'Josefin Sans', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0.1em caption: fontFamily: "Manrope, 'Josefin Sans', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0px label-italic: fontFamily: "GrandSlang-Italic, Georgia, 'Times New Roman', serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px 2xl: 64px 3xl: 80px 4xl: 120px rounded: none: 0px pill: 9999px # /* used only on circular badge dots and rare chip elements */ components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.background}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px 40px height: 48px button-primary-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px 40px height: 48px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px 40px height: 48px button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.background}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px 40px height: 48px button-ghost: backgroundColor: "transparent" textColor: "{colors.on-surface}" borderColor: "{colors.on-surface}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px 40px height: 48px button-ghost-hover: backgroundColor: "{colors.on-surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px 40px height: 48px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px card-dark: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.none}" padding: 24px input: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px height: 48px input-focus: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px height: 48px badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 4px 8px badge-flavor: backgroundColor: "{colors.primary-container}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 4px 8px nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 16px 24px announcement-bar: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.caption}" padding: 8px 24px --- # De Soi Design System ## Overview De Soi arrives at the intersection of French apéritif culture and California wellness — a brand created by Katy Perry and Morgan McLachlan that insists pleasure does not require alcohol. The visual system enacts that philosophy with complete conviction. The dominant canvas is `{colors.background}`, a warm linen sand that reads like unbleached stationery or a sun-baked Provençal wall — decidedly not a clinical white, not a trendy cream, but something older and more considered. Everything the brand wants you to feel (warmth, leisure, ritual, the golden hour before dinner) is already present in that background before a single word is read. Display typography is set entirely in GrandSlang-Roman — a custom editorial serif with slightly bracketed forms and a confident roman weight. It carries none of the aspirational san-serif tech-wellness vocabulary that dominates the functional-beverage category. The choice reads as French parfumerie, as Riviera cookbook, as a label you'd find on a bottle in someone's very well-curated kitchen. GrandSlang-Italic, used for emphatic phrases and ingredient callouts, adds a casual flourish that lightens the formality without breaking the register. Manrope, a geometric humanist sans used for all UI and body copy, provides the clean utilitarian counterpoint: legible at small sizes, never competing with the display face. The color strategy is genuinely distinctive. The linen canvas and pure black ink define the neutral shell. Then De Soi layers an elaborate product-specific pastel palette — lavender, sage green, blush, sky blue, straw — as the backgrounds for individual SKU cards. Each flavor gets its own canvas color, and inside that canvas sits a saturated botanical cutout shape (a citrus slice in vivid orange `{colors.botanical-citrus}`, a tear in deep forest `{colors.botanical-forest}`, an hourglass in tomato red `{colors.botanical-tomato}`) that carries the visual tension. The effect is like a dried botanical pressed into a letter — restrained overall, vividly specific where it counts. The deep crimson `{colors.primary}` appears only on promotional tags and CTAs, marking urgency within an otherwise unhurried palette. **Key Characteristics:** - Warm linen canvas (`{colors.background}`) as the non-negotiable brand ground — warm, matte, never pure white - Deep midnight navy (`{colors.surface}`) for announcement bars and high-contrast hero moments — authoritative without being aggressive - GrandSlang-Roman at 24–72px for all display — custom editorial serif, never uppercase, always roman weight 400 - GrandSlang-Italic as the accent emphasis face — ingredient names, callout phrases, founder quotes - Manrope Bold at 12px, uppercase, 0.1em tracking for all buttons and nav links — the typographic workhorse - Hard 0px border-radius on all interactive elements (`{rounded.none}`) — sharp, editorial, zero softening - Color-inversion as the only hover/active mechanic: filled buttons flip to outline, outline fills to black - Per-SKU pastel canvases (lavender, sage, blush, sky) anchored by a single saturated botanical shape per flavor - Deep crimson `{colors.primary}` reserved for promotional urgency: sale tags, out-of-stock badges, primary CTAs - No decorative drop shadows — the system is completely flat, depth comes from contrast and color blocking - Botanical cutout shapes in vivid tones (forest, tomato, citrus, dusty rose) as the brand's signature illustration language ## Colors ### Primary - **Linen Sand** (`{colors.background}`): The brand's defining canvas — warmer than cream, cooler than beige. All content sections sit on this ground. It unifies the page and establishes the apéritif-pantry register. - **Deep Midnight Navy** (`{colors.surface}`): High-attention surfaces: announcement bars, founder section backgrounds, dark hero bands. Positions De Soi as a considered adult brand, not a playful wellness startup. - **Pure Black** (`{colors.ink}`): All body text, headings on light surfaces, button fills, input borders, structural outlines. De Soi uses absolute black — not near-black or charcoal. ### Brand Accent - **Crimson Rose** (`{colors.primary}`): The brand's urgency signal — sale banners, "Back in Stock" tags, primary site-level CTAs. Used sparingly so each appearance carries real weight. Hover darkens to `{colors.primary-hover}`. - **Blush Container** (`{colors.primary-container}`): Très Rosé SKU canvas and soft badge backgrounds — the crimson's lighter sibling, used as a surface rather than an action signal. ### SKU Palette - **Purple Lune Lavender** (`{colors.flavor-lavender}`): SKU canvas for the adaptogen-forward night-time blend. - **Golden Hour Sage** (`{colors.flavor-sage}`): The olive-green citrus blend, the warmest of the pastel canvases. - **St. Moritz Slate** (`{colors.flavor-slate}`): Soft blue-gray for the mule-inspired blend — cool and alpine. - **Très Rosé Blush** (`{colors.flavor-blush}`): Pink-forward for the rosé-inspired SKU. - **Sky Blue** (`{colors.flavor-sky}`): Pale sky for the Spritz Italiano — light-handed aqua on the palate, visually. - **Straw** (`{colors.flavor-straw}`): Warm yellow-cream for classics sampler packaging. ### Botanical Accent Shapes - **Forest** (`{colors.botanical-forest}`): Deep forest green — tear shape on Purple Lune. The most saturated dark in the palette. - **Tomato** (`{colors.botanical-tomato}`): Signal red — hourglass shape on Haute Margarita. The most aggressive accent. - **Citrus** (`{colors.botanical-citrus}`): Vivid orange — citrus slice cutout on Spritz Italiano. Warm, sunny, acidic. - **Dusty Rose** (`{colors.botanical-dusty}`): Muted pink — star shape on Très Rosé. Quieter than the primary but still present. - **Olive Gold** (`{colors.botanical-olivegold}`): Warm olive yellow — vase shape on Golden Hour. - **Mahogany** (`{colors.botanical-mahogany}`): Deep amber brown — blackcurrant shape, used as decorative overlay. ### Borders & Structure - **Black Border** (`{colors.border}`): `1px solid` on all inputs, checkboxes, form fields, and ghost buttons — the brand's structural register is always hard and precise. - **Warm Divider** (`{colors.border-subtle}`): Muted warm gray on review separators and subtle list rules — the lightest structural value. ## Typography ### Font Family - **Display**: `GrandSlang-Roman` — a custom editorial serif self-hosted on De Soi's CDN. Roman, weight 400, at all display sizes. An italic sibling `GrandSlang-Italic` is used for emphasis phrases and ingredient names. No Google Font equivalent is exact; **Playfair Display** or **Cormorant Garamond** approximate the editorial register. Fallback: `Georgia, 'Times New Roman', serif`. - **UI / Body**: `Manrope` — a geometric humanist sans-serif with excellent legibility at small sizes. Also supplemented by `Josefin Sans` (self-hosted on the Shopify CDN) for certain display-size contexts. Closest Google Font: **Manrope** (available directly on Google Fonts). Fallback: `'Josefin Sans', Helvetica, Arial, sans-serif`. - **OpenType Features**: No `font-feature-settings` detected; GrandSlang's natural letterforms carry the brand at display sizes without adjustment. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Full-bleed landing headlines and hero section titles — GrandSlang-Roman 72px | | `display` | Section-opening statements and campaign headers — GrandSlang-Roman 60px | | `heading-section` | Major section titles ("A New Way to Drink", ingredient names) — 48px | | `heading-sub` | Product feature heads, sub-section titles — 32px | | `heading-small` | Founder intro heads, testimonial pull-quotes — 24px | | `label-italic` | Emphatic ingredient callouts, italic overlay phrases — GrandSlang-Italic 32px | | `body-large` | Hero subtitles, intro paragraphs, product editorial copy — Manrope 16px | | `body` | Standard product descriptions, FAQ, ingredient detail — Manrope 14px | | `nav-link` | All navigation links — Manrope Bold 12px, uppercase, 0.1em tracking | | `button-ui` | All CTA labels — Manrope Bold 12px, uppercase, 0.1em tracking | | `caption` | Legal fine print, review metadata, product micro-copy — 12px | ### Principles - **GrandSlang is never uppercase**: The face's natural mixed-case roman form is its character. Applying `text-transform: uppercase` would strip the warmth that makes it read as artisanal, not corporate. - **GrandSlang-Italic as emphasis, not stress**: The italic sibling appears on select callout phrases ("Reishi Mushroom", "A buzz without the booze") — never for entire body paragraphs. - **Manrope carries all functional text**: Navigation, buttons, labels, body — Manrope at 14px and below. Its open apertures and clear geometry remain readable at `{typography.body}` and `{typography.caption}`. - **Uppercase buttons are brand**: Manrope Bold in uppercase with 0.1em tracking is the button and nav voice. The geometry of the typeface makes this feel formal and decisive, not shouted. - **Generous line-height on body**: 170% body line-height — the brand encourages lingering over ingredients and ritual, not fast scanning. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. De Soi's spacing is unhurried. Each flavor card and editorial section gets generous breathing room — 64–120px of vertical padding at desktop scale. Internal component spacing (inputs, card padding, nav bars) uses the tighter 12–24px range. The linen canvas benefits from openness; filling it densely would undermine the leisurely apéritif atmosphere. ### Grid & Container - Max content width: approximately 1280px, centered - Hero: full-bleed linen or navy ground with centered product photography - Product grid: 6-across on desktop for SKU flavor navigation (mega-menu layout), 3-across on full product page - Feature sections: 2-column alternating — text left / ingredient photography right - Adaptogens section: 3-column icon-text grid (Reishi, Lion's Mane, L-theanine) - Founders section: full-bleed dark panel with oversized GrandSlang display type ### Whitespace Philosophy - **The linen canvas breathes**: Sections don't compete for attention. Between major content blocks, the linen ground shows through — a rest, not a gap. - **Dark panels as chapter openers**: The navy `{colors.surface}` appears at announcement moments and section pivots — creating a rhythm of light → dark → light that mimics the ceremony of the apéritif hour itself. - **Product cards centered on their flavor canvas**: Each SKU card uses its pastel background as the entire card surface, with the botanical shape cutout as the only decoration. Minimal padding, maximum color contrast. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | All page content, product cards, body sections | | Hairline (Level 1) | `1px solid {colors.border}` — black | Inputs, checkboxes, ghost buttons, form elements | | Warm Divider (Level 1b) | `1px solid {colors.border-subtle}` — warm gray | Review list separators, subtle section rules | | Overlay (Level 2) | Opaque color block — navy panel | Announcement bars, dark hero moments | | Focus Ring | `2px solid {colors.focus-ring}` — deep navy | Keyboard accessibility on interactive elements | **Shadow Philosophy**: De Soi has zero decorative drop shadows. The system is entirely flat — no `box-shadow` blur, no card lift, no hover glow. Depth is achieved exclusively through color contrast: a saturated botanical shape on a pastel card canvas, the navy panel against the linen ground, the black filled button snapping to an outline on hover. The brand's French-editorial aesthetic is incompatible with the soft-shadow vocabulary of material design; flat planes are the grammar of the apéritif ritual. ## Shapes The complete radius scale is in the `rounded:` token block above. De Soi uses a binary, mostly-zero system: | Token | Value | Use | |---|---|---| | `none` | 0px | All buttons, inputs, cards, containers — the dominant shape language | | `pill` | 9999px | Rare: review carousel dots, circular UI micro-elements | The zero-radius commitment is absolute for all interactive and structural elements. De Soi's buttons, input fields, cards, and containers are sharp rectangles. This choice is unusual among DTC beverage brands (most reach for pill or 8px softness) and carries the same editorial weight as the serif display typeface — it reads as designed, decided, and French in the sense that uncompromising geometry is its own form of beauty. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button Variants - **`button-primary`** — Black fill (`{colors.ink}`), linen text (`{colors.background}`), sharp edges. Height 48px. The dominant purchase CTA style. Hover inverts: linen fill with black border and text. - **`button-secondary`** — Linen fill, black border, black text, sharp edges. Outline style matches the input field aesthetic. Hover inverts to filled black. - **`button-ghost`** — Transparent fill with white border and text. Used on the dark navy surface (`{colors.surface}`) for on-dark CTAs. Hover fills to white with black text. - All buttons: `text-transform: uppercase`, `letter-spacing: 0.1em`, Manrope Bold 12px — the typographic register is consistent regardless of fill state. ### Cards Product SKU cards place the full flavor canvas color as the card background — no white card on a white page, no shadow separation. The botanical shape cutout (citrus, hourglass, tear, star, vase) sits as an absolutely-positioned decorative element inside the card, in its saturated botanical color. Product photography floats on the pastel canvas with no container. Zero border-radius, zero shadow, zero border — the shape is the card's identity, the color is the product's identity. ### Inputs All form inputs use `border: 1px solid {colors.border}` (black), `border-radius: 0`, transparent background. Focus state transitions to `border-color: {colors.focus-ring}` (deep navy). The inputs read as part of the editorial system — as precise as a handwritten note in a Field Notes journal, not as a digital form field with rounded corners and a drop shadow. ### Badges / Tags - **`badge`** — Crimson rose (`{colors.primary}`) fill, white text, 0px radius. Used for "Up to 33% off" promo labels and "Back in Stock" alerts. Sharp edges, urgent color. - **`badge-flavor`** — Blush container (`{colors.primary-container}`) on black text. Flavor metadata and secondary category chips. ### Navigation The main nav sits on the linen background — seamlessly continuous with the page canvas, no visible border. Manrope Bold 12px uppercase links in black. Below it, a dark navy announcement bar (`{colors.surface}`) carries promotional copy in white. The combination — invisible nav into a bold navy announcement band — creates a visual pause before the hero section. Mobile nav collapses to a hamburger; the open menu uses the close icon in `{colors.focus-ring}` navy. ## Do's and Don'ts ### Do - Anchor every page on the linen canvas (`{colors.background}`) — warm sand, never pure white - Set all display text in GrandSlang-Roman in mixed case — the serif's editorial warmth requires sentence-case treatment - Use GrandSlang-Italic for ingredient names, callout phrases, and emphasis moments — sparingly, once per section maximum - Apply the color-inversion button mechanic: filled flips to outline on hover, outline flips to filled — consistent across all button contexts - Use `{rounded.none}` (0px) on all interactive elements — the sharp edge is the brand - Reserve `{colors.primary}` (crimson rose) for genuine urgency: sale banners, restock alerts, primary purchase CTAs - Let each SKU's pastel canvas color carry the flavor identity — do not normalize all products to a white card - Use the botanical shape cutouts in their assigned saturated colors — they are the brand's illustration language - Apply the navy panel (`{colors.surface}`) for announcement moments and dark section breaks — 2-3 per page maximum - Give display sections 80–120px of vertical breathing room — the linen canvas needs air ### Don't - Don't add border-radius to buttons, inputs, or cards — 0px is non-negotiable - Don't introduce pure white (`#ffffff`) as a content background in place of the linen canvas - Don't use GrandSlang-Roman in uppercase — it reads as a completely different brand - Don't apply drop shadows or `box-shadow` blurs to any element — the system is flat by design - Don't use the SKU pastel colors (`{colors.flavor-lavender}`, etc.) as generic accent colors outside their product contexts - Don't use `{colors.primary}` (crimson rose) as a general link color or hover state — preserve its urgency register - Don't place botanical shapes without their assigned saturated color counterpart — the contrast is the point - Don't set body copy in GrandSlang — Manrope handles all text below 24px - Don't use the navy `{colors.surface}` as a product card background — it is reserved for announcement and hero panels - Don't introduce gradients on buttons or cards — the palette is all solid, flat color blocks --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <480px | Single-column, display drops to 32–40px, stacked CTAs, hero fills viewport height | | Mobile | 480–768px | Single-column, 40–52px display, product cards in 2-column grid | | Tablet | 768–992px | 2-column feature sections, nav collapses, display 52–60px | | Desktop | 992–1280px | Full mega-menu nav, 6-across flavor picker, 60–72px hero display | | Large Desktop | ≥1280px | 1280px container, full botanical shape scale, 72px hero | ### Touch Targets - Primary CTAs: minimum 48px height (fixed height via CSS `height: 4.8rem`) - Nav links: full-row tap targets inside mobile drawer - SKU flavor cards: entire card area is tappable - Checkbox and form inputs: 16px minimum box size with outer padding buffer ### Collapsing Strategy - **Nav**: Horizontal linen bar collapses to hamburger below 992px; mobile menu drawer opens as full-width overlay on linen background - **Display type**: 72px → 52px → 40px → 32px; GrandSlang-Roman maintained at all breakpoints without weight changes - **Hero**: Full-bleed product photography scales proportionally; linen canvas remains visible as the ground - **Product grid**: 6-across mega-menu → 3-across on product listing → 2-across → 1-column on mobile - **Botanical shapes**: Scale proportionally within their card canvases; never crop the shape at any breakpoint - **Section spacing**: 120px desktop → 80px tablet → 48px mobile ### Image Behavior - Product photography floats on flavor canvas backgrounds without containers or borders - Botanical shape cutouts (SVG masks) scale with container; aspect ratio always preserved - Founder photography uses full-bleed within the dark navy section panels - No forced cropping — all imagery maintains original aspect ratio with `object-fit: contain` --- ## Agent Prompt Guide ### Quick Color Reference - Page Background: Linen Sand (`{colors.background}`) — `#eae5dd` - Dark Panel: Midnight Navy (`{colors.surface}`) — `#121d47` - Primary Text: Pure Black (`{colors.ink}`) — `#000000` - Inverted Text: White (`{colors.on-surface}`) — `#ffffff` - CTA / Urgency: Crimson Rose (`{colors.primary}`) — `#b42547` - Focus Ring: Deep Navy (`{colors.focus-ring}`) — `#171c8f` - All Borders: `1px solid {colors.border}` — `#000000` - No shadows, no radius on interactive elements ### Example Component Prompts - "Build a De Soi hero section on linen sand (`#eae5dd`). Headline in GrandSlang-Roman 72px, weight 400, line-height 1.2, color `#000000`, sentence case. Subtext in Manrope 16px weight 400, line-height 1.7. Primary CTA: black (`#000000`) background, linen text (`#eae5dd`), Manrope Bold 12px uppercase 0.1em tracking, height 48px, 0px border-radius, padding 0 40px. Hover: invert to linen background with 1px solid black border." - "Design a De Soi product flavor card for 'Purple Lune'. Background: lavender (`#e7cdff`), 0px border-radius, no shadow, no border. Inside: absolutely-positioned tear-shape cutout in deep forest green (`#005345`), product photography centered on lavender canvas. Card title in GrandSlang-Roman 32px, color `#000000`. 'Shop Now' CTA in Manrope Bold 12px uppercase black on linen fill." - "Create a De Soi announcement bar at 100% viewport width. Background: midnight navy (`#121d47`). Text: Manrope Regular 12px, color white (`#ffffff`), centered. Height: 40px. Announce: 'Subscribe & Save 15%'. Clean, flat, no shadow." - "Build a De Soi ingredient highlight section on linen background. Three-column grid. Each column: a GrandSlang-Italic heading ('Reishi Mushroom', 'Lion's Mane', 'L-theanine') at 32px weight 400, color black. Below: Manrope 14px body at 1.7 line-height describing the adaptogen. Simple black divider rule between columns. No icons, no shadows." - "Create a De Soi ghost button for use on the navy dark surface: transparent background, `1px solid #ffffff` border, white Manrope Bold 12px text uppercase 0.1em tracking, 0px border-radius, 48px height, 40px horizontal padding. Hover: fills to white (`#ffffff`) background with black (`#000000`) text." - "Design a De Soi email capture form. Label in Manrope Regular 14px color black. Input: transparent background, `1px solid #000000` border, 0px border-radius, 14px Manrope, 48px height, padding 12px 16px. Focus state: border switches to deep navy (`#171c8f`). Submit button: black filled with linen text, same height, Manrope Bold 12px uppercase." ### Iteration Guide 1. Start on the linen canvas (`{colors.background}`) — never pure white. Every layout decision presumes this warm ground. 2. Set all display headlines in GrandSlang-Roman, sentence case, weight 400. Match scale to section importance: 72px hero → 48px section → 32px subsection. 3. Use GrandSlang-Italic for exactly one emphatic phrase per screen — ingredient names, brand callouts, founder quotes. 4. All buttons and nav labels: Manrope Bold 12px, uppercase, letter-spacing 0.1em. The contrast with the serif display face IS the system. 5. Border-radius is always 0px. No exceptions for interactive elements. The sharp rectangle is the brand's visual signature. 6. Hover/active mechanic is always color inversion — filled → outline, outline → filled. No shadow growth, no scale transforms, no opacity changes. 7. Navy panels (`{colors.surface}`) for announcement and hero emphasis — maximum 2 per page. The dark interruption makes the linen feel golden by contrast. 8. SKU colors are product-specific: only use `{colors.flavor-lavender}` for Purple Lune contexts, `{colors.flavor-sage}` for Golden Hour, etc. 9. Reserve crimson rose (`{colors.primary}`) for urgency signals: sale tags, CTA on promotion, restock alerts. The rest of the palette is deliberately restrained. 10. The botanical shape (SVG mask cutout in saturated color) is the only decorative illustration element — do not introduce additional icons, patterns, or textures. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by De Soi. Brand names and trademarks belong to their respective owners.