epidemicsound___style_reference:
  info: "> Ghi chú liner boutique trên giấy ngập nắng. Một spread trắng kem ấm với custom editorial serif, một mảng hồng neon duy nhất phá vỡ sắc đơn sắc như bìa tạp chí, và các CTA đen sắc nét mang cảm giác như tem mực — không phải sản phẩm phần mềm, mà là một vật thể in ấn tình cờ phát nhạc trực tuyến."

  theme: "light"

  info: "Epidemic Sound mang phong cách editorial của ngành công nghiệp âm nhạc: một canvas trắng xương ấm áp, UI sans-serif đen tự tin, và một custom serif tương phản cao làm giọng thương hiệu ở kích thước display. Một màu hồng neon rực rỡ (#ff82c2) là điểm nhấn đặc trưng — được dùng có chừng mực làm nền section full-bleed và nhấn mạnh inline, không phải trang trí rải rác. Độ sặc sỡ ở mức 1%, vì vậy hệ thống nên mang cảm giác gần như đơn sắc, với màu sắc xuất hiện như dấu câu editorial có chủ đích (hồng, xanh tín hiệu, vàng nắng). Các component phẳng và hình chữ nhật, gần như không có border-radius, rất ít shadow — thiết kế dựa vào trọng lượng typography và khoảng cách rộng rãi để tạo hierarchy. Italic bên trong display serif là một signature move: nhấn mạnh được đặt trong cùng một font family thay vì một màu sắc hay trọng lượng riêng, mang lại cho headline chất văn chương, gợi nhớ liner notes."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Hot Pink | `#ff82c2` | `--color-hot-pink` | Nền section điểm nhấn đặc trưng (announcement bar, Feature Highlight Block), nhấn mạnh inline link — dấu câu editorial của thương hiệu. Dùng full-bleed, không dùng làm tint |"
    info: "| Sun Yellow | `#ffda40` | `--color-sun-yellow` | Lớp phủ điểm nhấn và decorative badge fills. Điểm nhấn sắc độ thứ hai kết hợp với hồng trong bảng màu đặc trưng của thương hiệu |"
    info: "| Signal Blue | `#20afff` | `--color-signal-blue` | Nền section phụ, decorative callout. Một điểm nhấn lạnh làm đối trọng với hồng và vàng ấm, dùng khi cần một khoảnh khắc sắc độ thứ ba trong các trang dài |"
    info: "| Ember Orange | `#ff6138` | `--color-ember-orange` | Điểm nhấn sắc độ rải rác cho icon strokes và decorative highlights nhỏ. Không định nghĩa section |"
    info: "| Leaf Green | `#5ad363` | `--color-leaf-green` | Điểm nhấn xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên làm màu CTA chính |"
    info: "| Charcoal | `#292c33` | `--color-charcoal` | Secondary text và biến thể bề mặt tối. Hơi lạnh hơn đen thuần; dùng khi cần bề mặt tối mềm hơn mà vẫn giữ uy lực |"
    info: "| Slate | `#60605e` | `--color-slate` | Body copy muted, helper text, secondary icon fills. Màu secondary text chủ lực ở tần suất cao |"
    info: "| Bone | `#f1f0eb` | `--color-bone` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không nâng lên làm màu CTA chính |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang và inverse text trên nền tối. Bề mặt sạch nhất, mát nhất — Bone nằm trên nó một bậc để tạo độ ấm |"
    info: "| Mist | `#efefef` | `--color-mist` | Bề mặt sáng hơi lạnh hơn cho card variants và disabled/secondary button states khi Bone quá ấm |"
    info: "| Stone | `#c1c0bc` | `--color-stone` | Divider trung gian, disabled border, subtle icon stroke. Một neutral nằm giữa Slate và Bone cho hairline UI |"
    info: "| Sand | `#e4d9cf` | `--color-sand` | Lớp phủ ấm trang trí và image placeholder. Neutral ấm nhất — dùng làm khối tonal mềm, hiếm khi làm functional UI |"
    info: "| Frost | `#cfd6e5` | `--color-frost` | Xám tông lạnh cho card backgrounds và image placeholders khi cần đối trọng lạnh với Bone |"

  tokens___typography:

    inter___workhorse_sans_cho_body_copy__navigation__buttons__icons__badges_và_toàn_bộ_functional_ui__tracking_chặt_ở_0_1em_trên_text_nhỏ_viết_hoa_mang_lại_cảm_giác_nhãn_mác_được_kiểm_soát_thay_vì_xử_lý_sans_mặc_định_lỏng_lẻo_____font_inter:
      - "**Thay thế:** Inter (Google Fonts)"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 10, 12, 14, 16, 18, 24"
      - "**Line height:** 1.0–1.71 (chặt ở 10px cho badge caps, rộng rãi ở 1.5–1.6 cho body)"
      - "**Letter spacing:** 0.1em trên caption/label sizes (10–14px); 0 trên body 16px trở lên"
      - "**Vai trò:** Workhorse sans cho body copy, navigation, buttons, icons, badges và toàn bộ functional UI. Tracking chặt ở 0.1em trên text nhỏ/viết hoa mang lại cảm giác nhãn mác được kiểm soát thay vì xử lý sans mặc định lỏng lẻo."

    sebentafont_custom_editorial_serif___chỉ_dùng_cho_display_và_large_headings__một_serif_đương_đại_tương_phản_cao_dùng_ở_hero_scale_64_128px_với_negative_tracking_nặng__italic_cut_là_giọng_thương_hiệu___các_từ_nhấn_mạnh_như__the_sound__được_đặt_italic_trong_cùng_family_thay_vì_đổi_màu_hoặc_gạch_chân__mang_lại_cho_headline_nhịp_điệu_văn_chương__editorial_____font_sebentafont_custom_editorial_serif:
      - "**Thay thế:** GT Sectra Display, Tiempos Headline, hoặc Canela (họ hàng gần nhất về thị giác — serif tương phản cao với italic thanh lịch)"
      - "**Weights:** 500 (single weight, kèm italic)"
      - "**Kích thước:** 20, 24, 32, 40, 48, 64, 80, 128"
      - "**Line height:** 1.0–1.25 (cực kỳ chặt ở display sizes — serif đứng cao và tự tin, không thoáng)"
      - "**Letter spacing:** -0.04em ở 64–128px display, -0.03em ở 48px, -0.02em ở 20–40px"
      - "**OpenType features:** `\"liga\" on, \"dlig\" on (editorial ligatures cho italic emphasis)`"
      - "**Vai trò:** Chỉ dùng cho display và large headings. Một serif đương đại tương phản cao dùng ở hero scale (64–128px) với negative tracking nặng. Italic cut là giọng thương hiệu — các từ nhấn mạnh như 'the sound' được đặt italic trong cùng family thay vì đổi màu hoặc gạch chân, mang lại cho headline nhịp điệu văn chương, editorial."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1 | 1px | `--text-caption` |"
      info: "| body | 16px | 1.56 | — | `--text-body` |"
      info: "| subheading | 18px | 1.6 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.2 | -0.8px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.13 | -1.44px | `--text-heading-lg` |"
      info: "| display | 64px | 1.06 | -2.56px | `--text-display` |"
      info: "| display-xl | 80px | 1 | -3.2px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "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: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 240 | 240px | `--spacing-240` |"

    border_radius:

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

    layout:

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

  components:

    announcement_bar:
      vai_trò: "Quảng bá toàn chiều rộng đầu trang cho ra mắt và tính năng"

      info: "Nền Hot Pink (#ff82c2), text đen (#000000), Inter 14–16px medium, thông điệp một dòng căn giữa kèm inline underlined link. Icon đóng (×) căn phải. Không padding inset — chiều cao bar được xác định bởi line-height của text. Hoạt động như một sự kiện tonal lớn, không phải thông báo tinh tế."

    primary_navigation:
      vai_trò: "Sticky header trên cùng với logo, links và account actions"

      info: "Nền trắng (#ffffff) với biến thể bone ấm (#f1f0eb) trên subpages. Logo bên trái ở ~20px, nav links Inter 14px medium ở giữa kèm chevron-down dropdowns, hai buttons bên phải: một bone-filled 'Log in' (Inter 12px, bg #f1f0eb, text #000, 0 radius, padding ~8px 16px) và một black-filled 'Create free account' (bg #000, text #fff, cùng kích thước). Không shadow, không border — bar nằm trực tiếp trên canvas."

    hero_headline:
      vai_trò: "Editorial display block căn giữa trên landing page"

      info: "Hai dòng sebentaFont ở 64–80px, weight 500, line-height ~1.06, letter-spacing -0.04em. Đen (#000000) trên trắng. Nhấn mạnh được đặt trong italic cut của serif, không phải đổi màu. Subhead là Inter 16px Slate (#60605e) với ba luận điểm cách nhau bằng black square bullets (▪). Không background, không border, không trang trí — type mang cả trang."

    primary_button:
      vai_trò: "Call-to-action chính ('Create free account', 'Learn more')"

      info: "Nền filled #000000, text #ffffff, Inter 14px medium ở tracking 0.1em, 0px radius, padding ~10px dọc × 24px ngang. Mũi tên căn giữa hoặc chỉ text. Đây là button filled-color duy nhất trong hệ thống — nó đọc như tem mực, không phải viên thuốc."

    secondary_button:
      vai_trò: "Hành động ít nhấn mạnh hơn ('Contact sales', 'Log in')"

      ghost_bone_variant: "nền #f1f0eb, text #000000, cùng 0px radius và Inter 14px medium như primary. Yên tĩnh hơn về thị giác so với black fill — đặt cạnh nhau với primary, nó tạo hierarchy rõ ràng mà không cần hover hoặc border treatment."

    brand_showcase_card:
      vai_trò: "Carousel ngang các thumbnail case-study (New Balance, GoPro, Squarespace, Nissan)"

      info: "Card ảnh full-bleed (không border, 0 radius, không shadow) với brand logo chồng lên màu trắng ở 40–48px, đặt ~20% từ trên xuống. Bên dưới card: tên thương hiệu Inter 18px medium màu đen, tiếp theo là subtext Slate 14px regular ('\"Track title\" by Artist'). Carousel arrows (← →) trong button bone-filled hình vuông 40px với chevron đen."

    feature_highlight_block_pink_studio:
      vai_trò: "Section Hot Pink full-bleed quảng bá tính năng sản phẩm"

      info: "Nền #ff82c2, text đen. Bố cục hai cột: bên trái giữ heading sebentaFont 48px với italic emphasis trên một cụm từ chính, subhead Inter 16px Slate, và text link kèm mũi tên phải ('Learn more →') ở Inter 14px underline. Bên phải giữ một product card nổi với xoay nhẹ (-3° đến -5°) và icon hand-cursor, gợi tương tác xúc giác. Block đọc như một magazine spread — không phải product card."

    feature_highlight_block_blue_studio:
      vai_trò: "Section sắc độ thứ hai, đối trọng với pink block"

      info: "Cùng cấu trúc editorial hai cột như pink block nhưng trên nền #20afff. Headline trắng (#ffffff) và product card trắng với icon hand-cursor đen. Màu xanh hoạt động như màu 'chương tiếp theo' trong nhịp điệu sắc độ của trang."

    faq_accordion_row:
      vai_trò: "Danh sách câu hỏi/câu trả lời có thể mở rộng"

      info: "Row #f1f0eb toàn chiều rộng, 0 radius, padding dọc ~24px, padding ngang ~24px. Text câu hỏi Inter 16px medium màu đen, căn trái. Icon down-chevron (Inter hoặc Lucide, 16px, đen) căn phải. Khoảng cách dọc 8px giữa các row. Không border, không shadow — background bone một mình phân cách các row khỏi canvas trắng."

    new_badge:
      vai_trò: "Inline tag đánh dấu tính năng hoặc sản phẩm mới"

      info: "Hình pill (9999px radius), nền #000000, text #ffffff, Inter 10px bold uppercase, padding dọc 2–4px × ngang 8px. Nằm inline với announcement text trong Hot Pink bar và các nơi khác. Nhỏ, tương phản cao, đọc như sticker."

    inline_text_link:
      vai_trò: "Nhấn mạnh link trong văn bản ('Learn more', 'Read more')"

      info: "Inter 14–16px medium, đen (#000000) hoặc sắc độ (Hot Pink, Signal Blue tùy ngữ cảnh), luôn gạch chân. Không thay đổi hover state trong spec tĩnh — underline là affordance. Dùng ở cuối đoạn văn để mời đọc sâu hơn."

    carousel_arrow_button:
      vai_trò: "Điều khiển phân trang ngang"

      info: "Hình vuông 40px, nền #f1f0eb, icon chevron đen, 0 radius. Disabled state (← ở đầu) giảm opacity xuống ~40%. Không border."

    footer:
      vai_trò: "Site links và thông tin pháp lý cuối trang"

      info: "Nền trắng (#ffffff), không border trên. Logo và ~4–5 cột link ở Inter 14px Slate (#60605e) với tiêu đề cột đen ở 12px medium uppercase tracking 0.1em. Padding dọc rộng rãi 48–64px. Footer yên tĩnh và đơn sắc — cá tính sắc độ thuộc về trang phía trên."

  do_s_and_don_ts:

    do:
      - "Đặt display headlines trong sebentaFont ở 64–80px, weight 500, line-height 1.0–1.06, letter-spacing -0.04em. Serif làm tất cả — không kết hợp với font display thứ hai."
      - "Dùng italic cut của riêng serif để nhấn mạnh trong headlines ('the sound', 'a faster way'). Không bao giờ chuyển sang màu sắc hoặc weight khác để nhấn mạnh."
      - "Dùng #000000 filled buttons làm kiểu filled-button duy nhất. Kết hợp với #f1f0eb ghost buttons cho secondary actions. Không bo góc — 0px radius ở mọi nơi trừ NEW badge."
      - "Dùng Hot Pink (#ff82c2) làm nền section full-bleed, không bao giờ làm điểm nhấn nhỏ. Nó thông báo một chương của trang, không trang trí một button."
      - "Dùng Inter 16px / line-height 1.56 / letter-spacing 0 cho body copy. Áp dụng tracking 0.1em chỉ ở caption/label sizes (10–14px) và ngữ cảnh uppercase."
      - "Duy trì section gap 64px và card padding 24px làm nhịp điệu không gian. Thiết kế rộng rãi và editorial — không nén."
      - "Giữ trang 1% sặc sỡ. Hầu hết canvas nên là trắng và bone. Mỗi section sắc độ là một khoảng dừng có chủ đích, không phải trang trí."

    don_t:
      - "Không dùng serif display thứ hai hoặc script font. Custom sebentaFont và italic của nó là giọng duy nhất ở display sizes."
      - "Không bo góc buttons, cards hoặc accordion rows. 0px radius là cấu trúc cho cảm giác editorial — bo góc phá vỡ logic tạp chí."
      - "Không đổi màu các từ nhấn mạnh. Italic trong display serif LÀ hệ thống nhấn mạnh. Thêm một từ Hot Pink trong headline đen phá vỡ nhịp điệu."
      - "Không dùng #ff82c2, #20afff hoặc #ffda40 làm text colors trên nền trắng. Đây là màu nền section — ở body scale chúng thất bại về độ tương phản và cảm giác như bảng màu đồ chơi."
      - "Không thêm drop shadows hoặc elevation cho cards. Hệ thống phẳng — các mức bề mặt được truyền đạt bằng sự thay đổi màu nền (trắng → bone → mist), không phải shadow."
      - "Không giới thiệu cặp semantic xanh/đỏ cho success và error. Bảng màu sắc độ (hồng, xanh, vàng, cam, xanh lá) là trang trí và editorial — không phải hệ thống trạng thái."
      - "Không xếp chồng các section sắc độ. Xen kẽ một block sắc độ với một block đơn sắc. Nhịp điệu hồng-rồi-xanh hoạt động vì nó hiếm."

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang mặc định, base sạch nhất |"
    info: "| 1 | Bone Surface | `#f1f0eb` | FAQ rows, secondary buttons, nav strip — bề mặt editorial ấm |"
    info: "| 2 | Mist Surface | `#efefef` | Card variant sáng lạnh hơn, elevation tinh tế không shadow |"
    info: "| 3 | Hot Pink Block | `#ff82c2` | Section điểm nhấn đặc trưng full-bleed |"
    info: "| 4 | Signal Blue Block | `#20afff` | Section điểm nhấn phụ full-bleed |"

  elevation:

    info: "Thiết kế cố tình tránh shadows. Chiều sâu được truyền đạt độc quyền thông qua sự thay đổi màu nền trên stack bề mặt (trắng → bone → mist) và thông qua các block section sắc độ full-bleed. Cards nằm phẳng trên bề mặt cha của chúng, buttons được đóng dấu mực lên canvas, và accordion rows là bone-on-white không border. Thêm drop shadows sẽ đưa vào ngôn ngữ thị giác software-SaaS xung đột với cảm giác editorial / vật thể in ấn. Nếu elevation là cần thiết (ví dụ modal hoặc floating menu), dùng border 1px #000000 thay vì shadow — phép ẩn dụ tem mực mở rộng đến việc xếp lớp."

  imagery:

    info: "Hình ảnh mang tính tài liệu và dẫn dắt bởi thương hiệu hơn là trang trí. Ảnh là tight, editorial crops của các chủ thể thực tế (vận động viên, nhà làm phim, nhạc sĩ, du lịch) ở tỷ lệ 16:9 hoặc 3:4, được trình bày không có overlay text, gradient masks hoặc color treatment — chúng đến với độ trung thực đầy đủ. Logo thương hiệu của mỗi đối tác nổi bật được ghép trực tiếp lên ảnh màu trắng, căn giữa trên cùng, ở 40–48px, biến bức ảnh thành case-study tile thay vì stock image. Phần Pink Studio bao gồm một UI card nổi với xoay nhẹ và icon hand-cursor, gợi một bàn tay đặt đĩa nhạc. Phần xanh lặp lại motif với card trắng. Không có illustrations, không 3D renders, không đồ họa trừu tượng — ngôn ngữ thị giác là nhiếp ảnh cộng với các khối màu phẳng đậm. Iconography là đơn sắc và inline (chevrons, arrows, cursors) thay vì một bộ icon trang trí."

  layout:

    info: "Trang là một editorial column căn giữa, max-width 1200px trên canvas trắng, với announcement bar và nav trên cùng chạy full-bleed phía trên. Hero là một text block căn giữa duy nhất (không hero image, không split layout) — type là hero. Bên dưới hero, nội dung chảy trong các dải màu đơn xen kẽ: section trắng cho các block giàu nội dung, sau đó Hot Pink Studio block full-bleed, sau đó Signal Blue block full-bleed, mỗi block chiếm toàn bộ viewport width bất kể content column 1200px. Card grids là 3-up hoặc 4-up với chiều rộng bằng nhau, không có gutters ngoài wrapper 1200px, mang lại cảm giác magazine-grid. FAQ section trở về một column đơn full-width của bone rows. Nhịp điệu dọc là 64px giữa các section chính, 24px trong cards, 8–16px giữa các element. Navigation là một top bar sticky duy nhất — không sidebar, không mega-menu, không breadcrumbs."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #000000 (primary), #60605e (secondary), #292c33 (inverse trên sáng, tối trên tối)"
    - "background: #ffffff (canvas), #f1f0eb (bề mặt ấm), #efefef (bề mặt lạnh)"
    - "border: #c1c0bc (hairline), #000000 (mạnh)"
    - "accent: #ff82c2 (Hot Pink — nền section, không bao giờ nhỏ)"
    - "primary action: không có màu CTA riêng biệt"
    - "secondary action: #f1f0eb filled (ghost), #000000 text, 0px radius, padding 10px 24px"

    info: "Example Component Prompts"
    info: "Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì phát minh màu CTA filled."

    - "Hot Pink feature block: Nền #ff82c2 full-bleed. Cột trái rộng 60% giữ headline sebentaFont 48px weight 500 với một từ italic, #000000. Bên dưới, subhead Inter 16px #000000. Ở cuối, link Inter 14px medium gạch chân đen ('Learn more →'). Section padding 48px."

    - "FAQ accordion: Nền trắng. Stack các row #f1f0eb toàn chiều rộng, 0 radius, padding dọc 24px, padding ngang 24px. Text câu hỏi Inter 16px medium #000000 căn trái, icon chevron-down 16px đen căn phải. Khoảng cách dọc 8px giữa các row."

    - "Brand showcase card: Card ảnh full-bleed, 0 radius, không shadow. Brand logo chồng lên màu trắng ở 48px, căn giữa trên cùng, cách mép trên 20%. Bên dưới card: tên thương hiệu Inter 18px medium #000000, sau đó subhead Inter 14px regular #60605e kèm tên track trong ngoặc kép. Cards trong một hàng ngang 4-up, gap 8px."

    - "Announcement bar: Nền #ff82c2 toàn chiều rộng. Text Inter 14px medium #000000 căn giữa, với badge pill 'NEW' đen (0px→9999px radius, bg #000, text #fff, 10px bold uppercase) inline ở đầu và inline underlined link ở cuối. Padding dọc 16px. Icon đóng (×) căn phải."

  chromatic_cadence:

    info: "Trang dùng màu sắc độ như cấu trúc chương, không phải trang trí. Nhịp điệu mặc định là: trắng → trắng → trắng → Hot Pink full-bleed → Signal Blue full-bleed → trắng → trắng. Mỗi block sắc độ phải được đặt trước và sau bởi một block đơn sắc — không bao giờ xếp chồng hai section sắc độ. Màu hồng luôn là sự kiện sắc độ đầu tiên trong trang (sau announcement bar), xanh là thứ hai, và vàng/cam/xanh lá chỉ xuất hiện như các chấm trang trí nhỏ hoặc icon strokes trong các section đơn sắc khác. Nhịp điệu này là thứ làm cho độ sặc sỡ 1% có cảm giác có chủ đích thay vì thưa thớt."

  similar_brands:

    - "**Splice** — Cùng bề mặt editorial trắng kem ấm, CTA đen góc vuông, và một màu điểm nhấn đậm duy nhất dùng làm sự kiện section"
    - "**Aesop** — Serif display editorial, neutral bone ấm, component phẳng góc vuông, và nhấn mạnh typographic hơn trang trí sắc độ"
    - "**Substack** — Custom serif ở display scale với italic để nhấn mạnh, bề mặt UI bone-tinted, và bố cục hạn chế màu sắc để typography mang thương hiệu"
    - "**Bandcamp** — Editorial ngành công nghiệp âm nhạc với canvas trắng kem ấm, serif headlines đậm, và sẵn sàng dùng một màu sáng duy nhất làm ngắt section"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-hot-pink: #ff82c2;
          --color-sun-yellow: #ffda40;
          --color-signal-blue: #20afff;
          --color-ember-orange: #ff6138;
          --color-leaf-green: #5ad363;
          --color-ink-black: #000000;
          --color-charcoal: #292c33;
          --color-slate: #60605e;
          --color-bone: #f1f0eb;
          --color-paper-white: #ffffff;
          --color-mist: #efefef;
          --color-stone: #c1c0bc;
          --color-sand: #e4d9cf;
          --color-frost: #cfd6e5;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sebentafont-custom-editorial-serif: 'sebentaFont (custom editorial serif)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: 1px;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 18px;
          --leading-subheading: 1.6;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -1.44px;
          --text-display: 64px;
          --leading-display: 1.06;
          --tracking-display: -2.56px;
          --text-display-xl: 80px;
          --leading-display-xl: 1;
          --tracking-display-xl: -3.2px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-240: 240px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 9999px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
          --radius-accordion-rows: 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-bone-surface: #f1f0eb;
          --surface-mist-surface: #efefef;
          --surface-hot-pink-block: #ff82c2;
          --surface-signal-blue-block: #20afff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-hot-pink: #ff82c2;
          --color-sun-yellow: #ffda40;
          --color-signal-blue: #20afff;
          --color-ember-orange: #ff6138;
          --color-leaf-green: #5ad363;
          --color-ink-black: #000000;
          --color-charcoal: #292c33;
          --color-slate: #60605e;
          --color-bone: #f1f0eb;
          --color-paper-white: #ffffff;
          --color-mist: #efefef;
          --color-stone: #c1c0bc;
          --color-sand: #e4d9cf;
          --color-frost: #cfd6e5;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sebentafont-custom-editorial-serif: 'sebentaFont (custom editorial serif)', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1;
          --tracking-caption: 1px;
          --text-body: 16px;
          --leading-body: 1.56;
          --text-subheading: 18px;
          --leading-subheading: 1.6;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -1.44px;
          --text-display: 64px;
          --leading-display: 1.06;
          --tracking-display: -2.56px;
          --text-display-xl: 80px;
          --leading-display-xl: 1;
          --tracking-display-xl: -3.2px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-240: 240px;
        }