dnco___style_reference:
  info: "> editorial gallery trên nền linen trắng."

  theme: "light"

  info: "DNCO vận hành dựa trên sự kiềm chế triệt để về mặt typographic: một sans-serif duy nhất ở một weight duy nhất (Neue Haas Unica Pro, 400) được triển khai trên thang đo từ 72px đến 16px, neo trên bảng màu gần như achromatic gồm trắng, trắng ngà và đen tuyền. Trang web mang phong cách như một ấn phẩm editorial in ấn — headline thở nhờ khoảng trắng rộng rãi, border là những đường hairline siêu mảnh (#e5e7eb), và màu sắc duy nhất trong hệ thống đến từ ảnh dự án, không bao giờ đến từ chrome hay accent fill. Navigation và các thành phần tương tác có dạng pill (border-radius 9999px), text luôn là nguyên thể tương tác chính, và brand wordmark đóng vai trò như một hero full-bleed đảo màu thành đen. Các component tối giản, không trọng lượng, được định hình bởi border thay vì shadow — thẩm mỹ là catalogue gallery, không phải SaaS dashboard."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt chính cho khối nội dung, đế card |"
    info: "| Hairline Mist | `#e5e7eb` | `--color-hairline-mist` | Hairline border, divider, lớp phủ bề mặt nhẹ, nền filter chip, placeholder ảnh |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Text chính, brand wordmark fill, nền hero tối, link text, màu heading |"
    info: "| Ash | `#a3a3a3` | `--color-ash` | Text phụ muted, caption, nhãn filter không hoạt động, helper text |"

  tokens___typography:

    neue_haas_unica_pro___kiểu_chữ_duy_nhất_cho_toàn_bộ_ui___navigation__body__headline__và_brand_wordmark__chỉ_weight_400__không_có_biến_thể_bold_hay_light__hệ_thống_phân_cấp_được_xây_dựng_hoàn_toàn_qua_kích_thước_và_tracking_thay_vì_tương_phản_weight_____font_neue_haas_unica_pro:
      - "**Thay thế:** Inter, Neue Haas Grotesk, Helvetica Now, Untitled Sans"
      - "**Weights:** 400"
      - "**Kích thước:** 16px, 18px, 22px, 72px"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** -0.025em trên mọi kích thước (tracking chặt tạo mật độ tinh tế, mang phong cách editorial)"
      - "**Vai trò:** Kiểu chữ duy nhất cho toàn bộ UI — navigation, body, headline, và brand wordmark. Chỉ weight 400, không có biến thể bold hay light; hệ thống phân cấp được xây dựng hoàn toàn qua kích thước và tracking thay vì tương phản weight."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.5 | -0.4px | `--text-caption` |"
      info: "| body | 18px | 1.56 | -0.45px | `--text-body` |"
      info: "| subheading | 22px | 1.33 | -0.55px | `--text-subheading` |"
      info: "| heading | 72px | 1 | -1.8px | `--text-heading` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 64px"
      - "**Card padding:** 0px"
      - "**Element gap:** 24px"

  components:

    brand_wordmark_hero:
      vai_trò: "Mở đầu full-bleed đặc trưng"

      info: "Logotype 'DNCO' khổng lồ ở ~72px+, trắng trên nền đen tuyền (#000000), lấp đầy toàn bộ viewport đầu tiên edge-to-edge không có padding hay safe area. Wordmark chính là hero — không headline, không subtext, không CTA. Đây là khoảnh khắc nhận diện thương hiệu rõ nét nhất."

    pill_navigation_bar:
      vai_trò: "Navigation cấp cao nhất của site"

      info: "Thanh nav ngang chỉ gồm text, 14px weight 400, gap 24px giữa các mục, nổi trên nền trắng. Mục đang hoạt động được đánh dấu bằng một chấm tròn nhỏ (•) bên dưới nhãn thay vì đổi màu. Không background, không border, không logo lockup ngoài wordmark ở góc trái."

    editorial_headline:
      vai_trò: "Câu copy khẳng định cấp trang"

      info: "72px Neue Haas Unica Pro, weight 400, line-height 1.0, tracking -0.025em, màu #000000. Căn trái sát mép trang, không giới hạn max-width. Tối đa hai dòng, được đặt chặt chẽ và tự tin."

    filter_chip_row:
      vai_trò: "Controls phân loại dự án"

      info: "Cột dọc các nhãn text (All, Sector, Location, Expertise) ở 16px weight 400, #a3a3a3 cho mục không hoạt động, #000000 cho mục đang hoạt động. Không background, không border, không hình chip — filter chỉ thuần typographic, không phải button."

    hairline_divider:
      vai_trò: "Phân cách section trực quan"

      info: "1px solid #e5e7eb, full container width. Là divider cấu trúc duy nhất trong hệ thống — thay thế mọi khoảng cách chỉ dùng spacing và card border."

    project_image_tile:
      vai_trò: "Thumbnail case study trong grid"

      info: "Ảnh raw, không border, không radius, không shadow, không caption overlay. Tỷ lệ khung hình rộng (landscape). Các tile được phân cách bằng khoảng trắng, không phải border nhìn thấy được. Khi thiếu ảnh, một fill #e5e7eb đồng nhất sẽ thay thế."

    filter_label_active_indicator:
      vai_trò: "Trạng thái active cho filter chip"

      info: "Một chấm tròn 4px (#000000) hiển thị cách 4px bên dưới nhãn filter đang hoạt động. Là chỉ báo trạng thái duy nhất — không đổi màu, gạch chân, hay thay đổi weight."

    text_link_inline:
      vai_trò: "Navigation trong nội dung / tiêu đề dự án"

      info: "16–18px weight 400, màu #000000, không gạch chân mặc định, tracking -0.025em. Hover state không được định nghĩa trong dữ liệu — giả định xuất hiện gạch chân hoặc giữ nguyên màu."

    case_study_card_grid_unit:
      vai_trò: "Mục dự án trên trang Work"

      info: "Đơn vị chỉ gồm ảnh trong grid nhiều cột. Không card chrome, không padding, không background — bức ảnh chính là toàn bộ card. Khoảng cách giữa các tile đạt được nhờ container padding, không phải internal margin."

    footer_text_block:
      vai_trò: "Link cấp site và thông tin liên hệ"

      info: "Text nhỏ ở 16px weight 400, #000000 hoặc #a3a3a3, căn trái, cấu trúc tối giản. Không hàng icon mạng xã hội, không đăng ký newsletter, không yếu tố trang trí — chỉ link liên hệ và pháp lý."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng Neue Haas Unica Pro (hoặc Inter / Neue Haas Grotesk) ở weight 400 — không bao giờ dùng bold, medium, hay light"
      - "Đặt tất cả type với letter-spacing -0.025em; tracking chặt là bắt buộc để có cảm giác editorial"
      - "Chỉ dùng #ffffff, #e5e7eb, #000000, và #a3a3a3 — không có điểm nhấn màu sắc nào trong UI"
      - "Xây dựng hệ thống phân cấp qua bước nhảy kích thước (16 → 18 → 22 → 72), không qua weight hay đổi màu"
      - "Phân cách section bằng hairline 1px #e5e7eb hoặc khoảng trắng rộng, không bao giờ dùng fill hay shadow"
      - "Làm mọi thành phần tương tác thành pill (9999px) hoặc nhãn chỉ text — không button có fill, không card bo tròn, không input có border"
      - "Để ảnh chụp mang toàn bộ màu sắc; ảnh tràn vào layout mà không có khung, radius, hay overlay"

    không_nên_làm:
      - "Không thêm họ typeface thứ hai — hệ thống là monotypographic theo thiết kế"
      - "Không đưa vào bất kỳ màu nào khác ngoài bốn màu trung tính — không có brand red, blue, hay accent green"
      - "Không dùng box-shadow hay elevation trên bất kỳ component nào — chiều sâu đến từ khoảng trắng, không phải blur"
      - "Không thêm border-radius vào card hay ảnh — chỉ navigation và chip dùng 9999px"
      - "Không in đậm hay in nghiêng text để tạo nhấn mạnh — hãy tăng kích thước thay vào đó"
      - "Không đặt nội dung bên trong container có border hoặc panel có fill — dùng khoảng trắng để nhóm"
      - "Không dùng background color cho button, tag, hay trạng thái tương tác — dùng text color và dot indicator"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|------|-------|---------|"
    info: "| 1 | Canvas White | `#ffffff` | Nền trang, bề mặt nội dung chính |"
    info: "| 2 | Image Placeholder Mist | `#e5e7eb` | Fill đồng nhất phía sau tile dự án đang tải hoặc trống |"
    info: "| 3 | Obsidian Invert | `#000000` | Đảo màu hero/wordmark — full-bleed đen với type trắng |"

  imagery:

    info: "Ảnh chụp là nguồn màu sắc duy nhất trong hệ thống. Ảnh dự án được chụp tại địa điểm — môi trường ngoài trời, con người trong không gian công cộng, kiến trúc, giao thông, biển báo, kết cấu đô thị. Xử lý ảnh theo phong cách ánh sáng tự nhiên, tài liệu (documentary-style), full-bleed, và không cắt xén: không duotone, không overlay, không border, không radius. Ảnh được trình bày ở tỷ lệ khung hình landscape lớn (khoảng 4:3 hoặc 3:2) và sắp xếp trong grid rộng rãi, nơi khoảng trắng đóng vai trò như gutter. Brand wordmark ở viewport đầu tiên được đặt màu trắng tinh trên nền đen, tạo ra một bước ngoặt tonal ấn tượng trước khi layout gallery trắng bắt đầu. Không có illustration, icon, hay đồ họa trừu tượng — bản sắc thị giác được mang hoàn toàn bởi wordmark và ảnh dự án."

  layout:

    info: "Mô hình trang là single-column rộng hoặc grid 2 cột với max-width rộng rãi (~1400px) và căn trái. Hero là một dải đen full-bleed bị chi phối bởi wordmark DNCO ở tỷ lệ cực lớn — không có headline copy cạnh tranh. Bên dưới hero, layout chuyển sang trắng với headline editorial hai dòng căn trái sát mép trang. Dự án được trình bày dưới dạng grid ảnh nhiều cột (2–3 cột) không có card chrome, chỉ phân cách bằng khoảng trắng. Filter controls nằm dưới dạng danh sách text đơn giản phía trên grid, không phải toolbar. Nhịp điệu section được định nghĩa bởi divider hairline #e5e7eb và khoảng cách dọc 64px thay vì các dải background xen kẽ. Navigation là thanh top bar tối giản với text link dạng pill-radius và dot indicator nhỏ cho route đang hoạt động."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #000000"
    - "background: #ffffff"
    - "border / divider: #e5e7eb"
    - "muted text: #a3a3a3"
    - "dark surface (hero inversion): #000000"
    - "primary action: không có màu CTA riêng biệt"

    3_5_ví_dụ_component_prompts:

    - "*Brand wordmark hero*: Section full-bleed đen (#000000), edge-to-edge. Text 'DNCO' đặt trong Neue Haas Unica Pro (hoặc Inter) ở 72px+, weight 400, màu #ffffff, letter-spacing -0.025em, căn trái không có padding offset. Không có thành phần nào khác trên màn hình."

    - "*Editorial page headline*: 72px Neue Haas Unica Pro, weight 400, line-height 1.0, tracking -0.025em, màu #000000, căn trái sát mép trang trên nền #ffffff. Không giới hạn max-width."

    - "*Pill navigation bar*: Hàng ngang các text link ở 16px weight 400, màu #000000, gap 24px, trên nền #ffffff. Mục đang hoạt động được đánh dấu bằng chấm tròn đen 4px đặt cách 4px bên dưới nhãn — không background fill, không border, không thay đổi weight. Wordmark 'DNCO' ở góc trên bên trái, 16px weight 400."

    - "*Filter label group*: Cột dọc bốn nhãn text (All, Sector, Location, Expertise) ở 16px weight 400. Mục không hoạt động màu #a3a3a3, mục đang hoạt động màu #000000 với chấm đen 4px cách 4px bên dưới nhãn. Không chip background, không border."

    - "*Project image grid*: Hai hoặc ba cột bằng nhau chứa ảnh landscape không cắt xén, không border, không radius, không caption overlay. Các tile chỉ được phân cách bằng container padding (gap 24px). Ảnh bị thiếu hiển thị dưới dạng khối fill #e5e7eb đồng nhất ở cùng tỷ lệ khung hình."

  elevation_philosophy:

    info: "Hệ thống không có elevation. Không component nào dùng box-shadow, drop-shadow, hay blur. Chiều sâu được tạo ra độc quyền thông qua: (1) khoảng trắng giữa các thành phần, (2) divider hairline 1px #e5e7eb, và (3) một lần đảo màu full-bleed đen duy nhất phá vỡ canvas vốn toàn trắng. Không bao giờ thêm shadow vào card, button, modal, hay popover — nếu một component có vẻ cần chiều sâu, hãy làm phẳng nó trên bề mặt."

  similar_brands:

    - "**Pentagram** — Cùng sự kiềm chế editorial — một neutral canvas duy nhất, một typeface duy nhất, typographic navigation, và ảnh chụp là nguồn màu sắc duy nhất"
    - "**Werkplaats** — Thẩm mỹ design-agency Hà Lan với khoảng trắng rộng rãi, hệ thống monotypographic, và pill-shaped nav trên nền trắng"
    - "**Anagrama** — Wordmark-as-hero opener, bảng màu achromatic, grid ảnh dự án lớn không cắt xén, text chrome tối giản"
    - "**Apt Studio** — Trình bày dạng gallery cho công việc dựa trên địa điểm, nền trắng, hairline divider, không có thành phần UI trang trí"
    - "**Made Thought** — Ngôn ngữ site brand-agency: headline khổng lồ ở một weight duy nhất, gần như không màu, ảnh dự án tràn vào grid sạch sẽ"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-hairline-mist: #e5e7eb;
          --color-obsidian: #000000;
          --color-ash: #a3a3a3;
        
          /* Typography — Font Families */
          --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --tracking-caption: -0.4px;
          --text-body: 18px;
          --leading-body: 1.56;
          --tracking-body: -0.45px;
          --text-subheading: 22px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.55px;
          --text-heading: 72px;
          --leading-heading: 1;
          --tracking-heading: -1.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 64px;
          --card-padding: 0px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 9999px;
          --radius-tags: 9999px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-canvas-white: #ffffff;
          --surface-image-placeholder-mist: #e5e7eb;
          --surface-obsidian-invert: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-hairline-mist: #e5e7eb;
          --color-obsidian: #000000;
          --color-ash: #a3a3a3;
        
          /* Typography */
          --font-neue-haas-unica-pro: 'Neue Haas Unica Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --tracking-caption: -0.4px;
          --text-body: 18px;
          --leading-body: 1.56;
          --tracking-body: -0.45px;
          --text-subheading: 22px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.55px;
          --text-heading: 72px;
          --leading-heading: 1;
          --tracking-heading: -1.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-full: 9999px;
        }