stable_audio___style_reference:
  info: "> Sunlit studio on warm paper."

  theme: "light"

  info: "Stable Audio sử dụng ngôn ngữ studio trên giấy ấm: canvas là màu kem (#f4f1ec) thay vì trắng lâm sàng, để các headline đen đậm và một CTA màu hổ phách duy nhất nằm trên bề mặt mang cảm giác analog và dễ tiếp cận, giống như bìa đĩa than. Các panel màu full-bleed — oải hương, mù tạt, xô thơm, kaki — hoạt động như background section cỡ lớn phía sau các product mockup, tạo nhịp điệu cho trang giống như các mẫu màu sơn phía sau bàn mixer. Mọi phần tử tương tác đều có dạng pill (9999px) và mọi bề mặt card đều có góc gần như vuông 4px, tạo sự tương phản có chủ đích giữa controls bo tròn và khối nội dung góc cạnh. Một đồ họa hình bán nguyệt \"mặt trời\" đặc trưng xuất hiện trong mọi track artwork, và một màu xanh neon rực rỡ (#a0f32f) đánh dấu mọi phần tử âm thanh đang hoạt động, làm cho âm thanh hiện hữu trên toàn bộ giao diện. Product screenshots đảm nhận vai trò giải thích; illustration và lifestyle photography được cố tình loại bỏ."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Amber Pulse | `#f9a916` | `--color-amber-pulse` | Accent vàng hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính |"
    info: "| Lime Signal | `#a0f32f` | `--color-lime-signal` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. |"
    info: "| Lavender Wash | `#c4bae3` | `--color-lavender-wash` | Background panel tính năng text-to-audio — full-bleed section tint cỡ lớn |"
    info: "| Mustard Field | `#e1ca46` | `--color-mustard-field` | Background panel tính năng audio-to-audio — full-bleed section tint |"
    info: "| Sage Mist | `#9fc2c7` | `--color-sage-mist` | Background panel tính năng sound effects — full-bleed section tint |"
    info: "| Khaki Paper | `#e5dfc8` | `--color-khaki-paper` | Secondary panel tint, background cột trái hero — beige ấm, đậm hơn main cream canvas một bậc |"
    info: "| Warm Canvas | `#f4f1ec` | `--color-warm-canvas` | Page background, bề mặt kem chủ đạo — mọi section và hầu hết card đều nằm trên tông màu này |"
    info: "| Pure Paper | `#ffffff` | `--color-pure-paper` | Bề mặt card, track cards, elevated panels — màu trắng thật duy nhất trong hệ thống |"
    info: "| Pale Mist | `#e2e2e7` | `--color-pale-mist` | Tông cấu trúc xám nhạt mát cho các lớp UI tinh tế bên dưới lớp kem ấm |"
    info: "| Hairline | `#d2d1db` | `--color-hairline` | Borders, dividers, đường phân cách tinh tế |"
    info: "| Ink Stone | `#27262b` | `--color-ink-stone` | Secondary text, bề mặt giao diện app tối, trạng thái toggle được điền — gần đen với một chút ấm |"
    info: "| Charcoal | `#000000` | `--color-charcoal` | Neutral tối hỗ trợ cho text, icons và độ tương phản mạnh. Không nâng lên thành màu CTA chính |"
    info: "| Ash | `#737170` | `--color-ash` | Muted body text, helper text, metadata — xám trung bình cho thông tin cấp ba |"

  tokens___typography:

    inter___tất_cả_text___headlines_cam_kết_weight_700_bold__không_bao_giờ_dùng_500_hay_600__cam_kết_hai_weight_là_lựa_chọn_đặc_trưng__tạo_cho_giao_diện_giọng_nói_tự_tin__có_chính_kiến_mà_không_cần_display_face____font_inter:
      - "**Thay thế:** DM Sans, Manrope"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 12, 14, 16, 18, 20, 30, 40"
      - "**Line height:** 1.00, 1.15, 1.33, 1.50, 1.71, 1.78"
      - "**Letter spacing:** -0.0210em, -0.0170em, -0.0150em, -0.0140em, -0.0110em, -0.0060em"
      - "**Vai trò:** Tất cả text — headlines cam kết weight 700 (bold), không bao giờ dùng 500 hay 600; cam kết hai-weight là lựa chọn đặc trưng, tạo cho giao diện giọng nói tự tin, có chính kiến mà không cần display face"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 18 | -0.07px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | -0.09px | `--text-body-sm` |"
      info: "| body | 16px | 25 | -0.1px | `--text-body` |"
      info: "| subheading | 18px | 28 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 20px | 30 | -0.3px | `--text-heading-sm` |"
      info: "| heading | 30px | 40 | -0.51px | `--text-heading` |"
      info: "| heading-lg | 40px | 46 | -0.84px | `--text-heading-lg` |"

  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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 4px |"
      info: "| images | 4px |"
      info: "| buttons | 9999px |"
      info: "| toggles | 9999px |"
      info: "| trackCards | 4px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    amber_cta_button:
      vai_trò: "Primary call-to-action (Sign up, Try now, Generate)"

      info: "Filled pill, background #f9a916, text đậm #000000, border-radius 9999px, padding 12px 24px, Inter weight 700 ở 14-16px. Thường đi kèm icon mũi tên → ở bên phải."

    ghost_nav_button:
      vai_trò: "Secondary nav action (Log in)"

      info: "Fill trắng, border #000000 1px, border-radius 9999px, text đậm #000000 ở 14px, padding 8px 20px. Nằm cùng hàng với amber CTA trong header."

    active_toggle_pill:
      vai_trò: "Trạng thái được chọn trong nhóm toggle text-to-audio / audio-to-audio"

      info: "Filled pill, background #27262b, text đậm #ffffff, border-radius 9999px, padding 8px 20px, Inter weight 700 ở 14-16px."

    inactive_toggle_pill:
      vai_trò: "Trạng thái không được chọn trong nhóm toggle"

      info: "Fill trong suốt, border #000000 1px, text đậm #000000, border-radius 9999px, padding giống trạng thái active."

    track_card:
      vai_trò: "Hiển thị track nhạc đã tạo với artwork, tiêu đề, mô tả và player"

      info: "Bề mặt trắng #ffffff, border-radius 4px, padding 24px. Chứa khối artwork hình vuông nửa hình tròn màu xanh vôi (#a0f32f) ở trên cùng, tiêu đề track Inter 700 16px, mô tả Inter 400 14px #737170, và nút tối 'Try prompt'."

    try_prompt_dark_button:
      vai_trò: "Hành động bên trong track cards để sử dụng lại generation prompt"

      info: "Filled pill, background #27262b, text đậm #ffffff, border-radius 9999px, padding 6px 16px, Inter weight 700 ở 12-14px."

    lavender_feature_panel:
      vai_trò: "Section showcase tính năng text-to-audio"

      info: "Section background full-bleed #c4bae3, bố cục 2 cột: cột trái có heading đậm #000000 ở 30-40px và body copy; cột phải chứa white product mockup card. Padding dọc 48-64px."

    mustard_feature_panel:
      vai_trò: "Section showcase tính năng audio-to-audio"

      info: "Background full-bleed #e1ca46, cấu trúc 2 cột giống lavender panel, với product mockup card tông vàng ở bên phải."

    half_circle_art_graphic:
      vai_trò: "Phần tử artwork track đặc trưng"

      info: "Hình dạng cung bán nguyệt màu #a0f32f lấp đầy nửa trên của khung hình vuông, đặt trên nền panel màu trung tính. Họa tiết 'mặt trời' này lặp lại trong mọi track card và product mockup — đây là ký hiệu trực quan cho 'âm thanh' trên toàn hệ thống."

    audio_waveform_player:
      vai_trò: "In-card playback control với timeline và playhead"

      info: "Hình ảnh waveform nằm ngang trải dài theo chiều rộng card, nhãn thời gian (0:00 / 3:00) bằng Inter 400 12px #737170 ở mỗi đầu, nút phát hình tròn bên trái, playhead có thể kéo. Waveform hiển thị bằng #27262b trên nền card trắng."

    product_mockup_card:
      vai_trò: "Xem trước toàn bộ giao diện app được nhúng trong feature sections"

      info: "Card trắng lớn (#ffffff) với radius 4px, chứa ảnh chụp màn hình thực tế của ứng dụng Stable Audio — textarea nhập prompt, bộ chọn model, thanh trượt duration, nút generate và danh sách lịch sử. Thường được đặt trên nền colored feature panel."

    header_bar:
      vai_trò: "Site-wide navigation"

      info: "Thanh trong suốt trên nền cream canvas, logo 'Stable Audio' với icon sun-burst ở góc trên bên trái màu #000000, các nút Sign up (amber) và Log in (ghost) ở góc trên bên phải. Tối giản, không có background fill."

  do_s_and_don_ts:

    do:
      - "Sử dụng #f4f1ec Warm Canvas làm page background cho mọi section — không bao giờ thay thế bằng màu trắng tinh"
      - "Đặt border-radius 9999px cho mọi button, tag và toggle; hình dạng pill là đặc điểm dễ nhận biết nhất của hệ thống"
      - "Sử dụng #f9a916 Amber Pulse làm fill duy nhất cho primary action buttons (Try now, Sign up, Generate)"
      - "Render headlines ở Inter weight 700 với negative tracking (-0.84px ở 40px) — không dùng weight 500 hay 600 cho display copy"
      - "Xây dựng feature sections dưới dạng colored panels full-bleed (oải hương, mù tạt, xô thơm, kaki) phía sau white product mockup cards"
      - "Sử dụng đồ họa cung bán nguyệt màu xanh vôi (#a0f32f) trong mọi track-artwork và hình ảnh liên quan đến âm nhạc"
      - "Giữ card surface radius ở 4px — sự tương phản giữa controls tròn và card góc cạnh là có chủ đích"

    don_t:
      - "Không sử dụng #ffffff làm full page hoặc section background — nó phá vỡ cảm giác giấy ấm"
      - "Không thêm drop shadows vào cards hoặc panels — chiều sâu chỉ đến từ sự tương phản màu sắc bề mặt"
      - "Không đưa thêm màu accent cho button — amber là màu hành động duy nhất"
      - "Không dùng weight 500 hay 600 cho headlines — hệ thống cam kết 700 bold hoặc 400 regular"
      - "Không sử dụng photography, lifestyle imagery hoặc con người trong section visuals — chỉ dùng product mockups và geometric graphics"
      - "Không dùng square radii trên buttons hoặc tags — pill 9999px là bất di bất dịch"
      - "Không sử dụng màu xanh vôi rực rỡ (#a0f32f) cho non-audio UI — chỉ dành riêng cho active sound và waveform elements"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f1ec` | Page background, bề mặt kem ấm chủ đạo |"
    info: "| 1 | Card | `#ffffff` | Bề mặt card được nâng lên (track cards, nav, product cards) |"
    info: "| 2 | Feature Panel | `#c4bae3` | Background section màu full-bleed (các biến thể oải hương, mù tạt, xô thơm) |"
    info: "| 3 | Dark Surface | `#27262b` | Bề mặt giao diện app tối, trạng thái toggle active |"

  elevation:

    info: "Không có shadows. Chiều sâu được tạo hoàn toàn bằng sự tương phản màu sắc bề mặt — warm cream canvas phía sau white cards phía sau colored feature panels full-bleed. Việc không có drop shadows giữ cho thiết kế phẳng và giống poster, như album art in ấn."

  imagery:

    info: "Không photography, không con người, không lifestyle imagery. Hệ thống hình ảnh là UI thuần túy: product mockups (ảnh chụp màn hình ứng dụng Stable Audio) và các họa tiết geometric graphic. Hình ảnh đặc trưng là một cung bán nguyệt màu xanh vôi bên trong một hình vuông trung tính — hình dạng 'mặt trời' phẳng lặp lại trong mọi track artwork. Audio waveforms được hiển thị dưới dạng các thanh tối mảnh trên nền trắng. Tất cả hình ảnh đều phẳng, góc sắc và tập trung vào sản phẩm: chính app là hero."

  layout:

    info: "Các section màu full-bleed với nội dung max-width căn giữa (1280px). Hero là chia 2 cột: headline bên trái, product card bên phải, cả hai đều trên nền warm cream canvas. Feature sections xen kẽ dưới dạng colored panels full-bleed (oải hương, mù tạt, xô thơm) mỗi panel có cấu trúc 2 cột text-trái / product-mockup-phải. Intro sections trên nền trắng có headline căn giữa. Nhịp điệu dọc rộng rãi: 80px giữa các section. Navigation là thanh trong suốt không có background fill, logo góc trên bên trái, action buttons góc trên bên phải. Toàn bộ trang đọc từ trên xuống dưới như: cream hero → centered white intro → lavender feature → mustard feature → sage feature → white CTA, một tiến trình dọc đầy màu sắc."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (primary) / #27262b (secondary) / #737170 (muted)"
    - "Background: #f4f1ec (canvas) / #ffffff (card)"
    - "Border: #d2d1db"
    - "Accent: #a0f32f (xanh vôi, chỉ dành cho audio/sound-active)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled."

    - "**Feature Section Panel**: Background full-bleed #c4bae3 oải hương, padding dọc 80px, hai cột. Bên trái: heading đậm Inter 700 30px #000000, body copy Inter 400 16px #27262b, ghost outline button (fill trắng, border #000000, radius 9999px). Bên phải: white product mockup card (#ffffff, radius 4px) chứa xem trước giao diện app."

    - "**Toggle Group**: Hai pill cạnh nhau, radius 9999px, padding 8px 20px, Inter 700 14px. Active: fill #27262b, text #ffffff. Inactive: fill trong suốt, border #000000 1px, text #000000."

    - "**Header Bar**: Trong suốt trên nền cream canvas. Logo 'Stable Audio' + icon sun-burst (#000000) ở góc trên bên trái. Góc trên bên phải: pill 'Sign up' màu hổ phách (#f9a916, text đậm #000000, radius 9999px) và nút ghost 'Log in' (fill trắng, border #000000, radius 9999px)."

    - "**Track Artwork Block**: Khung hình vuông 1:1 với radius 4px. Nửa trên: nửa hình tròn filled #a0f32f xanh vôi. Nửa dưới: muted panel color (ví dụ: #e5dfc8 kaki). Không có text bên trong khối artwork."

  color_panel_system:

    info: "Colored panels có tính cấu trúc, không chỉ trang trí. Mỗi feature section chính nhận một background tint full-bleed từ bảng màu cố định: #c4bae3 (oải hương) cho text-to-audio, #e1ca46 (mù tạt) cho audio-to-audio, #9fc2c7 (xô thơm) cho sound effects. Các panel này kéo dài edge-to-edge không có border hay shadow — chính màu sắc xác định ranh giới section. Product mockup cards (trắng, radius 4px) luôn nằm ở bên phải của các panel này, tạo thành một template 2 cột nhất quán có thể tái sử dụng cho bất kỳ tính năng nào."

  similar_brands:

    - "**Suno AI** — Cùng thể loại sản phẩm music-generation với headline đen đậm và marketing pages driven by product-mockup"
    - "**Luma AI** — Cùng thẩm mỹ phẳng, giống poster với colored section panels full-bleed phía sau product showcases"
    - "**Runway** — Cùng cam kết với pill-shaped controls, display type đậm và bố cục feature-section-as-product-demo"
    - "**Stability AI** — Anh em thương hiệu mẹ với giọng văn typographic ấm áp, tự tin và giao diện light-mode sạch sẽ"
    - "**Midjourney** — Cùng visual identity phản-corporate, có chính kiến với headline đen mạnh và chrome tối giản"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-amber-pulse: #f9a916;
          --color-lime-signal: #a0f32f;
          --color-lavender-wash: #c4bae3;
          --color-mustard-field: #e1ca46;
          --color-sage-mist: #9fc2c7;
          --color-khaki-paper: #e5dfc8;
          --color-warm-canvas: #f4f1ec;
          --color-pure-paper: #ffffff;
          --color-pale-mist: #e2e2e7;
          --color-hairline: #d2d1db;
          --color-ink-stone: #27262b;
          --color-charcoal: #000000;
          --color-ash: #737170;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 18;
          --tracking-caption: -0.07px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.09px;
          --text-body: 16px;
          --leading-body: 25;
          --tracking-body: -0.1px;
          --text-subheading: 18px;
          --leading-subheading: 28;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 30;
          --tracking-heading-sm: -0.3px;
          --text-heading: 30px;
          --leading-heading: 40;
          --tracking-heading: -0.51px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 46;
          --tracking-heading-lg: -0.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 4px;
          --radius-images: 4px;
          --radius-buttons: 9999px;
          --radius-toggles: 9999px;
          --radius-trackcards: 4px;
        
          /* Surfaces */
          --surface-canvas: #f4f1ec;
          --surface-card: #ffffff;
          --surface-feature-panel: #c4bae3;
          --surface-dark-surface: #27262b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-amber-pulse: #f9a916;
          --color-lime-signal: #a0f32f;
          --color-lavender-wash: #c4bae3;
          --color-mustard-field: #e1ca46;
          --color-sage-mist: #9fc2c7;
          --color-khaki-paper: #e5dfc8;
          --color-warm-canvas: #f4f1ec;
          --color-pure-paper: #ffffff;
          --color-pale-mist: #e2e2e7;
          --color-hairline: #d2d1db;
          --color-ink-stone: #27262b;
          --color-charcoal: #000000;
          --color-ash: #737170;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 18;
          --tracking-caption: -0.07px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.09px;
          --text-body: 16px;
          --leading-body: 25;
          --tracking-body: -0.1px;
          --text-subheading: 18px;
          --leading-subheading: 28;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 30;
          --tracking-heading-sm: -0.3px;
          --text-heading: 30px;
          --leading-heading: 40;
          --tracking-heading: -0.51px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 46;
          --tracking-heading-lg: -0.84px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-full: 9999px;
        }