tatem___style_reference:
  info: "> trung tâm chỉ huy chạng vạng tĩnh lặng — một không gian làm việc tối tăm, êm đềm, tràn ngập một gradient xanh dương nhạt pha than chì duy nhất, với một tia nắng ấm áp là điểm nhấn màu sắc duy nhất."

  theme: "dark"

  info: "Tatem vận hành trong một bảng màu chạng vạng tối tăm, êm đềm, nơi gần như toàn bộ giao diện được thể hiện bằng các bề mặt xám trung tính và gần như đen, tạo ra một môi trường tập trung, tĩnh lặng cho một ứng dụng email. Phần hero phá vỡ sự đơn sắc với một gradient xám-xanh dương nhạt duy nhất chuyển dần sang đen, đóng khung một headline căn trái cỡ lớn và một bản xem trước ứng dụng được xoay nhẹ. Typography chỉ dùng duy nhất Inter weight 400, dựa vào kích thước và letter-spacing để tạo hệ thống phân cấp thay vì tương phản weight. Các component vẫn phẳng và tối giản: ghost button với viền mảnh, card bo góc 6px, chip phím tắt, và các hàng trong inbox dùng khoảng cách và đường kẻ xám tinh tế thay vì viền hay đổ bóng. Dấu ấn thị giác là sự kiềm chế — một icon tia nắng ấm áp là điểm nhấn màu sắc duy nhất, phần còn lại của hệ thống giao tiếp qua không gian âm, gradient trung tính và màu chữ thì thầm nhẹ nhàng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| White | `#ffffff` | `--color-white` | Chữ chính, logo mark, viền ghost button trên nền tối — màu có độ tương phản cao nhất, dùng có chọn lọc cho headline và label đang hoạt động |"
    info: "| Ash Gray | `#c2c2c2` | `--color-ash-gray` | Heading phụ, chữ nhấn mạnh trên bề mặt tối |"
    info: "| Mist | `#b5b5b5` | `--color-mist` | Body text nhẹ nhàng, sub-label, metadata |"
    info: "| Smoke | `#919191` | `--color-smoke` | Chữ cấp ba, nét icon, mục điều hướng không hoạt động, chữ trên secondary button |"
    info: "| Graphite | `#606060` | `--color-graphite` | Bề mặt trung gian, nền card, chip fill, divider mờ |"
    info: "| Obsidian | `#3b3b3b` | `--color-obsidian` | Canvas nền, nền section, bề mặt chính — màu tối chủ đạo neo giữ tất cả các section nội dung |"
    info: "| Dusk Blue | `linear-gradient(180deg, #5a7694 0%, #759da5 50%, #abb7b5 100%)` | `--color-dusk-blue` | Điểm neo gradient hero — điểm bắt đầu của dải màu xanh dương nhạt pha xám, định nghĩa viewport đầu tiên và khiến thương hiệu mang cảm giác không khí hơn là doanh nghiệp |"
    info: "| Dusk Highlight | `linear-gradient(180deg, #5a7694 0%, #759da5 50%, #abb7b5 100%)` | `--color-dusk-highlight` | Điểm kết thúc gradient — điểm cuối màu xám-xanh nhạt của dải màu hero, làm trang tan dần vào các section tối bên dưới |"

  tokens___typography:

    inter___typeface_duy_nhất_cho_mọi_vai_trò__caption__body__navigation_và_display__việc_cố_tình_chọn_một_weight_duy_nhất_400_buộc_hệ_thống_phân_cấp_chỉ_dựa_vào_kích_thước_và_khoảng_cách__tạo_ra_một_nhịp_điệu_tĩnh_lặng__phi_truyền_thống__nơi_headline_có_cảm_giác_như_body_text_được_phóng_to_thay_vì_những_tuyên_bố_đậm_nét__thay_thế__inter_google_fonts_____font_inter:
      - "**Thay thế:** Inter"
      - "**Weights:** 400"
      - "**Kích thước:** 13px, 14px, 16px, 20px, 40px"
      - "**Line height:** 1.20, 1.43, 1.50"
      - "**Letter spacing:** -0.007em đồng nhất trên mọi kích thước (xấp xỉ -0.28px ở 40px, -0.09px ở 13px)"
      - "**Vai trò:** Typeface duy nhất cho mọi vai trò: caption, body, navigation và display. Việc cố tình chọn một weight duy nhất (400) buộc hệ thống phân cấp chỉ dựa vào kích thước và khoảng cách, tạo ra một nhịp điệu tĩnh lặng, phi truyền thống, nơi headline có cảm giác như body text được phóng to thay vì những tuyên bố đậm nét. Thay thế: Inter (Google Fonts)."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | -0.09px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.11px | `--text-body` |"
      info: "| subheading | 20px | 1.5 | -0.14px | `--text-subheading` |"
      info: "| display | 40px | 1.2 | -0.28px | `--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: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 140 | 140px | `--spacing-140` |"
      info: "| 200 | 200px | `--spacing-200` |"
      info: "| 232 | 232px | `--spacing-232` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 6px |"
      info: "| chips | 6px |"
      info: "| buttons | 6px |"
      info: "| heroElements | 16px |"
      info: "| largeSurfaces | 10px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    ghost_cta_button:
      vai_trò: "Hành động chính trong hero và nav"

      info: "Nền trong suốt, viền 1px solid #ffffff, chữ #ffffff, radius 6px, Inter 16px weight 400, padding 10px 24px. Hover bằng cách đảo ngược thành nền trắng với chữ tối. Việc không có button màu chromatic là có chủ đích — hero là gradient, phần còn lại là tối, và một button có màu nền sẽ phá vỡ hệ thống."

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

      info: "Toàn chiều rộng, trong suốt trên gradient hero, chuyển sang #3b3b3b khi cuộn. Bên trái: logo mark hình tia nắng + wordmark 'tatem' màu #ffffff. Bên phải: ba text link (Pricing, Changelog, Sign in) màu #919191 cộng với một ghost button 'Get started'. Trên cùng ở giữa: dòng thông báo nhỏ #919191. Chiều cao ~64px, không đổ bóng, không border-bottom."

    inbox_row:
      vai_trò: "Mục danh sách email trong bản xem trước sản phẩm"

      info: "Không có nền (nằm trực tiếp trên card #606060), padding 12px ngang, 8px dọc. Bên trái: placeholder avatar hình tròn + tên người gửi màu #ffffff weight 400 14px. Ở giữa: tiêu đề màu #ffffff, preview màu #919191. Bên phải: ngày tháng màu #919191, 13px. Các hàng được phân cách bằng divider ngang 1px #606060, không phải viền card."

    keyboard_shortcut_display:
      vai_trò: "Hình ảnh trực quan thể hiện tương tác qua bàn phím"

      info: "Card nền #3b3b3b với radius 16px, padding 32px. Chứa một bàn phím được render phẳng với nền #606060, các phím riêng lẻ là các hình chữ nhật nổi nhẹ. Các phím được tô sáng (K, ⌘) được render bằng #919191 hoặc #b5b5b5 để nổi bật. Bên dưới: label 'Command menu' trong một pill radius 6px, nền #606060, chữ #ffffff 14px."

    section_heading_block:
      vai_trò: "Mẫu tiêu đề section nội dung"

      info: "Căn trái, max-width ~560px. Eyebrow label màu #919191 13px uppercase tracking (ví dụ: 'SPLIT INBOX', 'SHORTCUTS'). Headline màu #ffffff Inter 40px weight 400 line-height 1.2. Body paragraph màu #919191 Inter 16px line-height 1.5. Không divider, không đường kẻ nhấn."

    app_preview_card:
      vai_trò: "Xử lý ảnh chụp sản phẩm hero"

      info: "Ứng dụng inbox được hiển thị dưới dạng ảnh chụp hình chữ nhật xoay nhẹ (8-12°), không viền, không đổ bóng, không radius. Nằm trên gradient hero, tràn ra ngoài cạnh phải của viewport. Sự xoay và tràn cạnh khiến sản phẩm trông sống động và ba chiều mà không cần chrome trang trí."

    logo_mark:
      vai_trò: "Nhận diện thương hiệu"

      info: "Icon hình tia nắng nhỏ (các đường xuyên tâm tỏa ra từ tâm) màu #ffffff, kết hợp với wordmark 'tatem' chữ thường Inter 400 16px #ffffff. Dấu ấn trang trí thực sự duy nhất trong hệ thống; cách xử lý ấm áp/sáng của tia nắng là điểm duy nhất hệ thống cho phép bản thân thể hiện cá tính."

    top_announcement_bar:
      vai_trò: "Dải chứng minh xã hội trước navigation"

      một_dòng_chữ_căn_giữa: "'Join 10,000+ rethinking their email.' màu #919191 13px. Nằm phía trên nav, không nền, không viền. Cực kỳ tối giản — một lời thì thầm chứng minh xã hội, không phải banner."

    content_section_container:
      vai_trò: "Mẫu section lặp lại cho các tính năng"

      info: "Nền #3b3b3b toàn chiều rộng, nội dung căn giữa trong max-width 1200px với padding ngang 24px. Padding dọc 96px trên và dưới. Chứa một Section Heading Block theo sau là một hình ảnh trực quan tùy chọn (card hoặc minh họa) với radius 16px trên bề mặt lồng #3b3b3b."

  do_s_and_don_ts:

    do:
      - "Dùng Inter weight 400 cho mọi thứ — không thêm weight bold hay semibold; hệ thống phân cấp chỉ đến từ kích thước"
      - "Giữ tất cả radius ở 6px cho các element tương tác (button, chip, tag) và 10-16px cho content card"
      - "Neo tất cả section nội dung trên canvas tối #3b3b3b; dành gradient xanh dương-xám riêng cho hero"
      - "Kết hợp headline #ffffff với body text #919191 để có hệ thống phân cấp tương phản cao nhưng vẫn tĩnh lặng đặc trưng"
      - "Dùng đường kẻ tóc 1px solid #606060 cho separator và nền #606060 cho elevated card — không bao giờ dùng đổ bóng để tạo độ cao"
      - "Mặc định spacing section là 96px trên/dưới với nội dung căn giữa trong max-width 1200px"
      - "Dùng bộ ba caption 13px / body 16px / display 40px làm các bước nhảy typography duy nhất cần thiết"

    don_t:
      - "Không dùng button màu chromatic có nền — hệ thống dựa vào ghost outline, không bao giờ dùng CTA solid màu thương hiệu"
      - "Không thêm đổ bóng hay drop-effect; độ cao được truyền đạt qua sự thay đổi tông màu bề mặt"
      - "Không dùng nhiều hơn một element chromatic trên một màn hình — logo tia nắng, gradient hero, thế thôi"
      - "Không phá vỡ quy tắc single-weight bằng cách thêm weight 600 hay 700 cho Inter; nếu heading có vẻ quá nhẹ, hãy tăng kích thước của nó"
      - "Không dùng border-radius lớn hơn 16px ở bất kỳ đâu; hệ thống là góc cạnh chặt chẽ, không phải bồng bềnh"
      - "Không dùng màu cho trạng thái trong giao diện chính; dựa vào sự thay đổi độ mờ (ffffff so với 919191) cho active/inactive"
      - "Không đặt gradient thương hiệu phía sau nội dung nào khác ngoài hero; lặp lại nó trong các section sẽ làm loãng tác động không khí của nó"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#3b3b3b` | Nền trang cơ bản, phông nền section |"
    info: "| 2 | Card | `#606060` | Hàng inbox, container hiển thị bàn phím, khối nội dung elevated |"
    info: "| 3 | Subtle | `#919191` | Chip fill, chỉ báo nhẹ, tông bề mặt phụ |"

  elevation:

    info: "Hệ thống cố tình tránh hoàn toàn box-shadow. Độ cao được truyền đạt qua tông màu bề mặt: canvas #3b3b3b → card/chip #606060 → điểm nhấn nhẹ #919191. Việc không có đổ bóng giữ cho giao diện cảm giác phẳng, hiện đại và không trọng lượng — gần với giao diện in ấn hơn là ứng dụng skeuomorphic. Dấu hiệu chiều sâu duy nhất là chính gradient hero, tạo ra cảm giác về khoảng cách không khí chứ không phải độ cao vật lý."

  imagery:

    info: "Hầu như không có hình ảnh truyền thống. Phần hero có một ảnh chụp sản phẩm góc nghiêng duy nhất (chính ứng dụng inbox) tràn ra ngoài cạnh phải, được render không viền, không đổ bóng, không bo tròn — ảnh chụp CHÍNH LÀ nghệ thuật hero. Các section khác dùng mockup UI được render phẳng (bàn phím, hàng inbox) với cùng tông màu bề mặt tối như trang, để chúng hòa vào môi trường thay vì nổi lên trên. Icon là nét vẽ tối giản kiểu line-style màu #919191. Không có ảnh chụp, không có minh họa, không có đồ họa trừu tượng — toàn bộ ngôn ngữ thị giác là sản phẩm-bề mặt-như-nghệ thuật."

  layout:

    info: "Bố cục một cột max-width 1200px, căn giữa. Hero là cách xử lý full-bleed duy nhất, trải dài từ mép này sang mép kia với gradient xanh dương-xám. Bên dưới hero, mọi section là một dải #3b3b3b với padding dọc rộng rãi 96px. Viewport đầu tiên luôn chứa gradient hero; các viewport tiếp theo là tối sâu với nội dung tập trung ở nửa trái của container max-width, để nửa phải trống hoặc chứa hình ảnh sản phẩm. Navigation là một thanh trên mỏng không có hành vi sticky rõ ràng — nó trôi trong gradient ở hero và nằm sát phía trên các section tối. Nhịp điệu chậm: một section mỗi viewport, không có card grid, không có khối tính năng nhiều cột."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text primary: #ffffff"
    - "text secondary: #919191"
    - "text muted: #b5b5b5"
    - "background canvas: #3b3b3b"
    - "surface card: #606060"
    - "border / hairline: #606060"
    - "accent: #5a7694 (điểm bắt đầu gradient hero)"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompt:"

    - "Tạo một hero section: full-bleed linear-gradient từ #5a7694 ở trên qua #759da5 đến #abb7b5 ở dưới. Headline căn trái Inter 40px weight 400, màu #ffffff, letter-spacing -0.28px. Body text Inter 16px weight 400, màu #919191. Bên dưới: ghost button với viền 1px solid #ffffff, chữ #ffffff, Inter 16px, radius 6px, padding 10px 24px. Bên phải: ảnh chụp sản phẩm hình chữ nhật xoay nhẹ (10°) tràn ra ngoài cạnh phải viewport, không viền hoặc đổ bóng."

    - "Tạo một feature section trên nền #3b3b3b: max-width 1200px căn giữa, padding dọc 96px. Eyebrow label 'SPLIT INBOX' Inter 13px weight 400, #919191, uppercase, tracking 0.5px. Headline 'Prioritize what's important.' Inter 40px weight 400, #ffffff. Body Inter 16px weight 400, #919191. Bên dưới: danh sách inbox trên bề mặt #606060 với radius 6px, chứa các hàng có tên người gửi #ffffff, preview text #919191, và separator hàng 1px solid #3b3b3b."

    - "Tạo một keyboard shortcut display: card radius 16px trên bề mặt #3b3b3b, padding 32px. Bàn phím phẳng được render với nền #606060, các phím riêng lẻ là hình chữ nhật sáng hơn một chút. Một phím (K) được tô sáng bằng #b5b5b5. Bên dưới bàn phím: chip pill với nền #606060, chữ #ffffff 'Command menu', Inter 14px, radius 6px, padding 6px 16px."

    - "Tạo một top navigation: nền trong suốt (nằm trên gradient hero). Bên trái: icon tia nắng nhỏ màu trắng (8 đường xuyên tâm từ tâm) + wordmark 'tatem' Inter 16px #ffffff. Bên phải: ba text link Inter 16px #919191 ('Pricing', 'Changelog', 'Sign in'), theo sau là ghost button ('Get started') với viền 1px solid #ffffff, chữ #ffffff, radius 6px, padding 10px 24px. Phía trên nav, căn giữa: một dòng chữ #919191 13px đọc một thông điệp chứng minh xã hội ngắn."

  monochrome_discipline:

    info: "Hệ thống Tatem được định nghĩa bởi những gì nó từ chối thêm vào. Không weight đậm, không button chromatic, không đổ bóng, không gradient trang trí ngoài hero, không border-radius trên 16px, không ảnh chụp, không minh họa. Mọi màn hình đều có thể được xây dựng bằng: Inter 400 ở năm kích thước, bốn màu xám trung tính, một canvas tối, một ghost button và một gradient hero. Nếu một quyết định thiết kế yêu cầu thêm màu mới, weight, đổ bóng hoặc bậc radius — hãy xem xét lại vấn đề thiết kế trước."

  similar_brands:

    - "**Linear** — Cùng canvas tối, typography single-weight, ghost outlined button và mẫu navigation cực kỳ tối giản"
    - "**Vercel** — Cùng cách tiếp cận để một gradient hero duy nhất phá vỡ hệ thống đơn sắc gần như đen tuyền, với body text xám thì thầm nhẹ nhàng"
    - "**Superhuman** — Cả hai đều là thương hiệu năng suất email sử dụng bề mặt tối, màu trung tính kiềm chế và ngôn ngữ thị giác tập trung vào bàn phím với mockup UI phẳng làm nghệ thuật section"
    - "**Raycast** — Cách xử lý trực quan phím tắt và mẫu pill 'command menu' phản ánh rất gần cách tiếp cận product-mockup-as-hero của Raycast"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-white: #ffffff;
          --color-ash-gray: #c2c2c2;
          --color-mist: #b5b5b5;
          --color-smoke: #919191;
          --color-graphite: #606060;
          --color-obsidian: #3b3b3b;
          --color-dusk-blue: #5a7694;
          --gradient-dusk-blue: linear-gradient(180deg, #5a7694 0%, #759da5 50%, #abb7b5 100%);
          --color-dusk-highlight: #abb7b5;
          --gradient-dusk-highlight: linear-gradient(180deg, #5a7694 0%, #759da5 50%, #abb7b5 100%);
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: -0.09px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.11px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.14px;
          --text-display: 40px;
          --leading-display: 1.2;
          --tracking-display: -0.28px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-140: 140px;
          --spacing-200: 200px;
          --spacing-232: 232px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-cards: 6px;
          --radius-chips: 6px;
          --radius-buttons: 6px;
          --radius-heroelements: 16px;
          --radius-largesurfaces: 10px;
        
          /* Surfaces */
          --surface-canvas: #3b3b3b;
          --surface-card: #606060;
          --surface-subtle: #919191;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-white: #ffffff;
          --color-ash-gray: #c2c2c2;
          --color-mist: #b5b5b5;
          --color-smoke: #919191;
          --color-graphite: #606060;
          --color-obsidian: #3b3b3b;
          --color-dusk-blue: #5a7694;
          --color-dusk-highlight: #abb7b5;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: -0.09px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.11px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.14px;
          --text-display: 40px;
          --leading-display: 1.2;
          --tracking-display: -0.28px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-140: 140px;
          --spacing-200: 200px;
          --spacing-232: 232px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
        }