altason___style_reference:
  info: "> architectural monochrome broadsheet"

  theme: "light"

  altason_là_một_portfolio_canvas: "lưới editorial thuần đen trên trắng, nơi wordmark Grotesk cỡ lớn, medium-weight là hero và bản thân tác phẩm chính là sản phẩm. Hệ thống hoàn toàn 0% chromatic — mọi khoảnh khắc thị giác đều được tạo nên từ mực, giấy và khoảng trắng âm giữa chúng. Các component không có border ngoại trừ đường kẻ 1px màu đen mảnh như sợi tóc, lặng lẽ phân chia trang; không có shadow, không gradient, không bo góc, không màu nhấn. Type làm tất cả công việc, và nó nói to bằng cách cực kỳ lớn và chỉ ở weight 500 — sự kiềm chế của một medium weight ở 288px là signature move. Mật độ thoáng và có tính kiến trúc: các section thở với vertical padding 112–288px, nội dung nằm trong lưới ba cột, và mọi bề mặt đều là mặt phẳng, không có phân cấp độ cao. Một AI agent nên nghĩ về điều này như thiết kế một trang tạp chí in, không phải một SaaS dashboard."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, border mảnh, đường kẻ cấu trúc, border ảnh, fill heading — mực đen chủ đạo vẽ nên toàn bộ trang |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, chữ trắng trên nền tối — bề mặt để chữ đen lên tiếng |"
    info: "| Charcoal Plate | `#212121` | `--color-charcoal-plate` | Khối bề mặt tối và nền ảnh nơi chữ trắng đặt lên — một giải pháp thay thế mềm hơn cho đen thuần ở các vùng tối lớn |"
    info: "| Silver Hairline | `#b0b0b0` | `--color-silver-hairline` | Đường phân cách tinh tế và link phụ nhẹ nhàng — một mid-gray lặng lẽ lùi về sau chữ đen mà không biến mất |"

  tokens___typography:

    haas_grotesk_ds_pro___display_và_section_wordmarks___dùng_ở_48_288px_với_leading_cực_kỳ_chặt_0_77_0_80_để_display_type_nhiều_dòng_gần_như_chạm_nhau__tỷ_lệ_nén_compressed_proportions_của_biến_thể_ds_cho_phép_headline_288px_vừa_vặn_trong_một_viewport_mà_không_phá_vỡ_nhịp_điệu__thay_thế__neue_haas_grotesk_display__hoặc_akzidenz_grotesk_pro_medium____font_haas_grotesk_ds_pro:
      - "**Thay thế:** Neue Haas Grotesk Display 65 Medium, hoặc Inter Tight 500"
      - "**Weights:** 500"
      - "**Sizes:** 48px, 106px, 230px, 288px"
      - "**Line height:** 0.77–1.20"
      - "**Letter spacing:** normal (0)"
      - "**OpenType features:** `\"calt\" on, \"kern\" on, \"liga\" on, \"rclt\" on, \"rlig\" on, \"rvrn\" on`"
      - "**Vai trò:** Display và section wordmarks — dùng ở 48–288px với leading cực kỳ chặt (0.77–0.80) để display type nhiều dòng gần như chạm nhau. Tỷ lệ nén của biến thể DS cho phép headline 288px vừa vặn trong một viewport mà không phá vỡ nhịp điệu. Thay thế: Neue Haas Grotesk Display, hoặc Akzidenz-Grotesk Pro Medium"

    haas_grotesk_tx_pro___body_copy__caption__label_ảnh__link_navigation__ui_text__weight_400_cho_body__weight_500_cho_label_navigation_và_nhấn_mạnh__kích_thước_36px_với_line_height_0_90_tạo_ra_subheading_chặt_chẽ__kết_nối_giữa_body_và_display_scales__thay_thế__neue_haas_grotesk_text__hoặc_inter____font_haas_grotesk_tx_pro:
      - "**Thay thế:** Neue Haas Grotesk Text, hoặc Inter 400/500"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 18px, 36px"
      - "**Line height:** 0.90–1.30"
      - "**Letter spacing:** normal (0)"
      - "**OpenType features:** `\"calt\" on, \"kern\" on, \"liga\" on, \"rclt\" on, \"rlig\" on, \"rvrn\" on`"
      - "**Vai trò:** Body copy, caption, label ảnh, link navigation, UI text. Weight 400 cho body, weight 500 cho label navigation và nhấn mạnh. Kích thước 36px với line-height 0.90 tạo ra subheading chặt chẽ, kết nối giữa body và display scales. Thay thế: Neue Haas Grotesk Text, hoặc Inter"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.2 | — | `--text-caption` |"
      info: "| body | 18px | 1.3 | — | `--text-body` |"
      info: "| subheading | 36px | 0.9 | — | `--text-subheading` |"
      info: "| heading-sm | 48px | 0.8 | — | `--text-heading-sm` |"
      info: "| heading | 106px | 0.8 | — | `--text-heading` |"
      info: "| heading-lg | 230px | 0.77 | — | `--text-heading-lg` |"
      info: "| display | 288px | 0.77 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

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

    layout:

      - "**Card padding:** 20px"
      - "**Element gap:** 8-10px"

  components:

    display_wordmark:
      vai_trò: "Tên thương hiệu hoặc tiêu đề section được hiển thị dưới dạng type cỡ lớn"

      info: "Tên thương hiệu 'Atlason' được render bằng Haas Grotesk DS Pro weight 500 ở 230–288px, line-height 0.77, đen thuần trên nền trắng. Đây là yếu tố thị giác chính của trang — nó chiếm gần như toàn bộ chiều cao của một cột đơn. Không trang trí, không gạch chân, không màu sắc. Chỉ riêng tỷ lệ khổng lồ và leading chặt chẽ tạo nên sự hiện diện của wordmark."

    section_heading:
      vai_trò: "Nhãn cột hoặc section trong lưới ba cột"

      info: "Các từ như 'Works' và 'More' được đặt bằng Haas Grotesk DS Pro weight 500 ở 106–230px, line-height 0.80, đen trên trắng. Kích thước đủ lớn để neo cột của chúng trong khi vẫn chừa không gian cho nội dung bên dưới. Bước kích thước giữa brand wordmark (288px) và các section label này (106–230px) tạo ra một phân cấp typographic rõ ràng chỉ qua kích thước, không phải weight."

    portfolio_tile:
      vai_trò: "Card ảnh hiển thị thumbnail dự án kèm caption"

      info: "Ảnh hình chữ nhật (không border-radius) với border 1px đen (borderColor từ #000000), theo sau là caption bằng Haas Grotesk TX Pro weight 400 ở 16px, line-height 1.20, màu đen. Border 1px đen đóng khung ảnh như một bản in bảo tàng. Không hiệu ứng hover, không shadow, không overlay. Ảnh nằm trực tiếp trên canvas trắng với gap 20–32px giữa các tile."

    footer_contact_block:
      vai_trò: "Footer nhiều cột với địa chỉ studio, liên hệ và thông tin báo chí"

      info: "Được chia thành bốn cột hẹp bởi border dọc 1px mảnh (màu đen). Label ('Visit', 'Contact', 'Connect', 'Follow') bằng Haas Grotesk TX Pro weight 500 ở 16px, giá trị bên dưới bằng weight 400 ở 16px. Đen trên trắng, 20px padding-top/bottom, 48px padding-left cho cột đầu tiên. Không background fill, không divider nặng hơn 1px."

    three_column_page_grid:
      vai_trò: "Cấu trúc layout chính chia trang thành ba cột bằng nhau"

      info: "Layout full-bleed với ba cột bằng nhau được phân cách bởi đường kẻ dọc 1px màu đen. Cột trái chứa brand wordmark và footer contact info; cột giữa chứa lưới portfolio 'Works'; cột phải chứa section 'More'. Grid không có max-width — nó kéo dài edge-to-edge. Khoảng cách cột được tạo bởi border 1px, không phải padding."

    hairline_rule:
      vai_trò: "Border cấu trúc 1px dùng để phân chia trang"

      info: "Đường liền 1px màu #000000 dùng để phân cách cột, đóng khung ảnh và chia các section footer. Rule là công cụ cấu trúc duy nhất trong hệ thống — không có shadow, không background fill, không card container. Phân cấp thị giác đến hoàn toàn từ vị trí đặt các rule này."

    image_frame:
      vai_trò: "Xử lý border cho tất cả ảnh portfolio và nội dung"

      info: "Mọi ảnh đều được bọc trong border 1px đen (#000000). Không padding giữa ảnh và border, không radius, không shadow. Điều này mang lại cho tất cả ảnh chất lượng của những bản in ảnh đã được đóng khung trong một portfolio kiến trúc."

    navigation_link:
      vai_trò: "Mục navigation dạng text trong footer hoặc header"

      info: "Văn bản thuần bằng Haas Grotesk TX Pro weight 500 ở 16px, đen trên trắng. Không gạch chân mặc định; link có thể dùng border dưới 1px đen để nhấn mạnh. Không thay đổi màu hover, không background fill. Navigation là typographic, không phải buttonographic."

    dark_image_panel:
      vai_trò: "Ảnh hoặc section lớn với nền tối/charcoal nơi chữ trắng đặt lên"

      info: "Bề mặt được fill bằng #212121 chứa một ảnh lớn hoặc khối chữ trắng (ví dụ: 'Everything we imagine can be made.'). Chữ trắng bằng Haas Grotesk TX Pro weight 500 ở 18–36px. Panel tối tạo ra sự tương phản tonal duy nhất trong hệ thống — đây là nơi reverse type xuất hiện, và nó hoạt động như một khoảng dừng thị giác giữa các section trắng."

  do_s_and_don_ts:

    do:
      - "Dùng Haas Grotesk DS Pro weight 500 ở 48–288px cho tất cả display headings với line-height 0.77–0.80"
      - "Đặt tất cả border-radius thành 0px — góc luôn sắc"
      - "Dùng border 1px solid #000000 để đóng khung mọi ảnh và phân cách mọi cột"
      - "Dùng 112–288px padding-bottom cho các ngắt section lớn để tạo khoảng thở kiến trúc"
      - "Dùng weight 500 (không phải 700) để nhấn mạnh — medium weight ở kích thước lớn mang tất cả thẩm quyền cần thiết"
      - "Đặt body text bằng Haas Grotesk TX Pro weight 400 ở 18px với line-height 1.30"
      - "Dùng #212121 làm bề mặt tối duy nhất — dành #000000 cho text và border, không phải fill lớn"

    don_t:
      - "Không bao giờ đưa màu sắc chromatic vào — bảng màu chỉ gồm đen, trắng và xám"
      - "Không bao giờ thêm box-shadow, drop-shadow, hoặc bất kỳ hiệu ứng độ cao nào — trang là phẳng"
      - "Không bao giờ dùng border-radius lớn hơn 0px trên bất kỳ element nào"
      - "Không bao giờ dùng weight 700+ cho headings — medium (500) là weight nặng nhất trong hệ thống"
      - "Không bao giờ đặt display type với line-height trên 0.85 — leading chặt chẽ là thứ làm cho type cỡ lớn có cảm giác cấu trúc"
      - "Không bao giờ dùng hover hoặc active state có màu trên link — navigation hoàn toàn là typographic và tĩnh"
      - "Không bao giờ căn giữa text trong cột — tất cả text căn trái trong cột của nó"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Paper Canvas | `#ffffff` | Nền trang cơ bản — bề mặt mặc định cho tất cả nội dung |"
    info: "| 2 | Charcoal Plate | `#212121` | Bề mặt nhấn tối cho image panel và reverse-type blocks |"
    info: "| 3 | Ink Ground | `#000000` | Bề mặt đen hoàn toàn được dùng một cách tiết kiệm cho những khoảnh khắc tương phản tối đa |"

  elevation:

    info: "Hệ thống cố tình tránh shadow như một cơ chế tạo độ cao. Tất cả sự phân cách cấu trúc đều đạt được thông qua hairline rules 1px và tương phản tonal (trắng → #212121 → #000000). Không có trục z — trang là một mặt phẳng editorial phẳng nơi phân cấp đến từ tỷ lệ typographic, không phải chiều sâu."

  imagery:

    info: "Imagery là ảnh portfolio và ảnh sản phẩm được xử lý như archival plates: mỗi ảnh được đóng khung bởi border 1px đen, nằm trực tiếp trên canvas trắng không có card bao quanh, và có caption bằng Grotesk 16px bên dưới. Không ảnh lối sống, không người trong ảnh bối cảnh, không color grading — bản thân tác phẩm (nội thất, đồ vật, không gian nội thất) được chụp sạch sẽ và trình bày không cầu kỳ. Ảnh được sắp xếp trong lưới 2 cột ở section 'Works' và một cột đơn ở section 'More', với khoảng trắng rộng rãi giữa các hàng. Tổng thể visual register giống một chuyên khảo kiến trúc hoặc thiết kế: tài liệu, không phải tiếp thị."

  layout:

    info: "Lưới ba cột full-bleed không có max-width và không có container căn giữa. Trang phân chia ngay lập tức ở đầu thành ba cột bằng nhau được phân cách bởi đường kẻ dọc 1px đen: cột trái chứa brand wordmark ('Atlason' ở ~230px) và footer contact block; cột giữa chứa section heading 'Works' và lưới portfolio 2 cột gồm ảnh đóng khung với caption; cột phải chứa section heading 'More' và một ảnh tối lớn đơn với reverse-type caption. Không có navigation bar — trang là một trải nghiệm full-viewport duy nhất. Footer nằm ở cuối cột trái, căn chỉnh theo baseline của trang. Khoảng cách section mang tính kiến trúc: 112–288px vertical padding phân cách các vùng chính. Không có band xen kẽ, không có chuyển màu nền giữa các section — mọi thứ đều nằm trên cùng một mặt phẳng trắng."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 (1px solid)"
    - "dark surface: #212121"
    - "muted/divider: #b0b0b0"
    - "primary action: không có màu CTA riêng biệt"

    3_5_example_component_prompts:

    - "Tạo một portfolio tile: canvas trắng, border 1px solid #000000 quanh ảnh hình chữ nhật, gap 20px bên dưới. Caption bằng Haas Grotesk TX Pro weight 400, 16px, #000000, line-height 1.20, căn trái ngay dưới ảnh."

    - "Tạo một display wordmark: từ 'Studio' bằng Haas Grotesk DS Pro weight 500 ở 230px, #000000, line-height 0.77, căn trái, chiếm toàn bộ chiều cao của cột đầu tiên trong layout ba cột. Không trang trí, không gạch chân, không màu sắc."

    - "Tạo một footer contact block: bốn cột hẹp được phân cách bởi border dọc 1px solid #000000, 20px padding-top, 48px padding-left trên cột đầu tiên. Label bằng Haas Grotesk TX Pro weight 500 ở 16px, giá trị bằng weight 400 ở 16px, tất cả #000000 trên #ffffff."

    - "Tạo một dark image panel: nền #212121 lấp đầy một cột, chứa một dòng chữ trắng duy nhất bằng Haas Grotesk TX Pro weight 500 ở 36px, line-height 0.90, căn bottom-left với 20px padding."

    - "Tạo một three-column page grid: layout trắng full-bleed được chia thành ba cột bằng nhau bởi đường kẻ dọc 1px solid #000000. Không max-width, không căn giữa, không gap — các rule CHÍNH LÀ gutter. Mỗi cột chứa stack nội dung dọc riêng của nó."

  typography_philosophy:

    info: "Hệ thống sử dụng chính xác hai font từ cùng một family — Haas Grotesk DS Pro (Display) cho headings cỡ lớn và Haas Grotesk TX Pro (Text) cho mọi thứ khác. Signature move là weight 500 ở 230–288px: medium weight, không phải bold, ở kích thước cực đoan. Điều này tạo ra type vừa có tính kiến trúc vừa tự tin mà không hung hăng. Line-height dưới 0.85 ở kích thước display có nghĩa là các heading nhiều dòng gần như chạm nhau, mang lại cho text một chất lượng nguyên khối, điêu khắc. Body text giữ ở 16–18px với leading 1.20–1.30 thoáng để dễ đọc. Không có italic, không condensed, không biến thể display-script — hệ thống có một giọng nói duy nhất và nói to thông qua tỷ lệ một mình."

  border_system:

    info: "Borders là công cụ cấu trúc chính. Mọi ảnh đều có frame 1px #000000. Mọi ranh giới cột đều là đường kẻ dọc 1px #000000. Mọi section footer đều được chia bởi đường kẻ dọc 1px. Không có card được fill background, không có container được xác định bởi shadow, không có chip màu. Nếu một thứ gì đó cần được tách khỏi môi trường xung quanh, nó sẽ có một đường kẻ 1px đen. Nếu một thứ gì đó cần được nhóm lại, nó sẽ chia sẻ một đường kẻ với các hàng xóm của nó. Cách tiếp cận border-first này là thứ làm cho hệ thống đọc như editorial print thay vì digital UI."

  similar_brands:

    - "**Pentagram** — Cùng cấu trúc agency-portfolio-as-homepage với lưới ba cột, wordmark cỡ lớn làm hero element, và không có điểm nhấn màu — thiết kế CHÍNH LÀ portfolio"
    - "**Mass Moca / các site bảo tàng nghệ thuật thể chế** — Cùng cách tiếp cận editorial broadsheet: canvas trắng full-bleed, rule 1px đen, heading Grotesk khổng lồ, image frame phẳng với caption"
    - "**Vitsoe** — Cùng sự kiềm chế monochrome đen-trắng với display type Helvetica-family cỡ lớn và ảnh sản phẩm được đóng khung bởi hairline borders"
    - "**Order of Design (hoặc các studio kiến trúc tương tự)** — Cùng cách trình bày portfolio-as-monograph: tác phẩm được hiển thị dưới dạng archival plates với border 1px đen, caption bằng Grotesk sạch sẽ, được bố trí trong lưới cột chặt chẽ"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-charcoal-plate: #212121;
          --color-silver-hairline: #b0b0b0;
        
          /* Typography — Font Families */
          --font-haas-grotesk-ds-pro: 'Haas Grotesk DS Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grotesk-tx-pro: 'Haas Grotesk TX Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.2;
          --text-body: 18px;
          --leading-body: 1.3;
          --text-subheading: 36px;
          --leading-subheading: 0.9;
          --text-heading-sm: 48px;
          --leading-heading-sm: 0.8;
          --text-heading: 106px;
          --leading-heading: 0.8;
          --text-heading-lg: 230px;
          --leading-heading-lg: 0.77;
          --text-display: 288px;
          --leading-display: 0.77;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-112: 112px;
        
          /* Layout */
          --card-padding: 20px;
          --element-gap: 8-10px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper-canvas: #ffffff;
          --surface-charcoal-plate: #212121;
          --surface-ink-ground: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-charcoal-plate: #212121;
          --color-silver-hairline: #b0b0b0;
        
          /* Typography */
          --font-haas-grotesk-ds-pro: 'Haas Grotesk DS Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas-grotesk-tx-pro: 'Haas Grotesk TX Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.2;
          --text-body: 18px;
          --leading-body: 1.3;
          --text-subheading: 36px;
          --leading-subheading: 0.9;
          --text-heading-sm: 48px;
          --leading-heading-sm: 0.8;
          --text-heading: 106px;
          --leading-heading: 0.8;
          --text-heading-lg: 230px;
          --leading-heading-lg: 0.77;
          --text-display: 288px;
          --leading-display: 0.77;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-112: 112px;
        }