mobbin___style_reference:
  info: "> Bảng mẫu grayscale — một tờ in thử của thợ in nơi trọng lượng typography CHÍNH LÀ màu sắc."

  theme: "light"

  info: "Mobbin vận hành dựa trên sự kiềm chế achromatic thuần túy — zero chroma trên toàn bộ bảng màu, buộc hệ thống phân cấp chỉ dựa vào weight, kích thước và tông màu. Trang là khoảng trắng bị ngắt quãng bởi mực gần-đen (#141414) ở kích thước display và xám ấm (#707070, #adadad) cho text phụ. Typeface tùy chỉnh 'saans' là yếu tố khác biệt duy nhất: các weight phân số (440, 456, 652) không tồn tại trong bất kỳ system font nào, tạo ra khối lượng headline nằm giữa regular và semibold — typography đảm nhận công việc của màu sắc. Hình dạng pill 9999px xuất hiện trên mọi phần tử tương tác trong khi nội dung card nằm trên các hình chữ nhật bo tròn 16–24px, khiến các button trông như badge trong một biển thumbnail được đóng khung. Bản thân nội dung — ảnh chụp màn hình app mobile trong các card grayscale — CHÍNH LÀ kết cấu thị giác của trang."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Ink | `#141414` | `--color-midnight-ink` | Primary text, headings, filled CTA buttons, nav items, icon strokes — con ngựa thồ màu sắc duy nhất của một hệ thống achromatic |"
    info: "| Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, bề mặt card, text button trên nền tối |"
    info: "| Graphite | `#707070` | `--color-graphite` | Body copy, secondary links, descriptive text |"
    info: "| Ash | `#adadad` | `--color-ash` | Tertiary text, viền button disabled/muted, placeholder icons |"
    info: "| Fog | `#ededed` | `--color-fog` | Dividers, viền mờ, đường viền card |"
    info: "| Mist | `#f2f2f2` | `--color-mist` | Nav background tint, input fields, inner surface elevation |"
    info: "| Silver | `#c2c2c2` | `--color-silver` | Skeleton loaders, inactive UI fills |"
    info: "| Slate Shadow | `#e0e0e0` | `--color-slate-shadow` | Inset button shadow ring (rgba(64,64,64,0.16) 0px 0px 0px 1px) |"

  tokens___typography:

    saans___mọi_phần_tử_text_trên_site__các_weight_phân_số_440__456__652_là_signature___chúng_chiếm_khối_lượng_thị_giác_nằm_giữa_regular_và_semibold_mà_không_font_variable_axis_nào_hiển_thị_dưới_dạng_named_stops__display_headlines_ở_80px_56px_chạy_weight_600_652_với_lineheight_1_00_1_13_và_letter_spacing_âm__0_011em_ở_kích_thước_lớn__body_chạy_14_16px_ở_weight_400_với_tracking__0_013_0_017em_để_đảm_bảo_dễ_đọc_ở_kích_thước_nhỏ_____font_saans:
      - "**Thay thế:** Inter Variable hoặc Geist (variable-axis fallback gần nhất với hình học quang học tương đương)"
      - "**Weights:** 400, 440, 456, 600, 652"
      - "**Kích thước:** 12px, 14px, 16px, 20px, 32px, 56px, 80px"
      - "**Line height:** 1.00–1.50 (tight 1.00–1.15 ở display, looser 1.38–1.50 ở body)"
      - "**Letter spacing:** -0.88px ở 80px (-0.011em), -0.39px ở 56px (-0.007em), +0.21px ở 16px (+0.013em), +0.28px ở 20px (+0.014em), +0.20px ở 12px (+0.017em)"
      - "**OpenType features:** `\"calt\" 0, \"dlig\", \"ss07\"`"
      - "**Vai trò:** Mọi phần tử text trên site. Các weight phân số (440, 456, 652) là signature — chúng chiếm khối lượng thị giác nằm giữa Regular và Semibold mà không font variable-axis nào hiển thị dưới dạng named stops. Display headlines ở 80px/56px chạy weight 600–652 với lineHeight 1.00–1.13 và letter-spacing âm (-0.011em ở kích thước lớn). Body chạy 14–16px ở weight 400 với tracking +0.013–0.017em để đảm bảo dễ đọc ở kích thước nhỏ."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 16 | 0.2px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | — | `--text-body-sm` |"
      info: "| body | 16px | 22 | 0.21px | `--text-body` |"
      info: "| subheading | 20px | 28 | 0.28px | `--text-subheading` |"
      info: "| heading | 32px | 42 | — | `--text-heading` |"
      info: "| heading-lg | 56px | 63 | -0.39px | `--text-heading-lg` |"
      info: "| display | 80px | 80 | -0.88px | `--text-display` |"

  tokens___spacing___shapes:

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

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 16-24px |"
      info: "| inputs | 9999px |"
      info: "| modals | 24px |"
      info: "| buttons | 9999px |"
      info: "| thumbnails | 16px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(64, 64, 64, 0.16) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| xl | `rgba(0, 0, 0, 0.04) 0px 8px 40px 0px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 8-16px"

  components:

    primary_filled_button:
      vai_trò: "Main CTA — 'Join for free'"

      info: "Background #141414, text #ffffff, radius 9999px, padding 0px 16px (height do line-height quyết định), font saans weight 600 ở 14–16px. Inset shadow ring rgba(64,64,64,0.16) 0px 0px 0px 1px ở trạng thái hover."

    outlined_pill_button:
      vai_trò: "Secondary action — 'See our plans'"

      info: "Background transparent, text #141414, border 1px solid #141414, radius 9999px, padding 0px 16px. Nằm cạnh primary CTA như một lựa chọn nhẹ hơn."

    muted_pill_button:
      vai_trò: "Tertiary / inactive filter tabs"

      info: "Background transparent, text #adadad, border 1px solid #adadad, radius 9999px, padding 0px 12px. Dùng cho unselected tab filters như 'Most popular', 'Top rated'."

    inline_underline_link:
      vai_trò: "Inline text action không có hình pill"

      info: "Background transparent, text #141414, border-radius 0px, padding 2px mọi phía. Không background, không border — thuần túy typographic. Dùng cho secondary in-text navigation."

    app_screenshot_card:
      vai_trò: "Đơn vị nội dung chính trong gallery grid"

      info: "Nền trắng, border 1px solid #ededed, radius 16px, padding 16px. Chứa ảnh chụp màn hình điện thoại (radius 12–16px trên chính ảnh), badge 'New' hoặc 'Updated' (pill 9999px, fill #141414, text trắng, font 12px), và tên app bằng saans 14px weight 440 #141414."

    category_navigation_menu:
      vai_trò: "Mega-dropdown hiển thị filter categories"

      info: "Nền trắng, box-shadow rgba(0,0,0,0.04) 0px 8px 40px 0px, radius 24px, padding 24-32px. Bố cục grid bốn cột với category labels bằng saans 12px weight 400 #adadad uppercase, và category items bằng saans 16px weight 440 #141414."

    top_navigation_bar:
      vai_trò: "Sticky global navigation"

      info: "Background #ffffff hoặc tint #f2f2f2, padding 0 24px, height 60px. Logo căn trái, nav links (saans 14px weight 440 #141414) căn giữa, filled pill button 'Join for free' căn phải. Tất cả nav links đều là plain text — không underline, không border."

    filter_pill___tab_row:
      vai_trò: "Thanh filter ngang có thể cuộn phía trên gallery"

      hàng_các_pill_button__active: "background #141414 text #ffffff radius 9999px padding 4px 12px. Inactive: background transparent text #141414 border 1px solid #141414 radius 9999px padding 4px 12px. Font saans 14px weight 440. Gap 8px giữa các pill."

    search_input:
      vai_trò: "Thanh tìm kiếm app/screen"

      info: "Background #f2f2f2, border none, radius 9999px, padding 8px 16px, placeholder text saans 14px #adadad, input text saans 14px #141414. Icon search inset trái, toggle pill 'Text in Screenshot' inset phải."

    section_stat_display:
      vai_trò: "Hero library size counter"

      info: "Số hiển thị ở 56–80px saans weight 652, letter-spacing -0.88px, line-height 1.00, color #141414. Label text bên dưới ở 16–20px weight 440 #707070. Các con số là tâm điểm thị giác — không có yếu tố trang trí."

  do_s_and_don_ts:

    do:
      - "Dùng #141414 làm 'màu sắc' duy nhất — mọi UI accent, icon, filled button và active state đều là màu gần-đen này, không bao giờ là một hue chromatic."
      - "Áp dụng radius 9999px cho mọi pill element tương tác: buttons, tags, search inputs, filter chips. Non-interactive content containers dùng radius 16–24px."
      - "Đặt display headlines (56–80px) ở saans weight 600–652 với letter-spacing -0.007em đến -0.011em và lineHeight 1.00–1.13."
      - "Dùng font-feature-settings: '\"calt\" 0, \"dlig\", \"ss07\"' trên mọi text saans để kích hoạt custom ligature và stylistic set giúp phân biệt nó với fallback sans-serifs."
      - "Phân biệt card elevation bằng border 1px solid #ededed — không bao giờ dùng box-shadow trên cards. Chỉ dành box-shadow cho floating dropdowns."
      - "Dùng fractional saans weights: 440 cho UI labels/nav, 456 cho mid-emphasis body, 652 cho hero numerics — không bao giờ làm tròn thành 400/500/600 ở kích thước nơi fractional weight có sẵn."
      - "Duy trì nhịp dọc 80px giữa các khối nội dung chính, với internal card padding 24px làm baseline."

    don_t:
      - "Không bao giờ đưa vào chromatic accent color — không xanh cho links, không xanh lá cho success states, không bất kỳ hue nào. Toàn bộ brand palette là achromatic."
      - "Không bao giờ dùng box-shadow trên cards hoặc gallery thumbnails — borders đảm nhận công việc đó; shadow trên content cards sẽ cạnh tranh với ảnh chụp màn hình bên trong."
      - "Không bao giờ dùng font-weight 700 hoặc 800 — weight nặng nhất là 652. Weight nặng hơn sẽ phá vỡ sự kiềm chế typographic định nghĩa hệ thống."
      - "Không bao giờ dùng radius values khác ngoài 9999px (interactive), 24px (large containers), 16px (cards/images), hoặc 8px (inline badges) — các giá trị trung gian tùy tiện phá hỏng từ vựng hình khối."
      - "Không bao giờ đặt colored backgrounds phía sau sections — các alternating band layouts nên dùng #ffffff vs #f2f2f2 nhiều nhất, không bao giờ tinted hoặc chromatic fills."
      - "Không bao giờ căn trái hero headlines — display type căn giữa ở 80px/56px là layout anchor; dịch chuyển nó phá vỡ sự đối xứng khiến screenshot grid trông có tổ chức."
      - "Không bao giờ bỏ letter-spacing khỏi display type — ở 80px, tracking -0.88px là thứ khiến saans trông như một custom typeface thay vì web font chung chung."

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Page | `#ffffff` | Root page background |"
    info: "| 1 | Card | `#ffffff` | Gallery cards, testimonial cards — phân biệt với page bằng border 1px #ededed, không phải thay đổi background |"
    info: "| 2 | Input / Chip | `#f2f2f2` | Search bars, nav tint, inner UI fills |"
    info: "| 3 | Overlay Dropdown | `#ffffff` | Category mega-menu, floating panels — nâng lên qua shadow rgba(0,0,0,0.04) 0px 8px 40px |"

  elevation:

    info: "Shadows gần như vắng mặt — ngoại lệ duy nhất là một lớp ambient lift rất nhẹ (rgba(0,0,0,0.04) 0px 8px 40px) trên dropdown menus. Card elevation được thể hiện hoàn toàn qua border 1px #ededed trên nền trang trắng, không phải shadow. Cách tiếp cận flat-border này giữ cho trường thị giác đủ sạch để nội dung ảnh chụp màn hình app đọc được như phần tử có độ tương phản cao nhất trên mọi bề mặt."

  imagery:

    nội_dung_chính_là_imagery: "ảnh chụp màn hình app grayscale được hiển thị dưới dạng card có viền trong grid 3 cột. Ảnh chụp màn hình được cắt theo khung điện thoại, đặt trên nền card trắng với radius 16px, và hiển thị ở tông màu khử bão hòa phù hợp với bảng màu achromatic của brand — các app nhiều màu sắc trông như bị tắt màu vì UI xung quanh yêu cầu điều đó. Không có lifestyle photography, không illustration, không abstract graphics. Logo đối tác/khách hàng (Uber, Meta, Airbnb, v.v.) xuất hiện dưới dạng flat monochrome SVGs trong trust bar. App icon kiểu Revolut trong hero (hình vuông bo tròn, radius 24px, fill xanh lá với ký hiệu trắng) là phần tử chromatic duy nhất trên trang — một mẫu vật có chủ đích của nội dung đang được trưng bày, không phải lựa chọn brand. Phong cách icon trong toàn bộ UI là outlined, thin stroke (~1.5px), monochrome #141414."

  layout:

    info: "Max-width căn giữa (~1280px), nền trắng xuyên suốt. Hero là stack text căn giữa theo chiều dọc — display headline lớn (80px) phía trên subtitle paragraph, phía dưới là hai pill CTAs cạnh nhau, với featured app icon phía trên headline như một mẫu vật. Bên dưới hero: trust logo bar full-width với brand logos xám tắt. Gallery section giới thiệu sticky secondary nav (app type tabs, search bar, filter row) phía trên grid card 3 cột với gutters thoải mái 16-20px. Testimonials section dùng grid text card 4 cột kiểu masonry trên nền trắng. Navigation là floating top bar với logo trái, text links giữa, CTA pill phải — chuyển từ transparent sang trắng/f2f2f2 khi cuộn. Nhịp dọc section nhất quán 80px giữa các khối chính. Không có alternating dark/light bands — toàn bộ trang là trắng với card grids cung cấp kết cấu thị giác."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "Text (primary): #141414"
    - "Text (secondary): #707070"
    - "Text (tertiary / disabled): #adadad"
    - "Background: #ffffff"
    - "Surface / input fill: #f2f2f2"
    - "Border / divider: #ededed"
    - "CTA button fill: #141414 → white text"
    - "Active tab: fill #141414 → white text; Inactive tab: transparent → border + text #141414"

    ví_dụ_component_prompts:

    - "**Hero Section**: Nền trắng. App icon specimen (hình vuông bo tròn 64px, radius 24px) căn giữa phía trên headline. Headline 'Discover real-world design inspiration.' ở 80px saans weight 652, #141414, letter-spacing -0.88px, line-height 1.00, căn giữa. Subtitle ở 20px weight 440, #707070, line-height 1.50, căn giữa, max-width 560px. Hai pill CTAs cạnh nhau: filled (bg #141414, text trắng, radius 9999px, padding 0px 16px) và outlined (bg transparent, border+text #141414, cùng radius/padding). Vertical gap giữa các phần tử: 24px."

    - "**Screenshot Gallery Card**: Nền trắng, border 1px solid #ededed, radius 16px, padding 16px. Ảnh chụp màn hình điện thoại lấp đầy phần trên (radius 12px). Hàng dưới cùng: app icon (hình tròn 24px) + tên app saans 14px weight 440 #141414, căn trái. Badge 'New' góc trên trái: fill #141414, text trắng, saans 12px weight 600, radius 9999px, padding 2px 8px."

    - "**Global Nav Bar**: Background #ffffff, height 60px, padding 0 32px. Trái: Mobbin logotype saans weight 600 14px #141414. Giữa: 'Pricing', 'Awards', 'Log in' bằng saans 14px weight 440 #141414, gap 32px. Phải: pill button 'Join for free' — bg #141414, text trắng, saans 14px weight 600, radius 9999px, padding 0 16px."

    - "**Testimonial Card**: Nền trắng, border 1px solid #ededed, radius 16px, padding 24px. Hàng trên: avatar circle 36px + tên saans 14px weight 600 #141414 + công ty saans 12px weight 400 #707070. Body text saans 14px weight 400 #141414, line-height 1.50. Không shadow."

    - "**Filter Pill Row**: Hàng flex ngang, gap 8px. Active pill: bg #141414, text #ffffff, saans 14px weight 440, radius 9999px, padding 4px 12px. Inactive pill: bg transparent, border 1px + text #141414, cùng kích thước. Variant muted/disabled: border + text #adadad."

  fractional_weight_system:

    info: "Saans hiển thị năm weight stops ánh xạ tới các semantic roles:"
    - "400: long-form body copy, footnotes"
    - "440: UI labels, nav links, card metadata, button text trên secondary actions"
    - "456: mid-emphasis body, subheadings, feature descriptions"
    - "600: headlines, section titles, CTA button text"
    - "652: hero display numerics, headlines cường độ tối đa ở 56–80px"

    info: "Khoảng cách giữa 440 và 456 là tinh tế nhưng có chủ đích — 456 được dùng khi 440 đọc quá nhạt trên nền trắng ở 16–20px, nhưng 600 sẽ cảm thấy nặng. Không bao giờ thay thế bằng weight 500 hoặc 700 — không có stop nào tồn tại giữa 456 và 600 trong intended rendering."

  similar_brands:

    - "**Screenlane** — Cùng mô hình achromatic gallery-of-screenshots với nền trắng và card-border-only elevation"
    - "**Dribbble** — Pill-button navigation và content grid 3 cột để duyệt design inspiration"
    - "**Lookup.design** — Ý tưởng giống hệt — UI không chroma bao bọc nội dung ảnh chụp màn hình nhiều màu — với nav và filter-pill patterns tương tự"
    - "**Linear** — Custom typography fractional-weight làm yếu tố khác biệt brand chính trong một hệ thống gần như monochrome"
    - "**Refero.design** — Thư viện ảnh chụp màn hình app với cùng achromatic chrome trắng/xám và pill-shaped filter chips phía trên grid"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-ink: #141414;
          --color-pure-canvas: #ffffff;
          --color-graphite: #707070;
          --color-ash: #adadad;
          --color-fog: #ededed;
          --color-mist: #f2f2f2;
          --color-silver: #c2c2c2;
          --color-slate-shadow: #e0e0e0;
        
          /* Typography — Font Families */
          --font-saans: 'saans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --text-body: 16px;
          --leading-body: 22;
          --tracking-body: 0.21px;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --tracking-subheading: 0.28px;
          --text-heading: 32px;
          --leading-heading: 42;
          --text-heading-lg: 56px;
          --leading-heading-lg: 63;
          --tracking-heading-lg: -0.39px;
          --text-display: 80px;
          --leading-display: 80;
          --tracking-display: -0.88px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w440: 440;
          --font-weight-w456: 456;
          --font-weight-semibold: 600;
          --font-weight-w652: 652;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 16-24px;
          --radius-inputs: 9999px;
          --radius-modals: 24px;
          --radius-buttons: 9999px;
          --radius-thumbnails: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(64, 64, 64, 0.16) 0px 0px 0px 1px inset;
          --shadow-xl: rgba(0, 0, 0, 0.04) 0px 8px 40px 0px;
        
          /* Surfaces */
          --surface-page: #ffffff;
          --surface-card: #ffffff;
          --surface-input-chip: #f2f2f2;
          --surface-overlay-dropdown: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-ink: #141414;
          --color-pure-canvas: #ffffff;
          --color-graphite: #707070;
          --color-ash: #adadad;
          --color-fog: #ededed;
          --color-mist: #f2f2f2;
          --color-silver: #c2c2c2;
          --color-slate-shadow: #e0e0e0;
        
          /* Typography */
          --font-saans: 'saans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --text-body: 16px;
          --leading-body: 22;
          --tracking-body: 0.21px;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --tracking-subheading: 0.28px;
          --text-heading: 32px;
          --leading-heading: 42;
          --text-heading-lg: 56px;
          --leading-heading-lg: 63;
          --tracking-heading-lg: -0.39px;
          --text-display: 80px;
          --leading-display: 80;
          --tracking-display: -0.88px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(64, 64, 64, 0.16) 0px 0px 0px 1px inset;
          --shadow-xl: rgba(0, 0, 0, 0.04) 0px 8px 40px 0px;
        }