akash_tyagi___style_reference:
  info: "> tường gallery nửa đêm với điểm nhấn hồng neon"

  theme: "dark"

  info: "Akash Tyagi là một portfolio editorial tối màu, được dàn dựng như một canvas nửa đêm với chữ ấm giống giấy da và một điểm nhấn hồng neon duy nhất — đóng vai trò như dấu câu chức năng chứ không phải trang trí. Bố cục thoáng đãng — khoảng cách section 200px, hai cột bất đối xứng rộng rãi, và label display đặt trong Geist Pixel Triangle tạo nhịp điệu gallery-wall, nơi mỗi dự án có khoảng lặng cần thiết. Mọi màu trung tính đều mang undertone nâu ấm, cố tình tránh xa tông xanh-xám lạnh của các portfolio công nghệ thông thường. Các component tối giản và phẳng: pill CTA, hairline divider, status dot, và ảnh dự án lớn không viền — không có elevation, không gradient, không trang trí ngoài typography và một điểm nhấn màu duy nhất."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Obsidian Canvas | `#000000` | `--color-obsidian-canvas` | Nền trang, bề mặt card, chữ đảo ngược trên nền hồng |"
    info: "| Parchment | `#efe6d8` | `--color-parchment` | Chữ body và heading chính — tông gần trắng ấm với undertone nâu, thay thế cho trắng lạnh thường thấy trong dark UI |"
    info: "| Bone | `#aca69c` | `--color-bone` | Chữ phụ, viền button, metadata — xám ấm trung tone |"
    info: "| Ash | `#736e68` | `--color-ash` | Chữ body mờ, viền link nhẹ, label không hoạt động |"
    info: "| Charcoal | `#605c56` | `--color-charcoal` | Hairline divider, viền ít quan trọng, gạch chân heading trên nền tối |"
    info: "| Neon Petal | `#ffa1f7` | `--color-neon-petal` | Button hành động chính, trạng thái nav active, marker được chọn, điểm nhấn heading thỉnh thoảng — dấu câu màu duy nhất trong hệ thống |"
    info: "| Acid Lime | `#4dff00` | `--color-acid-lime` | Lớp phủ xanh cho nền highlight, dải trang trí, và điểm nhấn nhẹ phía sau nội dung. Dùng làm accent hỗ trợ, không phải màu trạng thái |"

  tokens___typography:

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

    geist___typeface_ui_và_body_chính___weight_medium_và_semibold__tracking_âm_chặt_từ__0_013em_đến__0_031em__dùng_cho_body_copy__link__navigation__và_heading_nhỏ_____font_geist:
      - "**Thay thế:** Inter, Satoshi"
      - "**Weights:** 500, 600"
      - "**Sizes:** 13px, 14px, 15px"
      - "**Line height:** 1.14, 1.23, 1.33"
      - "**Letter spacing:** -0.031em tại 13px, -0.029em tại 14px, -0.013em tại 15px"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Vai trò:** Typeface UI và body chính — weight medium và semibold, tracking âm chặt từ -0.013em đến -0.031em. Dùng cho body copy, link, navigation, và heading nhỏ."

    geist_pixel_triangle___typeface_display_và_section_label___biến_thể_pixel_decorative_dùng_cho_section_header_viết_hoa_như__selected_work__và_khoảng_năm__2015___2026__xử_lý_pixel_tạo_trọng_lượng_editorial_mà_không_cần_serif_____font_geist_pixel_triangle:
      - "**Thay thế:** Space Mono Bold, Departure Mono"
      - "**Weights:** 400"
      - "**Sizes:** 30px"
      - "**Line height:** 1.33"
      - "**Letter spacing:** -0.033em tại 30px"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Vai trò:** Typeface display và section-label — biến thể pixel/decorative dùng cho section header viết hoa như 'SELECTED WORK' và khoảng năm '2015 — 2026'. Xử lý pixel tạo trọng lượng editorial mà không cần serif."

    geist_mono___typeface_metadata___timestamp__email__label_kỹ_thuật__năm__monospace_báo_hiệu_ngôn_ngữ_hệ_thống_dữ_liệu__đối_lập_với_body_proportional_____font_geist_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 13px"
      - "**Line height:** 1.23, 1.54"
      - "**Letter spacing:** -0.031em tại 13px"
      - "**OpenType features:** `\"blwf\" on, \"cv03\" on, \"cv04\" on, \"cv09\" on, \"cv11\" on`"
      - "**Vai trò:** Typeface metadata — timestamp, email, label kỹ thuật, năm. Monospace báo hiệu ngôn ngữ hệ thống/dữ liệu, đối lập với body proportional."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-lg | 15px | 1.4 | -0.2px | `--text-body-lg` |"
      info: "| display | 30px | 1.33 | -1px | `--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: "| 104 | 104px | `--spacing-104` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| pills | 1000px |"
      info: "| buttons | 40px |"
      info: "| indicators | 1000px |"

    layout:

      - "**Page max-width:** 1400px"
      - "**Section gap:** 200px"
      - "**Card padding:** 0px"
      - "**Element gap:** 16px"

  components:

    pill_cta_button:
      vai_trò: "Kích hoạt hành động chính"

      info: "Button pill đầy, nền #ffa1f7, chữ Obsidian (#000000), border-radius 40px, padding dọc 12px × padding ngang 24px. Geist 500 tại 13px. Dùng cho hành động quan trọng nhất trên màn hình (ví dụ: 'Book an intro call')."

    ghost_text_link:
      vai_trò: "Navigation phụ và inline link"

      info: "Không nền, chữ Parchment (#efe6d8) với gạch chân 1px Ash (#736e68) hoặc Bone (#aca69c). Geist 500 tại 13–14px. Gạch chân chỉ xuất hiện khi hover, không hiển thị ở trạng thái nghỉ."

    status_availability_indicator:
      vai_trò: "Tín hiệu sẵn sàng trực tiếp"

      info: "Vòng tròn Acid Lime (#4dff00) 8px với border-radius 1000px, đi kèm chữ Parchment (#efe6d8) 'Available for work' tại 13px Geist 500. Chấm xanh là element xanh duy nhất trong toàn bộ hệ thống."

    section_header_with_date_range:
      vai_trò: "Phân cách section editorial"

      label_hai_phần: "tên section bên trái, khoảng năm bên phải. Đặt trong Geist Pixel Triangle 400 tại 30px, Parchment (#efe6d8) cho label, Ash (#736e68) cho khoảng năm. Letter-spacing chặt -0.033em. Cách nội dung 104px khoảng trống dọc."

    project_showcase_card:
      vai_trò: "Mục portfolio dự án"

      info: "Ảnh dự án full-width hiển thị edge-to-edge trên canvas Obsidian, không có card chrome. Không viền, không shadow, không radius — ảnh CHÍNH LÀ card. Chú thích/mô tả xuất hiện bên dưới trong Geist 500, 14px, chữ Parchment."

    minimal_header_bar:
      vai_trò: "Nhận diện và dấu thời gian"

      layout_một_hàng: "tên designer bên trái ('Akash Tyagi' trong Geist 600, Parchment), thời gian hiện tại và email bên phải (Geist Mono 400, Ash). Không logo, không nav link, không hamburger — header là nhận diện + đồng hồ, không hơn."

    two_column_intro_block:
      vai_trò: "Tuyên bố cá nhân"

      info: "Khối văn bản hai cột bất đối xứng. Cột trái: bio ngắn gọn (2–3 đoạn ngắn). Cột phải: để trống hoặc chứa CTA + status. Khoảng cách cột 24–48px. Body text trong Geist 500, 14px, Parchment với khoảng cách đoạn 16px."

    footer_social_link:
      vai_trò: "Tham chiếu hồ sơ bên ngoài"

      info: "Link văn bản thuần — 'X.com', 'LinkedIn', 'Dribbble' — đặt trong Geist Mono 400, 13px, màu Ash (#736e68). Không icon, không badge. Cách nhau bằng khoảng cách 24px đều đặn."

  do_s_and_don_ts:

    do:
      - "Dùng #000000 làm nền chung cho mọi màn hình — không bao giờ đưa vào nền sáng hơn hoặc có màu"
      - "Chỉ dùng #ffa1f7 cho hành động chính duy nhất trên mỗi view; coi nó là giọng nói màu duy nhất của hệ thống"
      - "Đặt section label trong Geist Pixel Triangle 30px với tracking -0.033em để tạo trọng lượng editorial"
      - "Duy trì khoảng cách dọc 200px giữa các section chính để giữ nhịp điệu gallery-wall"
      - "Dùng tông trung tính ấm (#efe6d8 → #aca69c → #736e68 → #605c56) theo thứ tự giảm dần cho phân cấp chữ"
      - "Dùng chấm xanh (#4dff00) độc quyền cho trạng thái trực tiếp/sẵn sàng — không bao giờ dùng làm accent chung hoặc màu button"
      - "Hiển thị mọi ảnh dự án edge-to-edge, không card chrome, radius, hoặc shadow"

    don_t:
      - "Không bao giờ dùng box-shadow, gradient, hoặc glow effect — sự phẳng là điểm chính"
      - "Không bao giờ dùng #ffa1f7 cho body text, nền, hoặc mục đích trang trí — nó chỉ là màu hành động"
      - "Không bao giờ bo tròn góc ảnh trên project showcase — ảnh phải chạm cạnh canvas"
      - "Không bao giờ thêm nhiều hơn một filled CTA trên mỗi màn hình — hệ thống là single-action"
      - "Không bao giờ dùng xanh-xám lạnh hoặc trắng tinh khiết cho chữ — bảng màu nâu ấm là bản sắc"
      - "Không bao giờ dùng icon trong header hoặc footer — chỉ link văn bản thuần"
      - "Không bao giờ giảm khoảng cách section xuống dưới 104px — khoảng trắng rộng rãi là cấu trúc, không phải tùy chọn"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#000000` | Nền trang full-bleed — đen thật để tương phản tối đa với chữ ấm |"
    info: "| 1 | Project Surface | `#000000` | Khung ảnh dự án và nội dung nằm trực tiếp trên canvas, không có card elevation |"
    info: "| 2 | Accent Surface | `#ffa1f7` | Pill button đảo ngược và marker được chọn — bề mặt màu duy nhất |"

  elevation:

    info: "Không có shadow. Các bề mặt được phân cách hoàn toàn bằng tông màu và khoảng trắng. Elevation được thể hiện qua thang typography và spacing rộng rãi, không phải box-shadow stack. Sự phẳng này là có chủ đích — shadow sẽ tạo nhiễu thị giác trên portfolio coi mỗi dự án như một khung gallery."

  imagery:

    info: "Product photography chiếm ưu thế — ảnh mockup thiết bị lớn, độ phân giải cao (tablet, điện thoại) chụp trong bối cảnh lifestyle hoặc chạng vạng với gradient bầu trời ấn tượng. Ảnh full-bleed, chiếm toàn bộ chiều rộng viewport trong card project showcase. Không bo tròn góc, không mask, không khung — ảnh chạm cạnh canvas tối edge-to-edge. Không có illustration hoặc iconography ngoài một chấm trạng thái xanh duy nhất. Nhịp điệu thị giác là: khối văn bản → khoảng lặng → ảnh sản phẩm lớn → khoảng lặng → khối văn bản. Photography là nội dung thị giác duy nhất; UI screenshot bên trong ảnh sản phẩm hiển thị dark UI với chữ ấm, phản chiếu thẩm mỹ của chính portfolio."

  layout:

    info: "Canvas tối full-bleed với nội dung căn giữa, max-width 1400px. Trang đọc như một cuộn dọc gồm các dải văn bản và ảnh xen kẽ với khoảng thở dọc cực lớn (200px giữa các section). Không sidebar, không sticky nav, không mega-menu — header là một dòng tĩnh duy nhất. Hero pattern: khối văn bản hai cột bất đối xứng (bio trái, CTA phải) trên nền đen thuần, không có hero image. Nội dung sắp xếp xen kẽ giữa section chỉ văn bản và ảnh dự án full-bleed, tạo nhịp điệu gallery-wall. Section label ('SELECTED WORK 2015 — 2026') đóng vai trò như divider typography ngang. Grid là ẩn — không có cột hoặc gutter hiển thị, nội dung chảy trong container max-width với margin rộng rãi. Navigation được rút gọn thành tên + thời gian + email trong header và ba text link trong footer."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #efe6d8 (Parchment)"
    - "background: #000000 (Obsidian)"
    - "border: #605c56 (Charcoal) / #736e68 (Ash)"
    - "accent: #ffa1f7 (Neon Petal)"
    - "status: #4dff00 (Acid Lime) — chỉ dùng cho chấm availability"
    - "primary action: #ffa1f7 (filled action)"

    info: "Example Component Prompts:"

    - "Tạo section header: padding trên 200px. Label 'SELECTED WORK' căn trái trong Geist Pixel Triangle 30px, #efe6d8, letter-spacing -1px. Khoảng năm '2015 — 2026' căn phải trong Geist Mono 13px, #736e68."

    - "Tạo status row: vòng tròn xanh 8px (#4dff00, radius 1000px) theo sau là 'Available for work' trong Geist 500, 14px, #efe6d8, cách nhau 8px gap."

    - "Tạo pill CTA: border-radius 40px, nền #ffa1f7, padding 12px 24px, 'Book an intro call' trong Geist 500 13px, chữ #000000, không viền."

    - "Tạo footer link row: ba text link 'X.com', 'LinkedIn', 'Dribbble' trong Geist Mono 400, 13px, #736e68, gap 24px giữa mỗi link, căn trái."

    - "Tạo project showcase: ảnh full-width edge-to-edge trên canvas #000000, không viền hoặc radius, padding trên 104px, chú thích bên dưới trong Geist 500 14px #efe6d8."

  similar_brands:

    - "**Brittany Chiang** — Canvas portfolio tối với một accent màu duy nhất, section label viết hoa, khoảng cách dọc rộng rãi, navigation tối giản chỉ còn tên và liên hệ"
    - "**Rauno Freiberg** — Nền tối, gần đen với tracking chặt, metadata monospace, và nhịp cuộn editorial một cột"
    - "**Linear** — Cùng xử lý flat-on-black không shadow hay gradient, và letter-spacing âm chặt trên body text nhỏ"
    - "**Cobe (Pieter Levels)** — Portfolio cá nhân với khoảng trắng cực lớn, timestamp monospace, và footer link chỉ văn bản, không icon"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-canvas: #000000;
          --color-parchment: #efe6d8;
          --color-bone: #aca69c;
          --color-ash: #736e68;
          --color-charcoal: #605c56;
          --color-neon-petal: #ffa1f7;
          --color-acid-lime: #4dff00;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-pixel-triangle: 'Geist Pixel Triangle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-lg: 15px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.2px;
          --text-display: 30px;
          --leading-display: 1.33;
          --tracking-display: -1px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-104: 104px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1400px;
          --section-gap: 200px;
          --card-padding: 0px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 1000px;
        
          /* Named Radii */
          --radius-pills: 1000px;
          --radius-buttons: 40px;
          --radius-indicators: 1000px;
        
          /* Surfaces */
          --surface-canvas: #000000;
          --surface-project-surface: #000000;
          --surface-accent-surface: #ffa1f7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-canvas: #000000;
          --color-parchment: #efe6d8;
          --color-bone: #aca69c;
          --color-ash: #736e68;
          --color-charcoal: #605c56;
          --color-neon-petal: #ffa1f7;
          --color-acid-lime: #4dff00;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-pixel-triangle: 'Geist Pixel Triangle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-lg: 15px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.2px;
          --text-display: 30px;
          --leading-display: 1.33;
          --tracking-display: -1px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-104: 104px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 1000px;
        }