nomen_nescio___style_reference:
  info: "> mực trên giấy ấm"

  theme: "light"

  info: "Nomen Nescio là một hệ thống editorial giấy và mực dành cho một nhãn hiệu thời trang ý niệm: một nền canvas trắng kem ấm (#fdfdfa) chứa ảnh thời trang cỡ lớn, trong khi mọi phần tử giao diện đều lùi về một màu mực gần đen duy nhất (#2b2b2e). Toàn bộ hệ thống typography chỉ dùng một sans-serif custom ở một weight duy nhất (400) — không bold, không light, không italic — vì vậy hệ thống phân cấp được xây dựng hoàn toàn qua kích thước và negative letter-spacing thay vì tương phản. Các component là hình chữ nhật phẳng, không shadow, không bo góc, không màu sắc: bản sắc đến từ sự kiềm chế, từ tông trung tính ấm, và từ ảnh tràn cạnh (edge-to-edge). Hệ thống mang cảm giác như một zine in ấn được tái hiện dưới dạng website — khoảng trắng chính là layout grid, và mọi bề mặt UI đều có thể được cắt từ cùng một tờ giấy."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Paper | `#fdfdfa` | `--color-paper` | Canvas trang và bề mặt card — trắng kem ấm mang cảm giác giấy cũ, không phải digital white |"
    info: "| Bone | `#f5f3ee` | `--color-bone` | Bề mặt nâng cao và lớp phủ nhẹ — dùng cho nền card và hover state, ấm hơn canvas một bậc |"
    info: "| Ink | `#2b2b2e` | `--color-ink` | Text chính, navigation, border, và outlined action — gần đen với undertone ấm, không bao giờ là #000 thuần |"
    info: "| Ash | `#bebcb4` | `--color-ash` | Text mờ và border phụ — xám ấm dùng cho metadata, subtitle, và hairline divider |"
    info: "| Pebble | `#deddd8` | `--color-pebble` | Divider nhẹ và border cấu trúc — đường kẻ gần như vô hình giữa các section |"
    info: "| Mist | `#d9d7c9` | `--color-mist` | Border của form input — ấm hơn pebble một chút để tạo cảm giác là bề mặt UI riêng biệt |"

  tokens___typography:

    nomen_nescio_custom___display_và_body_sans_serif_một_weight___một_custom_face_monoline_dùng_cho_mọi_phần_tử_text_trên_site__không_có_biến_thể_bold__light_hay_italic__hệ_thống_phân_cấp_chỉ_đạt_được_qua_kích_thước_và_negative_letter_spacing__font_thay_thế_có_tính_monoline_tương_tự___neue_haas_grotesk_display_pro__hoặc__s_hne__ở_weight_400_____font_nomen_nescio_custom:
      - "**Font thay thế:** Söhne hoặc Inter ở 400"
      - "**Weights:** 400"
      - "**Kích thước:** 14, 15, 16, 18, 19, 28, 36"
      - "**Line height:** 1.05–1.43"
      - "**Letter spacing:** -0.036em ở 36px, -0.028em ở 28px, -0.021em ở 19px, -0.017em ở 18px, -0.016em ở 16px, -0.008em ở 14–15px, +0.007em cho small uppercase label"
      - "**Vai trò:** Display và body sans-serif một weight — một custom face monoline dùng cho mọi phần tử text trên site. Không có biến thể bold, light hay italic; hệ thống phân cấp chỉ đạt được qua kích thước và negative letter-spacing. Font thay thế có tính monoline tương tự: 'Neue Haas Grotesk Display Pro' hoặc 'Söhne' ở weight 400."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | -0.112px | `--text-caption` |"
      info: "| body | 16px | 1.43 | -0.256px | `--text-body` |"
      info: "| subheading | 18px | 1.25 | -0.306px | `--text-subheading` |"
      info: "| heading | 28px | 1.11 | -0.784px | `--text-heading` |"
      info: "| heading-lg | 36px | 1.05 | -1.296px | `--text-heading-lg` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 47 | 47px | `--spacing-47` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 39-47px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    full_bleed_hero_image:
      vai_trò: "Hình ảnh mở đầu viewport"

      info: "Ảnh tràn cạnh (edge-to-edge) không padding, không border, không radius. Text navigation đè trực tiếp lên ảnh với màu #fdfdfa (trắng) để dễ đọc. Aspect ratio lấp đầy toàn bộ chiều rộng viewport; ảnh tràn ra mép trang không có container."

    text_navigation_bar:
      vai_trò: "Navigation chính của site"

      info: "Các nav link dạng text thuần ở 15px màu Ink (#2b2b2e) trên nền sáng hoặc Paper (#fdfdfa) khi đè lên hero tối. Không background, không border, không khối padding — chỉ là các từ cách nhau bằng khoảng trống ~20px. Logo căn trái, utility link (EUR, Search, Bag) căn phải."

    announcement_bar:
      vai_trò: "Banner đầu trang toàn site"

      info: "Text một dòng căn giữa ở 14px màu Paper (#fdfdfa) trên nền Ink (#2b2b2e). Full-bleed, padding dọc tối thiểu 1px, có action 'Close' căn phải."

    editorial_feature_card:
      vai_trò: "Card nội dung lớn cho collection, bài viết và installation"

      card_hai_cột: "ảnh full-width ở trên, title và subtitle xếp chồng bên dưới trên nền Paper. Title ở 18–19px Ink, subtitle ở 14–15px Ash. Không border, không container padding quanh ảnh, spacing dọc 20px giữa ảnh và khối text."

    product_grid_card:
      vai_trò: "Sản phẩm riêng lẻ"

      info: "Ảnh sản phẩm vuông hoặc dọc (không radius, không border) với discount tag tùy chọn đè ở góc trên bên trái. Không có text bên dưới ảnh trong grid hiển thị; thông tin sản phẩm xuất hiện khi tương tác. Ảnh lấp đầy ô grid edge-to-edge."

    discount_badge:
      vai_trò: "Chỉ báo giảm giá trên ảnh sản phẩm"

      info: "Text thuần '-50%' ở 14px màu Ink (#2b2b2e), không background, không border, không dạng pill. Đặt absolute ở góc trên bên trái của ảnh sản phẩm. Dựa vào khoảng trắng và vị trí để tạo điểm nhấn."

    ghost_link:
      vai_trò: "Phần tử text tương tác mặc định"

      info: "Text link màu Ink với underline 1px Ink hoặc hairline border-bottom. Không background fill, không padding, không hover background change. Kế thừa kích thước và weight của body font (luôn là 400)."

    text_input:
      vai_trò: "Trường form cho search, email, checkout"

      info: "Không border hoặc border dưới 1px Mist (#d9d7c9), nền Paper (#fdfdfa), text Ink. Không đổi màu focus ring — focus state dùng border dưới Ink dày hơn. Placeholder text màu Ash (#bebcb4)."

    outlined_action_button:
      vai_trò: "Button tương tác chính"

      info: "Border 1px Ink (#2b2b2e), nền Paper (#fdfdfa), text Ink ở 14–16px. Padding dọc 6–8px, padding ngang 20px. Không radius. Trên nền tối/ảnh, đảo ngược thành border Paper với text Paper. Đây là biến thể button duy nhất — không có filled button."

    section_heading:
      vai_trò: "Tiêu đề section editorial"

      info: "Text Ink ở 28–36px, weight 400, negative letter-spacing (-0.028em đến -0.036em). Căn trái, không có phần tử trang trí. Khoảng trắng rộng phía trên và dưới (section gap 39–47px)."

    product_grid:
      vai_trò: "Layout hiển thị collection"

      info: "Grid 4 cột cho sản phẩm trên desktop, 2 cột trên tablet, 1 cột trên mobile. Không có gutter giữa các card — ảnh chạm nhau edge-to-edge, tạo thành bức tường editorial liền mạch. Section nằm trực tiếp trên canvas Paper, không có card container."

    side_label_explore:
      vai_trò: "Nhãn category dọc hoặc neo ở cạnh"

      info: "Text Ink nhỏ ở 14–15px, căn giữa dọc hoặc neo ở cạnh trái. Hoạt động như label chia section (ví dụ: 'Explore' ở cạnh trái). Không background, không border."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng custom font 'Nomen Nescio' ở weight 400 — không bao giờ dùng bold, light hay italic để tạo phân cấp; xây dựng tương phản qua kích thước và negative letter-spacing"
      - "Đặt tất cả border ở radius 0px — mọi góc đều sắc, mọi ảnh đều tràn cạnh không bo tròn"
      - "Dùng #fdfdfa làm canvas trang và #f5f3ee chỉ khi cần nâng bề mặt nhẹ; không bao giờ dùng trắng (#ffffff) hoặc đen thuần (#000000)"
      - "Áp dụng letter-spacing -0.036em ở kích thước display (36px) giảm dần xuống -0.008em ở kích thước body; dành positive tracking +0.007em riêng cho small uppercase micro-label"
      - "Giữ tất cả button ở dạng ghost/outlined với border 1px Ink trên nền Paper — không có biến thể filled button trong hệ thống này"
      - "Để ảnh lấp đầy toàn bộ viewport hoặc ô grid; không bao giờ padding, đóng khung hoặc container hóa ảnh bằng background hay border"
      - "Dùng 20px cho element gap, 39–47px cho section break, và 4px làm đơn vị spacing cơ bản cho mọi micro-adjustment"

    không_nên_làm:
      - "Không đưa vào bất kỳ màu nào ngoài sáu màu trung tính (Paper, Bone, Ink, Ash, Pebble, Mist) — hệ thống chỉ có 2% màu sắc theo thiết kế và bất kỳ điểm nhấn nào cũng sẽ phá vỡ ngôn ngữ editorial giấy"
      - "Không dùng box-shadow, drop-shadow hay glow effect — độ nâng đến từ sự dịch chuyển màu bề mặt và border, không bao giờ từ shadow"
      - "Không dùng border-radius trên bất kỳ phần tử nào — 0px ở mọi nơi, không ngoại lệ cho badges, buttons hay images"
      - "Không đặt background thành trắng thuần (#ffffff) hay text thành đen thuần (#000000) — luôn dùng biến thể trắng kem ấm (#fdfdfa) và gần đen ấm (#2b2b2e)"
      - "Không thêm weight bold hay semibold để nhấn mạnh — nếu cần trọng lượng thị giác lớn hơn, hãy tăng kích thước và siết chặt letter-spacing"
      - "Không container hóa hoặc padding ảnh sản phẩm bằng khoảng trắng — ảnh phải chạm mép grid và mép trang"
      - "Không đưa vào filled button (màu đặc), gradient background hay colored badge — discount tag là text thuần trên ảnh, không phải pill"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#fdfdfa` | Nền trang — màu trắng ấm mà mọi thứ đặt lên |"
    info: "| 2 | Bone | `#f5f3ee` | Card và bề mặt nâng cao — ấm hơn canvas một chút để tạo sự phân tách nhẹ nhàng |"

  elevation:

    info: "Hệ thống thiết kế không có shadow vocabulary. Độ nâng được truyền đạt độc quyền qua sự dịch chuyển màu bề mặt (canvas #fdfdfa → bone #f5f3ee) và hairline border. Mọi phần tử đều nằm sát trên giấy — độ phẳng là có chủ đích, mô phỏng ấn phẩm in thay vì giao diện phần mềm skeuomorphic."

  imagery:

    info: "Hình ảnh là biểu đạt thương hiệu chính: ảnh thời trang editorial full-bleed, chủ yếu là quần áo đơn sắc tối trên người mẫu trong bối cảnh kiến trúc hoặc ngoài trời (đường băng bê tông, tòa nhà brutalist, ánh sáng tự nhiên). Xử lý là high-key với ánh sáng ban ngày tự nhiên, color grading trung tính, và framing chặt hoặc bao quát — không có phông nền studio, không có flat-lay chỉ sản phẩm. Ảnh luôn không cắt xén và không bo tròn, tràn ra mép trang. Vai trò của nhiếp ảnh là tạo không khí và định hình bản sắc thay vì cung cấp thông tin; nó chiếm 60–80% không gian thị giác trên các trang chính, với text đóng vai trò chú thích. Không có illustration, icon hay đồ họa trang trí — yếu tố thị giác duy nhất là ảnh và type."

  layout:

    info: "Mô hình trang là full-bleed, không có max-width container trên hero và editorial section, chuyển sang max-width 1440px trên grid và product section. Navigation là một thanh text một dòng đè lên hero. Hero là ảnh full-viewport-width với text navigation đè lên. Bên dưới hero, nội dung xen kẽ giữa editorial feature card hai cột và product grid 4 cột, với label 'Explore' neo ở cạnh trái. Nhịp điệu section nhất quán: gap dọc 39–47px, không có dải background xen kẽ (mọi thứ đều trên Paper), không có divider giữa các section. Nội dung căn trái với lề trái rộng. Grid usage: product grid 4 cột không gutter, editorial feature layout 2 cột, mobile fallback 1 cột. Density là spacious — ảnh lớn chiếm ưu thế trong khi text label nhỏ và thứ yếu."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #2b2b2e (Ink)"
    - "background: #fdfdfa (Paper)"
    - "surface/elevated: #f5f3ee (Bone)"
    - "muted text: #bebcb4 (Ash)"
    - "border: #deddd8 (Pebble)"
    - "input border: #d9d7c9 (Mist)"
    - "primary action: không có màu CTA riêng biệt"

    info: "Example Component Prompts:"

    - "Tạo một hero section full-bleed: chiều rộng 100vw, không padding, không border, không radius. Ảnh edge-to-edge lấp đầy viewport. Navigation overlay dùng font Nomen Nescio 15px ở weight 400, màu #fdfdfa (Paper) để dễ đọc trên ảnh tối, letter-spacing -0.008em. Logo căn trái, utility link (EUR, Search, Bag) căn phải, gap 20px giữa các item. Announcement bar phía trên: nền #2b2b2e (Ink) full-bleed, text 14px #fdfdfa (Paper) căn giữa."

    - "Tạo một editorial feature card: layout hai cột, không card background hay border. Nửa trên là ảnh full-width chạm cả hai mép. Bên dưới ảnh: title ở 19px Nomen Nescio 400 màu #2b2b2e, letter-spacing -0.021em. Subtitle ở 15px màu #bebcb4 (Ash). Gap 20px giữa ảnh và text, gap 39–47px đến card tiếp theo."

    - "Tạo một product grid 4 cột: ảnh lấp đầy mỗi ô edge-to-edge, không gutter, không gap, không border-radius. Mỗi ảnh sản phẩm chạm vào ảnh bên cạnh. Discount badge '-50%' dạng text thuần 14px #2b2b2e đặt absolute ở góc trên bên trái ảnh, không background, không pill, không border."

    - "Tạo một section heading: 28px hoặc 36px Nomen Nescio weight 400 màu #2b2b2e, letter-spacing -0.028em đến -0.036em, căn trái trên nền #fdfdfa. margin-top 39px, margin-bottom 47px. Không đường kẻ trang trí, không underline, không accent color."

    - "Tạo một text input field: border dưới 1px màu #d9d7c9 (Mist), không border khác, không border-radius, nền #fdfdfa. Text ở 15px Nomen Nescio 400 màu #2b2b2e, placeholder màu #bebcb4. Khi focus, border dưới dày lên thành 1px #2b2b2e. Không focus ring, không glow, không đổi background."

  typography_philosophy:

    info: "Custom face Nomen Nescio là monoline và geometric ở một weight duy nhất (400). Sự vắng mặt của biến thể weight buộc mọi hệ thống phân cấp typographic phải đi qua kích thước và letter-spacing — một lựa chọn chống quy ước có chủ đích, mang lại cho hệ thống sự kiềm chế editorial. Tracking âm mạnh ở kích thước display (-0.036em ở 36px) và nới lỏng về trung tính ở kích thước body (-0.008em ở 14px), với một giá trị tracking dương (+0.007em) dành riêng cho small uppercase micro-label. Line height nén ở kích thước lớn (1.05 ở 36px) và mở ra ở kích thước nhỏ (1.43 ở 14px), tạo nhịp điệu thị giác nơi display type cảm giác dày đặc và kiến trúc trong khi caption text thoáng hơn."

  similar_brands:

    - "**COS** — Cùng canvas trắng kem ấm, layout dẫn dắt bởi ảnh phẳng, và typography sans-serif tối giản một weight không có yếu tố trang trí"
    - "**The Row** — Cùng sự kiềm chế editorial — bảng màu gần như đơn sắc, ảnh thời trang cỡ lớn, navigation chỉ text, và gần như không có màu UI"
    - "**Toteme** — Cách tiếp cận giống hệt với thời trang tối giản Bắc Âu: trung tính ấm, góc 0px sắc, typography một weight, và ảnh là bề mặt thương hiệu chính"
    - "**Jil Sander** — Cùng chủ nghĩa tối giản ý niệm — canvas giấy trắng, hairline border, negative letter-spacing trên display type, và layout grid editorial"
    - "**Lemaire** — Triết lý song song về trình bày tối giản: bề mặt kem ấm, ghost outline thay vì filled button, và typography thì thầm thay vì la hét"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper: #fdfdfa;
          --color-bone: #f5f3ee;
          --color-ink: #2b2b2e;
          --color-ash: #bebcb4;
          --color-pebble: #deddd8;
          --color-mist: #d9d7c9;
        
          /* Typography — Font Families */
          --font-nomen-nescio-custom: 'Nomen Nescio (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.112px;
          --text-body: 16px;
          --leading-body: 1.43;
          --tracking-body: -0.256px;
          --text-subheading: 18px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.306px;
          --text-heading: 28px;
          --leading-heading: 1.11;
          --tracking-heading: -0.784px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.296px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-47: 47px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 39-47px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #fdfdfa;
          --surface-bone: #f5f3ee;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper: #fdfdfa;
          --color-bone: #f5f3ee;
          --color-ink: #2b2b2e;
          --color-ash: #bebcb4;
          --color-pebble: #deddd8;
          --color-mist: #d9d7c9;
        
          /* Typography */
          --font-nomen-nescio-custom: 'Nomen Nescio (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.112px;
          --text-body: 16px;
          --leading-body: 1.43;
          --tracking-body: -0.256px;
          --text-subheading: 18px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.306px;
          --text-heading: 28px;
          --leading-heading: 1.11;
          --tracking-heading: -0.784px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.296px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-47: 47px;
        }