cup_of_couple___style_reference:
  info: "> tạp chí thời trang in trên giấy kem"

  theme: "light"

  info: "Cup of Couple hoạt động như một nhật ký hình ảnh mang phong cách editorial: một canvas gần như đơn sắc với ảnh chụp ấm áp làm tất cả công việc tạo màu sắc. Mọi thành phần giao diện đều ở weight 400 — không có bold weight nào tồn tại trong hệ thống, vì vậy hệ thống phân cấp được xây dựng thông qua lựa chọn typeface (một humanist sans, một serif cổ điển, một titling serif) thay vì độ đậm. Kết quả mang phong cách như một trang tạp chí in ấn tình cờ có thể cuộn: tiêu đề serif lớn, đường kẻ xám mảnh như sợi tóc, khoảng trắng rộng rãi, và một grid portfolio ảnh phong cách sống. Bản sắc thương hiệu gần như sống hoàn toàn trong một custom display face duy nhất cho wordmark và kỷ luật không bao giờ thêm màu vào chrome."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ink Charcoal | `#303030` | `--color-ink-charcoal` | Văn bản chính, tất cả border UI, nav rules, image borders — màu cấu trúc không phải trắng duy nhất trong hệ thống. Sự cố tình không dùng đen tuyền của thương hiệu mang lại cho headline cảm giác in ấn mềm mại hơn |"
    info: "| Dust Gray | `#808080` | `--color-dust-gray` | Border phụ, card dividers, footer rules, UI separators cấp ba — một mid-gray lùi về sau nội dung và không bao giờ cạnh tranh với ảnh chụp |"
    info: "| Bone | `#f0f0f0` | `--color-bone` | Bề mặt card, độ nâng nhẹ so với trang trắng, sắc thái đổ bóng nhẹ — làm ấm trang, tránh cảm giác trắng lạnh lẽo và gợi giấy in |"
    info: "| Faded Pencil | `#767676` | `--color-faded-pencil` | Nav underline / accent rule hiếm khi dùng — dùng có chọn lọc khi separator cần hiện diện nhiều hơn Dust Gray |"

  tokens___typography:

    itcfranklingothicstdbook___ui_sans___nav_items__category_labels_cafés___madrid__dates__footer_micro_copy__tag_metadata__weight_400_duy_nhất_đóng_vai_trò_như_một_giọng_nói_tiện_ích_lặng_lẽ__không_cản_trở_hình_ảnh_và_tiêu_đề_serif_____font_itcfranklingothicstdbook:
      - "**Thay thế:** Source Sans Pro, IBM Plex Sans, Inter (300/400)"
      - "**Weights:** 400"
      - "**Kích thước:** 10px, 16px"
      - "**Line height:** 1.05 / 1.20"
      - "**Vai trò:** UI sans — nav items, category labels (CAFÉS | MADRID), dates, footer micro-copy, tag metadata. Weight 400 duy nhất đóng vai trò như một giọng nói tiện ích lặng lẽ, không cản trở hình ảnh và tiêu đề serif."

    garamond___project_card_titles__section_labels__và_secondary_prose__garamond_28px_với_line_height_1_00_ngồi_chặt_và_dày_đặc_như_editorial_captions__trong_khi_17px_xử_lý_văn_bản_cấp_body_trong_danh_sách_và_input__tỷ_lệ_cổ_điển_của_nó_mang_lại_cho_grid_một_giọng_văn_học_____font_garamond:
      - "**Thay thế:** EB Garamond, Cormorant Garamond, Lora"
      - "**Weights:** 400"
      - "**Kích thước:** 17px, 28px"
      - "**Line height:** 1.00 / 1.20"
      - "**Vai trò:** Project card titles, section labels, và secondary prose. Garamond 28px với line-height 1.00 ngồi chặt và dày đặc như editorial captions, trong khi 17px xử lý văn bản cấp body trong danh sách và input. Tỷ lệ cổ điển của nó mang lại cho grid một giọng văn học."

    perpetuatitlingmt___major_section_và_page_titles___tier_48px_neo_các_featured_project_headers_trong_khi_25_40px_xử_lý_sub_section_và_card_stack_headlines__tỷ_lệ_titling_của_perpetua_narrow_caps__tall_x_height_mang_lại_cho_layout_phẩm_chất_trang_trọng__như_nhãn_bảo_tàng_____font_perpetuatitlingmt:
      - "**Thay thế:** Cardo, Cormorant SC, Playfair Display SC"
      - "**Weights:** 400"
      - "**Kích thước:** 25px, 32px, 40px, 48px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Major section và page titles — tier 48px neo các featured-project headers trong khi 25–40px xử lý sub-section và card-stack headlines. Tỷ lệ titling của Perpetua (narrow caps, tall x-height) mang lại cho layout phẩm chất trang trọng, như nhãn bảo tàng."

    displacekc___chỉ_dùng_cho_wordmark___logo__cup_of_couple__ở_72px__đây_là_khoảnh_khắc_typographic_spectacle_duy_nhất_của_hệ_thống__custom_face_với_nét_méo_mó__hơi_retro_tạo_nên_toàn_bộ_tâm_trạng_editorial_và_không_bao_giờ_được_dùng_lại_ở_nơi_khác_____font_displacekc:
      - "**Thay thế:** Không có thay thế — coi như brand mark được bảo vệ"
      - "**Weights:** 400"
      - "**Kích thước:** 72px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Chỉ dùng cho wordmark — logo 'CUP OF COUPLE' ở 72px. Đây là khoảnh khắc typographic spectacle duy nhất của hệ thống: custom face với nét méo mó, hơi retro tạo nên toàn bộ tâm trạng editorial và không bao giờ được dùng lại ở nơi khác."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.05 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.2 | — | `--text-body-sm` |"
      info: "| subheading | 25px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.2 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Thành phần | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 36px"
      - "**Card padding:** 12px"
      - "**Element gap:** 12-18px"

  components:

    wordmark_logo:
      vai_trò: "Brand identity header"

      info: "DisplaceKC 72px weight 400, #303030, căn giữa, letter-spacing normal, line-height 1.20. Nằm một mình trên hàng riêng với padding trên/dưới rộng rãi (21–33px) hoạt động như divider ngang duy nhất giữa featured-project carousel và primary nav."

    primary_nav_row:
      vai_trò: "Điều hướng cấp cao nhất"

      thanh_ngang_đơn: "VISUAL DIARY | CREATIVE STUDIO | ABOUT | WORKSHOPS | STORE, cộng với 'Search…' nghiêng như một affordance. ITCFranklinGothicStdBook 16px weight 400, #303030, uppercase tracking. Mỗi item cách nhau bằng một vertical rule 1px #303030 (18px paddingRight/Left). Không background fill, không hover background — chỉ có bottom underline 1px #303030 trên active item."

    featured_project_carousel_card:
      vai_trò: "Hero editorial unit"

      info: "Dải ngang rộng với ảnh ở một bên và khối văn bản ở bên kia. Ảnh: full-bleed, 0px radius, không border. Tiêu đề bằng PerpetuaTitlingMT 25–32px weight 400, #303030, uppercase. Category tag (ví dụ 'BARCELONA | HOTELS') bằng ITCFranklinGothicStdBook 10–12px, #808080, cách tiêu đề bằng một rule mảnh #303030."

    project_grid_card:
      vai_trò: "Diary entry thumbnail"

      info: "Mục grid ba cột. Ảnh ở trên, 0px radius, cạnh sát mép, không border. Bên dưới: Garamond 28px weight 400 title với line-height 1.00, #303030, thường bị cắt với dấu ba chấm. Hàng dưới cùng: category label 10px ITCFranklinGothicStdBook căn trái #303030, date căn phải #303030, cách title bằng gap 12px. Không card background, không shadow — ảnh CHÍNH LÀ card."

    editorial_title_large:
      vai_trò: "Section/page heading"

      info: "PerpetuaTitlingMT 40–48px weight 400, #303030, line-height 1.20, căn giữa hoặc căn trái. Dùng cho các page titles chính như 'CUP OF COUPLE' identity và section openers. Không underline, không decorative element."

    category_tag_metadata:
      vai_trò: "Content classification label"

      info: "ITCFranklinGothicStdBook 10px weight 400, #303030 hoặc #808080, uppercase, không background, không border, không padding. Phân cách bằng pipe: 'CAFÉS | MADRID', 'FASHION | PARTY | STUDIO'. Nằm dưới card titles với 12px top padding."

    date_stamp:
      vai_trò: "Ngày xuất bản"

      info: "ITCFranklinGothicStdBook 10–12px weight 400, #303030, định dạng DD.MM.YYYY (ví dụ '07.11.2022'). Căn phải trong card footers, căn trái trong list rows."

    search_affordance:
      vai_trò: "Inline search trigger"

      info: "'Search…' nghiêng đặt bằng Garamond 16–17px weight 400, #303030, căn phải trong nav row. Không có input field hiển thị mặc định — bản thân văn bản là control."

    footer_rule:
      vai_trò: "Page footer"

      info: "Horizontal rule 1px #808080 dạng sợi tóc duy nhất phía trên nội dung footer. Văn bản footer bằng ITCFranklinGothicStdBook 10–12px, #303030, với 18px horizontal padding. ACCESS | BAG: 0 utility links căn phải trong cùng một hàng."

    featured_carousel_header_label:
      vai_trò: "Section eyebrow"

      info: "Label 'FEATURED PROJECTS' uppercase nhỏ bằng ITCFranklinGothicStdBook 10–12px, #303030, nằm sát mép trái phía trên dải carousel. Hoạt động như section divider duy nhất ngoài wordmark."

    border_separator:
      vai_trò: "Structural divider"

      info: "Đường ngang 1px solid #303030, dùng để tách nav khỏi nội dung và gạch dưới các section breaks. Không có vertical dividers ngoại trừ các rule 1px giữa các nav items."

  do_s_and_don_ts:

    do:
      - "Dùng weight 400 cho mọi typographic element — hệ thống không có bold weights; hệ thống phân cấp đến từ font family và kích thước."
      - "Đặt body và metadata ở 10–17px bằng ITCFranklinGothicStdBook; dành Garamond (17–28px) cho card titles và PerpetuaTitlingMT (25–48px) cho major headings."
      - "Phân cách UI elements bằng 1px #303030 hoặc #808080 hairline rules; không bao giờ dùng shadows, fills, hoặc border dày hơn 1px."
      - "Giữ tất cả góc ở 0px radius — images, cards, và containers luôn phẳng và hình chữ nhật để giữ cảm giác in ấn/collage."
      - "Để ảnh chụp mang tất cả màu sắc và sự ấm áp; UI chrome phải không màu (trắng, #f0f0f0, xám, #303030)."
      - "Dùng category tags uppercase phân cách bằng pipe (ví dụ 'FASHION | STUDIO') ở 10px bằng ITCFranklinGothicStdBook bên dưới mọi card title."
      - "Áp dụng nhịp dọc 12px nhất quán giữa title, tag row, và date row bên trong card; 36px giữa các major sections."

    don_t:
      - "Không giới thiệu bold, semibold, hoặc bất kỳ weight nào trên 400 — sự kiềm chế của hệ thống phụ thuộc vào điều này."
      - "Không thêm bất kỳ chromatic color nào (xanh dương, đỏ, xanh lá) vào UI chrome; nếu trạng thái cần nhấn mạnh, dùng rule xám đậm hơn hoặc dày hơn."
      - "Không bo góc, thêm box-shadows, hoặc áp background fills cho cards — để ảnh và khoảng trắng phân cách nội dung."
      - "Không dùng DisplaceKC bên ngoài wordmark; nó là typographic spectacle duy nhất của thương hiệu."
      - "Không xếp chồng nhiều hơn hai font family trên một dòng nội dung; nhịp điệu là title serif + meta sans, không gì khác."
      - "Không dùng decorative gradients, colored overlays trên ảnh, hoặc tinted UI surfaces — chỉ tông màu ấm trong ảnh chụp cung cấp chroma."
      - "Không dùng line-height trên 1.20 cho headings hoặc 1.05 cho captions; số liệu dọc chặt chẽ là một phần của chữ ký editorial."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang ngầm định — trắng tinh khiết bên dưới mọi nội dung |"
    info: "| 1 | Card Surface | `#f0f0f0` | Độ nâng card nhẹ, image matte borders, soft fill blocks |"

  elevation:

    info: "Không shadows, không bo tròn — layout dựa vào hairline borders (#303030 ở 1px) và khoảng trắng để phân cách các bề mặt. Elevation được ngụ ý thông qua image overlap và section padding, không bao giờ bằng box-shadow. Góc hoàn toàn vuông; ngay cả card images cũng nằm sát mép trang. Điều này tạo ra hiệu ứng print-collage nơi ảnh và văn bản có cảm giác được đặt trên một tờ giấy phẳng thay vì xếp chồng trong UI."

  imagery:

    info: "Ảnh chụp làm tất cả công việc tạo màu sắc và cảm xúc. Hình ảnh ấm áp, theo phong cách sống và editorial: nội thất khách sạn, quán cà phê, thời trang bán lẻ, cảnh du lịch, và con người trong những khoảnh khắc chân thực nhưng được tạo dáng. Xử lý ưu tiên ánh sáng tự nhiên ấm áp, bảng màu đất (terracotta, hổ phách, kem, nâu đậm), và crop cận cảnh tập trung vào đối tượng thay vì cảnh rộng. Ảnh nằm full-bleed với góc sắc nét, không overlays, không duotones, và không rounded masking — chúng đọc như những tấm in ấn được đặt trên trang. Icons gần như vắng mặt trong UI; khi có mặt, chúng là glyph đơn sắc dạng line-only trong #303030. Yếu tố hình ảnh phi nhiếp ảnh duy nhất là DisplaceKC wordmark."

  layout:

    info: "Max-width ~1200px căn giữa trên canvas trắng. Trang mở đầu bằng một dải 'FEATURED PROJECTS' ngang full-width gồm 3 card ảnh+văn bản rộng, cách masthead bằng một rule 1px #303030. Bên dưới là wordmark DisplaceKC 72px căn giữa, sau đó là một nav row ngang duy nhất gồm các item sans-serif uppercase được phân cách bằng vertical rules. Khu vực nội dung chính là grid responsive 3 cột gồm các project cards — ảnh ở trên, title serif bên dưới, sans metadata row ở dưới cùng. Các section được phân cách bằng 36px vertical whitespace và 1px hairline rules. Không sidebar, không floating elements, không overlapping components. Nhịp điệu hoàn toàn là các dải ngang xếp dọc, như một trang tạp chí."

  agent_prompt_guide:

    info: "THAM CHIẾU MÀU NHANH"
    text: "#303030"
    background: "#ffffff (page) / #f0f0f0 (card surface)"
    border: "#303030 (primary) / #808080 (secondary)"
    accent: "#767676 (rare nav rule)"
    primary_action: "không có màu CTA riêng biệt"

    info: "VÍ DỤ COMPONENT PROMPTS"

    - "Editorial project card: Mục grid ba cột. Ảnh sát mép, 0px radius, không border. Bên dưới ảnh, Garamond 28px weight 400 title trong #303030 với line-height 1.00, cắt bằng dấu ba chấm nếu dài. Sau đó gap 12px, sau đó một hàng với 'FASHION | STUDIO' bằng ITCFranklinGothicStdBook 10px uppercase #303030 bên trái và '20.09.2022' cùng font bên phải, cách title bằng một rule 1px #303030. Không card background, không shadow, 12px padding xung quanh khối văn bản."

    - "Section heading: PerpetuaTitlingMT 40px weight 400 #303030, line-height 1.20, căn trái với 36px top margin. Phía trên, một hairline rule 1px #808080 trải dài toàn bộ chiều rộng nội dung. Không subtitle, không trang trí."

    - "Navigation bar: Hàng ngang đơn, ITCFranklinGothicStdBook 16px weight 400 #303030 uppercase, items: VISUAL DIARY | CREATIVE STUDIO | ABOUT | WORKSHOPS | STORE. Mỗi item cách nhau bằng một vertical rule 1px solid #303030 với 18px paddingLeft và paddingRight. 'Search…' nghiêng bằng Garamond 17px nằm sát mép phải. Không background fill, không hover state ngoài bottom underline 1px #303030 trên active item."

    - "Featured project carousel card: Card ngang rộng, ảnh chiếm ~60% chiều rộng bên trái (0px radius, sát mép), khối title bên phải bằng PerpetuaTitlingMT 32px weight 400 #303030 uppercase, line-height 1.20. Bên dưới title, gap 12px, sau đó category label 'BARCELONA | HOTELS' bằng ITCFranklinGothicStdBook 10px uppercase #808080, cách title bằng một rule 1px #303030. Không card border, không shadow."

    - "Footer bar: Horizontal rule 1px solid #808080 phía trên. Văn bản footer bằng ITCFranklinGothicStdBook 10–12px weight 400 #303030, 18px paddingLeft. Bên trái: 'CUP OF COUPLE Creative Studio & Visual Diary' với tên thương hiệu bằng Garamond. Bên phải: 'ACCESS | BAG: 0' cách nhau bằng một vertical rule 1px #303030 giữa các item. 12px paddingTop và paddingBottom."

  similar_brands:

    - "**Garmentory** — Layout editorial thời trang/báo chí với serif headlines, sans-serif metadata, và UI đơn sắc để ảnh sản phẩm ấm áp chiếm ưu thế"
    - "**Cereal Magazine** — Nội dung dạng magazine-grid với serif titles weight-400, hairline gray rules, zero UI color, và ảnh phong cách sống là nguồn ấm áp duy nhất"
    - "**Kinfolk** — Khoảng trắng rộng rãi, typography hạn chế chỉ hai hoặc ba serif/sans families ở weight 400, và editorial card grids với hệ thống phân cấp ưu tiên hình ảnh"
    - "**Mr. & Mrs. Smith (hotel journal)** — Editorial grid du lịch/phong cách sống với uppercase sans metadata tags bên dưới serif project titles, cạnh ảnh sắc nét, và không chrome trang trí"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-charcoal: #303030;
          --color-dust-gray: #808080;
          --color-bone: #f0f0f0;
          --color-faded-pencil: #767676;
        
          /* Typography — Font Families */
          --font-itcfranklingothicstdbook: 'ITCFranklinGothicStdBook', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-garamond: 'Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-perpetuatitlingmt: 'PerpetuaTitlingMT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-displacekc: 'DisplaceKC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.05;
          --text-body-sm: 16px;
          --leading-body-sm: 1.2;
          --text-subheading: 25px;
          --leading-subheading: 1.2;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 36px;
          --card-padding: 12px;
          --element-gap: 12-18px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #f0f0f0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-charcoal: #303030;
          --color-dust-gray: #808080;
          --color-bone: #f0f0f0;
          --color-faded-pencil: #767676;
        
          /* Typography */
          --font-itcfranklingothicstdbook: 'ITCFranklinGothicStdBook', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-garamond: 'Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-perpetuatitlingmt: 'PerpetuaTitlingMT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-displacekc: 'DisplaceKC', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.05;
          --text-body-sm: 16px;
          --leading-body-sm: 1.2;
          --text-subheading: 25px;
          --leading-subheading: 1.2;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.2;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-60: 60px;
        }