coinbase_spain___style_reference:
  info: "> Digital Trust, Blueprinted. Một hệ thống được xây dựng dựa trên sự rõ ràng của bản thiết kế kiến trúc, được thổi hồn bởi một nơ-ron xanh điện tử duy nhất."

  theme: "light"

  info: "Design system này tạo nên cảm giác tin cậy mang tính kỹ thuật số, dựa trên bảng màu tối giản, tương phản cao. Nền tảng chính xác gồm trắng tinh (#ffffff) và gần đen (#0a0b0d) tạo ra môi trường rõ ràng và tập trung. Toàn bộ cá tính của hệ thống được truyền tải qua một màu xanh điện tử duy nhất — `Coinbase Blue` (#0052ff) — chỉ dành riêng cho các hành động chính và brand marks, hoạt động như một hướng dẫn đầy tự tin. Bộ font tùy chỉnh (Coinbase Display, Sans, Text) mang đến giọng điệu typography độc đáo và nhất quán trên mọi tỷ lệ. Chiều sâu đạt được không phải bằng shadow mà bằng các khối màu full-width đậm nét, xen kẽ giữa các phần trắng sáng và xanh đậm, tạo nhịp điệu kiến trúc sạch sẽ."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Coinbase Blue | `#0052ff` | `--color-coinbase-blue` | CTA chính, logo, trạng thái active — định danh thương hiệu cốt lõi. |"
    info: "| Interactive Blue | `#578bfa` | `--color-interactive-blue` | Link phụ và các thành phần tương tác. |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Nền trang chính, text trên nền tối. |"
    info: "| Midnight | `#0a0b0d` | `--color-midnight` | Nền section tối, text chính. |"
    info: "| Slate | `#5b616` | `--color-slate` | Body text, heading phụ, link footer. |"
    info: "| Ash | `#8a919` | `--color-ash` | Helper text, trạng thái disabled, UI text nhẹ. |"
    info: "| Frost | `#f7f8f9` | `--color-frost` | Nền sáng nhẹ, ví dụ khu vực footer. |"
    info: "| Cloud | `#eef0f3` | `--color-cloud` | Divider nền sáng hoặc trạng thái hover của button. |"
    info: "| Pewter | `#dedfe2` | `--color-pewter` | Border giữa các section sáng. |"
    info: "| Charcoal | `#141519` | `--color-charcoal` | Bề mặt nền section tối thay thế. |"
    info: "| Positive Green | `#27ad75` | `--color-positive-green` | Giá tăng, thông báo thành công. |"
    info: "| Negative Red | `#f0616d` | `--color-negative-red` | Giá giảm, thông báo lỗi. |"

  tokens___typography:

    coinbasedisplay___chỉ_dùng_cho_headline_lớn__ấn_tượng_h1_h2__hình_học_sạch__hơi_rộng_mang_đến_sự_khẳng_định__tự_tin_cho_headline_____font_coinbasedisplay:
      - "**Thay thế:** Manrope"
      - "**Weights:** 400"
      - "**Kích thước:** 44px, 52px, 64px, 80px"
      - "**Line height:** 1.0-1.09"
      - "**Vai trò:** Chỉ dùng cho headline lớn, ấn tượng (H1/H2). Hình học sạch, hơi rộng mang đến sự khẳng định, tự tin cho headline."

    coinbasesans___font_chính_cho_subheading__button_và_một_số_body_copy__weight_600_dùng_để_nhấn_mạnh_và_heading_nhỏ_hơn_____font_coinbasesans:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 13px, 16px, 18px, 20px, 28px, 36px, 64px"
      - "**Line height:** 1.11-1.50"
      - "**Vai trò:** Font chính cho subheading, button và một số body copy. Weight 600 dùng để nhấn mạnh và heading nhỏ hơn."

    coinbasetext___tối_ưu_cho_khả_năng_đọc_trong_ui_dày_đặc_và_khối_văn_bản_dài__line_height_rộng_rãi_giúp_đoạn_văn_thoáng_hơn_____font_coinbasetext:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 13px, 16px, 18px"
      - "**Line height:** 1.50-1.56"
      - "**Vai trò:** Tối ưu cho khả năng đọc trong UI dày đặc và khối văn bản dài. Line height rộng rãi giúp đoạn văn thoáng hơn."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.54 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.25 | — | `--text-heading-sm` |"
      info: "| heading | 44px | 1.09 | — | `--text-heading` |"
      info: "| heading-lg | 64px | 1 | — | `--text-heading-lg` |"
      info: "| display | 80px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

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

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Thành phần | Giá trị |"
      info: "|------------|---------|"
      info: "| tags | 100000px |"
      info: "| cards | 24px |"
      info: "| inputs | 8px |"
      info: "| buttons | 56px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Card padding:** 24px"

  components:

    primary_cta_button:
      vai_trò: "Call-to-action chính trên mọi trang."

      background: "`Coinbase Blue` (#0052ff). Text: `Pure White` (#ffffff). Padding: 16px 32px. Radius: hình pill dài đặc trưng 56px."

    secondary_pill_button:
      vai_trò: "Hành động phụ, thường trên nền tối."

      background: "`Pure White` (#ffffff). Text: `Midnight` (#0a0b0d). Padding: 12px 24px. Radius: hình pill hoàn hảo 100000px."

    ghost_link:
      vai_trò: "Thành phần tương tác dạng text, inline."

      background: "transparent. Text: `Interactive Blue` (#578bfa). Không padding hoặc border. Dùng cho hành động cấp ba như 'Learn more'."

    header_nav_link:
      vai_trò: "Mục điều hướng cấp cao nhất."

      background: "transparent. Text: `Midnight` (#0a0b0d). Không padding. Font: CoinbaseSans 16px."

    filter_tag:
      vai_trò: "Bộ lọc có thể bật/tắt trong data views."

      background: "thường transparent với border nhẹ, hoặc fill sáng khi hover/active. Text: `Slate` (#5b616e). Padding: 12px 24px. Radius: 100000px."

    footer_link:
      vai_trò: "Link điều hướng cấp ba trong footer."

      background: "transparent. Text: `Slate` (#5b616e). Font: CoinbaseText 16px. Không gạch chân cho đến khi hover."

    large_headline:
      vai_trò: "Heading chính cho trang hoặc hero section."

      font: "CoinbaseDisplay, 64px. Color: `Midnight` (#0a0b0d)."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng `Coinbase Blue` (#0052ff) cho CTA chính và logo thương hiệu."
      - "Định nghĩa primary button với border-radius 56px đặc trưng."
      - "Xây dựng tất cả headline chính của trang bằng font `CoinbaseDisplay`."
      - "Tạo phân cấp thị giác bằng cách xen kẽ các section full-width #ffffff và #0a0b0d."
      - "Dành `Slate` (#5b616e) cho tất cả body copy phụ và link footer."
      - "Đặt body text ở 16px với `CoinbaseSans` hoặc `CoinbaseText` để đọc tối ưu."
      - "Áp dụng radius 24px cho tất cả content card lớn hơn."

    don_t:
      - "Không dùng shadow trên bất kỳ thành phần nào; dựa vào color blocking để tạo chiều sâu."
      - "Không dùng `Coinbase Blue` (#0052ff) cho text hoặc thành phần không tương tác."
      - "Không dùng nhiều màu bão hòa trong một section; bám vào bảng màu trung tính với một điểm nhấn xanh duy nhất."
      - "Không dùng góc nhọn cho button hoặc tags; chúng phải được bo tròn (56px hoặc 100000px)."
      - "Không dùng system fonts; bộ font Coinbase tùy chỉnh là thiết yếu cho nhận diện thương hiệu."
      - "Không tạo divider bằng đường kẻ; sử dụng khoảng trống âm và thay đổi màu nền."
      - "Không làm link footer có màu khác ngoài `Slate` (#5b616e)."

  elevation:

    info: "Thiết kế cố tình tránh shadow. Chiều sâu và phân cấp được tạo ra thông qua color blocking, tương phản giữa nền sáng (#ffffff) với các section tối riêng biệt (#0a0b0d)."

  imagery:

    info: "Hình ảnh chủ yếu là vector illustration trừu tượng và ảnh chụp màn hình UI sản phẩm sạch sẽ. Illustration sử dụng phong cách flat-color, hình học với các màu thương hiệu, giúp các khái niệm tài chính phức tạp trở nên dễ tiếp cận và hiện đại. Chúng luôn được đặt trong các khối layout, củng cố cảm giác có cấu trúc, dựa trên grid của trang. Photography không xuất hiện, tập trung hoàn toàn vào giao diện sản phẩm và đồ họa thương hiệu cách điệu."

  layout:

    info: "Layout là container max-width căn giữa (khoảng 1200px) mang lại trải nghiệm đọc ổn định. Một pattern chính là sự xen kẽ nhịp nhàng giữa hero nền trắng (cột chia đôi text/hình ảnh) và feature section tối full-bleed. Điều này tạo ra sự tương phản và nhịp điệu ấn tượng. Nội dung được tổ chức theo cấu trúc đơn giản, rõ ràng như khối feature 2 cột và grid card nhiều cột. Khoảng cách dọc rộng rãi (64px+) giữa các section đảm bảo mỗi thông điệp có không gian để thở."

  agent_prompt_guide:

    quick_color_reference:
      - "**Text:** `#0a0b0d`"
      - "**Background:** `#ffffff`"
      - "**CTA Button:** `#0052ff`"
      - "**Dark Section BG:** `#0a0b0d`"
      - "**Secondary Text:** `#5b616e`"
      - "**Link:** `#578bfa`"

    example_component_prompts:
      - "**Hero Section:** \"Tạo hero hai cột trên nền `#ffffff`. Cột trái: headline 'Hello, Spain!' ở 64px CoinbaseDisplay weight 400 màu `#0a0b0d`. Subtext 'Coinbase is the world's safest platform...' ở 18px CoinbaseSans weight 400 màu `#5b616e`. Primary button 'Sign up' với background `#0052ff`, text `#ffffff`, padding 16px 32px, border-radius 56px.\""
      - "**Dark Promo Section:** \"Tạo section full-width với background `#0a0b0d` và padding dọc 80px. Bên trong, đặt headline căn giữa 'Earn up to 14% APY on your crypto' ở 36px CoinbaseSans weight 600 màu `#ffffff`. Thêm subtext bên dưới. Bên dưới đó, thêm secondary pill button 'Explore staking options' với background `#ffffff`, text `#0a0b0d`, padding 12px 24px, radius 100000px.\""
      - "**Footer:** \"Thiết kế footer trên nền `#f7f8f9`. Tạo bốn cột. Mỗi cột có heading như 'Company' hoặc 'Learn' dùng 16px CoinbaseSans weight 600 màu `#0a0b0d`. Liệt kê link bên dưới mỗi heading như 'About' hoặc 'Blog' dùng 16px CoinbaseText weight 400 màu `#5b616e`.\""

  similar_brands:

    - "**Stripe** — Cùng thẩm mỹ typography tương phản cao, một màu thương hiệu mạnh duy nhất, và cảm giác sạch sẽ, thân thiện với developer."
    - "**Robinhood** — Cùng mục tiêu đơn giản hóa tài chính với thiết kế mobile-first sạch sẽ và màu thương hiệu lạc quan chủ đạo."
    - "**Intercom** — Sử dụng chiến lược tương tự với màu xanh thương hiệu mạnh, illustration tùy chỉnh và nhiều khoảng trắng."
    - "**Wealthsimple** — Cũng kết hợp cảm giác đáng tin cậy nhưng không cứng nhắc với typography sạch sẽ và đồ họa dễ tiếp cận."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-coinbase-blue: #0052ff;
          --color-interactive-blue: #578bfa;
          --color-pure-white: #ffffff;
          --color-midnight: #0a0b0d;
          --color-slate: #5b616;
          --color-ash: #8a919;
          --color-frost: #f7f8f9;
          --color-cloud: #eef0f3;
          --color-pewter: #dedfe2;
          --color-charcoal: #141519;
          --color-positive-green: #27ad75;
          --color-negative-red: #f0616d;
        
          /* Typography — Font Families */
          --font-coinbasedisplay: 'CoinbaseDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coinbasesans: 'CoinbaseSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coinbasetext: 'CoinbaseText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.54;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.25;
          --text-heading: 44px;
          --leading-heading: 1.09;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --text-display: 80px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --card-padding: 24px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 56px;
          --radius-full-2: 100000px;
        
          /* Named Radii */
          --radius-tags: 100000px;
          --radius-cards: 24px;
          --radius-inputs: 8px;
          --radius-buttons: 56px;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-coinbase-blue: #0052ff;
          --color-interactive-blue: #578bfa;
          --color-pure-white: #ffffff;
          --color-midnight: #0a0b0d;
          --color-slate: #5b616;
          --color-ash: #8a919;
          --color-frost: #f7f8f9;
          --color-cloud: #eef0f3;
          --color-pewter: #dedfe2;
          --color-charcoal: #141519;
          --color-positive-green: #27ad75;
          --color-negative-red: #f0616d;
        
          /* Typography */
          --font-coinbasedisplay: 'CoinbaseDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coinbasesans: 'CoinbaseSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coinbasetext: 'CoinbaseText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.54;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.25;
          --text-heading: 44px;
          --leading-heading: 1.09;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --text-display: 80px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 56px;
          --radius-full-2: 100000px;
        }