spécialiste_belge___style_reference:
  info: "> Linen-bound brand cookbook. Warm cream paper, black ink, single whispered serif, no decoration beyond the page edge."

  theme: "light"

  info: "Misuko operates as an editorial atelier for beverage branding: a warm cream canvas (#fcf9ee) carries a single custom serif-influenced sans (beausite) set in tight tracking, producing a magazine-spread calm. Every element speaks the same warm-monochrome dialect — black ink, warm-gray dividers, and beige paper — so color is reserved for product photography (cardboard tan) and the occasional pastel icon, never for chrome or decoration. The interface is almost entirely flat: no shadows, no gradients, no rounded corners beyond a single 20px pill on links, and no chromatic button fills — actions are ghost-outlined in black. Information density stays low; breathing room is generous and rhythm is dictated by large display headlines followed by narrow body columns, with three-column service grids and case-study cards doing the structural work."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Bone White | `#fcf9ee` | `--color-bone-white` | Page canvas, hero left panel, newsletter input background — the warmest near-white, slightly yellowed like aged paper |"
    info: "| Linen | `#f2efe3` | `--color-linen` | Card surfaces, section backgrounds, one decorative button fill — a half-shade deeper than Bone White, reads as the same material under indirect light |"
    info: "| Pebble | `#bcbab2` | `--color-pebble` | Hairline borders, input outlines, list dividers — warm gray that disappears against the cream, only visible at the exact edge it frames |"
    info: "| Bark | `#6a6965` | `--color-bark` | Secondary text, muted body copy, card meta lines — warm dark gray, 5.2:1 on Bone White, carries metadata without competing with primary text |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"

  tokens___typography:

    beausite___sole_typeface___covers_display_headlines__section_titles__body__nav__buttons__and_footer__beausite_is_a_contemporary_humanist_sans_with_calligraphic_dna__its_soft_terminals_and_slightly_flared_apertures_give_the_warm_cream_palette_a_hand_set_quality_that_no_system_font_can_replicate_____font_beausite:
      - "**Substitute:** Söhne, Inter, GT America"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14, 21, 30, 34, 48px"
      - "**Line height:** 0.97 (display) / 1.08–1.20 (headings) / 1.36–1.79 (body) / 2.86 (hero lead)"
      - "**Letter spacing:** -0.036em (display) / -0.024em (headings) / -0.022em (body) — consistent negative tracking tightens the page into a unified block of type"
      - "**OpenType features:** `\"ss02\", \"ss04\", \"ss05\"`"
      - "**Role:** Sole typeface — covers display headlines, section titles, body, nav, buttons, and footer. beausite is a contemporary humanist sans with calligraphic DNA; its soft terminals and slightly flared apertures give the warm-cream palette a hand-set quality that no system font can replicate."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 14px | 1.79 | -0.022px | `--text-body-sm` |"
      info: "| body | 21px | 1.36 | -0.022px | `--text-body` |"
      info: "| subheading | 30px | 1.2 | -0.024px | `--text-subheading` |"
      info: "| heading-sm | 34px | 1.08 | -0.024px | `--text-heading-sm` |"
      info: "| heading | 48px | 0.97 | -0.036px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 61 | 61px | `--spacing-61` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 20px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px (rectangular ghost) or 20px (pill links) |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48-80px"
      - "**Element gap:** 17px"

  components:

    ghost_outline_button:
      role: "Primary action trigger (e.g. 'Let's get in touch')"

      info: "Rectangular ghost button — transparent background, 1px solid #000000 border, 9px 20px padding, beausite 14px weight 400, #000000 text, leading arrow glyph. No fill, no shadow, no radius. The 1px black outline IS the button."

    pill_link:
      role: "In-text link or tertiary action"

      info: "beausite 14px weight 400 text, #000000 color, 20px border-radius, 16px vertical padding. Sits inline with body copy. Underline appears on hover only."

    hero_split_panel:
      role: "Landing hero with copy + product visual"

      full_width_two_column_hero__left_half: "Bone White (#fcf9ee) background carrying a 48px weight 400 headline, 21px body paragraph, and ghost button. Right half: warm gray photo panel (~#d4d2cc) containing full-bleed product photography (cardboard boxes, no crop framing). 0px divider between panels — the tonal shift is the divider."

    service_tier_card:
      role: "Three-column offering (Tailored Advisory, Holistic, Blueprint)"

      info: "Transparent background, no border, 11px top margin between cards. Headline at 34px weight 400, #000000. Body at 14–21px weight 400, #000000. Bullet lists use small dot glyphs with 15px gap. Pricing/footer metadata at 14px weight 400, #6a6965. Cards sit on the canvas directly — no surface lift, no background card."

    feature_card_with_pastel_icon:
      role: "Capability highlight (Food ERP, Food Traceability, Digital HACCP)"

      info: "Compact card with a 40px circular icon chip at the top (pastel backgrounds: mint #d6f0e0, pink #f8d6cc, or peach — colors appear only inside the icon circle, never on the card itself). Title in 21px beausite weight 500, #000000. Description in 14px weight 400, #6a6965. 'Learn more' link with right arrow at bottom. No card background, no border, no shadow."

    case_study_card:
      role: "Inspiring stories grid item"

      vertical_card_in_a_3_column_grid__top: "16:9 cover image with sharp corners. Below image: 21px weight 400 title in #000000, date prefix in #6a6965, body excerpt in 14px weight 400 #6a6965. 17px horizontal padding. No border, no shadow — the image edge is the only visual break."

    newsletter_input:
      role: "Footer email capture"

      info: "Full-width single-line input on #fcf9ee canvas, 1px solid #bcbab2 bottom border (no top/side borders), 17px horizontal padding, beausite 14px. Placeholder text in #6a6965. Subscribe button text-link sits to the right, no button chrome."

    top_navigation_bar:
      role: "Global header"

      info: "Transparent over Bone White canvas. Left: wordmark 'misuko' at 21px weight 500 #000000, followed by 3 text links (Our story, Corporate, Private label) at 14px weight 400 with 20px gaps. Right: language toggle (EN), Login, Cart — same 14px. No underline, no icon, no border. Sits at 17px vertical padding."

    section_heading_block:
      role: "Opens a content band (e.g. 'From Concept to Success', 'Inspiring stories')"

      info: "Full-width band on Bone White. Heading 30–34px beausite weight 400 #000000, left-aligned with 17px left padding. Optional right-aligned text link 'View all →' at 14px. No rule line below — whitespace separates from content below."

    footer_link_column:
      role: "Footer sitemap"

      info: "Four-column grid on Bone White. Column title in 14px weight 500 #000000 (Orders & Support, About the Services, Social). Links below at 14px weight 400 #6a6965, 11px vertical gap. Newsletter input spans the leftmost column with a 'Stay up to date' subhead in 14px weight 500."

    pricing_meta_line:
      role: "Service card footer (Monthly Rate, Pricing, Hourly Rate)"

      info: "Bottom-of-card label group, 14px weight 400. Label text in #000000, value in #6a6965. Tight vertical stack with 5px gap between rows. Sits below a 1px solid #bcbab2 hairline separator."

  do_s_and_don_ts:

    do:
      - "Use beausite at every typographic level — never introduce a second family"
      - "Set all display text weight 400 with letter-spacing -0.036em at 48px; tighter tracking is what makes beausite read as editorial"
      - "Build buttons as 1px black-outlined ghosts on transparent or Linen backgrounds — never fill a button with saturated color"
      - "Reserve the entire warm-cream palette (Bone White → Linen → Pebble → Bark) for structure; let photography supply the only chromatic moments"
      - "Maintain 17px element gap and 17–34px card padding as the spatial unit across all cards, inputs, and sections"
      - "Use 0px radius on cards, inputs, and section blocks; reserve the 20px pill exclusively for inline text links and tags"
      - "Set icon backgrounds to soft pastels (mint, pink, peach) inside a 40px circle — keep the card itself colorless"

    don_t:
      - "Don't introduce a chromatic brand color, a gradient, or a colored button fill — the system is monochromatic by design"
      - "Don't add box-shadows, drop-shadows, or glows — elevation comes from tonal layering, not blur"
      - "Don't use system fonts (Inter, Roboto, Arial) as a substitute for beausite in a mockup without applying -0.022em to -0.036em tracking — the negative tracking is load-bearing"
      - "Don't round card or input corners — sharp 0px edges are part of the editorial signal"
      - "Don't mix icon styles — all icons should be the same stroke weight and 40px circular pastel background"
      - "Don't place body text below 14px or above 21px in content areas; the 14–21px band is the readable register"
      - "Don't separate sections with full-width rules — let whitespace and the Bone White/Linen tonal shift create the rhythm"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Bone White | `#fcf9ee` | Page canvas, hero left half, footer background |"
    info: "| 2 | Linen | `#f2efe3` | Card surface, secondary section background, one decorative button fill |"
    info: "| 3 | Ink Black | `#000000` | Text and hairline borders — used as a 'surface' only for the rare filled marker |"

  elevation:

    the_system_is_intentionally_flat: "no box-shadows, no drop-shadows, no glows. Elevation is communicated through the warm-cream tonal stack (Bone White → Linen) and through 1px Pebble or Ink Black hairlines. Cards and inputs sit directly on the canvas with no lift — the page reads as a printed sheet, not a stacked UI."

  imagery:

    info: "Photography is product-only and occupies roughly 40% of the hero and case-study cards. Treatment: full-bleed within its column, sharp corners (no rounding), no overlay text, no lifestyle context — the cardboard box, the beverage can, the jar is the entire subject. Color treatment is natural and slightly desaturated, leaning into the warm cardboard and kraft-paper palette that matches the cream canvas. No illustration, no 3D, no abstract graphics. Icons are the only non-photographic visual element: simple line glyphs inside 40px pastel circles (mint, pink, peach) that inject the system's only chromatic punctuation."

  layout:

    info: "Max-width 1200px centered, with a two-panel hero that breaks full-bleed (Bone White text panel on the left, gray-toned photo panel on the right — no divider, the tonal shift separates them). Below the hero, content flows in single-column bands: section heading (left-aligned 30–34px) followed by either a 3-column card grid (services, case studies) or a 2-column split (text-left / feature-cards-right with pastel icons). Section rhythm is quiet: generous 48–80px vertical gaps between bands, no alternating dark/light sections, no visual dividers. Navigation is a single transparent top bar with text-only links. Footer is a 4-column link grid plus a newsletter input. Density stays low throughout — this is an editorial spread, not a dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (primary), #6a6965 (secondary/muted)"
    - "background: #fcf9ee (canvas), #f2efe3 (card surface)"
    - "border: #bcbab2 (hairline), #000000 (interactive outline)"
    - "accent: pastel circles only inside icons (mint, pink, peach) — not used on UI chrome"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:
    - "*Hero Split Section*: full-bleed two-column. Left half on #fcf9ee, right half on a warm gray photo background. Headline at 48px beausite weight 400, #000000, letter-spacing -0.036em, line-height 0.97. Body paragraph at 21px weight 400, #000000, line-height 1.36. Ghost button below: 1px #000000 border, 9px 20px padding, 14px beausite weight 400 #000000 text + arrow glyph."
    - "*Service Tier Card* (3-column grid): no background, no border. 34px beausite weight 400 #000000 title, 21px body #000000, bullet list with 5px gap, 14px meta lines in #6a6965 separated from body by 1px #bcbab2 hairline. 11px top margin between cards."
    - "*Feature Card with Icon*: 40px circular icon background in pastel mint or pink, line-icon glyph centered inside. 21px beausite weight 500 #000000 title, 14px weight 400 #6a6965 description, 'Learn more →' text link at bottom. No card surface, no border."
    - "*Case Study Card*: 16:9 cover image at top with 0px radius. Below: 21px beausite weight 400 #000000 title, 14px weight 400 #6a6965 date prefix, 14px weight 400 #6a6965 excerpt. 17px horizontal padding. No border, no shadow."
    - "*Newsletter Input*: full-width on #fcf9ee, 1px #bcbab2 bottom border only, 17px horizontal padding, beausite 14px. Placeholder #6a6965. Right-aligned 'Subscribe' as 14px text link, no button chrome."

  similar_brands:

    - "**Aesop** — Same warm cream canvas, black serif-leaning type, and full restraint from chromatic UI chrome — the product photography does the only color work"
    - "**Maude** — Editorial single-typeface discipline with tight negative tracking and a beige/cream monochromatic palette, no shadows or colored buttons"
    - "**Glossier (early)** — Soft cream backgrounds, hairline borders, and ghost-outline buttons that let type hierarchy do all the work"
    - "**Toast (tablerestaurant.com)** — Magazine-spread feel: large display type, generous whitespace, three-column service grids, and zero saturated UI color"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bone-white: #fcf9ee;
          --color-linen: #f2efe3;
          --color-pebble: #bcbab2;
          --color-bark: #6a6965;
          --color-ink-black: #000000;
        
          /* Typography — Font Families */
          --font-beausite: 'beausite', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.79;
          --tracking-body-sm: -0.022px;
          --text-body: 21px;
          --leading-body: 1.36;
          --tracking-body: -0.022px;
          --text-subheading: 30px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.024px;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.08;
          --tracking-heading-sm: -0.024px;
          --text-heading: 48px;
          --leading-heading: 0.97;
          --tracking-heading: -0.036px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-25: 25px;
          --spacing-26: 26px;
          --spacing-27: 27px;
          --spacing-34: 34px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-58: 58px;
          --spacing-61: 61px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-80px;
          --element-gap: 17px;
        
          /* Border Radius */
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-tags: 20px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px (rectangular ghost) or 20px (pill links);
        
          /* Surfaces */
          --surface-bone-white: #fcf9ee;
          --surface-linen: #f2efe3;
          --surface-ink-black: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bone-white: #fcf9ee;
          --color-linen: #f2efe3;
          --color-pebble: #bcbab2;
          --color-bark: #6a6965;
          --color-ink-black: #000000;
        
          /* Typography */
          --font-beausite: 'beausite', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.79;
          --tracking-body-sm: -0.022px;
          --text-body: 21px;
          --leading-body: 1.36;
          --tracking-body: -0.022px;
          --text-subheading: 30px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.024px;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1.08;
          --tracking-heading-sm: -0.024px;
          --text-heading: 48px;
          --leading-heading: 0.97;
          --tracking-heading: -0.036px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-15: 15px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-25: 25px;
          --spacing-26: 26px;
          --spacing-27: 27px;
          --spacing-34: 34px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-58: 58px;
          --spacing-61: 61px;
        
          /* Border Radius */
          --radius-2xl: 20px;
        }