control___style_reference:
  info: "> Editorial Swiss grid meets creative tool"

  theme: "light"

  info: "Control hoạt động như một công cụ thiết kế editorial: canvas trắng, đường viền đen cứng, và bảng màu gần như đơn sắc bị xuyên thủng bởi các điểm nhấn xanh lá, cam, và vàng tươi — trông như những vết highlight editorial. Điểm nhấn đặc trưng là sự tương phản typographic brutalism — display type Melange cỡ lớn (71–146px) với tracking gần như bằng 0, đặt cạnh label Favorit Mono uppercase siêu nhỏ (9–10px) với letter-spacing âm dày đặc. Mọi bề mặt đều phẳng; chiều sâu đến từ đường viền đen (1–2px), không phải từ đổ bóng. Thẩm mỹ này gợi một editorial spread Swiss được xây dựng lại cho phần mềm: neo vào grid, hình học không hề nao núng, và tự tin trong sự bất đối xứng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Văn bản chính, đường viền cấu trúc, và các đường contour xác định mọi cạnh bề mặt |"
    info: "| Paper | `#ffffff` | `--color-paper` | Canvas trang, văn bản đảo màu trên bề mặt tối, và label button trên nền xanh lá |"
    info: "| Gridline | `#d2d2d2` | `--color-gridline` | Đường phân cách nhẹ và viền mờ trên bề mặt phụ |"
    info: "| Slate | `#3d3d3d` | `--color-slate` | Văn bản phụ và UI element bị tắt tiếng |"
    info: "| Smoke | `#c6c6c0` | `--color-smoke` | Viền cấp trung và stroke form không hoạt động |"
    info: "| Fog | `#babab9` | `--color-fog` | Viền siêu mảnh và đường phân cách cấp ba |"
    info: "| Ash | `#acaca6` | `--color-ash` | Đường viền mờ và chrome placeholder |"
    info: "| Graphite | `#606060` | `--color-graphite` | Body text và metadata bị giảm nhấn |"
    info: "| Stone | `#828282` | `--color-stone` | Caption cấp ba và trạng thái disabled |"
    info: "| Concrete | `#7a7a7a` | `--color-concrete` | Bề mặt button disabled |"
    info: "| Bone | `#f5f5f4` | `--color-bone` | Bề mặt card và nền panel nâng cao — lệch một tông so với trắng |"
    info: "| Voltage Green | `#01ea40` | `--color-voltage-green` | Button hành động chính, trạng thái active, và phản hồi UI trực tiếp — xanh lá bão hòa trên canvas đen-trắng trông như điện đã bật |"
    info: "| Ember Orange | `#ff5c02` | `--color-ember-orange` | Màu hành động cam cho button filled, trạng thái navigation được chọn, và khoảnh khắc chuyển đổi tập trung |"
    info: "| Highlighter Yellow | `#ffdb4d` | `--color-highlighter-yellow` | Viền trang trí, đánh dấu lựa chọn, và stroke accent editorial — không bao giờ dùng làm fill |"

  tokens___typography:

    melange___display_và_headline_type__đặt_ở_kích_thước_cực_lớn_71_146px_với_tracking_âm_mạnh__0_05_đến__0_058em__weight_medium_là_có_chủ_đích___đủ_nặng_để_neo__không_quá_nặng_đến_mức_gào_thét__mang_năng_lượng_tạp_chí_editorial__không_có_system_sans_nào_thay_thế_được____font_melange:
      - "**Thay thế:** GT Sectra Display, Canela, hoặc Editorial New"
      - "**Weights:** 500"
      - "**Kích thước:** 16px, 25px, 36px, 71px, 146px"
      - "**Line height:** 1.01–1.52"
      - "**Letter spacing:** -0.0580em, -0.0550em, -0.0510em, -0.0500em, -0.0370em, -0.0240em, -0.0170em, 0.0070em"
      - "**Vai trò:** Display và headline type. Đặt ở kích thước cực lớn (71–146px) với tracking âm mạnh (-0.05 đến -0.058em). Weight medium là có chủ đích — đủ nặng để neo, không quá nặng đến mức gào thét. Mang năng lượng tạp chí editorial; không có system sans nào thay thế được"

    favorit_mono___micro_label__ui_chrome__và_metadata__tracking_uppercase_siêu_nhỏ_ở__0_03_đến__0_037em_tạo_cảm_giác_caption_editorial_swiss__line_height_kéo_dài_đến_2_4_cho_các_chồng_dọc_dày_đặc__luôn_đặt_nhỏ___đây_là_caption_font__không_bao_giờ_là_body_font____font_favorit_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Space Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 9px, 10px, 16px"
      - "**Line height:** 1.20–2.40"
      - "**Letter spacing:** -0.0370em, -0.0300em, 0.0200em"
      - "**Vai trò:** Micro-label, UI chrome, và metadata. Tracking uppercase siêu nhỏ ở -0.03 đến -0.037em tạo cảm giác caption editorial Swiss. Line-height kéo dài đến 2.4 cho các chồng dọc dày đặc. Luôn đặt nhỏ — đây là caption font, không bao giờ là body font"

    arial___fallback_system_body_text__có_thể_là_artifact_phát_hiện__body_thực_tế_của_sản_phẩm_được_xử_lý_bởi_headline_và_mono_systems__xem_như_last_resort_stack____font_arial:
      - "**Thay thế:** system-ui, -apple-system, sans-serif"
      - "**Weights:** 400"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Fallback system body text. Có thể là artifact phát hiện; body thực tế của sản phẩm được xử lý bởi headline và mono systems. Xem như last-resort stack"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body | 16px | 1.52 | -0.37px | `--text-body` |"
      info: "| subheading | 25px | 1.2 | -0.58px | `--text-subheading` |"
      info: "| heading | 36px | 1.07 | -1.84px | `--text-heading` |"
      info: "| heading-lg | 71px | 1.06 | -3.55px | `--text-heading-lg` |"
      info: "| display | 146px | 1.01 | -8.47px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 15 | 15px | `--spacing-15` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| full | 273px |"
      info: "| cards | 8px |"
      info: "| pills | 80px |"
      info: "| buttons | 40px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 24px"
      - "**Element gap:** 15px"

  components:

    green_action_button:
      vai_trò: "Primary call-to-action cho Start, Submit, và Continue"

      info: "Nền xanh lá #01ea40 filled, border 0px, border-radius 40px (hình pill hoàn toàn). Label bằng Favorit Mono 10px uppercase, #000000, letter-spacing -0.03em. Padding khoảng 12px 20px. Màu xanh lá tương phản cao trên canvas đen-trắng trông như trạng thái đã kích hoạt — hãy nhấn tôi"

    ghost_nav_link:
      vai_trò: "Mục navigation cấp cao nhất (Tutorials, Pricing, Login)"

      info: "Không nền hoặc border. Văn bản #000000, Arial 16px. Padding ngang rộng rãi. Chỉ gạch chân khi hover. Inset 40px từ logo bên trái, social links inset 40px từ cạnh phải"

    editorial_display_headline:
      vai_trò: "Neo typographic cho hero và cấp section"

      info: "Melange 500 ở 71–146px, line-height 1.01–1.07, letter-spacing -0.05 đến -0.058em. Màu #000000. Chồng một câu hoặc hai dòng căn trái. Không drop shadow, không gradient — pure flat ink on paper"

    mono_caption_label:
      vai_trò: "Subheadline, helper text, và editorial micro-copy"

      info: "Favorit Mono 400 ở 9–10px, uppercase, letter-spacing -0.03em. Màu #000000. Line-height kéo dài đến 2.2–2.4 cho các chồng nhiều dòng dễ đọc. Trông như chú thích hệ thống thiết kế Swiss"

    outline_card:
      vai_trò: "Khung showcase sản phẩm và canvas container"

      info: "Border-radius 8px, border 1–2px #000000, fill #ffffff hoặc #f5f5f4. Không đổ bóng. Padding chặt (15–24px). Đôi khi được phủ lên một grid pattern có thể nhìn thấy để truyền đạt ẩn dụ về bề mặt vẽ"

    tool_toolbar_in_product:
      vai_trò: "Dock dưới cùng cho các control thiết kế"

      info: "Dải ngang, nền #000000, bo tròn 8px. Mono icon màu #01ea40 và #ffdb4d. Giá trị slider và label bằng Favorit Mono 9px. Đặt absolute ở cuối canvas"

    status_pill:
      vai_trò: "Label banner cookie/consent và marker trạng thái nội tuyến"

      info: "Bán kính pill 80–273px. Nền #000000 với văn bản #ffffff. Mono label siêu nhỏ (9px) nội tuyến. Dùng để gắn cờ thông báo thụ động mà không phá vỡ editorial grid"

    grid_canvas_frame:
      vai_trò: "Wrapper bề mặt vẽ trong sản phẩm"

      info: "Viewport có viền lớn, radius 8px, stroke 1–2px #000000. Grid nội bộ gồm các đường mảnh #d2d2d2 hoặc #babab9 (ô khoảng 8–16px). Lấp đầy hầu hết chiều rộng viewport; grid CHÍNH LÀ texture — không có nền bổ sung"

    social_link_mono_tag:
      vai_trò: "Liên kết social bên ngoài (Insta, X, Discord) trong header"

      info: "Văn bản thuần #000000, Arial 16px. Không icon, không border. Cụm căn phải, inset 40px từ cạnh. Label typographic sạch sẽ thắng logo ở đây"

    body_paragraph:
      vai_trò: "Mô tả dài và copy hỗ trợ"

      info: "Arial hoặc system sans 16px, line-height 1.5–1.6, màu #000000 hoặc #606060. Max width ~480–560px để đọc thoải mái. Luôn căn trái. Theo sau một mono caption label để đặt ngữ cảnh"

  do_s_and_don_ts:

    nên:
      - "Dùng Melange ở 71–146px cho mọi headline chính — không bao giờ dưới 36px. Type cần không gian để thở nếu không sẽ mất đi uy quyền editorial"
      - "Đặt tất cả UI label bằng Favorit Mono 9–10px uppercase với letter-spacing -0.03em. Kích thước mono lớn hơn phá vỡ nhịp điệu caption"
      - "Dùng #01ea40 một cách tiết kiệm — một hành động chính trên mỗi màn hình. Sử dụng thêm xanh lá sẽ bị xem là nhiễu"
      - "Mặc định card radius là 8px và button radius là 40px (full pill). Không bao giờ pha trộn các mid-range radius như 16px hoặc 24px"
      - "Dựa vào viền đen 1–2px để định nghĩa bề mặt thay vì đổ bóng. Bóng không thuộc về hệ thống này"
      - "Giữ section gap rộng rãi (80–120px). Nhịp điệu editorial phụ thuộc vào không gian giữa các khối nội dung"
      - "Ghép mọi ảnh chụp màn hình sản phẩm với một grid texture có thể nhìn thấy — ẩn dụ về bề mặt vẽ của công cụ không bao giờ được che giấu"

    không_nên:
      - "Không dùng quá hai màu sặc sỡ trên một màn hình — xanh lá cho hành động, một accent để nhấn mạnh. Cam và vàng cạnh tranh nhau nếu cả hai xuất hiện dưới dạng fill"
      - "Không đặt Melange dưới 25px. Ở kích thước nhỏ, tracking chặt sẽ trở nên khó đọc"
      - "Không đưa drop shadow, glow, hoặc hiệu ứng blur vào. Chiều sâu đến từ border và khối màu phẳng"
      - "Không dùng system Arial stack cho hero text. Chỉ dành riêng cho fallback body copy"
      - "Không căn giữa body paragraph — editorial grid được neo chặt về bên trái"
      - "Không thêm gradient fill vào bất kỳ UI element nào. Bảng màu có chủ đích là phẳng"
      - "Không dùng trạng thái ngữ nghĩa được mã hóa màu sắc (xanh=thành công, đỏ=lỗi). Hệ thống là editorial, không phải dashboard — truyền đạt trạng thái bằng typography và border"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Paper | `#ffffff` | Canvas trang chính |"
    info: "| 1 | Bone | `#f5f5f4` | Nền card và panel nâng cao |"
    info: "| 2 | Obsidian | `#000000` | Bề mặt đảo màu (toolbar, status pill) |"

  imagery:

    info: "Ảnh chụp màn hình sản phẩm chiếm ưu thế hơn nhiếp ảnh và minh họa. Hình ảnh luôn được hiển thị bên trong một grid frame có thể nhìn thấy để truyền đạt ẩn dụ về bề mặt vẽ. Không có lifestyle photography, không có minh họa trừu tượng. Bên trong sản phẩm, nhiếp ảnh editorial tươi sáng (người, bìa tạp chí) xuất hiện dưới dạng nội dung canvas với lớp phủ màu sắc sống động. Phong cách icon là monoline mono — stroke mảnh, single-weight, không có color fill. Mọi hình ảnh đều phục vụ công cụ, không phải marketing — bạn thấy canvas, không phải một render được đánh bóng."

  layout:

    info: "Container căn giữa max-width 1200px với padding trái/phải rộng rãi. Hero là một editorial stack căn trái: mono caption label nhỏ, Melange headline khổng lồ (hai dòng), mono paragraph hỗ trợ, sau đó là một bordered canvas preview full-width nằm dưới fold. Navigation là một top bar mảnh duy nhất: logo xa bên trái, nav chính trái-trung tâm (inset 40px), social links xa bên phải (inset 40px). Nhịp điệu section được neo chặt về bên trái, các cột đơn xen kẽ với các bản xem trước sản phẩm full-bleed. Không có multi-column feature grid — layout giống tạp chí, không giống dashboard. Khoảng cách dọc rộng rãi (80–120px giữa các section) để sự tương phản typographic phát huy tác dụng."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Văn bản chính: #000000"
    - "Nền trang: #ffffff"
    - "Bề mặt card: #f5f5f4"
    - "Border / outline: #000000 (1–2px)"
    - "Hành động chính: #ff5c02 (filled action)"
    - "Accent phụ: #ff5c02 (dùng trong UI sản phẩm)"

    ví_dụ_component_prompts:

    - "Tạo một Primary Action Button: nền #ff5c02, văn bản #000000, radius 9999px, padding pill nhỏ gọn. Dùng treatment filled này cho CTA chính."

    - "Xây dựng một outline product card: border-radius 8px, border 2px solid #000000, fill #f5f5f4, padding 24px. Không đổ bóng. Bên trong, một vùng ảnh 16:9 với cùng border và radius. Caption bên dưới bằng Favorit Mono 9px, uppercase, letter-spacing -0.03em."

    - "Xây dựng một top navigation bar: width 100%, border-bottom 1px solid #000000, height 80px, nền trắng. Logo wordmark bằng Melange 500 ở 25px, padding trái 40px. Center nav links bằng Arial 16px đen. Cụm phải gồm social links (Insta, X, Discord) bằng Arial 16px, padding phải 40px."

    - "Xây dựng một grid canvas frame: border-radius 8px, border 1px solid #000000, fill trắng, width 800px. Pattern nội bộ gồm các đường dọc và ngang mảnh #d2d2d2 với khoảng cách 16px. Toolbar dưới cùng tùy chọn: radius 8px, border đen 1px, fill #000000, height 32px, với mono icon màu #01ea40 và dấu công cụ màu vàng."

    - "Xây dựng một status pill: border-radius 273px (full pill), nền #000000, padding 8px 16px. Label bằng Favorit Mono 9px, uppercase, letter-spacing -0.03em, màu #ffffff."

  similar_brands:

    - "**Linear** — Mono label editorial kết hợp với display type tracking chặt cỡ lớn và bảng màu gần như đơn sắc với một accent sống động duy nhất"
    - "**Vercel** — Viền đen brutalism định nghĩa mọi bề mặt, không đổ bóng, và phân cấp typographic tự tin trên các khối màu phẳng"
    - "**Readymag** — Tiếp thị công cụ sáng tạo sử dụng Swiss-grid layout, khoảng trắng rộng rãi, và ảnh chụp màn hình sản phẩm bên trong khung có viền để hiển thị chính canvas"
    - "**Framer** — Hero typography editorial (display cỡ lớn) với bảng màu hạn chế và bản xem trước sản phẩm full-bleed thay thế danh sách tính năng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper: #ffffff;
          --color-gridline: #d2d2d2;
          --color-slate: #3d3d3d;
          --color-smoke: #c6c6c0;
          --color-fog: #babab9;
          --color-ash: #acaca6;
          --color-graphite: #606060;
          --color-stone: #828282;
          --color-concrete: #7a7a7a;
          --color-bone: #f5f5f4;
          --color-voltage-green: #01ea40;
          --color-ember-orange: #ff5c02;
          --color-highlighter-yellow: #ffdb4d;
        
          /* Typography — Font Families */
          --font-melange: 'Melange', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-mono: 'Favorit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.52;
          --tracking-body: -0.37px;
          --text-subheading: 25px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.58px;
          --text-heading: 36px;
          --leading-heading: 1.07;
          --tracking-heading: -1.84px;
          --text-heading-lg: 71px;
          --leading-heading-lg: 1.06;
          --tracking-heading-lg: -3.55px;
          --text-display: 146px;
          --leading-display: 1.01;
          --tracking-display: -8.47px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-15: 15px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 15px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 40px;
          --radius-full: 80px;
          --radius-full-2: 273px;
        
          /* Named Radii */
          --radius-full: 273px;
          --radius-cards: 8px;
          --radius-pills: 80px;
          --radius-buttons: 40px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-bone: #f5f5f4;
          --surface-obsidian: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper: #ffffff;
          --color-gridline: #d2d2d2;
          --color-slate: #3d3d3d;
          --color-smoke: #c6c6c0;
          --color-fog: #babab9;
          --color-ash: #acaca6;
          --color-graphite: #606060;
          --color-stone: #828282;
          --color-concrete: #7a7a7a;
          --color-bone: #f5f5f4;
          --color-voltage-green: #01ea40;
          --color-ember-orange: #ff5c02;
          --color-highlighter-yellow: #ffdb4d;
        
          /* Typography */
          --font-melange: 'Melange', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-favorit-mono: 'Favorit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body: 16px;
          --leading-body: 1.52;
          --tracking-body: -0.37px;
          --text-subheading: 25px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.58px;
          --text-heading: 36px;
          --leading-heading: 1.07;
          --tracking-heading: -1.84px;
          --text-heading-lg: 71px;
          --leading-heading-lg: 1.06;
          --tracking-heading-lg: -3.55px;
          --text-display: 146px;
          --leading-display: 1.01;
          --tracking-display: -8.47px;
        
          /* Spacing */
          --spacing-15: 15px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 40px;
          --radius-full: 80px;
          --radius-full-2: 273px;
        }