ableton___style_reference:
  info: "> Editorial workshop trên nền trắng tinh. Giấy trắng, chữ Futura đen, một vệt bút xanh cho tương tác, ảnh cắt sát mép như layout tạp chí."

  theme: "light"

  info: "Hệ thống visual của Ableton mang phong cách bảng editorial của một studio đang hoạt động: canvas trắng tinh, hình học Futura PT, và một màu xanh dương tự tin đánh dấu mọi văn bản tương tác. Site ưu tiên chữ và gần như phẳng một cách triệt để — không đổ bóng, không bo góc, không chrome trang trí — để ảnh chụp nhạc công, phần cứng và phần mềm tự tạo cảm xúc. Màu sắc xuất hiện như những dấu chấm câu chức năng nhỏ: xanh dương rực cho link, cùng tag fill san hô và xanh ngọc để phân loại nội dung mà không làm mềm layout. Navigation là một thanh mỏng phía trên với tên sản phẩm mang phong cách monospace. Tổng thể gợi cảm giác một cuốn technical manual được dàn trang đẹp — mật độ thông tin do typography và hình ảnh đảm nhiệm, không phải do container design."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Ink | `#000000` | `--color-ink` | Văn bản chính, nav label, logo, icon stroke, và mọi heading — thiết lập toàn bộ hệ thống phân cấp thông tin |"
    info: "| Paper | `#ffffff` | `--color-paper` | Canvas trang, bề mặt card, và text overlay trên hero — background mặc định cho hầu hết mọi màn hình |"
    info: "| Fog | `#eeeeee` | `--color-fog` | Form input nhẹ, bề mặt tag, và nền panel phụ tĩnh lặng — neutral gần như vô hình |"
    info: "| Signal Blue | `#0000ff` | `--color-signal-blue` | Accent màu xanh tím cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Coral | `#ff8389` | `--color-coral` | Tag fill danh mục (Downloads, News) — badge hình chữ nhật phẳng phân loại nội dung mà không làm dày layout |"
    info: "| Teal | `#00d2be` | `--color-teal` | Tag fill danh mục (Tutorials, Videos) — badge hình chữ nhật phẳng kết hợp với coral để phân chia taxonomy nội dung trực quan |"

  tokens___typography:

    futura_pt___font_chữ_duy_nhất_cho_mọi_thứ_từ_body_copy_đến_display_headline_90px__sự_chính_xác_hình_học_của_futura_pt_phản_chiếu_phần_mềm_âm_nhạc_dạng_grid_của_ableton___chữ_và_sản_phẩm_chia_sẻ_cùng_một_logic_thị_giác__weight_700_dùng_cho_headline__400_dùng_cho_body__không_serif__không_monospace_phụ___hệ_thống_giữ_mono_typographic_____font_futura_pt:
      - "**Thay thế:** Futura PT Bold, Futura PT Book → thay thế miễn phí: Jost* (geometric grotesque) hoặc Avenir Next; gần nhất có thể dùng ITC Avant Garde Gothic"
      - "**Weights:** 400, 700"
      - "**Cỡ chữ:** 14px, 16px, 20px, 24px, 30px, 40px, 90px"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"kern\"`"
      - "**Vai trò:** Font chữ duy nhất cho mọi thứ từ body copy đến display headline 90px. Sự chính xác hình học của Futura PT phản chiếu phần mềm âm nhạc dạng grid của Ableton — chữ và sản phẩm chia sẻ cùng một logic thị giác. Weight 700 dùng cho headline, 400 dùng cho body. Không serif, không monospace phụ — hệ thống giữ mono-typographic."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 14px | 21 | — | `--text-caption` |"
      info: "| body | 16px | 24 | — | `--text-body` |"
      info: "| subheading | 20px | 30 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 33.6 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 36 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 48 | — | `--text-heading-lg` |"
      info: "| display | 90px | 90 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 203 | 203px | `--spacing-203` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 0px"
      - "**Element gap:** 10px"

  components:

    top_navigation_bar:
      vai_trò: "Navigation chính của site"

      info: "Thanh trắng mỏng, cao ~48px. Bên trái: icon wordmark Ableton (glyph dạng vạch dọc). Giữa-trái: tên sản phẩm (Live, Push, Move, Note, Link, Shop, Packs, Help, More +) bằng Futura PT weight 400 đen cỡ 14px, cách nhau 20–24px gap ngang. Bên phải: link 'Try Live 12 for free' màu #0000ff, sau đó 'Log in or register' màu #0000ff, mỗi link cỡ 14px. Không đổi màu nền khi hover, không border."

    full_bleed_hero_with_photo_scrim:
      vai_trò: "Thông báo phía trên fold"

      info: "Ảnh toàn chiều rộng viewport (laptop trên thảm hoa văn) với overlay mờ tối. Headline 90px Futura PT weight 400 trắng, line-height 1.00, đặt lệch trái ~8% từ mép. Subhead/link CTA 'Learn more >' cỡ 14px trắng bên dưới. Không có box quanh chữ — scrim và chữ trắng là toàn bộ component. Ảnh edge-to-edge, không bo góc."

    section_header_with_filter_bar:
      vai_trò: "Giới thiệu section nội dung"

      info: "'The latest from Ableton' canh trái cỡ 30px weight 400 đen. Bên phải: filter link (All posts, Artists, News, Downloads, Tutorials, Videos, Loop) cỡ 14px #0000ff, cách nhau ~16px gap ngang. Hai element nằm trên một hàng baseline-aligned, không có divider giữa chúng."

    content_card_grid_item:
      vai_trò: "Bài blog hoặc video trong grid 3 cột"

      info: "Card hình chữ nhật, border-radius 0px, border 0px, shadow 0px. Cấu trúc từ trên xuống: ảnh full-width trong khung (tỉ lệ ~16:10, không bo góc), sau đó category tag (xem Category Tag), rồi tiêu đề cỡ 20px weight 400 đen. Cards trong grid 3 cột với gap ngang ~20px và gap dọc ~40px. Không có background fill cho card — cards nằm trực tiếp trên canvas trắng."

    category_tag:
      vai_trò: "Badge phân loại nội dung"

      info: "Hình chữ nhật có fill, border-radius 0px, padding dọc ~2px và ngang ~8px. Hai biến thể màu: coral #ff8389 (Downloads, News) và teal #00d2be (Tutorials, Videos). Label text cỡ ~12–14px Futura PT weight 400, màu #000000. Tags phẳng, không tương tác, không thể xóa."

    inline_text_link:
      vai_trò: "Link click mặc định"

      info: "14–16px Futura PT weight 400 #0000ff, không gạch chân mặc định. Hover thêm gạch chân. Thường kèm ký tự chevron phải '>' để báo hiệu đích đến. Dùng cho mọi navigation chính và tham chiếu trong nội dung."

    overlay_text_link_trên_scrim_tối:
      vai_trò: "Biến thể link trên nền ảnh"

      info: "Chữ trắng #ffffff cỡ 14px weight 400, kèm chevron '>'. Nằm trực tiếp trên ảnh tối mà không có background fill. Dùng cho CTA hero và action overlay."

    filter_link_section:
      vai_trò: "Filter danh mục nội dung"

      info: "14px Futura PT weight 400 màu #0000ff khi active, #000000 khi inactive. Không pill, không background fill, không gạch chân. Sắp xếp inline với gap đều nhau. Lựa chọn được thể hiện hoàn toàn qua màu sắc."

    image_thumbnail_tutorial_card:
      vai_trò: "Lối vào trực quan cho nội dung video"

      info: "Ảnh full-bleed hình chữ nhật trong card grid 3 cột, border-radius 0px, không border. Tỉ lệ khung hình xấp xỉ 16:9. Đóng vai trò toàn bộ bề mặt card — không padding, không frame."

    logo_glyph:
      vai_trò: "Dấu hiệu thương hiệu trong navigation"

      mark__live__của_ableton: "một chuỗi vạch đen dọc với chiều cao khác nhau, gợi track header DAW hoặc audio meter. Hiển thị ở chiều cao ~24px trong nav. Không có wordmark bên cạnh — chỉ glyph là thương hiệu."

    horizontal_section_divider:
      vai_trò: "Phân cách ngầm giữa các vùng nội dung"

      info: "Không phải đường kẻ — sự phân cách đến từ whitespace dọc ~80px giữa các section và sự thay đổi typography heading. Trang chảy mà không có border nhìn thấy được."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Futura PT cho mọi văn bản — không bao giờ đưa typeface phụ thứ hai vào"
      - "Đặt mọi border-radius thành 0px — hệ thống sắc, góc cạnh, trung thành với grid"
      - "Dùng #0000ff riêng cho link text, nav active, và interactive text — không dùng xanh nào khác"
      - "Chỉ dùng coral #ff8389 và teal #00d2be làm tag fill danh mục, không bao giờ làm background hay text color"
      - "Để trang phẳng: không shadow, không border, không fill trên card — để whitespace và chữ làm việc"
      - "Dùng 90px weight 400 trắng cho hero overlay text, không phải weight 700 — weight nhẹ trên ảnh đậm nét là signature"
      - "Đặt body line-height 1.50 và display line-height 1.00 — sự tương phản giữa body thoáng và display tight là có chủ đích"

    không_nên_làm:
      - "Không thêm box-shadow hay elevation vào bất kỳ component nào — hệ thống cố tình phẳng"
      - "Không bo góc card, tag, button, hay input — giữ 0px ở mọi nơi"
      - "Không dùng coral hay teal cho button, CTA, hay interactive text — chúng chỉ dùng cho taxonomy"
      - "Không gọi #0000ff là 'màu CTA' — nó là màu link dùng cho interactive text, không phải filled button"
      - "Không đưa gradient background vào — hệ thống chỉ có solid color và ảnh chụp"
      - "Không thêm icon, illustration, hay đồ họa trang trí — ảnh chụp và chữ gánh vác visual load"
      - "Không đặt body text dưới 14px hay dùng weight khác 400 cho body copy"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 1 | Paper | `#ffffff` | Canvas trang chính và bề mặt card |"
    info: "| 2 | Fog | `#eeeeee` | Form input field lõm và panel nền tĩnh lặng thỉnh thoảng |"

  imagery:

    info: "Ảnh chụp chiếm ưu thế trong hệ thống visual — không illustration, không 3D render, không đồ họa trừu tượng. Hero dùng ảnh môi trường full-bleed (laptop trên thảm hoa văn, nhạc công tại bàn làm việc) với scrim tối và chữ trắng overlay. Content card grid dùng ảnh 16:10 hoặc 16:9 trong khung — nhạc công trong studio, close-up phần cứng, ảnh chụp UI phần mềm, không gian sáng tạo tại nhà. Ảnh ấm áp, ánh sáng tự nhiên, chân thực hơn là dàn dựng; con người được thể hiện đang tạo ra, không phải đang biểu diễn. Sản phẩm (phần mềm, controller như Push) xuất hiện trong bối cảnh thay vì ảnh hero cô lập. Cạnh ảnh sắc, không mask, sát mép container — không bo góc, không drop shadow mềm sau ảnh. Icon không có ngoại trừ brand glyph và vài control giao diện tối thiểu."

  layout:

    info: "Mô hình trang là full-bleed cho hero và footer, giới hạn ~1200px cho section nội dung. Hero là dải ảnh toàn chiều rộng viewport với chữ trắng overlay canh trái. Section nội dung nằm trên nền trắng với khoảng cách dọc ~80px thoáng giữa chúng. Grid card 3 cột là pattern nội dung chủ đạo, dùng cho blog post, tutorial video, và featured content. Tiêu đề card canh trái, category tag nằm sát mép trái phía trên tiêu đề. Navigation trên cùng là một thanh ngang mỏng — không mega-menu, không sidebar, không sticky behavior ngoài tiêu chuẩn. Chuyển section dựa vào whitespace thay vì divider, đổi background, hay break thị giác. Nhịp điệu tổng thể: hero ảnh đậm nét → section editorial trắng tĩnh → grid 3 cột lặp lại. Design ưu tiên luồng đọc trái sang phải, trên xuống dưới, không có composition chồng chéo hay bất đối xứng."

  agent_prompt_guide:

    info: "Tham chiếu màu nhanh:"
    - "text: #000000"
    - "background: #ffffff"
    - "border: none (0px everywhere)"
    - "link/interactive text: #0000ff"
    - "tag fill A: #ff8389 (coral)"
    - "tag fill B: #00d2be (teal)"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompts:"

    - "Tạo một full-bleed hero: ảnh chụp (nhạc công tại bàn studio) phủ kín toàn bộ chiều rộng viewport, với overlay scrim mờ tối. Headline 90px futura-pt weight 400 trắng, line-height 1.00, đặt lệch trái ~8% từ mép, nằm trên scrim. Một inline link trắng 'Learn more >' cỡ 14px weight 400 nằm ngay dưới headline, border-radius 0px, không background, không gạch chân."

    - "Tạo một content section: background trắng #ffffff, max-width 1200px căn giữa, padding dọc 80px trên và dưới. Section heading 30px futura-pt weight 400 #000000, canh trái. Bên phải trên cùng baseline, filter link 14px #0000ff cách nhau 16px gap."

    - "Tạo một grid card 3 cột: ba card mỗi hàng, gap ngang 20px, gap dọc 40px. Mỗi card có border-radius 0px, border 0px, không shadow, không background fill. Đầu card: ảnh full-width 16:10 (trong khung, cạnh sắc). Bên dưới: tag hình chữ nhật phẳng (radius 0px, fill #ff8389 hoặc #00d2be, padding 2px 8px, text #000000 cỡ 12px). Dưới tag: tiêu đề 20px weight 400 #000000."

    - "Tạo một top navigation bar: background trắng, cao 48px, full width. Bên trái: icon glyph Ableton (vạch đen dọc) cao 24px. Bên cạnh: tên sản phẩm (Live, Push, Move, Note, Link, Shop, Packs, Help, More +) bằng 14px futura-pt weight 400 #000000, gap 20px giữa các item. Canh phải: 'Try Live 12 for free' 14px #0000ff, sau đó gap 16px, rồi 'Log in or register' 14px #0000ff. Không border, không fill, không hover background."

    - "Tạo một category tag: hình chữ nhật border-radius 0px, padding dọc 2px, padding ngang 8px, fill #ff8389 (hoặc #00d2be cho danh mục thứ hai), text 12px futura-pt weight 400 #000000. Không border, không shadow, không hover state."

  similar_brands:

    - "**Native Instruments** — Cùng cách tiếp cận editorial đơn sắc với content card ảnh-chụp-là-chính, layout phẳng, và một accent color duy nhất cho interactive text"
    - "**Teenage Engineering** — Cùng thẩm mỹ góc cạnh zero-radius, geometric type gần Futura, và dựa vào ảnh sản phẩm trong bối cảnh thay vì chrome trang trí"
    - "**Moog Music** — Cùng cảm giác editorial trên canvas trắng tinh với geometric type đậm nét, category-color taxonomy tags, và ảnh full-bleed nhạc công đang làm việc"
    - "**Bandcamp** — Cùng triết lý layout text-driven, không trang trí với grid nội dung 3 cột và color coding dựa trên danh mục cho tag"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #eeeeee;
          --color-signal-blue: #0000ff;
          --color-coral: #ff8389;
          --color-teal: #00d2be;
        
          /* Typography — Font Families */
          --font-futura-pt: 'futura-pt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 21;
          --text-body: 16px;
          --leading-body: 24;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --text-heading-sm: 24px;
          --leading-heading-sm: 33.6;
          --text-heading: 30px;
          --leading-heading: 36;
          --text-heading-lg: 40px;
          --leading-heading-lg: 48;
          --text-display: 90px;
          --leading-display: 90;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-203: 203px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 0px;
          --element-gap: 10px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-fog: #eeeeee;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-fog: #eeeeee;
          --color-signal-blue: #0000ff;
          --color-coral: #ff8389;
          --color-teal: #00d2be;
        
          /* Typography */
          --font-futura-pt: 'futura-pt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 21;
          --text-body: 16px;
          --leading-body: 24;
          --text-subheading: 20px;
          --leading-subheading: 30;
          --text-heading-sm: 24px;
          --leading-heading-sm: 33.6;
          --text-heading: 30px;
          --leading-heading: 36;
          --text-heading-lg: 40px;
          --leading-heading-lg: 48;
          --text-display: 90px;
          --leading-display: 90;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-203: 203px;
        }