ncda___style_reference:
  info: "> Architectural monograph trong không gian âm. Wordmark NCDA ở 62px bị cắt bởi mép viewport, biến logo thành một bức tường."

  theme: "mixed"

  info: "NCDA hoạt động như một monograph in ấn được chuyển lên web: canvas trắng như giấy, một mực gần-đen duy nhất, không có tạp âm màu sắc, và typography đảm nhận công việc cấu trúc mà màu sắc thường làm. Điểm nhấn đặc trưng chính là wordmark — được hiển thị ở tỷ lệ kiến trúc và bị cắt bởi mép viewport, biến brand mark thành một công cụ layout thay vì một logo. Navigation được tinh giản đến mức tối thiểu: một đồng hồ hai thành phố trực tiếp ở góc, một trigger 'Menu' duy nhất, và một khối mô tả màu xám gọn gàng. Hệ thống xen kẽ giữa không gian trắng rộng lớn và các dải đen full-bleed không thường xuyên, tạo ra nhịp điệu của một catalogue triển lãm. Các component thưa thớt và không trang trí — không shadow, không border-radius, không button — chỉ có hairline rules, margin rộng rãi, và typography thì thầm qua negative tracking dày đặc ở kích thước display và positive tracking nhẹ ở kích thước caption."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Onyx | `#191919` | `--color-onyx` | Text chính, hairline borders, dải nền tối full-bleed — mực gần-đen của hệ thống |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Text phụ, border sâu nhất, overlay ảnh khi cần độ tương phản tối đa trên nền trắng |"
    info: "| Paper | `#ffffff` | `--color-paper` | Canvas trang, nền surface, text inverse trên dải tối |"
    info: "| Concrete | `#808080` | `--color-concrete` | Text mô tả phụ, border link mờ, meta-information nhẹ — màu xám của footnote và caption |"

  tokens___typography:

    twk_everett___tất_cả_interface_và_display_type___một_neo_grotesque_với_x_height_cao_và_sự_thoáng_đãng_hình_học__chỉ_một_weight_400_duy_nhất_trên_toàn_bộ_dải_từ_11px_caption_đến_62px_display_tạo_ra_một_giọng_typography_đơn_khối__ở_62px__nó_nhận_negative_tracking_mạnh__0_05em_kéo_các_chữ_cái_thành_một_dải_kiến_trúc_liên_tục__ở_11px__nó_chuyển_sang_positive_tracking_nhẹ__0_04em_để_đảm_bảo_độ_dễ_đọc_thực_dụng_cho_timestamp_và_label_____font_twk_everett:
      - "**Thay thế:** Neue Haas Grotesk Display, Inter, Helvetica Neue"
      - "**Weights:** 400"
      - "**Kích thước:** 11px, 15px, 21px, 32px, 62px"
      - "**Line height:** 0.80–1.44"
      - "**Letter spacing:** -0.05em ở 62px, -0.01em ở 21–32px, +0.04em ở 11px"
      - "**Vai trò:** Tất cả interface và display type — một neo-grotesque với x-height cao và sự thoáng đãng hình học. Chỉ một weight (400) duy nhất trên toàn bộ dải từ 11px caption đến 62px display tạo ra một giọng typography đơn khối. Ở 62px, nó nhận negative tracking mạnh (-0.05em) kéo các chữ cái thành một dải kiến trúc liên tục; ở 11px, nó chuyển sang positive tracking nhẹ (+0.04em) để đảm bảo độ dễ đọc thực dụng cho timestamp và label."

    twk_everett_mono___monospaced_companion_cho_dữ_liệu_và_chú_thích_kỹ_thuật___được_dùng_hạn_chế_trong_các_ngữ_cảnh_body_nơi_cần_căn_chỉnh_dạng_bảng_hoặc_độ_chính_xác_giống_code__chỉ_một_kích_thước_duy_nhất_ở_21px_với_tracking__0_01em_____font_twk_everett_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 21px"
      - "**Line height:** 0.80"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** Monospaced companion cho dữ liệu và chú thích kỹ thuật — được dùng hạn chế trong các ngữ cảnh body nơi cần căn chỉnh dạng bảng hoặc độ chính xác giống code. Chỉ một kích thước duy nhất ở 21px với tracking -0.01em."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|-----------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.44 | 0.44px | `--text-caption` |"
      info: "| body | 15px | 1.44 | -0.15px | `--text-body` |"
      info: "| subheading | 21px | 1.4 | -0.21px | `--text-subheading` |"
      info: "| heading | 32px | 1.35 | -0.32px | `--text-heading` |"
      info: "| display | 62px | 0.8 | -3.1px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 53 | 53px | `--spacing-53` |"
      info: "| 59 | 59px | `--spacing-59` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 150 | 150px | `--spacing-150` |"
      info: "| 188 | 188px | `--spacing-188` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 64-150px"
      - "**Card padding:** 0px"
      - "**Element gap:** 15px"

  components:

    architectural_wordmark_display:
      vai_trò: "Brand identity được hiển thị như một layout device full-width"

      info: "Chữ 'NCDA' được đặt trong TWK Everett Regular ở 62px, line-height 0.80, letter-spacing -0.05em (#3.1px). Chuỗi chữ được đặt kích thước để tràn viewport theo chiều ngang và được phép chảy ra ngoài cả hai mép — việc cắt xén là có chủ đích. Không margin, không padding, nằm sát mép trang. Màu: #000000 trên nền trắng, hoặc #ffffff khi đặt trên dải #191919."

    dual_city_live_clock:
      vai_trò: "Utility header cố định — timestamp ở hai múi giờ"

      info: "Hai hiển thị thời gian monospaced ở góc trên bên trái, định dạng 'HH:MM:SS CITY'. TWK Everett 11px, weight 400, letter-spacing +0.04em, màu #000000. Cách nhau bởi khoảng cách ngang ~53px. Cách xử lý mono và tabular spacing giúp giây tích tắc mà không bị rung giật."

    menu_trigger:
      vai_trò: "Element navigation duy nhất — anchor góc trên bên phải"

      info: "Text 'Menu' đơn giản trong TWK Everett 15px, weight 400, màu #000000, không border, không background. Căn sát mép phải của viewport. Không icon, không chevron, không trang trí affordance."

    studio_description_block:
      vai_trò: "Tuyên bố nhận diện trên landing canvas"

      info: "Đoạn văn ba dòng đặt trong TWK Everett 15px, line-height ~1.44, max-width khoảng 400px. Tên studio 'NC Design and Architecture Ltd.' được in đậm hoặc nhấn nhẹ. Phần còn lại màu xám #808080 Concrete, với tên thương hiệu màu #000000. Đặt ở góc phần tư phía trên bên phải, cách mép trái của cột khoảng 59px, tạo ra một đối trọng bất đối xứng có chủ đích với wordmark bị cắt bên dưới."

    full_bleed_dark_band:
      vai_trò: "Section break / container ảnh dự án"

      info: "Một dải 100vw × full-height được tô màu #191919, không border, không radius, không shadow. Ảnh hoặc video lấp đầy dải từ mép này sang mép kia. Sự chuyển tiếp từ trắng sang dải này là đột ngột — không gradient, không fade. Hoạt động như một nhịp thở thị giác giữa các trang trắng."

    hairline_rule_link:
      vai_trò: "Inline link hoặc navigation divider"

      info: "Text link trong TWK Everett 15px, màu #000000, với border dưới 1px #808080 đóng vai trò underline. Không có thay đổi màu hover state — border chính là link, không phải màu text."

    time_indexed_label:
      vai_trò: "Metadata / tag tham chiếu dự án"

      info: "Text caption nhỏ ở 11px màu #808080, letter-spacing +0.04em, dùng cho số dự án, ngày tháng, hoặc label danh mục. Không background, không border, không hình dạng badge — chỉ là type xám có spacing nội dòng."

  do_s_and_don_ts:

    do:
      - "Dùng TWK Everett Regular (400) ở mọi kích thước từ 11px đến 62px — không bao giờ thêm weight bold hoặc medium, hệ thống một weight là điểm đặc trưng"
      - "Đặt wordmark hoặc bất kỳ display text nào ở 62px với letter-spacing -0.05em và line-height 0.80 để tạo hiệu ứng dải kiến trúc liên tục"
      - "Áp dụng +0.04em letter-spacing cho tất cả text ở 11px và nhỏ hơn — positive tracking là thứ làm cho caption đọc như chú thích kỹ thuật chứ không phải body type"
      - "Cắt type và hình ảnh ở mép viewport — việc chảy tràn là có cấu trúc, không bao giờ thêm padding để ngăn chặn nó"
      - "Dùng #191919 Onyx cho tất cả border và dải nền tối; dành #000000 Pure Black cho text fill nơi cần độ tương phản tối đa"
      - "Phân cách các section nội dung bằng dải #191919 full-bleed — không gradient, không chuyển tiếp mềm giữa trắng và tối"
      - "Giữ interactive elements chỉ là text — không button, không icon, không hình chữ nhật tô màu; dùng hairline rules 1px #808080 để chỉ thị link"

    don_t:
      - "Không thêm bất kỳ màu sắc nào — hệ thống là 0% màu sắc theo thiết kế, bất kỳ hue nào cũng phá vỡ ngôn ngữ monograph"
      - "Không thêm border-radius cho bất kỳ element nào — tất cả góc đều sắc 0px, hình tròn sẽ phá vỡ ngôn ngữ in ấn kiến trúc"
      - "Không dùng drop shadow hoặc hiệu ứng elevation — chiều sâu đến từ tỷ lệ và không gian âm, không phải từ shadow stack"
      - "Không đặt body hoặc paragraph type ở 62px — kích thước đó dành riêng cho wordmark và display headline hoạt động như kiến trúc layout"
      - "Không dùng quá hai kích thước type trên một màn hình — hệ thống dựa trên sự tương phản kích thước cực đoan (15px body vs 62px display), kích thước trung gian làm loãng nhịp điệu"
      - "Không thêm icon, mũi tên, hoặc glyph trang trí vào Menu trigger hoặc bất kỳ navigation nào — text label đơn giản là toàn bộ affordance"
      - "Không căn giữa body text — căn trái mọi thứ; căn giữa chỉ dành cho wordmark, mọi thứ khác treo từ mép trái"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Canvas chính — chính trang đó |"
    info: "| 1 | Onyx Black | `#191919` | Dải tối full-bleed cho showcase dự án và section break — container ảnh hoặc video, không phải trang trí |"

  elevation:

    info: "Hệ thống cố tình tránh tất cả hiệu ứng shadow và elevation. Chiều sâu và phân cấp đạt được hoàn toàn thông qua tương phản tỷ lệ (62px display so với 15px body), đảo ngược màu sắc (các trang trắng xen kẽ với dải #191919), và không gian âm. Không box-shadow, không blur, không z-axis layering. 'Elevation' duy nhất là dải tối literal ngắt quãng chuỗi trang trắng."

  imagery:

    info: "Ngôn ngữ thị giác là type-first và mang tính chất texture hơn là nhiếp ảnh. Hero là typography thuần túy — không ảnh, không minh họa, không element trang trí. Dải tối hoạt động như một container cho ảnh dự án hoặc video, nhưng bản thân nhiếp ảnh không hiển thị trong các frame được cung cấp. Cách xử lý dự kiến, dựa trên thể loại studio kiến trúc và hệ thống đơn sắc, là nhiếp ảnh nội thất độ tương phản cao: bố cục hình học sắc nét của không gian, vật liệu và ánh sáng, được trình bày không cắt xén và full-bleed trong các dải #191919. Không minh họa, không đồ họa trừu tượng, không icon hiển thị trong interface. Bản thân wordmark là tài sản thị giác chính."

  layout:

    info: "Full-bleed page không có max-width container. Hero section là một bố cục bất đối xứng: khối mô tả studio nằm ở góc phần tư phía trên bên phải (cách mép trái khoảng 59px, căn chỉnh đến khoảng mốc 45% theo chiều ngang), trong khi wordmark 'NCDA' bị cắt chiếm 60% phía dưới của viewport, chảy tràn ra mép trái và phải. Mép trên giữ một hàng utility mỏng: đồng hồ hai thành phố ở góc trên bên trái, Menu trigger ở góc trên bên phải, với không gian trắng rộng lớn ở giữa. Nhịp điệu section xen kẽ giữa các trang canvas trắng và dải tối #191919 full-bleed — mỗi dải có thể là một project showcase hoặc bộ ảnh. Nội dung trong các trang trắng được căn trái và dựa trên cột hơn là căn giữa. Navigation tối thiểu: một Menu trigger duy nhất, không có nav bar hiển thị, không breadcrumb, không cấu trúc footer hiển thị trong các frame."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (chính), #808080 (phụ), #ffffff (inverse trên nền tối)"
    - "background: #ffffff (canvas), #191919 (dải tối)"
    - "border: #191919 (cấu trúc), #808080 (hairline/link)"
    - "accent: không — hệ thống là 0% màu sắc"
    - "primary action: không có màu CTA riêng biệt"

    example_component_prompts:
    - "Xây dựng landing hero: canvas trắng #ffffff. Góc trên bên trái: hai timestamp monospaced '09:58:21 HK' và '21:58:21 NYC' trong TWK Everett 11px, weight 400, letter-spacing +0.04em (0.44px), màu #000000, cách nhau 53px gap. Góc trên bên phải: 'Menu' trong TWK Everett 15px, weight 400, #000000, căn phải. Góc phần tư phía trên bên phải: khối mô tả ~400px rộng, 'NC Design and Architecture Ltd.' màu #000000, phần còn lại màu #808080, TWK Everett 15px, line-height 1.44, padding trái 59px. 60% phía dưới: 'NCDA' trong TWK Everett 62px, line-height 0.80, letter-spacing -3.1px (-0.05em), #000000, kích thước tràn viewport theo chiều ngang và cắt ở cả hai mép."

    - "Xây dựng một project section band: hình chữ nhật full-viewport-width, background #191919, height 100vh, không border, không radius, không shadow. Ảnh bên trong lấp đầy dải từ mép này sang mép kia không padding hoặc margin."

    - "Xây dựng một time-indexed label: text đơn giản trong TWK Everett 11px, weight 400, màu #808080, letter-spacing +0.04em, không background, không border, không hình dạng badge — chỉ là type xám có spacing nội dòng với nội dung."

  typographic_signature:

    info: "Hệ thống typography một weight (chỉ 400) trên dải kích thước 5x là bất thường và có chủ đích. Hầu hết các design system sử dụng nhiều weight để tạo phân cấp; NCDA chỉ dùng tỷ lệ. Kết quả là một giọng nói không bao giờ la hét — ngay cả display 62px cũng đọc như uy quyền điềm tĩnh hơn là tác động thị giác. Negative tracking ở kích thước display (-0.05em) thắt chặt wordmark thành một nét gần như liên tục, và positive tracking ở kích thước caption (+0.04em) làm cho metadata có cảm giác kỹ thuật và được chú thích. Sự phân cực tracking kép này là một điểm đặc trưng không bao giờ nên được làm phẳng thành letter-spacing 'bình thường'."

  similar_brands:

    - "**Vitra** — Cùng ngôn ngữ architectural-monograph: không gian trắng rộng lớn, layout đơn sắc dẫn dắt bởi type, dải ảnh tối full-bleed, không màu trang trí"
    - "**M/M Paris** — Tỷ lệ typography cực đoan, wordmark bị cắt, không gian âm gallery-catalogue áp dụng cho site studio sáng tạo"
    - "**Pentagram** — Chủ nghĩa tối giản biên tập với hệ thống type một weight, hairline rules, và lưới ảnh full-bleed phá vỡ các trang trắng"
    - "**Dieter Rams archive sites** — Ảnh hưởng Swiss-design: góc sắc, không shadow, neo-grotesque type một weight, và mật độ thông tin thông qua spacing thay vì trang trí"
    - "**Schiattarella Associati** — Site studio kiến trúc dẫn đầu với wordmark bị cắt khổng lồ ở tỷ lệ display và để ảnh dự án mang các dải tối"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-onyx: #191919;
          --color-pure-black: #000000;
          --color-paper: #ffffff;
          --color-concrete: #808080;
        
          /* Typography — Font Families */
          --font-twk-everett: 'TWK Everett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-twk-everett-mono: 'TWK Everett Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.44;
          --tracking-caption: 0.44px;
          --text-body: 15px;
          --leading-body: 1.44;
          --tracking-body: -0.15px;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.21px;
          --text-heading: 32px;
          --leading-heading: 1.35;
          --tracking-heading: -0.32px;
          --text-display: 62px;
          --leading-display: 0.8;
          --tracking-display: -3.1px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-26: 26px;
          --spacing-28: 28px;
          --spacing-53: 53px;
          --spacing-59: 59px;
          --spacing-64: 64px;
          --spacing-150: 150px;
          --spacing-188: 188px;
        
          /* Layout */
          --section-gap: 64-150px;
          --card-padding: 0px;
          --element-gap: 15px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-onyx-black: #191919;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-onyx: #191919;
          --color-pure-black: #000000;
          --color-paper: #ffffff;
          --color-concrete: #808080;
        
          /* Typography */
          --font-twk-everett: 'TWK Everett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-twk-everett-mono: 'TWK Everett Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.44;
          --tracking-caption: 0.44px;
          --text-body: 15px;
          --leading-body: 1.44;
          --tracking-body: -0.15px;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.21px;
          --text-heading: 32px;
          --leading-heading: 1.35;
          --tracking-heading: -0.32px;
          --text-display: 62px;
          --leading-display: 0.8;
          --tracking-display: -3.1px;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-26: 26px;
          --spacing-28: 28px;
          --spacing-53: 53px;
          --spacing-59: 59px;
          --spacing-64: 64px;
          --spacing-150: 150px;
          --spacing-188: 188px;
        }