dropbox_com___style_reference:
  info: "> không gian làm việc ấm áp trên nền kem — phong cách editorial đầy tự tin trên giấy"

  theme: "light"

  info: "Dropbox mang phong cách không gian làm việc editorial ấm áp hơn là một dashboard năng suất lạnh lẽo. Canvas là nền giấy kem (#f7f5f2), không phải trắng vô trùng; chữ là màu gần đen ấm (#1e1919), không phải mực nguyên chất. Thương hiệu thể hiện qua một màu xanh điện tự tin (#0061fe) tô lên mọi bề mặt tương tác, kết hợp với headline Sharp Grotesk và body copy Atlas Grotesk — một cặp Grotesk tùy chỉnh mang lại cảm giác độc quyền, được thiết kế riêng. Layout rộng rãi và thoáng, xây dựng trên base 6px, với lưới card 2 cột, hero chia text + visual, và elevation tối thiểu. Bề mặt phẳng với viền mảnh (hairline borders); góc bo mềm (8–16px). Tổng thể gần gũi, có chủ đích và tự tin một cách nhẹ nhàng — trái ngược hoàn toàn với UI doanh nghiệp vô cảm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Dropbox Blue | `#0061fe` | `--color-dropbox-blue` | Điểm nhấn màu tím hỗ trợ cho các chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Cream Paper | `#f7f5f2` | `--color-cream-paper` | Canvas trang, nền section, bề mặt nav bar — màu trắng kem ấm thay thế màu trắng SaaS vô trùng để làm mềm hệ thống |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card nâng cao, content panels, nền mockup sản phẩm — màu trắng thật duy nhất, dành riêng cho các bề mặt nằm trên canvas kem |"
    info: "| Warm Ink | `#1e1919` | `--color-warm-ink` | Text chính, chữ nút nav tối, màu heading — màu gần đen ấm đọc mềm hơn mực nguyên chất trên nền kem |"
    info: "| Stone Gray | `#716b61` | `--color-stone-gray` | Text phụ, helper copy, nét icon mờ, metadata footer — màu xám ấm bão hòa thấp, nằm thoải mái trên nền kem |"
    info: "| Sand Card | `#eee9e2` | `--color-sand-card` | Bề mặt card thay thế, panel nâng cao nhẹ — màu kem đậm hơn một chút cho các card cần tách biệt nhẹ khỏi canvas |"
    info: "| Magenta Accent | `#cd2f7b` | `--color-magenta-accent` | Điểm nhấn trang trí, gạch chân link thỉnh thoảng, accent minh họa thương hiệu — cung cấp sự đa dạng về sắc độ mà không cạnh tranh với màu xanh chính |"

  tokens___typography:

    times___times___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_times:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Times — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    atlas_grotesk_web___body_copy__navigation_links__ui_labels__button_text___typeface_giao_diện_chính_của_dropbox__sans_hình_học_nhân_văn_với_aperture_mở__tối_ưu_cho_đọc_ui_dày_đặc_ở_14_16px____font_atlas_grotesk_web:
      - "**Thay thế:** Inter, IBM Plex Sans, Söhne"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 12px, 14px, 16px, 20px"
      - "**Line height:** 1.20–1.57"
      - "**Vai trò:** Body copy, navigation links, UI labels, button text — typeface giao diện chính của Dropbox; sans hình học nhân văn với aperture mở, tối ưu cho đọc UI dày đặc ở 14–16px"

    sharp_grotesk___section_headings_và_subheadings___weight_medium_500_thay_vì_bold_tạo_sự_kiềm_chế_editorial__letterform_hơi_chặt__hơi_nén_giúp_phân_biệt_với_các_sans_heading_chung_chung____font_sharp_grotesk:
      - "**Thay thế:** Inter Tight, Manrope, Söhne Breit"
      - "**Weights:** 500"
      - "**Sizes:** 18px, 26px, 40px"
      - "**Line height:** 1.20, 1.30"
      - "**Vai trò:** Section headings và subheadings — weight medium (500) thay vì bold tạo sự kiềm chế editorial; letterform hơi chặt, hơi nén giúp phân biệt với các sans heading chung chung"

    sharp_grotesk_23___display_headings_ở_32px____regular_weight_không_bold_trên_display_type_cỡ_lớn_là_lựa_chọn_chống_lại_quy_ước__dựa_vào_kích_thước_và_độ_chính_xác_của_letterform_thay_vì_weight_để_tạo_ấn_tượng____font_sharp_grotesk_23:
      - "**Thay thế:** Inter Tight, Manrope"
      - "**Weights:** 400"
      - "**Sizes:** 32px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Display headings ở 32px+ — regular weight (không bold) trên display type cỡ lớn là lựa chọn chống lại quy ước, dựa vào kích thước và độ chính xác của letterform thay vì weight để tạo ấn tượng"

    arial___arial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.57 | — | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |"

  tokens___spacing___shapes:

    base_unit: "6px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 84 | 84px | `--spacing-84` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| cards | 8px |"
      info: "| pills | 9999px |"
      info: "| buttons | 16px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 72px"
      - "**Card padding:** 24px"
      - "**Element gap:** 12px"

  components:

    top_navigation_bar:
      vai_trò: "Điều hướng site cố định"

      info: "Thanh nav trắng với brand mark Dropbox (logo hộp xanh) bên trái, các link product/solution/enterprise/pricing bằng Atlas Grotesk 14px, bên phải các link phụ (Contact sales, Get app, Sign up, Log in), và nút hành động chính 'Get started' dạng pill xanh đặc (#0061fe) với chữ trắng, radius 16px, padding 8px 16px."

    primary_cta_button_filled:
      vai_trò: "Call-to-action chính trên trang"

      info: "Nền #0061fe đặc, chữ trắng Atlas Grotesk 14px weight 500, border-radius 16px, padding 12px 24px, icon mũi tên phải. Không viền. Dùng cho các hành động 'Try Dropbox free' và 'Get started'."

    outline_secondary_button:
      vai_trò: "Hành động phụ, trọng lượng thị giác thấp hơn"

      info: "Nền trong suốt với viền #1e1919 1px, chữ tối, border-radius 16px, padding 12px 24px, có thể có mũi tên. Xuất hiện trong các banner CTA căn giữa nơi chỉ có một nút đơn lẻ."

    hero_section_split_layout:
      vai_trò: "Giới thiệu trang phía trên fold"

      layout_hai_cột: "cột trái có H1 bằng Sharp Grotesk 40px weight 500, body copy hỗ trợ bằng Atlas Grotesk 16px, và CTA chính bên dưới. Cột phải hiển thị mockup UI sản phẩm trên card trắng với radius 8px và viền 1px tinh tế. Section padding khoảng 96px dọc."

    logo_carousel_strip:
      vai_trò: "Bằng chứng xã hội — các thương hiệu đáng tin cậy"

      info: "Hàng ngang logo đối tác/khách hàng (KATZ, Zoom, Lincoln Center, McLaren, Crunch, Cirque du Soleil) trên nền kem, cách đều nhau, xử lý đơn sắc đen hoặc thang xám. Dừng theo mặc định, tự động cuộn."

    centered_cta_banner:
      vai_trò: "Lời kêu gọi chuyển đổi giữa trang"

      stack_căn_giữa_trên_canvas_kem: "icon badge nhỏ ở trên, H2 bằng Sharp Grotesk 26px weight 500, text hỗ trợ bằng Atlas Grotesk 16px, một nút outline bên dưới. Nhịp dọc 48–72px giữa các element."

    industry_solution_card_2_column_grid:
      vai_trò: "Giải thích use-case trong section bối cảnh ngành"

      info: "Lưới hai cột card trên nền kem. Mỗi card: hình vuông (xây dựng, giáo dục, v.v.) bên trái tỷ lệ 1:1 với radius 8px, title bằng Atlas Grotesk 16px weight 500, mô tả bằng body 14px, link 'Learn more →' màu xanh (#0061fe) weight 500. Card phẳng, không bóng, cách nhau 24px gutter."

    product_ui_mockup:
      vai_trò: "Minh họa trong hero và feature"

      info: "Ảnh chụp tổng hợp hiển thị giao diện web app và mobile app Dropbox cạnh nhau. Bề mặt trắng (#ffffff) với corner radius 8–12px, viền hairline 1px (#eee9e2 hoặc #d0ccc4), không drop shadow — nổi trên canvas kem."

    nav_dropdown_link:
      vai_trò: "Mục submenu Product/Solutions"

      info: "Text link bằng Atlas Grotesk 14px weight 500, #1e1919, với icon chevron nhỏ hướng xuống. Padding 12px, không nền. Gạch chân hoặc tô nền khi hover."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Cream Paper (#f7f5f2) làm canvas nền cho mọi section — không bao giờ mặc định dùng pure white cho nền toàn trang"
      - "Dành riêng fill #0061fe đặc cho các nút hành động chính và trạng thái nav active"
      - "Đặt heading weight là 500 (không phải 700) trong Sharp Grotesk — weight medium là signature"
      - "Dùng border-radius 16px trên mọi button và 8–12px trên card và product mockup"
      - "Neo layout vào spacing scale 6px: 12/24/48/72/96px là các bước giá trị phổ biến nhất"
      - "Kết hợp Atlas Grotesk 16px body với Stone Gray (#716b61) cho text phụ/hỗ trợ"
      - "Dùng lưới card 2 cột với gutter 24px cho section solution/industry"

    không_nên_làm:
      - "Không dùng pure white (#ffffff) làm nền trang — nó phá vỡ thẩm mỹ giấy ấm"
      - "Không dùng weight bold (700) hoặc semibold (600) cho heading — Sharp Grotesk ở 500 là chuẩn"
      - "Không thêm drop shadow vào card hoặc product mockup — sự tách biệt đến từ hairline borders và sự chuyển đổi bề mặt cream-sang-trắng"
      - "Không giới thiệu các accent sắc độ phụ cạnh tranh với màu xanh #0061fe"
      - "Không dùng Times serif như một lựa chọn thiết kế trong heading hoặc body — nó chỉ xuất hiện như một artifact fallback hệ thống"
      - "Không dùng pill buttons bo tròn hoàn toàn (9999px) cho primary CTA — 16px là radius chuẩn"
      - "Không pha trộn canvas kem với xám lạnh (#e5e7eb, #f3f4f6) — chỉ dùng các neutral ấm trong họ #eee9e2 / #f7f5f2"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f7f5f2` | Nền cơ bản cho mọi trang — giấy kem ấm |"
    info: "| 1 | Card Surface | `#ffffff` | Content cards, product mockups, elevated panels |"
    info: "| 2 | Alt Card | `#eee9e2` | Biến thể card tinh tế cho nhịp điệu thị giác trong lưới |"
    info: "| 3 | Action Surface | `#0061fe` | Fill CTA chính, brand callouts |"

  elevation:

    - "**Product UI Mockup:** `không — dùng viền hairline 1px trên bề mặt trắng`"
    - "**Industry Cards:** `không — phẳng trên canvas kem`"
    - "**Nav Bar:** `không — thanh trắng phẳng`"

  imagery:

    info: "Imagery được dùng có chừng mực và luôn phục vụ bối cảnh nội dung. Section industry/solution dùng ảnh vuông 1:1 — công nhân xây dựng, đội nhóm văn phòng, sinh viên, cảnh nhà máy — với gam màu tự nhiên, hơi ấm. Ảnh nằm sát lề trái trong card 2 cột với corner radius 8px. Không có lifestyle overlays, không duotone treatments, không ảnh hero full-bleed trang trí. Product UI mockup (tổng hợp màn hình web + mobile app) đảm nhận phần nặng về thị giác trong hero. Phong cách icon: line icons nét mảnh màu #716b61 Stone Gray, hình học và tiện dụng, không có biến thể filled."

  layout:

    info: "Mô hình trang là max-width căn giữa ~1200px với lề ngoài rộng rãi trên canvas kem. Navigation là thanh trên cùng chiều cao cố định (~64px) màu trắng. Pattern hero luôn là split 2 cột: text căn trái (headline + body + CTA) chiếm ~40% chiều rộng, product visual bên phải chiếm ~50% với bề mặt trắng. Bên dưới hero, một logo carousel strip cung cấp bằng chứng xã hội. Các section giữa trang xen kẽ giữa centered CTA banners và lưới card 2 cột (industry solutions, feature blocks). Nhịp dọc section là 72–96px. Navigation là top-bar tối giản với dropdown chevron; không có sidebar, không có mega-menu trong luồng đã chụp."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Background: #f7f5f2 (Cream Paper)"
    - "Surface (card): #ffffff"
    - "Text: #1e1919 (Warm Ink)"
    - "Secondary text: #716b61 (Stone Gray)"
    - "Border: #eee9e2 (Sand Card)"
    - "primary action: không có màu CTA riêng biệt"

    3_ví_dụ_component_prompts:

    info: "Không quan sát thấy màu hành động chính riêng biệt; sử dụng các xử lý nút neutral đã trích xuất thay vì phát minh ra màu CTA filled."

    - "Tạo một lưới industry solution 2 cột trên nền #f7f5f2. Mỗi card có ảnh vuông 1:1 bên trái (corner radius 8px), title bằng Atlas Grotesk 16px weight 500 #1e1919, mô tả bằng Atlas Grotesk 14px weight 400 #716b61, và link 'Learn more →' màu #0061fe weight 500. Khoảng cách 24px giữa các card trong mỗi hàng."

  similar_brands:

    - "**Notion** — Cùng cách tiếp cận single-accent màu kiềm chế (đen/trắng của Notion với một màu mực) và typography editorial sạch sẽ ở kích thước rộng rãi"
    - "**Figma** — Cùng pattern split-hero (text trái, product mockup phải) và canvas trắng kem ấm với sự phụ thuộc shadow tối thiểu"
    - "**Linear** — Cặp typeface Grotesk tùy chỉnh (Sharp Grotesk vang hưởng ảnh hưởng Linear Sans Grotesk) và heading weight-medium tự tin"
    - "**Miro** — Tông canvas neutral ấm (Miro #f5f5f5 nghiêng về lạnh hơn nhưng cùng density comfort-first) với lưới feature 2 cột và single brand accent"
    - "**Webflow** — Sự tự tin editorial — display type cỡ lớn weight medium, nền kem/trắng kem, và một màu hành động chromatic cho CTA"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-dropbox-blue: #0061fe;
          --color-cream-paper: #f7f5f2;
          --color-pure-white: #ffffff;
          --color-warm-ink: #1e1919;
          --color-stone-gray: #716b61;
          --color-sand-card: #eee9e2;
          --color-magenta-accent: #cd2f7b;
        
          /* Typography — Font Families */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-atlas-grotesk-web: 'Atlas Grotesk Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sharp-grotesk: 'Sharp Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sharp-grotesk-23: 'Sharp Grotesk 23', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.57;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-84: 84px;
          --spacing-96: 96px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 72px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-cards: 8px;
          --radius-pills: 9999px;
          --radius-buttons: 16px;
        
          /* Surfaces */
          --surface-page-canvas: #f7f5f2;
          --surface-card-surface: #ffffff;
          --surface-alt-card: #eee9e2;
          --surface-action-surface: #0061fe;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-dropbox-blue: #0061fe;
          --color-cream-paper: #f7f5f2;
          --color-pure-white: #ffffff;
          --color-warm-ink: #1e1919;
          --color-stone-gray: #716b61;
          --color-sand-card: #eee9e2;
          --color-magenta-accent: #cd2f7b;
        
          /* Typography */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-atlas-grotesk-web: 'Atlas Grotesk Web', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sharp-grotesk: 'Sharp Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sharp-grotesk-23: 'Sharp Grotesk 23', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.57;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-84: 84px;
          --spacing-96: 96px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
        }