arc___style_reference:
  info: "> Sân chơi editorial với đường cắt hình vỏ sò"

  theme: "light"

  info: "Trang web của Arc mang phong cách một spread editorial ấm áp, được cắt bằng dao giấy thủ công: nền canvas màu kem vanilla, các đường viền hình vỏ sò (scalloped edges) lượn sóng giữa mỗi dải màu, và một mảng tím violet rực rỡ tràn ngập các khối lớn như một trang sách nhuộm màu. Headline serif (Marlin) kết hợp với UI sans-serif sạch sẽ (Inter) tạo ra sự căng thẳng giữa editorial và product, trong khi chính trình duyệt — chứ không phải ảnh chụp — mới là nhân vật chính, được thể hiện dưới dạng mockup tương tác lớn với sidebar spaces, thư mục và inline chat. Bảng màu chủ yếu là giấy và mực; màu violet mang bầu không khí hơn là màu tương tác, và các đường chia lượn sóng đảm nhận phần lớn công việc tạo cá tính mà shadow và gradient thường làm trên các trang web khác."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Electric Iris | `#3139fb` | `--color-electric-iris` | Nền section full-bleed, bầu không khí thương hiệu, sidebar chrome bên trong browser mockup — một màu violet bão hòa cao tràn ngập toàn bộ dải màu, khiến trang đọc như color blocking kiểu editorial, không phải trạng thái UI |"
    info: "| Deep Violet | `#2702c2` | `--color-deep-violet` | Lớp accent tối hơn bên trong các section violet, trạng thái pressed hoặc active trong màu thương hiệu, heading phụ trên nền violet — làm sâu thêm iris mà không chuyển sắc |"
    info: "| Oat | `#fffadd` | `--color-oat` | Canvas trang chính và nền gradient hero — màu kem ấm đọc như giấy chứ không phải màn hình trắng, bề mặt mặc định cho mọi thứ khác |"
    info: "| Linen | `#fffcec` | `--color-linen` | Bề mặt ấm thứ cấp cho card, nền nav và footer — ấm hơn Oat nửa bước, dùng khi một lớp cần nổi lên khỏi canvas mà không chuyển sang trắng |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Màu trắng tinh cho nội thất browser mockup card, chữ trên nền tối và các đường gờ scalloped divider ngăn cách các dải màu |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Màu trung tính tối hỗ trợ cho chữ, icon và độ tương phản mạnh. Không nâng cấp nó thành màu CTA chính |"
    info: "| Granite | `#696969` | `--color-granite` | Body copy nhẹ nhàng, mô tả phụ và helper text — xám trung bình lùi lại trước Oat mà không biến mất |"
    info: "| Olive Stone | `#595853` | `--color-olive-stone` | Chữ phụ tinh tế và xám ấm cho chữ nhỏ — hơi ngả olive để hài hòa với canvas kem thay vì đối chọi |"

  tokens___typography:

    marlin_soft_sq___biến_thể_mềm_hơn_của_marlin_dùng_cho_nav__subheading_và_cỡ_display_phụ_28_40px___các_đầu_tròn_tạo_cảm_giác_thân_thiện_khi_đặt_cạnh_các_đường_cắt_display_sắc_nét_của_marlin____font_marlin_soft_sq:
      - "**Thay thế:** GT Sectra Soft, Söhne Soft, hoặc Inter Display"
      - "**Weights:** 500, 700"
      - "**Cỡ chữ:** 14px, 16px, 28px, 40px, 46px"
      - "**Line height:** 0.93, 0.98, 1.07, 1.10, 1.20"
      - "**Letter spacing:** -0.05em, -0.04em, -0.02em"
      - "**Vai trò:** Biến thể mềm hơn của Marlin dùng cho nav, subheading và cỡ display phụ (28–40px) — các đầu tròn tạo cảm giác thân thiện khi đặt cạnh các đường cắt display sắc nét của Marlin"

    marlin___serif_display_chính_cho_hero_headline_và_editorial_pull_quote_cỡ_lớn_ở_46px__weight_400_cho_body_16px___sự_tương_phản_giữa_body_serif_mảnh_và_display_serif_đậm_là_chữ_ký_typographic_của_trang____font_marlin:
      - "**Thay thế:** GT Sectra, Tiempos Headline, hoặc DM Serif Display"
      - "**Weights:** 400, 700, 800"
      - "**Cỡ chữ:** 16px, 46px"
      - "**Line height:** 0.93, 1.20"
      - "**Letter spacing:** -0.04em"
      - "**Vai trò:** Serif display chính cho hero headline và editorial pull-quote cỡ lớn ở 46px; weight 400 cho body 16px — sự tương phản giữa body serif mảnh và display serif đậm là chữ ký typographic của trang"

    intervariable___ui_text__label_và_chú_thích_giao_diện___sans_serif_đa_năng_cho_mọi_thứ_bên_trong_browser_mockup_và_copy_hỗ_trợ_xung_quanh_trang____font_intervariable:
      - "**Thay thế:** Inter, Söhne, hoặc General Sans"
      - "**Weights:** 500, 600, 700"
      - "**Cỡ chữ:** 12px, 17px"
      - "**Line height:** 1.20, 1.50"
      - "**Letter spacing:** 0.033em"
      - "**Vai trò:** UI text, label và chú thích giao diện — sans-serif đa năng cho mọi thứ bên trong browser mockup và copy hỗ trợ xung quanh trang"

    abc_favorit_mono___micro_label__tag_và_category_marker_ở_12px_với_tracking_rộng_lên_đến_0_15em___nhịp_điệu_monospaced_phá_vỡ_mẫu_serif_sans_và_báo_hiệu__metadata_____font_abc_favorit_mono:
      - "**Thay thế:** JetBrains Mono, ABC Diatype Mono, hoặc IBM Plex Mono"
      - "**Weights:** 400, 700"
      - "**Cỡ chữ:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.033em, 0.05em, 0.15em"
      - "**Vai trò:** Micro-label, tag và category marker ở 12px với tracking rộng (lên đến 0.15em) — nhịp điệu monospaced phá vỡ mẫu serif/sans và báo hiệu 'metadata'"

    abc_oracle___serif_body_phụ_ở_20_24px_cho_các_đoạn_mô_tả_dài_hơn_nằm_giữa_các_marlin_display_headline___cầu_nối_giữa_display_và_ui_mà_không_cần_chuyển_font_family____font_abc_oracle:
      - "**Thay thế:** ABC Diatype, Source Serif, hoặc Tiempos Text"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 20px, 24px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Serif body phụ ở 20–24px cho các đoạn mô tả dài hơn nằm giữa các Marlin display headline — cầu nối giữa display và UI mà không cần chuyển font family"

    exposure_var___display_headline_dày_ở_36px_với_line_height_1_0___dùng_có_chọn_lọc_để_nhấn_mạnh_khi_cần_một_đường_cắt_nén_hơn_so_với_marlin____font_exposure_var:
      - "**Thay thế:** ABC Diatype Display Tight, Druk, hoặc Söhne Breit"
      - "**Weights:** 700"
      - "**Cỡ chữ:** 36px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.02em"
      - "**Vai trò:** Display headline dày ở 36px với line-height 1.0 — dùng có chọn lọc để nhấn mạnh khi cần một đường cắt nén hơn so với Marlin"

    apple_system____apple_system___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_apple_system:
      - "**Weights:** 600"
      - "**Cỡ chữ:** 14px"
      - "**Line height:** 2.07"
      - "**Letter spacing:** -0.01"
      - "**Vai trò:** -apple-system — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.4px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | -0.14px | `--text-body-sm` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.1 | -0.56px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.07 | -1.6px | `--text-heading-lg` |"
      info: "| display | 46px | 0.98 | -2.3px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "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: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 8px |"
      info: "| cards | 8px |"
      info: "| links | 4px |"
      info: "| pills | 22px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px` | `--shadow-sm-2` |"

    layout:

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

  components:

    scalloped_section_divider:
      vai_trò: "Ranh giới đặc trưng giữa mọi dải màu"

      info: "Đường viền lượn sóng hình vỏ sò ngăn cách các section — được thể hiện dưới dạng một chuỗi các đường cắt hình bán nguyệt dọc theo đáy của mỗi dải màu, tạo hiệu ứng giấy thủ công hoặc tem cắt. Màu sắc là Paper White (#ffffff) khi nối một section violet, hoặc Oat (#fffadd) khi nối một section kem. Các scallop là hình tròn đều, đường kính khoảng 16–20px, tạo ra nhịp điệu lặp lại thay thế cho cạnh cứng tiêu chuẩn. Đây là yếu tố hình ảnh đặc biệt nhất trên trang."

    dark_cta_button:
      vai_trò: "Call-to-action chính — nút 'Try Dia'"

      info: "Nền Obsidian (#000000) với chữ Paper White (#ffffff), border-radius 8px, shadow rgba(0,0,0,0.1) 0px 5px 5px 0px. Padding ngang 16px, padding dọc 10px. Bao gồm một icon cầu vồng Arc nhỏ bên trái label và mũi tên phải sau chữ. Font: Marlin Soft SQ 500 ở 14px. Nút tối trên nền canvas kem tạo độ tương phản mạnh mà không cần màu sắc."

    top_navigation_bar:
      vai_trò: "Header cố định trên tất cả các section"

      info: "Nằm trên dải màu Electric Iris (#3139fb). Nền trong suốt hoặc Linen (#fffcec) không có viền nhìn thấy được. Bên trái: icon cầu vồng Arc. Giữa/phải: nav links (Max, Mobile, Developers, Students, Blog) màu Paper White, 14px, với icon mũi tên nhỏ. Padding ngang 32px. Nav duy trì cùng cạnh đáy scalloped xác định phần còn lại của trang."

    browser_product_mockup:
      vai_trò: "Hình ảnh hero — trình duyệt Arc được thể hiện như một phần tử tương tác lớn"

      info: "Cửa sổ trình duyệt đầy đủ với các nút traffic-light (hình tròn đỏ/vàng/xanh lá), thanh URL hiển thị 'Dia — New Chat', và bố cục chia đôi: sidebar trái cho spaces/folders, khu vực nội dung bên phải. Cửa sổ có radius 8px, shadow nhẹ rgba(0,0,0,0.25) 0px 2px 8px 0px. Bề mặt bên trong dùng Paper White (#ffffff) trên sidebar Linen (#fffcec). Mockup này thay thế ảnh chụp sản phẩm làm hình ảnh chính."

    browser_sidebar:
      vai_trò: "Thanh điều hướng bên trái trong browser mockup"

      info: "Nền Linen (#fffcec), radius 8px trên các mục tương tác. Chứa space tabs (icon nhỏ + label) và folder items. Space đang hoạt động có chữ Obsidian (#000000) và weight đậm; các mục không hoạt động dùng Granite (#696969). 12px Inter Variable 500 cho label. Padding dọc 8px giữa các mục. Sidebar đổi màu nền theo từng section — Linen trong section kem, Electric Iris trong section violet."

    space_tab:
      vai_trò: "Mục space hoặc folder riêng lẻ trong browser sidebar"

      info: "Icon nhỏ (Gmail, Calendar, v.v.) + label. Radius 8px, padding ngang 10px, padding dọc 8px. Không hoạt động: chữ Granite, nền trong suốt. Hoạt động: chữ Obsidian, nền Paper White với viền nhẹ. Icon là hình thu nhỏ màu thương hiệu — một phiên bản bão hòa nhỏ của nhận diện thị giác dịch vụ."

    chat_bubble___user:
      vai_trò: "Tin nhắn do người dùng gõ trong giao diện AI chat"

      info: "Nền Electric Iris (#3139fb) với chữ Paper White (#ffffff), border-radius 22px (hình pill). Font: Inter Variable 500 ở 16px, line-height 1.50. Căn phải. Padding 12px 20px. Màu violet rực rỡ trên nền trắng làm nổi bật tin nhắn của người dùng mà không cần avatar."

    chat_bubble___ai_response:
      vai_trò: "Phản hồi do AI tạo trong giao diện chat"

      info: "Không có nền — nằm trực tiếp trên Paper White (#ffffff). Chữ Obsidian (#000000), 16px Marlin Soft SQ 500, line-height 1.20. Căn trái. Một meta-label nhỏ 'Thought for 5 seconds' màu Granite (#696969) ở 12px nằm phía trên. Nhấn mạnh inline đậm trên các cụm từ chính."

    workspace_panel_violet_section_sidebar:
      vai_trò: "Điều hướng bên trái bên trong section violet thương hiệu"

      info: "Nền Electric Iris (#3139fb) đặc. Space icons màu Paper White kích thước 40×40px với radius 8px. Section headers ('Work', 'Personal') màu Paper White ở 12px, letter-spacing 0.033em. Folder items bên dưới màu Paper White ở 14px. Workspace đang hoạt động (ví dụ: 'onetwothree') có nền pill Paper White với chữ Electric Iris — tương phản đảo ngược."

    testimonial_marquee_strip:
      vai_trò: "Trích dẫn báo chí cuộn ngang ở cuối các section"

      info: "Dải màu full-width trên nền Paper White (#ffffff). Chữ trích dẫn Obsidian (#000000) ở 17px Marlin Soft SQ 500. Ghi nguồn (Bloomberg, Inverse, Inc.) màu Granite (#696969) với dấu ngoặc kép đóng. Được phân cách bằng dấu chấm tròn. Dải tự động cuộn ngang và nằm giữa các scalloped divider."

    category_micro_label:
      vai_trò: "Tag hoặc category marker monospaced"

      info: "ABC Favorit Mono 400 ở 12px, letter-spacing 0.15em (tracking rộng), chữ hoa. Chữ Obsidian (#000000) hoặc Paper White (#ffffff) tùy theo nền. Không có nền — chỉ là chữ có tracking báo hiệu 'metadata' hoặc 'category'. Dùng có chọn lọc để gắn nhãn section mà không tạo trọng lượng thị giác."

    hero_gradient_banner:
      vai_trò: "Gradient kem sang hồng phía sau hero headline"

      info: "Gradient ngang nhẹ từ Oat (#fffadd) bên trái qua một màu hồng/lavender rất nhạt đến một màu kem mát hơn bên phải. Được áp dụng làm nền section hero. Gradient rất tinh tế — sự chuyển đổi từ ấm sang mát được cảm nhận hơn là nhìn thấy. Bên dưới headline là Dark CTA Button được căn giữa."

  do_s_and_don_ts:

    do:
      - "Dùng scalloped divider làm ranh giới giữa mọi section màu — không bao giờ dùng đường kẻ ngang cứng hoặc viền mỏng"
      - "Đặt display headline ở 46px Marlin 400/700/800 với letter-spacing -2.3px; tracking chặt trên serif là thứ tạo nên giọng editorial"
      - "Chỉ dùng Electric Iris (#3139fb) cho nền section full-bleed — không bao giờ dùng cho chữ, icon hoặc phần tử UI nhỏ"
      - "Kết hợp serif headline (Marlin) với sans-serif UI (Inter Variable) — sự tương phản typographic mang lại sự căng thẳng editorial-meets-product"
      - "Mặc định dùng border-radius 8px cho card, button và nav items; chỉ dùng 22px cho chat bubble hình pill và tag thỉnh thoảng"
      - "Dùng ABC Favorit Mono ở 12px với tracking 0.15em cho micro-label và category marker — tracking rộng trên mono phá vỡ mẫu serif/sans và báo hiệu metadata"
      - "Giữ shadow tối thiểu: rgba(0,0,0,0.1) 0px 5px 5px 0px cho button, rgba(0,0,0,0.25) 0px 2px 8px 0px cho mockup nâng cao — để scalloped divider và color blocking làm công việc không gian"

    don_t:
      - "Không dùng Electric Iris (#3139fb) cho CTA button hoặc accent tương tác — nó mang bầu không khí, không phải tương tác; button giữ màu tối"
      - "Không thêm gradient vào UI component — trang không có gradient nào được phát hiện; gradient duy nhất là hero cream-to-pink wash"
      - "Không dùng border-radius 0px hoặc 4px cho card hoặc button — bán kính tối thiểu có thể nhìn thấy là 8px; góc nhọn phá vỡ cảm giác giấy thủ công"
      - "Không kết hợp hai font serif trên cùng một dòng — Marlin và Marlin Soft SQ là serif duy nhất; kết hợp với ABC Oracle cho body thì được nhưng không bao giờ dùng hai display serif"
      - "Không dùng trắng sáng (#ffffff) làm canvas trang — màu kem ấm Oat (#fffadd) là mặc định; trắng dành riêng cho nội thất mockup và scalloped ridges"
      - "Không áp dụng drop shadow nặng cho chữ hoặc phần tử nhỏ — shadow chỉ xuất hiện trên button và cửa sổ browser mockup"
      - "Không thay thế scalloped divider bằng SVG wave, đường cắt chéo hoặc đường thẳng — nhịp điệu hình bán nguyệt scallop là đặc điểm dễ nhận biết nhất của trang"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Oat Canvas | `#fffadd` | Nền trang mặc định; màu kem ấm đọc như giấy |"
    info: "| 1 | Linen Card | `#fffcec` | Bề mặt thứ cấp nổi lên khỏi canvas với tông ấm hơn nửa bước |"
    info: "| 2 | Paper White | `#ffffff` | Màu trắng tinh cho nội thất browser mockup card và scalloped divider ridges |"
    info: "| 3 | Electric Iris Band | `#3139fb` | Nền section thương hiệu full-bleed — color blocking mang bầu không khí |"
    info: "| 4 | Deep Violet Layer | `#2702c2` | Accent sâu hơn bên trong section violet để tạo phân cấp |"

  elevation:

    - "**Dark CTA Button:** `rgba(0, 0, 0, 0.1) 0px 5px 5px 0px`"
    - "**Browser Product Mockup:** `rgba(0, 0, 0, 0.25) 0px 2px 8px 0px`"

  imagery:

    info: "Browser product mockup CHÍNH LÀ hình ảnh. Không có ảnh chụp sản phẩm, không có ảnh phong cách sống, không có minh họa — trình duyệt Arc được thể hiện dưới dạng cửa sổ tương tác lớn (traffic lights, thanh URL, sidebar spaces, inline chat) là hình ảnh chính trên mọi section. Bên trong mockup, nội dung thực lấp đầy viewport: ảnh hoa trong MMMHome, bản vẽ kiến trúc trong section violet, thẻ lịch/sự kiện. Đây là các trạng thái UI được chụp màn hình, không phải ảnh dàn dựng. Mockup có chiều rộng full-width, nằm trên nền màu của section và đổ một shadow mềm duy nhất. Không có hệ thống icon nào hiển thị — bản thân sản phẩm CHÍNH LÀ icon."

  layout:

    info: "Các dải màu full-bleed xếp chồng theo chiều dọc với các chuyển tiếp scalloped giữa mỗi dải. Trang không phải là một canvas cuộn duy nhất với các section — nó là một chuỗi các mảng màu (cream → violet → cream → violet) mà mỗi mảng đều cảm thấy như một lần lật trang. Trong mỗi dải, nội dung có max-width ~1200px và được căn giữa. Hero là một cụm headline căn giữa (h1 + subtext + CTA) trên nền gradient kem với một browser mockup lớn bên dưới. Các section violet chia thành sidebar workspace bên trái (250–300px) và khu vực nội dung bên phải hiển thị toàn bộ browser viewport. Cạnh scalloped chạy toàn bộ chiều rộng ở đáy mỗi dải, tạo ra nhịp điệu lượn sóng liên tục xuống trang. Navigation là một thanh trên cùng tối giản tồn tại trên tất cả các section, nằm trên dải violet đầu tiên."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000 (Obsidian)"
    - "background: #fffadd (Oat cream canvas)"
    - "border: #bfbdb1 (đường kẻ mảnh ấm tinh tế) / #696969 (divider nhìn thấy được)"
    - "accent: #3139fb (Electric Iris — section fill mang bầu không khí)"
    - "secondary surface: #fffcec (Linen — card và nav)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    info: "Không có màu primary action riêng biệt nào được quan sát; dùng các xử lý button trung tính đã trích xuất thay vì tự tạo màu CTA đã tô."

    - "**Violet Brand Section**: Nền full-bleed Electric Iris (#3139fb). Scalloped white divider ở cạnh trên. Sidebar trái: rộng 280px, nền #3139fb đặc, space icons (40×40px, Paper White, radius 8px), section headers màu Paper White 12px ABC Favorit Mono với tracking 0.15em. Workspace đang hoạt động có nền pill Paper White với chữ #3139fb. Khu vực bên phải: browser viewport hiển thị nội dung workspace — card trắng trên nền #fffadd, heading serif đậm ở 28px Marlin Soft SQ 700, body ở 16px ABC Oracle 400 màu Obsidian."

    - "**Chat Interface Card**: Nền Paper White (#ffffff), radius 8px, padding 24px. Tin nhắn người dùng: căn phải, nền Electric Iris (#3139fb), chữ Paper White, pill radius 22px, padding 12px 20px, Inter Variable 500 ở 16px. AI response bên dưới: căn trái, không nền, chữ Obsidian, 16px Marlin Soft SQ 500. Meta-label phía trên AI response: 'Thought for 5 seconds' màu Granite (#696969) ở 12px Inter Variable 500 với tracking 0.033em."

    - "**Testimonial Strip**: Dải full-width Paper White (#ffffff) giữa các scalloped divider. Hàng cuộn ngang. Mỗi trích dẫn: chữ Obsidian ở 17px Marlin Soft SQ 500, theo sau là tên nguồn màu Granite (#696969). Dấu phân cách: dấu chấm tròn. Padding dọc 32px, padding ngang 48px."

    - "**Category Micro-Label**: Không nền. Chỉ chữ: ABC Favorit Mono 400 ở 12px, letter-spacing 0.15em, chữ hoa, Obsidian (#000000). Dùng phía trên tiêu đề section như một metadata tag. Khoảng cách dưới 4px đến headline bên dưới."

  scalloped_divider_system:

    info: "Cạnh scalloped là yếu tố thiết kế dễ nhận biết nhất của trang và phải được coi là component hạng nhất, không phải vật trang trí phụ."

    hình_học: ": Một mẫu lặp lại các đường cắt hình bán nguyệt dọc theo cạnh dưới của một dải màu. Mỗi scallop có đường kính khoảng 16–20px, cách đều nhau. Mẫu chạy toàn bộ chiều rộng của viewport."

    quy_tắc_màu_sắc: ":"
    - "Khi dải phía trên là Electric Iris (#3139fb), scallop được tô bằng Paper White (#ffffff) để tạo sóng sáng trên nền violet."
    - "Khi dải phía trên là Oat (#fffadd) hoặc Linen (#fffcec), scallop được tô bằng Electric Iris (#3139fb) để lặp lại section violet tiếp theo."
    - "Không bao giờ dùng cùng màu cho dải và scallop ridge của nó — scallop phải luôn tương phản với dải mẹ."

    triển_khai: ": Dùng SVG mask hoặc CSS clip-path với mẫu repeating-radial-gradient. Các scallop phải là hình tròn hoàn hảo, không phải hình elip. Không thay đổi kích thước scallop trên toàn trang — tính đồng nhất là thứ tạo ra nhịp điệu."

    khi_không_dùng: ": Bên trong browser mockup hoặc trên bất kỳ component UI nào. Scallop là yếu tố kiến trúc cấp trang, không phải xử lý card hay button."

  similar_brands:

    - "**Notion** — Cùng canvas kem ấm với bố cục editorial vui tươi, kết hợp typography serif-meets-sans, và sử dụng shadow tối thiểu"
    - "**Figma** — Cùng cách tiếp cận product-as-hero nơi giao diện ứng dụng thay thế ảnh chụp, kết hợp với các khối section một màu đậm"
    - "**Linear** — Cùng letter-spacing chặt trên display heading và cam kết với một màu accent sống động duy nhất cho chiều sâu bầu không khí"
    - "**Gumroad** — Cùng độ ấm của giấy thủ công, ranh giới section bất thường vui tươi, và sẵn sàng phá vỡ quy ước clean-SaaS"
    - "**Stripe** — Cùng kỷ luật typography editorial — serif display headline kết hợp với sans body sạch sẽ, độ tương phản cao, spacing rộng rãi"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-iris: #3139fb;
          --color-deep-violet: #2702c2;
          --color-oat: #fffadd;
          --color-linen: #fffcec;
          --color-paper-white: #ffffff;
          --color-obsidian: #000000;
          --color-granite: #696969;
          --color-olive-stone: #595853;
        
          /* Typography — Font Families */
          --font-marlin-soft-sq: 'Marlin Soft SQ', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-marlin: 'Marlin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-favorit-mono: 'ABC Favorit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-exposure-var: 'Exposure VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.4px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.14px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 28px;
          --leading-heading: 1.1;
          --tracking-heading: -0.56px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -1.6px;
          --text-display: 46px;
          --leading-display: 0.98;
          --tracking-display: -2.3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 22px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 8px;
          --radius-links: 4px;
          --radius-pills: 22px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px;
        
          /* Surfaces */
          --surface-oat-canvas: #fffadd;
          --surface-linen-card: #fffcec;
          --surface-paper-white: #ffffff;
          --surface-electric-iris-band: #3139fb;
          --surface-deep-violet-layer: #2702c2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-iris: #3139fb;
          --color-deep-violet: #2702c2;
          --color-oat: #fffadd;
          --color-linen: #fffcec;
          --color-paper-white: #ffffff;
          --color-obsidian: #000000;
          --color-granite: #696969;
          --color-olive-stone: #595853;
        
          /* Typography */
          --font-marlin-soft-sq: 'Marlin Soft SQ', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-marlin: 'Marlin', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-favorit-mono: 'ABC Favorit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-abc-oracle: 'ABC Oracle', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-exposure-var: 'Exposure VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.4px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.14px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-heading: 28px;
          --leading-heading: 1.1;
          --tracking-heading: -0.56px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.07;
          --tracking-heading-lg: -1.6px;
          --text-display: 46px;
          --leading-display: 0.98;
          --tracking-display: -2.3px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 22px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 5px 5px 0px;
          --shadow-sm-2: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px;
        }