brainfish___style_reference:
  info: "> Sticker trên giấy thủ công"

  theme: "light"

  info: "Brainfish là một product site theo phong cách neo-brutalist khoác lên mình bảng màu sân chơi: nền trắng, một điểm nhấn xanh chanh rực rỡ duy nhất, và các section pastel full-bleed (xanh ngọc bầu trời, xanh bạc hà, xanh coban) được ngắt quãng bởi các hình minh họa mây, cá và biểu tượng app nổi. Đổ bóng cứng offset (2px solid, zero blur) và viền đen mảnh tạo cho mọi bề mặt tương tác một cảm giác nặng như sticker trên giấy — các component dường như được ghim vào trang thay vì lơ lửng. Chữ mang phong cách hình học và dày (Satoshi weight 500/700 với negative tracking mạnh ở kích thước display), và màu sắc được đưa vào một cách tiết kiệm: xanh chanh cho hành động, pastel tint cho data card, độ bão hòa đầy đủ chỉ xuất hiện ở nền section. Toàn bộ hệ thống đọc như một explainer thân thiện, hơi thủ công — UI là một truyện tranh về tri thức, không phải dashboard."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Lime Pulse | `#a3e635` | `--color-lime-pulse` | Màu hành động xanh cho button dạng filled, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi được focus. |"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Text chính, tất cả border, đổ bóng cứng offset, icon stroke — mực cấu trúc của hệ thống |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas trang, bề mặt card, button fill, input background — lớp nền cơ sở mà mọi thứ ghim lên |"
    info: "| Graphite | `#171717` | `--color-graphite` | Border phụ, card outline, badge stroke — màu gần đen dùng khi #000 thuần đọc quá gắt ở độ dày mảnh |"
    info: "| Shadow Ink | `#0a0a0d` | `--color-shadow-ink` | Màu đổ bóng cứng offset (rgb 10,10,13) cho button, nav, và card nâng cao — hầu như không phân biệt được với đen nhưng được dùng trong shadow stack để tạo độ sâu hơi lạnh |"
    info: "| Fog | `#f5f5f5` | `--color-fog` | Nền footer, bề mặt recess nhẹ — màu off-white duy nhất không phải pastel tint |"
    info: "| Steel | `#737373` | `--color-steel` | Helper text mờ, icon stroke, input placeholder, border trạng thái disabled |"
    info: "| Iron | `#222222` | `--color-iron` | Nav text, nav border, secondary button text — màu đen mềm hơn cho navigation dày đặc |"
    info: "| Slate | `#333333` | `--color-slate` | Link text, border fallback ảnh, border cấp ba |"
    info: "| Buttercream | `#fef3c8` | `--color-buttercream` | Lớp phủ vàng cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung |"
    info: "| Mint Wash | `#d2fae5` | `--color-mint-wash` | Lớp phủ xám cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung |"
    info: "| Lilac Mist | `#fae9ff` | `--color-lilac-mist` | Nền section mềm, bề mặt thay thế, và card fill yên tĩnh |"
    info: "| Bubblegum | `#f5d1fe` | `--color-bubblegum` | Lớp phủ hồng cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung |"
    info: "| Amber Spark | `#fbbf25` | `--color-amber-spark` | Fill minh họa trang trí, icon điểm nhấn, badge highlight ấm — màu vàng rực rỡ dùng tiết kiệm để tạo điểm nhấn vui tươi |"
    info: "| Sky Wash | `#b7eaf6` | `--color-sky-wash` | Nền hero section full-bleed — dải xanh ngọc chủ đạo phía sau headline chính |"
    info: "| Cobalt Field | `#3366e0` | `--color-cobalt-field` | Nền testimonial section full-bleed — dải xanh đậm dùng cho social proof và quote panel |"
    info: "| Meadow | `#b9f0c0` | `--color-meadow` | Nền customer logo strip full-bleed — dải xanh lá dưới product mockup |"
    info: "| Amber Gradient | `linear-gradient(rgb(253, 229, 177), rgb(252, 214, 131))` | `--color-amber-gradient` | Gradient minh họa ấm (ramp đến #fcd683) — dùng cho hero badge, motif mặt trời/sự ấm áp |"
    info: "| Lime Gradient | `linear-gradient(rgb(219, 244, 181), rgb(198, 238, 137))` | `--color-lime-gradient` | Gradient minh họa xanh lá (ramp đến #c6ee89) — dùng cho motif cỏ, sự phát triển và sức sống |"

  tokens___typography:

    satoshi___typeface_duy_nhất___một_geometric_sans_với_dạng_chữ_o_tròn_và_x_height_cao__weight_500_là_body_và_ui_mặc_định_button__nav__label__weight_700_dành_riêng_cho_headline_và_display_copy__mẫu_negative_tracking__1_34px_ở_64px_giảm_dần_về_gần_0_ở_20px_là_đặc_trưng___nó_thắt_chặt_kích_thước_display_một_cách_mạnh_mẽ_trong_khi_giữ_body_text_thoải_mái__không_có_italic__không_có_light_weight__cặp_nhị_phân_500_700_mang_lại_cho_hệ_thống_sự_tự_tin_của_nhãn_dán_____font_satoshi:
      - "**Thay thế:** Inter, DM Sans, hoặc General Sans"
      - "**Weights:** 500, 700"
      - "**Kích thước:** 12px, 14px, 16px, 18px, 20px, 24px, 32px, 36px, 48px, 64px"
      - "**Line height:** 1.14, 1.16, 1.33, 1.38, 1.40, 1.42, 1.44, 1.50, 1.57, 1.67"
      - "**Letter spacing:** -0.0210em ở 64px/12px, -0.0200em ở 48px, -0.0170em ở 36px, -0.0100em ở 32px/14px, -0.0090em ở 24px, -0.0060em ở 20px trở xuống"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Typeface duy nhất — một geometric sans với dạng chữ o tròn và x-height cao. Weight 500 là body và UI mặc định (button, nav, label); weight 700 dành riêng cho headline và display copy. Mẫu negative tracking (-1.34px ở 64px giảm dần về gần 0 ở 20px) là đặc trưng — nó thắt chặt kích thước display một cách mạnh mẽ trong khi giữ body text thoải mái. Không có italic, không có light weight; cặp nhị phân 500/700 mang lại cho hệ thống sự tự tin của nhãn dán."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|-----------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.252px | `--text-caption` |"
      info: "| body-sm | 14px | 1.42 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.096px | `--text-body` |"
      info: "| subheading | 18px | 1.44 | -0.108px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | -0.12px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.38 | -0.216px | `--text-heading` |"
      info: "| heading-lg | 32px | 1.33 | -0.32px | `--text-heading-lg` |"
      info: "| display | 48px | 1.16 | -0.96px | `--text-display` |"
      info: "| display-xl | 64px | 1.14 | -1.344px | `--text-display-xl` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "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: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|--------|"
      info: "| nav | 100px |"
      info: "| cards | 16px |"
      info: "| badges | 100px |"
      info: "| inputs | 4px |"
      info: "| buttons | 100px |"
      info: "| cards-lg | 20px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|--------|-------|"
      info: "| subtle | `rgb(10, 10, 13) 2px 2px 0px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgb(10, 10, 13) 4px 4px 0px 0px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgb(10, 10, 13) 1px 1px 0px 0px` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgb(23, 23, 23) 4px 4px 0px 0px` | `--shadow-subtle-4` |"

    layout:

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

  components:

    lime_cta_button:
      vai_trò: "Primary action — book demo, get started, submit forms"

      info: "Fill #a3e635, border 1px solid #000000, border-radius 100px (pill), padding 10px 24px, font Satoshi 500 ở 16px, text #000000, box-shadow 2px 2px 0px 0px rgb(10,10,13). Cho phép icon prefix (calendar, arrow) ở 16px, cùng stroke #000000. Không cần hover state — shadow offset giữ nguyên để bảo toàn cảm giác sticker."

    ghost_outlined_button:
      vai_trò: "Secondary action — sign in, learn more, watch webinar"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 100px, padding 10px 24px, font Satoshi 500 ở 16px, text #000000, box-shadow 2px 2px 0px 0px rgb(10,10,13). Cho phép suffix icon (external link arrow) ở 16px."

    pill_badge___tag:
      vai_trò: "Section eyebrow, category tag, status indicator"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 100px, padding 6px 14px, font Satoshi 500 ở 14px, text #000000. Tùy chọn icon prefix nhỏ (fish, sparkle, brain) ở 14px. Không shadow — badge nằm phẳng trên trang, phân biệt chúng với button có shadow."

    sticker_navigation_bar:
      vai_trò: "Site navigation cấp cao nhất"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 100px, padding 8px 16px với internal row-gap 4px, box-shadow 2px 2px 0px 0px rgb(10,10,13). Logo bên trái (fish icon + 'Brainfish' wordmark, Satoshi 700 ở 18px), nav links ở giữa (Satoshi 500 ở 16px, #222222, 16px column-gap), CTA cluster bên phải (Sign In ghost + Book Demo lime). Hình bóng pill nổi trên hero màu là element chrome dễ nhận biết nhất của site."

    product_screenshot_card:
      vai_trò: "Hero product mockup, feature illustration"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 16px, padding 0 (ảnh tràn ra mép), box-shadow 4px 4px 0px 0px rgb(23,23,23). Internal browser chrome (dots, URL bar) được style với fill #f5f5f5 và border #737373 1px. Tab đang hoạt động được đánh dấu bằng underline #a3e635."

    pastel_info_card:
      vai_trò: "Feature explanation, onboarding tip, callout"

      info: "Một trong bốn pastel fill (#fef3c8 vàng, #d2fae5 xanh lá, #fae9ff lilac, #f5d1fe hồng), border 1px solid #000000, border-radius 12px, padding 24px, box-shadow 2px 2px 0px 0px rgb(10,10,13). Heading Satoshi 700 ở 20px #000000, body Satoshi 500 ở 16px #000000. Cho phép icon nhỏ bên trong ở góc trên bên trái, kích thước 24px."

    lime_stat_card:
      vai_trò: "Customer result metric — +20% saved hours, +275% bottom-line ROI"

      info: "Fill #a3e635, border 1px solid #000000, border-radius 8px, padding 16px, không shadow. Số lớn Satoshi 700 ở 32px #000000 (letter-spacing -0.32px), label Satoshi 500 ở 14px #000000 bên dưới. Kích thước nhỏ gọn — được thiết kế để nằm bên trong testimonial card, không đứng độc lập."

    testimonial_card:
      vai_trò: "Customer quote với stat proof, hơi nghiêng để tạo cảm giác đặt bằng tay"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 16px, padding 24px, box-shadow 4px 4px 0px 0px rgb(23,23,23). Logo header (customer mark + tên, Satoshi 700 ở 18px). Quote body Satoshi 500 ở 16px #000000, line-height 1.5. Hàng attribution: avatar hình tròn 40px (border 1px #000000) + tên (Satoshi 700 ở 14px) + chức danh (Satoshi 500 ở 14px #737373). Hai stat card (fill #a3e635, radius 8px) xếp chồng ở cuối. Card có thể xoay -2deg đến +2deg riêng lẻ để tạo hiệu ứng collage."

    customer_logo_strip:
      vai_trò: "Social proof band — các brand mark dễ nhận biết trong một hàng"

      info: "Dải full-bleed, fill #b9f0c0 (meadow green), cạnh trên được tạo hình dưới dạng wavy SVG divider (không phải đường thẳng — màu xanh lá tràn vào phần trắng phía trên qua một đường sinusoidal). Logo được hiển thị dưới dạng SVG mark đơn sắc #000000, rộng khoảng 80px, phân bố đều, column-gap 80px. Không label, không divider giữa các logo."

    full_bleed_color_section_background:
      vai_trò: "Section canvas cho hero, testimonials, problem framing"

      info: "Fill toàn bộ viewport-width, không có max-width constraint. Ba màu đặc trưng xen kẽ: #b7eaf6 sky teal (hero), #b9f0c0 meadow green (logo strip), #3366e0 cobalt blue (testimonials). Chuyển tiếp section sử dụng wavy SVG divider, không phải đường thẳng hoặc cắt cứng. Headline text luôn #000000 bất kể nền — các cặp tương phản đã được xác minh ở mức 18.2:1+ ngay cả trên nền pastel."

    floating_illustration:
      vai_trò: "Decorative atmosphere — mây, cá, biểu tượng app, mảnh vỡ sản phẩm"

      phong_cách_line_art: "stroke #000000 1.5px đến 2px, không fill (hoặc pastel fill phù hợp với section gần nhất). White fill + stroke #000000 1px cho product-fragment card. Vị trí rải rác (absolute, với xoay nhẹ -8deg đến +8deg) để tránh cảm giác grid. Opacity 100% — illustration tự tin, không mờ ảo. Coi như layout furniture, không phải chrome."

    input_field:
      vai_trò: "Email capture, search, form fields"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 4px, padding 10px 14px, font Satoshi 500 ở 16px #000000, placeholder #737373. Không thay đổi màu focus ring — focus state thêm box-shadow 2px 2px 0px 0px rgb(10,10,13) và outline offset 2px. Không có floating label; placeholder text đóng vai trò là label."

    eyebrow_chip_section_intro:
      vai_trò: "Section label phía trên headline — 'The Knowledge Layer for AI', 'Brainfish works'"

      info: "Fill #ffffff, border 1px solid #000000, border-radius 100px, padding 6px 14px, font Satoshi 500 ở 14px, text #000000. Tùy chọn icon brand nhỏ prefix (fish, sparkle). Căn giữa phía trên section heading, với gap 16px đến heading. Đây là mẫu 'topic signal' chính — mọi section lớn đều bắt đầu bằng một chip như vậy."

  do_s_and_don_ts:

    do:
      - "Sử dụng #a3e635 làm màu hành động duy nhất — chỉ dùng cho CTA fill, trạng thái nav active, và stat highlight"
      - "Áp dụng đổ bóng cứng offset (2px 2px 0px 0px rgb(10,10,13)) cho mọi bề mặt tương tác — button, nav, card phản hồi khi click"
      - "Sử dụng border-radius 100px cho tất cả button, badge và nav bar — hình bóng pill là hình dạng dễ nhận biết nhất của hệ thống"
      - "Đặt Satoshi weight 500 cho body và weight 700 cho headline — không bao giờ dùng 400 hoặc 600"
      - "Ngắt các section màu full-width bằng wavy SVG divider, không phải đường thẳng hoặc cắt cứng"
      - "Sử dụng pastel tint (#fef3c8, #d2fae5, #fae9ff, #f5d1fe) cho info card — chọn theo tâm trạng nội dung, không theo ánh xạ danh mục"
      - "Giữ illustration stroke ở 1.5–2px #000000 không fill (hoặc pastel fill phù hợp) — line art, không phải flat illustration"

    don_t:
      - "Không bao giờ sử dụng đổ bóng mềm mờ (blur drop-shadow) — hệ thống có zero blur trên mọi độ cao"
      - "Không bao giờ sử dụng grayscale gradient cho button hoặc card — chỉ tồn tại amber và lime illustration gradient"
      - "Không bao giờ sử dụng light hoặc italic weight — Satoshi 500/700 là nhị phân"
      - "Không bao giờ sử dụng section divider ngang thẳng — luôn dùng wavy SVG path giữa các dải màu"
      - "Không bao giờ thêm opacity vào illustration — giữ chúng ở 100% với full stroke weight"
      - "Không bao giờ sử dụng #0000ee hoặc màu link mặc định của trình duyệt — link là #000000 có underline, hoặc #333333 cho secondary"
      - "Không bao giờ đặt button trên pastel card mà không có border #000000 1px và offset shadow 2px — fill trần phá vỡ phép ẩn dụ sticker"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|--------|----------|"
    info: "| 0 | Paper White | `#ffffff` | Canvas cơ sở — hầu hết nội dung sống trên nền trắng |"
    info: "| 1 | Fog | `#f5f5f5` | Bề mặt recess nhẹ cho footer và các dải yên tĩnh |"
    info: "| 2 | Pastel Card Tints | `#fef3c8` | Info card màu (các tint vàng/xanh lá/tím/hồng được sử dụng thay thế cho nhau ở cấp độ này) |"

  elevation:

    - "**Nav bar, CTA buttons, primary cards:** `2px 2px 0px 0px rgb(10, 10, 13)`"
    - "**Outlined links, large interactive cards khi hover:** `4px 4px 0px 0px rgb(10, 10, 13)`"
    - "**Small inline buttons, inline cards:** `1px 1px 0px 0px rgb(10, 10, 13)`"
    - "**Elevated testimonial cards:** `4px 4px 0px 0px rgb(23, 23, 23)`"

  imagery:

    info: "Minh họa chiếm ưu thế hơn nhiếp ảnh. Ngôn ngữ hình ảnh là line-art với các pastel fill thỉnh thoảng: những đám mây được vẽ đường viền trôi nổi trên nền hero xanh ngọc, những con cá nhỏ bơi qua section testimonial xanh lam, và các biểu tượng app/brand rải rác (Notion, Slack, HubSpot, v.v.) lăn qua dải 'problem' màu xanh lá. Tất cả minh họa sử dụng stroke đen 1.5–2px không gradient, không shadow, không tô bóng hiện thực. Product screenshot xuất hiện một hoặc hai lần (knowledge base mockup trong khung trình duyệt) với browser chrome trắng, traffic-light dots và tab đang hoạt động được gạch dưới bằng màu xanh chanh. Hiệu ứng tổng thể giống như scrapbook — sticker đặt bằng tay, không phải 3D render bóng bẩy. Nhiếp ảnh vắng mặt; hệ thống là UI thuần túy cộng với minh họa."

  layout:

    info: "Các section là full-bleed và có màu, không đóng hộp: trang xen kẽ giữa các dải 100vw của hero xanh ngọc, section sản phẩm trắng, customer logo strip xanh lá và section testimonial xanh lam. Nội dung max-width trong mỗi dải là 1200px, căn giữa, với padding ngang 24–80px. Nhịp điệu section sử dụng wavy SVG divider (không bao giờ cạnh thẳng) giữa các chuyển tiếp màu, và khoảng cách section dọc là 80px bên trong các dải nội dung trắng. Hero được chia — chồng headline căn giữa trên nền xanh ngọc, product mockup bên dưới, không có cột split-image. Content section sử dụng layout 2 cột (text trái, visual phải) cho feature block và chồng cột đơn căn giữa cho problem framing. Customer logo strip và eyebrow chip được căn giữa. Footer nằm trên dải xám mềm #f5f5f5."

  agent_prompt_guide:

    info: "Tham chiếu màu nhanh:"
    - "text: #000000 (tất cả body, heading, label)"
    - "background: #ffffff (canvas trang và bề mặt card)"
    - "border: #000000 (1px trên tất cả bề mặt tương tác và card)"
    - "accent: #a3e635 (Lime Pulse — stat card, illustration highlight, eyebrow icon)"
    - "section-bg: #b7eaf6 (sky), #b9f0c0 (meadow), #3366e0 (cobalt)"
    - "pastel-card tints: #fef3c8, #d2fae5, #fae9ff, #f5d1fe"
    - "primary action: #a3e635 (filled action)"

    info: "Ví dụ Component Prompts:"

    - "Xây dựng hero section: nền full-bleed #b7eaf6 với wavy divider trắng ở cạnh dưới. Eyebrow pill căn giữa (fill trắng, border #000 1px, radius 100px, padding 6px 14px, Satoshi 500 14px) hiển thị label chủ đề. Bên dưới, display headline Satoshi 700 64px #000000, letter-spacing -1.34px, line-height 1.14, căn giữa, max-width 720px. Body subtext Satoshi 500 18px #000000, căn giữa, max-width 600px. Hai button căn giữa trong một hàng 16px: lime CTA (fill #a3e635, border #000 1px, radius 100px, padding 10px 24px, Satoshi 500 16px, shadow 2px 2px 0px #0a0a0d) và ghost button (fill trắng, cùng border/radius/padding/shadow, 16px Satoshi 500 16px). Minh họa mây rải rác (stroke #000 1.5px, không fill) được đặt absolute xung quanh text."

    - "Xây dựng testimonial card: fill trắng, border #000 1px, radius 16px, shadow 4px 4px 0px #171717, padding 24px, xoay -2deg. Customer logo header (Satoshi 700 18px). Quote body Satoshi 500 16px #000000, line-height 1.5. Hàng attribution: avatar tròn 40px (border #000 1px) + tên (Satoshi 700 14px) + chức danh (Satoshi 500 14px #737373). Hai stat card xếp chồng ở cuối: fill #a3e635, border #000 1px, radius 8px, padding 16px — số lớn Satoshi 700 32px tracking -0.32px, label Satoshi 500 14px bên dưới."

    - "Xây dựng lime stat card: fill #a3e635, border #000 1px, radius 8px, padding 16px, không shadow. Metric lớn Satoshi 700 32px #000000, letter-spacing -0.32px. Sub-label Satoshi 500 14px #000000 ở dòng tiếp theo. Được thiết kế để nằm bên trong testimonial card trắng, không đứng độc lập."

    - "Xây dựng customer logo strip: dải full-bleed, fill #b9f0c0, cạnh trên là wavy SVG path chuyển tiếp từ section trắng phía trên. Năm đến bảy logo SVG đen đơn sắc (#000000) rộng 80px, cách đều nhau, column-gap 80px, căn giữa theo chiều dọc, không label."

    - "Xây dựng pastel info card: fill #fef3c8 (hoặc xen kẽ giữa #d2fae5, #fae9ff, #f5d1fe để đa dạng), border #000 1px, radius 12px, padding 24px, shadow 2px 2px 0px #0a0a0d. Icon nhỏ (24px, stroke #000 1.5px) ở góc trên bên trái. Heading Satoshi 700 20px #000. Body Satoshi 500 16px #000000, line-height 1.5."

  similar_brands:

    - "**Linear** — Cùng đổ bóng cứng offset và geometric sans dày (họ Satoshi/Inter) ở kích thước display với negative tracking"
    - "**Notion** — Cùng minh họa vẽ tay rải rác trên các section màu full-bleed, trọng lượng sticker-on-page vui tươi"
    - "**Vercel** — Cùng hệ thống type weight nhị phân (500/700) và letter-spacing siêu chặt trên kích thước display, mặc dù Vercel đi theo hướng tối còn Brainfish đi theo hướng sáng"
    - "**Framer** — Cùng độ cao neo-brutalist (đổ bóng offset cứng 2px, zero blur) kết hợp với một màu nhấn rực rỡ duy nhất trên nền trắng"
    - "**Cron (Notion Calendar)** — Cùng các dải section màu full-bleed được phân cách bằng wavy SVG divider thay vì cắt thẳng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lime-pulse: #a3e635;
          --color-carbon-black: #000000;
          --color-paper-white: #ffffff;
          --color-graphite: #171717;
          --color-shadow-ink: #0a0a0d;
          --color-fog: #f5f5f5;
          --color-steel: #737373;
          --color-iron: #222222;
          --color-slate: #333333;
          --color-buttercream: #fef3c8;
          --color-mint-wash: #d2fae5;
          --color-lilac-mist: #fae9ff;
          --color-bubblegum: #f5d1fe;
          --color-amber-spark: #fbbf25;
          --color-sky-wash: #b7eaf6;
          --color-cobalt-field: #3366e0;
          --color-meadow: #b9f0c0;
          --color-amber-gradient: #fde5b1;
          --gradient-amber-gradient: linear-gradient(rgb(253, 229, 177), rgb(252, 214, 131));
          --color-lime-gradient: #dbf4b5;
          --gradient-lime-gradient: linear-gradient(rgb(219, 244, 181), rgb(198, 238, 137));
        
          /* Typography — Font Families */
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.252px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.42;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.096px;
          --text-subheading: 18px;
          --leading-subheading: 1.44;
          --tracking-subheading: -0.108px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.12px;
          --text-heading: 24px;
          --leading-heading: 1.38;
          --tracking-heading: -0.216px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.33;
          --tracking-heading-lg: -0.32px;
          --text-display: 48px;
          --leading-display: 1.16;
          --tracking-display: -0.96px;
          --text-display-xl: 64px;
          --leading-display-xl: 1.14;
          --tracking-display-xl: -1.344px;
        
          /* Typography — Weights */
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-nav: 100px;
          --radius-cards: 16px;
          --radius-badges: 100px;
          --radius-inputs: 4px;
          --radius-buttons: 100px;
          --radius-cards-lg: 20px;
        
          /* Shadows */
          --shadow-subtle: rgb(10, 10, 13) 2px 2px 0px 0px;
          --shadow-subtle-2: rgb(10, 10, 13) 4px 4px 0px 0px;
          --shadow-subtle-3: rgb(10, 10, 13) 1px 1px 0px 0px;
          --shadow-subtle-4: rgb(23, 23, 23) 4px 4px 0px 0px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-fog: #f5f5f5;
          --surface-pastel-card-tints: #fef3c8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lime-pulse: #a3e635;
          --color-carbon-black: #000000;
          --color-paper-white: #ffffff;
          --color-graphite: #171717;
          --color-shadow-ink: #0a0a0d;
          --color-fog: #f5f5f5;
          --color-steel: #737373;
          --color-iron: #222222;
          --color-slate: #333333;
          --color-buttercream: #fef3c8;
          --color-mint-wash: #d2fae5;
          --color-lilac-mist: #fae9ff;
          --color-bubblegum: #f5d1fe;
          --color-amber-spark: #fbbf25;
          --color-sky-wash: #b7eaf6;
          --color-cobalt-field: #3366e0;
          --color-meadow: #b9f0c0;
          --color-amber-gradient: #fde5b1;
          --color-lime-gradient: #dbf4b5;
        
          /* Typography */
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.252px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.42;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.096px;
          --text-subheading: 18px;
          --leading-subheading: 1.44;
          --tracking-subheading: -0.108px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.12px;
          --text-heading: 24px;
          --leading-heading: 1.38;
          --tracking-heading: -0.216px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.33;
          --tracking-heading-lg: -0.32px;
          --text-display: 48px;
          --leading-display: 1.16;
          --tracking-display: -0.96px;
          --text-display-xl: 64px;
          --leading-display-xl: 1.14;
          --tracking-display-xl: -1.344px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-subtle: rgb(10, 10, 13) 2px 2px 0px 0px;
          --shadow-subtle-2: rgb(10, 10, 13) 4px 4px 0px 0px;
          --shadow-subtle-3: rgb(10, 10, 13) 1px 1px 0px 0px;
          --shadow-subtle-4: rgb(23, 23, 23) 4px 4px 0px 0px;
        }