ko_fi___style_reference:
  info: "> Không gian ấm cúng như quán café phấn viết trên giấy kem."

  theme: "light"

  info: "Ko-fi mang phong cách menu indie café ấm áp in trên giấy tái chế. Nền cream canvas thay thế màu trắng lạnh lẽo thường thấy ở các công cụ creator, và một custom chunky display font tạo dấu ấn cho hero headlines với năng lượng zine thủ công, trong khi DM Sans giữ mọi thứ dễ đọc. Mọi phần tử tương tác đều được bo tròn tối đa — pill buttons, pillow-soft cards, capsule inputs — tạo cảm giác xúc giác, như một cuốn sticker-book. Viền đen 2-3px bao quanh ảnh và bề mặt card thay vì đổ bóng, củng cố thẩm mỹ thủ công cắt-dán. Một màu xanh periwinkle nhẹ duy nhất tạo điểm nhấn trên bảng màu trung tính ấm, chỉ dành riêng cho primary actions để chúng luôn là thứ quan trọng nhất trên màn hình."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Oat Cream | `#e9dfd2` | `--color-oat-cream` | Secondary surface — nền feature card, warm button fills, nền tag |"
    info: "| Morning Fog | `#e5e7eb` | `--color-morning-fog` | Page canvas, viền nhẹ, đường kẻ mảnh — nền tảng cho mọi thứ |"
    info: "| Ink Black | `#202020` | `--color-ink-black` | Primary text, dark filled buttons, dark icon fills |"
    info: "| Sticker Black | `#000000` | `--color-sticker-black` | Viền dày trên card, ảnh và logo wordmark — đường viền signature khiến phần tử trông như cắt từ giấy |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card trên cream canvas, text trên dark buttons, nền input field |"
    info: "| Kofi Blue | `#aac9f7` | `--color-kofi-blue` | Blue wash cho nền highlight, dải trang trí, và điểm nhấn mềm sau nội dung. Không nâng cấp lên màu CTA chính |"
    info: "| Cobalt Pop | `#72a4f2` | `--color-cobalt-pop` | Trạng thái hover/pressed của primary action, biến thể Kofi Blue bão hòa |"

  tokens___typography:

    bogue_black___hero_và_section_display_headlines___custom_chunky_rounded_display_face_chỉ_dùng_ở_60px__để_tạo_dấu_ấn_zine_thủ_công____font_bogue_black:
      - "**Thay thế:** Bowlby One, Lilita One, hoặc Sniglet"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 60px, 72px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Hero và section display headlines — custom chunky rounded display face chỉ dùng ở 60px+ để tạo dấu ấn zine thủ công"

    dm_sans___toàn_bộ_ui_text__nav_links__body_copy__button_labels__subheadings__card_titles__input_fields__và_footer_text___geometric_sans_sạch_sẽ_đảm_nhận_mọi_typography_chức_năng____font_dm_sans:
      - "**Weights:** 400, 600"
      - "**Cỡ chữ:** 14px, 16px, 20px, 24px, 30px"
      - "**Line height:** 1.20-1.50"
      - "**Vai trò:** Toàn bộ UI text: nav links, body copy, button labels, subheadings, card titles, input fields, và footer text — geometric sans sạch sẽ đảm nhận mọi typography chức năng"

    font_awesome_6_pro___solid_icon_glyphs_cho_category_tags_và_feature_markers____font_font_awesome_6_pro:
      - "**Thay thế:** Font Awesome 5 Free Solid"
      - "**Weights:** 900"
      - "**Cỡ chữ:** 20px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Solid icon glyphs cho category tags và feature markers"

    font_awesome_6_brands___brand_social_icon_glyphs____font_font_awesome_6_brands:
      - "**Thay thế:** Font Awesome 5 Brands"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 20px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Brand/social icon glyphs"

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.2 | — | `--text-heading` |"
      info: "| display | 60px | 1 | — | `--text-display` |"
      info: "| display-lg | 72px | 1 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 40px |"
      info: "| inputs | 9999px |"
      info: "| buttons | 9999px |"
      info: "| feature-cards | 24px |"
      info: "| small-elements | 16px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 28px"
      - "**Element gap:** 20px"

  components:

    pill_primary_button_kofi_blue:
      vai_trò: "Primary call-to-action — một button duy nhất trên mỗi view thúc đẩy chuyển đổi"

      info: "Nền Kofi Blue (#aac9f7) với text #202020, pill radius 9999px, padding dọc 20px và ngang 20-28px, DM Sans 16px weight 600. Nằm trên cream canvas, nổi bật như hành động quan trọng nhất. Hover/pressed chuyển sang Cobalt Pop (#72a4f2)."

    pill_dark_button:
      vai_trò: "Secondary action trong nav và các ngữ cảnh tương phản cao"

      info: "Nền Ink Black (#202020) với text #ffffff, pill radius 9999px, padding 20px đều các cạnh, DM Sans 14-16px weight 600. Dùng cho 'Sign up free' trong nav — account action luôn hiển thị."

    pill_outline_button_learn_more:
      vai_trò: "Tertiary action trên feature cards và content sections"

      info: "Text Ink Black (#202020) trên nền card trắng, pill radius 9999px, padding 20px, không viền. Label xuất hiện dưới dạng pill độc lập. Dùng cho 'Learn how Ko-fi works' trên feature blocks."

    sticker_card_creator_profile:
      vai_trò: "Profile showcase card cho creator directory và testimonials"

      info: "Nền trắng (#ffffff), radius 40px, viền đen #000000 dày 2-3px. Không đổ bóng — viền đen chính là elevation. Chứa ảnh full-bleed (cũng radius 40px) phía trên thông tin creator. Hiệu ứng sticker là khoảnh khắc thị giác signature của toàn bộ hệ thống."

    oat_feature_card:
      vai_trò: "Feature block lớn như 'Payday your way'"

      info: "Nền Oat Cream (#e9dfd2), radius 24px, padding rộng 40-80px, chứa bogue-black display heading, DM Sans body copy, và pill outline button. Nằm trong khung card trắng trên cream canvas."

    category_tag_pill:
      vai_trò: "Filter và creator-type chip — 'Streamers', 'Artists', 'Writers', v.v."

      info: "Nền trắng, pill radius 9999px, padding ngang 20px, DM Sans 16px weight 400 màu Ink Black. Trạng thái active có viền Ink Black dày 2px. Mỗi tag dẫn đầu bằng 20px Font Awesome solid icon với màu brand tự nhiên."

    top_navigation_bar:
      vai_trò: "Global site navigation"

      info: "Trong suốt trên cream canvas, pill radius 9999px cho dark 'Sign up free' button, nav links bằng DM Sans 16px weight 400. Logo là bogue-black wordmark 'Ko-fi' chunky kèm icon cốc cà phê. Không có background bar — nav nổi trên canvas. Padding dọc 16-20px."

    pill_input_field:
      vai_trò: "Input email/tên cho signup và search"

      info: "Nền trắng (#ffffff), pill radius 9999px, padding ngang 28px, viền Ink Black dày 2px, placeholder DM Sans 16px. Viền dày lên hoặc chuyển sang Kofi Blue khi focus. Không có góc nhọn ở bất kỳ đâu."

    logo_wordmark_lockup:
      vai_trò: "Brand identity mark trong nav và footer"

      info: "Text 'Ko-fi' bằng bogue-black màu Ink Black, kết hợp với icon cốc cà phê bo tròn có trái tim trên cốc. Phần fill của cốc cà phê là màu cam-đỏ ấm (tín hiệu phụ của brand). Được bao quanh bởi viền sticker đen dày 2px khi dùng làm badge độc lập."

    section_headline_block:
      vai_trò: "Section opener với display heading và subtitle"

      info: "bogue-black heading căn giữa ở 60px line-height 1.0, theo sau là DM Sans 20px subheading màu Ink Black. Bottom margin rộng 40-64px trước nội dung. Tạo nhịp điệu 'chapter title' cấu trúc trang."

    creator_photo_tile:
      vai_trò: "Image-first card cho creator directory"

      info: "Ảnh lấp đầy tile radius 40px với viền #000000 dày 2-3px, khung trắng quanh ảnh. Không có caption bên trong tile — thông tin nằm ở text bên cạnh. Ảnh không bị cắt vuông; giữ tỷ lệ tự nhiên trong khung bo tròn."

    feature_illustration_block:
      vai_trò: "Decorative hero artwork như ba character mascot"

      info: "Hand-drawn line illustrations với selective Kofi Blue accent fills, không có background container, nằm trực tiếp trên cream canvas. Characters được vẽ viền đen, flat color, tỷ lệ vui nhộn. Illustration CHÍNH là emotional hook của hero."

  do_s_and_don_ts:

    do:
      - "Dùng pill radius 9999px cho mọi button, tag, input, và nav CTA — góc nhọn phá vỡ ngôn ngữ xúc giác"
      - "Chỉ dùng bogue-black (hoặc Bowlby One thay thế) cho display headings từ 48px trở lên — DM Sans cho mọi thứ khác"
      - "Bao quanh mọi bề mặt card và ảnh bằng viền đen #000000 dày 2-3px thay vì đổ bóng — sticker outline chính là hệ thống elevation"
      - "Dành riêng Kofi Blue (#aac9f7) cho một primary action duy nhất trên mỗi view; để nó thu hút sự chú ý bằng cách là màu duy nhất trên màn hình"
      - "Duy trì cream canvas (#e5e7eb) làm nền trang toàn cục — không bao giờ dùng pure white hoặc pure gray làm nền"
      - "Giữ mọi icon glyphs ở 20px cùng một family weight — kích thước icon nhất quán bảo toàn nhịp điệu sticker-book"
      - "Kết hợp mỗi category tag với một Font Awesome solid icon dẫn đầu để củng cố cảm giác playful, labeled-sticker"

    don_t:
      - "Không dùng drop shadows trên cards, buttons, hoặc ảnh — viền đen thay thế elevation và bóng sẽ làm mờ thẩm mỹ thủ công"
      - "Không thêm các chromatic accents khác ngoài Kofi Blue và trạng thái hover của nó — bảng màu warm-neutral-plus-one-blue là bản sắc"
      - "Không dùng DM Sans ở 40px+ cho headings — nó mất đi chất display chunky; chuyển sang bogue-black hoặc substitute"
      - "Không đặt interactive elements trên nền pure white #ffffff — cream canvas mới làm hệ thống cảm thấy ấm áp"
      - "Không dùng góc vuông hoặc hơi bo tròn (4-8px) trên buttons, tags, hoặc inputs — pill là radius duy nhất chấp nhận được cho interactive elements"
      - "Không áp dụng Sticker Black border cho text hoặc background blocks — chỉ dành cho bề mặt ảnh và card, nơi đường viền đọc như hình cắt chết"
      - "Không dùng bogue-black display font cho body, nav, button, hoặc input text — weight và personality của nó lấn át functional UI"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|-------|"
    info: "| 1 | Canvas | `#e5e7eb` | Nền trang — warm light gray làm mềm toàn bộ trải nghiệm |"
    info: "| 2 | Oat Surface | `#e9dfd2` | Nền feature card và section với độ ấm bổ sung |"
    info: "| 3 | Paper Card | `#ffffff` | Bề mặt card nâng cao nằm trên cream canvas |"
    info: "| 4 | Blue Wash | `#aac9f7` | Footer hoặc highlight band pha màu brand — chromatic surface ấm nhất |"

  imagery:

    info: "Photography là creator-focused portraiture — ảnh trực diện, ấm áp, giao tiếp bằng mắt với máy ảnh ở crop gần, hiển thị full-bleed bên trong sticker frames radius 40px với viền đen dày 2-3px. Illustrations là hand-drawn line art của các mascot characters bo tròn (ghost, heart, bean) với selective flat color fills bằng Kofi Blue và warm cream. Logo cốc cà phê có trái tim là motif illustration lặp lại. Không có 3D renders, không stock photography, không abstract gradients — mọi thứ đọc như một chân dung con người thân thiện hoặc mascot vẽ tay."

  layout:

    info: "Container căn giữa max-width ~1200px trên cream canvas full-bleed. Hero căn giữa: bogue-black display headline lớn, DM Sans subtitle, một blue pill CTA duy nhất, sau đó là illustration bên dưới. Sections xen kẽ giữa centered text blocks và 3-column card grids. Category sections dùng wrapped rows của pill-shaped tags. Creator showcases là 3-up grids của sticker-bordered photo cards. Navigation là floating top bar tối giản với logo trái, links giữa-phải, dark pill CTA phải. Section gaps 40-80px tạo khoảng thở rộng rãi giữa các rhythm blocks."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "canvas/background: #e5e7eb (Morning Fog)"
    - "text/primary: #202020 (Ink Black)"
    - "text/on-dark: #ffffff (Paper White)"
    - "border/sticker: #000000 (Sticker Black)"
    - "card/surface: #ffffff (Paper White)"
    - "accent/feature: #e9dfd2 (Oat Cream)"
    - "primary action: #72a4f2 (filled action)"

    info: "Example Component Prompts:"

    - "Tạo Primary Action Button: nền #72a4f2, text #202020, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA."

    - "Tạo 3-column creator card grid: mỗi card trắng (#ffffff) với viền #000000 dày 2px, radius 40px, không đổ bóng. Ảnh ở trên cùng lấp đầy vùng radius 40px. Tên creator bằng DM Sans 20px weight 600 #202020, handle bằng DM Sans 16px weight 400 #202020 bên dưới. Padding 28px bên trong card."

    - "Tạo category tag row: 6-8 pill tags trong wrapped flex layout. Mỗi tag nền trắng, radius 9999px, padding ngang 20px, DM Sans 16px weight 400 màu #202020. Dẫn đầu bằng 20px Font Awesome solid icon. Tag active có viền #202020 dày 2px."

    - "Tạo feature block: outer card trắng (#ffffff) với radius 24px, padding 40-80px. Inner feature panel với nền #e9dfd2, radius 24px. bogue-black heading ở 60px, DM Sans body ở 16px. Outline pill button: text #202020 trên nền trắng, radius 9999px, padding 20px."

    - "Tạo pill input field: nền #ffffff, radius 9999px, padding ngang 28px, viền #000000 dày 2px, placeholder DM Sans 16px màu xám nhạt. Khi focus, viền chuyển sang #aac9f7."

  elevation_philosophy:

    info: "Ko-fi cố tình tránh drop shadows. Hệ thống dùng viền đen #000000 dày 2-3px làm cơ chế elevation duy nhất trên cards, ảnh, và logo lockup. Điều này tạo thẩm mỹ sticker-book phẳng, nơi các phần tử trông như được cắt từ giấy và đặt lên một tấm canvas ấm áp, thay vì nổi lơ lửng. Viền đen phải luôn đi kèm với radius rộng (24px hoặc 40px) để nó đọc như đường cắt chết thay vì khung cứng. Không box-shadows, không glow effects, không layered ambient lighting — bản thân cream canvas cung cấp toàn bộ chiều sâu thiết kế cần."

  similar_brands:

    - "**Gumroad** — Cùng warm-cream canvas với một playful color accent duy nhất, và creator-portrait cards với góc bo tròn và typography thân thiện"
    - "**Buy Me a Coffee** — Đối thủ trực tiếp với cùng focus creator-tip, chia sẻ phong cách hand-drawn mascot illustration, và hệ thống button và card bo tròn mọi thứ"
    - "**Substack** — Custom display headlines chất zine tương tự, bảng màu cream-and-black, và sticker-bordered editorial card layouts"
    - "**Notion** — Cùng pill-shaped buttons và capsule input fields, dù Notion lạnh và tiện dụng hơn — DNA cấu trúc của soft-rounded controls trùng nhau"
    - "**Craigslist (reimagined)** — Thẩm mỹ ấm áp stripped-back với một accent color, chunky display type, và cá tính thủ công, phi doanh nghiệp không hối lỗi"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-oat-cream: #e9dfd2;
          --color-morning-fog: #e5e7eb;
          --color-ink-black: #202020;
          --color-sticker-black: #000000;
          --color-paper-white: #ffffff;
          --color-kofi-blue: #aac9f7;
          --color-cobalt-pop: #72a4f2;
        
          /* Typography — Font Families */
          --font-bogue-black: 'bogue-black', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-6-pro: 'Font Awesome 6 Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-6-brands: 'Font Awesome 6 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --text-display: 60px;
          --leading-display: 1;
          --text-display-lg: 72px;
          --leading-display-lg: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 28px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 40px;
          --radius-inputs: 9999px;
          --radius-buttons: 9999px;
          --radius-feature-cards: 24px;
          --radius-small-elements: 16px;
        
          /* Surfaces */
          --surface-canvas: #e5e7eb;
          --surface-oat-surface: #e9dfd2;
          --surface-paper-card: #ffffff;
          --surface-blue-wash: #aac9f7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-oat-cream: #e9dfd2;
          --color-morning-fog: #e5e7eb;
          --color-ink-black: #202020;
          --color-sticker-black: #000000;
          --color-paper-white: #ffffff;
          --color-kofi-blue: #aac9f7;
          --color-cobalt-pop: #72a4f2;
        
          /* Typography */
          --font-bogue-black: 'bogue-black', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-6-pro: 'Font Awesome 6 Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-font-awesome-6-brands: 'Font Awesome 6 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --text-display: 60px;
          --leading-display: 1;
          --text-display-lg: 72px;
          --leading-display-lg: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 9999px;
        }