sandclock___style_reference:
  info: "> Terminal lệnh DeFi lúc nửa đêm — đèn tín hiệu xanh mint trên bảng điều khiển đen mờ"

  theme: "dark"

  info: "Sandclock là một terminal yield DeFi khoác lên mình màu đen mờ: chrome gần như bằng không, một màu tín hiệu xanh mint rực rỡ, và typography đảm nhận mọi công việc. Giao diện mang phong cách Bloomberg terminal được tái hiện cho DeFi — canvas tối (#0a0a0a), viền graphite mảnh (#222222), bề mặt phẳng không có độ nâng trang trí, và Inter cho text tiện ích kết hợp với custom Aeonik display face cho headline 72px hiếm hoi. Màu xanh (#3fe280) chỉ xuất hiện như dấu câu chức năng: gạch chân nav active, primary CTA, và viền accent trên các thẻ số liệu trực tiếp. Mọi bề mặt khác đều giữ achromatic để màu xanh đọc như tín hiệu trực tiếp, không phải trang trí. Các component có cảm giác như một trading dashboard — gọn gàng, nhiều thông tin số, nhưng thoáng đãng nhờ khoảng cách section rộng. Không gradient, không drop shadow ngoại trừ một hiệu ứng nâng nhẹ duy nhất trên button, không có chrome minh họa màu sắc. Sự tin tưởng được truyền tải qua sự kiềm chế: thiết kế nói 'tiền của bạn ở đây' bằng cách giữ im lặng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Abyss | `#0a0a0a` | `--color-abyss` | Canvas trang và nền chính — toàn bộ site sống trên bề mặt gần như đen này để accent mint đọc như tín hiệu trực tiếp giữa bóng tối thuần khiết |"
    info: "| Carbon | `#171717` | `--color-carbon` | Bề mặt card và panel được nâng lên — dùng cho stat cards, security badges, và announcement containers cần tách khỏi canvas mà không đưa thêm màu sắc |"
    info: "| Graphite | `#222222` | `--color-graphite` | Viền mảnh, divider, và màu cấu trúc xuất hiện nhiều nhất trong hệ thống. Mang 356 borderColor uses — nó là khung dây (wireframe) định nghĩa mọi container |"
    info: "| Ash | `#9b9b9b` | `--color-ash` | Secondary text mờ, helper labels, và nav items được giảm chú ý. Màu text không phải trắng duy nhất — dành #ffffff cho nội dung cần được đọc trước |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Primary text, icon, và phần tô của Connect Wallet button. Độ tương phản tối đa với Abyss (19.8:1) đảm bảo khả năng đọc trên bề mặt tối nhất có thể |"
    info: "| Signal Mint | `#3fe280` | `--color-signal-mint` | Accent màu duy nhất — gạch chân nav active, phần tô primary CTA (Start Earning), và viền highlight trên thẻ TVL stat. Xuất hiện tiết kiệm để mỗi lần xuất hiện đọc như một hành động trực tiếp, di chuyển tiền, thay vì trang trí |"

  tokens___typography:

    aeonik___display_headlines_hero__được_dùng_đúng_một_lần_trên_trang_ở_kích_thước_72px___custom_face_với_tracking_chặt_khiến_câu_từ_của_ứng_dụng_tài_chính_có_cảm_giác_được_kỹ_thuật_hóa_thay_vì_dùng_template__weight_400_ở_kích_thước_này_là_lựa_chọn_đặc_trưng__các_site_tài_chính_khác_dùng_600_800_bold__sandclock_thì_thầm_quyền_lực_____font_aeonik:
      - "**Thay thế:** Satoshi (Indian Type Foundry) hoặc General Sans"
      - "**Weights:** 400"
      - "**Sizes:** 72px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.025em"
      - "**Vai trò:** Display headlines (hero). Được dùng đúng một lần trên trang ở kích thước 72px — custom face với tracking chặt khiến câu từ của ứng dụng tài chính có cảm giác được kỹ thuật hóa thay vì dùng template. Weight 400 ở kích thước này là lựa chọn đặc trưng: các site tài chính khác dùng 600-800 bold; Sandclock thì thầm quyền lực."

    inter___tất_cả_ui_text___body__buttons__nav__card_content__subheadings__và_section_headings__tracking_dương_0_05em_trên_inter_khá_bất_thường_cho_body_copy_và_mang_lại_cho_label_chất_hơi_kỹ_thuật__giống_bảng_điều_khiển_thiết_bị__thay_vì_sự_ấm_áp_biên_tập__weight_500_dành_cho_nhấn_mạnh_cta_labels__section_titles__400_đảm_nhận_mọi_thứ_còn_lại_____font_inter:
      - "**Thay thế:** DM Sans hoặc system-ui"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 16px, 20px, 24px, 36px"
      - "**Line height:** 1.11, 1.33, 1.40, 1.43, 1.50"
      - "**Letter spacing:** 0.05em"
      - "**Vai trò:** Tất cả UI text — body, buttons, nav, card content, subheadings, và section headings. Tracking dương 0.05em trên Inter khá bất thường cho body copy và mang lại cho label chất hơi kỹ thuật, giống bảng điều khiển thiết bị, thay vì sự ấm áp biên tập. Weight 500 dành cho nhấn mạnh (CTA labels, section titles); 400 đảm nhận mọi thứ còn lại."

    dm_sans___sử_dụng_secondary_tối_thiểu___có_thể_chỉ_một_element_duy_nhất_hoặc_fallback__không_phải_giọng_type_chính_____font_dm_sans:
      - "**Thay thế:** Inter"
      - "**Weights:** 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Sử dụng secondary tối thiểu — có thể chỉ một element duy nhất hoặc fallback. Không phải giọng type chính."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | 0.7px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.8px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | 1px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | 1.2px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.11 | 1.8px | `--text-heading` |"
      info: "| display | 72px | 1 | -1.8px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| buttons | 16px |"
      info: "| heroButton | 64px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(24, 39, 75, 0.08) 0px 2px 3px 0px` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Filled button cho hành động quan trọng nhất trên một trang (Start Earning, Connect)"

      info: "Nền #3fe280 (Signal Mint), text #0a0a0a (Abyss) để tương phản đảo ngược. Inter 500 ở 16px, letter-spacing 0.05em. Padding 12px 24px. Border-radius 16px. Không shadow. Màu xanh trên nền tối khiến button nổi bật như element có màu duy nhất trên màn hình — ưu tiên thị giác là tức thì."

    ghost_button:
      vai_trò: "Secondary action đi kèm với Primary CTA (Buy QUARTZ)"

      info: "Nền trong suốt, viền 1px #222222 (Graphite), text #ffffff. Inter 500 ở 16px. Padding 12px 24px. Border-radius 16px. Một icon nhỏ đứng trước label. Đọc như người bạn đồng hành yên tĩnh bên cạnh CTA xanh — cùng hình dạng, chrome tắt tiếng."

    connect_wallet_button:
      vai_trò: "Hành động kết nối wallet cố định ở nav góc trên bên phải"

      info: "Fill trắng #ffffff với text #0a0a0a — đảo ngược so với phần còn lại của dark UI. Inter 500 ở 16px. Border-radius 9999px (full pill). Pill trắng giữa biển bề mặt tối là non-CTA có độ tương phản cao duy nhất trên trang; nó hoạt động như một tiện ích toàn cục, không phải hành động nội dung."

    navigation_link:
      vai_trò: "Nav items trên thanh top-bar (Home, Earn, Staking, Docs)"

      info: "Inter 400 ở 16px, text #ffffff. Trạng thái active: viền dưới 3px solid #3fe280 — nơi duy nhất màu xanh xuất hiện trong nav. Các link inactive không có gạch chân. Gạch chân xanh là tín hiệu trực tiếp phản chiếu các CTA mint bên dưới."

    tvl_stat_card:
      vai_trò: "Thẻ dữ liệu trực tiếp được highlight hiển thị số liệu giao thức"

      info: "Nền #171717 (Carbon), viền 1px #3fe280 (Signal Mint) — viền xanh là tín hiệu. Layout bên trong: label Ash nhỏ (14px, uppercase tracking) phía trên giá trị trắng lớn (36px Inter 500). Padding 16-24px. Border-radius 12px. Viền xanh nên được dành riêng cho các thẻ hiển thị số liệu trực tiếp, mang tiền."

    generic_card:
      vai_trò: "Container mặc định được nâng lên cho các nhóm nội dung"

      info: "Nền #171717 (Carbon), viền 1px #222222 (Graphite). Border-radius 12px. Padding 16px. Không shadow. Viền mảnh thay vì độ nâng — hệ thống truyền tải độ sâu layer bằng sự thay đổi màu sắc, không phải drop shadow."

    announcement_card:
      vai_trò: "Tile tin tức/đối tác với image hero và body text"

      info: "Nền #171717, border-radius 12px. Nửa trên: ảnh full-bleed hoặc artwork gradient (được phép phá vỡ quy tắc không hình ảnh — hình ảnh đối tác bên ngoài). Nửa dưới: pill badge nhỏ (Announcement / Security) trong Graphite với text trắng, sau đó là heading (20px Inter 500, trắng) và body (14px Inter 400, Ash). Padding 16px trên khối text."

    security_badge_tile:
      vai_trò: "Thẻ tín hiệu tin cậy (Safe data, SOC2 Compliant, Insured by Schwarzschild)"

      info: "Nền #171717, border-radius 12px. Icon căn giữa trong một vòng tròn nhỏ ở trên, một dòng label text trắng bên dưới. Không viền, không shadow. Màu icon: #ffffff hoặc accent xanh (badge SOC2 dùng vòng tròn xanh thương hiệu như một ngoại lệ màu duy nhất được phép cho chứng nhận bên thứ ba)."

    announcement_tag:
      vai_trò: "Pill badge nhỏ phía trên heading của announcement card"

      info: "Nền #222222 (Graphite), text #ffffff, Inter 500 ở 12px. Padding 4px 12px. Border-radius 9999px (pill). Dùng để phân loại card (Announcement, Security) — không bao giờ tô màu, luôn trung tính."

    partner_logo_strip:
      vai_trò: "Hàng ngang logo giao thức bên thứ ba (AAVE, LIDO, Compound, Morpho)"

      info: "Logo trắng (#ffffff) trên canvas Abyss, phân bố đều trên toàn bộ chiều rộng. Không viền, không separator — chỉ logo và khoảng thở. Hoạt động như một dải trust-by-association bên dưới hero."

    feature_icon_block:
      vai_trò: "Đơn vị icon-plus-label nhỏ dùng trong danh sách tính năng"

      info: "Icon trắng hoặc Signal Mint (16-20px) kết hợp với label text trắng (14px Inter 400). Khoảng cách 4-8px giữa icon và text. Căn chỉnh theo nhịp điệu dọc. Không nền hoặc viền — sống trực tiếp trên canvas."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng Signal Mint #3fe280 cho: primary CTA, indicator nav active, và viền trên thẻ stat dữ liệu trực tiếp. Mọi bề mặt khác giữ achromatic."
      - "Đặt Inter letter-spacing thành 0.05em trên tất cả text — tracking kỹ thuật này là thứ phân biệt type với body copy SaaS chung chung."
      - "Dùng border-radius 12px cho tất cả card và 16px cho tất cả button. Không pha trộn 8px hoặc 4px — sự phân chia 12/16 là chữ ký hình học."
      - "Chỉ dùng Aeonik 400 ở 72px cho display text cấp hero. Không bao giờ dùng Aeonik cho subheadings hoặc body — nó được dành riêng cho khoảnh khắc tuyên bố duy nhất mỗi trang."
      - "Mặc định canvas #0a0a0a với card #171717 và viền mảnh #222222. Truyền tải độ sâu layer bằng sự thay đổi màu sắc, không phải shadow."
      - "Áp dụng khoảng cách section rộng 48-64px. Mật độ đọc là 'thoải mái,' không phải gọn — sản phẩm tiền cần không gian thở."
      - "Đặt hành động Connect Wallet dưới dạng pill trắng (bán kính 9999px) ở góc trên bên phải — nó là element UI màu đảo ngược duy nhất được phép trong nav."

    không_nên_làm:
      - "Không dùng Signal Mint cho body text, icon, hoặc hình dạng trang trí. Màu xanh là tín hiệu, không phải màu chủ đề."
      - "Không đưa drop shadows vào card, modal, hoặc panel. Bề mặt phẳng là một quy ước tài chính-tin cậy có chủ đích."
      - "Không dùng gradient. Hệ thống cố tình phẳng; gradient sẽ phá vỡ thẩm mỹ terminal."
      - "Không đặt Inter letter-spacing thành normal hoặc âm. Tracking dương 0.05em là lựa chọn đặc trưng."
      - "Không dùng Ash #9b9b9b cho bất cứ thứ gì dài hơn một helper label ngắn — chỉ dành cho text được giảm chú ý."
      - "Không áp dụng border-radius dưới 12px trên container hoặc dưới 16px trên button. Hệ thống có quan điểm hình học rõ ràng."
      - "Không dùng Aeonik weights trên 400. Display face hoạt động ở 400 vì kích thước (72px) tự mang trọng lượng; bolding sẽ làm quá lố."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Abyss | `#0a0a0a` | Canvas trang full-bleed |"
    info: "| 1 | Carbon | `#171717` | Cards, stat panels, và announcement containers |"
    info: "| 2 | Graphite | `#222222` | Viền mảnh và đường divider |"

  elevation:

    - "**Primary CTA Button:** `rgba(24, 39, 75, 0.08) 0px 2px 3px 0px`"

  imagery:

    info: "Hình ảnh là tối thiểu và chỉ dùng cho nội dung đối tác/thông báo. Site không có product photography, không lifestyle imagery, không chrome minh họa — nó là giao diện text-và-dữ liệu. Nội dung hình ảnh duy nhất đến từ các announcement card của bên thứ ba (gradient đất/cực quang, certification marks) là tài sản bên ngoài, không phải thiết kế hệ thống. Hero và bề mặt sản phẩm cốt lõi là typography thuần túy trên Abyss. Icons xuyên suốt là monochrome line icons màu trắng, được dùng tiết kiệm như marker chức năng. Mật độ tổng thể là text-dominant với dữ liệu (TVL, stETH Exposure) chiếm ưu tiên thị giác hơn hình ảnh trang trí."

  layout:

    info: "Container căn giữa max-width ~1200px trên canvas Abyss full-bleed. Hero theo chia hai cột: headline Aeonik 72px lớn bên trái, supporting copy + stack CTA kép bên phải. Bên dưới hero, dải logo đối tác trải dài toàn bộ chiều rộng container với phân bố ngang đều. Các section nội dung là một cột, heading căn giữa, với feature/icon blocks trong lưới 2-3 cột. Thẻ TVL stat là full-width với viền xanh nhấn mạnh. Announcement cards dùng lưới 3 cột. Nhịp điệu dọc rộng rãi — 48-64px giữa các section chính. Navigation là top bar tối giản với logo căn trái, nav links giữa-trái, và pill Connect Wallet căn phải. Không có sticky behavior rõ ràng ngoài top bar tiêu chuẩn."

  agent_prompt_guide:

    info: "Tham chiếu màu nhanh:"
    - "canvas: #0a0a0a"
    - "card surface: #171717"
    - "border: #222222"
    - "primary text: #ffffff"
    - "muted text: #9b9b9b"
    - "accent: #3fe280"
    - "primary action: #3fe280 (filled action)"

    info: "Ví dụ Component Prompts:"

    - "Tạo một Primary Action Button: nền #3fe280, text #0a0a0a, bán kính 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính."

    - "Tạo một TVL stat card: nền #171717, viền 1px #3fe280, bán kính 12px, padding 24px. Label uppercase nhỏ #9b9b9b 14px Inter 400 phía trên giá trị lớn #ffffff 36px Inter 500."

    - "Tạo một generic content card: nền #171717, viền 1px #222222, bán kính 12px, padding 16px. Heading trắng 20px Inter 500, body Ash #9b9b9b 14px Inter 400."

    - "Tạo một security badge tile: nền #171717, bán kính 12px, layout căn giữa. Icon line trắng 24px ở trên, label trắng 14px Inter 400 bên dưới. Không viền."

    - "Tạo một nav link với active state: text 16px Inter 400 #ffffff, viền dưới 3px solid #3fe280 khi active. Các link inactive không có gạch chân."

  similar_brands:

    - "**Aave** — Cùng thẩm mỹ terminal dark-mode DeFi với viền mảnh, bề mặt phẳng, và một accent màu duy nhất dành riêng cho tín hiệu giao thức trực tiếp"
    - "**Lido Finance** — Cùng sự kiềm chế sản phẩm tài chính — canvas Abyss, hệ thống phân cấp typography trắng-trên-tối, spacing rộng rãi, và không hình ảnh trang trí"
    - "**Yearn Finance** — Cùng ngôn ngữ hình ảnh sản phẩm vault: data cards gọn nhẹ, màu xanh như tín hiệu di chuyển tiền, và Inter cho utility text"
    - "**Coinbase Advanced** — Tương tự dark UI trading-desk với typography nghiêng về monospace và accent kiểu Signal-Mint cho các hành động active"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-abyss: #0a0a0a;
          --color-carbon: #171717;
          --color-graphite: #222222;
          --color-ash: #9b9b9b;
          --color-chalk: #ffffff;
          --color-signal-mint: #3fe280;
        
          /* Typography — Font Families */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', 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;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: 0.7px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.8px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 1px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 1.2px;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --tracking-heading: 1.8px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-64px;
          --card-padding: 16px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 64px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-buttons: 16px;
          --radius-herobutton: 64px;
        
          /* Shadows */
          --shadow-subtle: rgba(24, 39, 75, 0.08) 0px 2px 3px 0px;
        
          /* Surfaces */
          --surface-abyss: #0a0a0a;
          --surface-carbon: #171717;
          --surface-graphite: #222222;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-abyss: #0a0a0a;
          --color-carbon: #171717;
          --color-graphite: #222222;
          --color-ash: #9b9b9b;
          --color-chalk: #ffffff;
          --color-signal-mint: #3fe280;
        
          /* Typography */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', 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;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: 0.7px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.8px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 1px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 1.2px;
          --text-heading: 36px;
          --leading-heading: 1.11;
          --tracking-heading: 1.8px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 64px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(24, 39, 75, 0.08) 0px 2px 3px 0px;
        }