tinybird___style_reference:
  info: "> terminal developer lúc nửa đêm — khoảng đen vô tận, một con trỏ xanh điện, thì thầm monospace"

  theme: "dark"

  info: "Tinybird mang thẩm mỹ developer console dark-mode: canvas gần đen, một điểm nhấn xanh điện hoạt động như giọng màu duy nhất trên màn hình, và sự phân chia nghiêm ngặt giữa Roboto (humanist) cho văn xuôi và Roboto Mono (monospaced) cho tag, label và code. Giao diện mang chất terminal — badge monospace nằm trong dấu ngoặc vuông như log entry, và điểm nhấn xanh hoạt động như con trỏ nhấp nháy thay vì màu thương hiệu, được dùng tiết kiệm cho CTA, link và highlight inline thỉnh thoảng. Surface phẳng, border siêu mảnh (hairline), và chiều cao (elevation) đạt được qua lớp màu tối đậm dần thay vì đổ bóng. Kết quả là một product page có cảm giác được kỹ thuật hóa hơn là tiếp thị, tự tin trong sự tiết chế."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Cursor Green | `#27f795` | `--color-cursor-green` | Điểm nhấn xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Hover Green | `#008060` | `--color-hover-green` | Điểm nhấn xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Terminal Red | `#800000` | `--color-terminal-red` | Điểm nhấn đỏ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent phụ, không phải màu trạng thái |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Text chính và headline. Tương phản tối đa trên canvas gần đen để dễ đọc ngay lập tức |"
    info: "| Void Black | `#000000` | `--color-void-black` | Surface sâu nhất cho hero background và video poster frame, tối hơn canvas trang một bậc |"
    info: "| Console Black | `#0a0a0a` | `--color-console-black` | Canvas trang chính — background chủ đạo của mọi màn hình. Cao hơn đen tuyền một chút để làm dịu độ tương phản OLED |"
    info: "| Panel Charcoal | `#151515` | `--color-panel-charcoal` | Surface nâng lên đầu tiên — dùng cho khung media nhúng và video container cần nằm trên canvas trang |"
    info: "| Card Graphite | `#262626` | `--color-card-graphite` | Background cho testimonial và content card. Cao hơn canvas hai bậc, đủ nâng lên để tách biệt mà không đổ bóng |"
    info: "| Border Smoke | `#353535` | `--color-border-smoke` | Hairline border, input field và divider. Xác định cạnh component mà không cạnh tranh với nội dung |"
    info: "| Muted Ash | `#8d8d8d` | `--color-muted-ash` | Secondary body text, mô tả và sub-label — giọng nói cho mọi thứ hỗ trợ nhưng không đóng vai chính trong hệ thống phân cấp |"
    info: "| Tertiary Fog | `#999999` | `--color-tertiary-fog` | Tertiary text và label trạng thái disabled. Giọng người mờ nhất trước khi rơi vào im lặng |"
    info: "| Highlight Mist | `#d9d9d9` | `--color-highlight-mist` | Border accent sáng dùng trên outlined element được nhấn mạnh như workflow step đang hoạt động |"

  tokens___typography:

    roboto___văn_xuôi_và_headline__weight_400_cho_body_và_mô_tả__weight_600_cho_text_nút_cta_chính__weight_700_dành_riêng_cho_display_headline_64px__tracking_âm_chặt_ở_64px_siết_headline_thành_một_khối_tự_tin_duy_nhất_____font_roboto:
      - "**Thay thế:** Inter, system-ui, sans-serif"
      - "**Weights:** 400, 600, 700"
      - "**Kích cỡ:** 12, 14, 16, 18, 24, 64"
      - "**Line height:** 1.13, 1.33, 1.50, 1.57, 1.67, 1.78"
      - "**Letter spacing:** -0.0200em ở 64px (display), -0.0130em ở 24px (heading)"
      - "**Vai trò:** Văn xuôi và headline. Weight 400 cho body và mô tả, weight 600 cho text nút CTA chính, weight 700 dành riêng cho display headline 64px. Tracking âm chặt ở 64px siết headline thành một khối tự tin duy nhất."

    roboto_mono___tag__badge__code_label__workflow_step_indicator_và_stat_figure_monospaced__tracking__0_084em_cực_đoan_ở_56px_là_phản_quy_tắc___monospace_thường_giữ_lỏng__nhưng_điều_này_siết_chữ_số_thành_khối_dữ_liệu_dày_đặc__mang_cảm_giác_được_kỹ_thuật_hóa_chứ_không_chỉ_hiển_thị_____font_roboto_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, monospace"
      - "**Weights:** 400"
      - "**Kích cỡ:** 12, 14, 16, 56"
      - "**Line height:** 1.00, 1.50, 1.57, 1.67"
      - "**Letter spacing:** -0.0840em"
      - "**Vai trò:** Tag, badge, code label, workflow step indicator và stat figure monospaced. Tracking -0.084em cực đoan ở 56px là phản quy tắc — monospace thường giữ lỏng, nhưng điều này siết chữ số thành khối dữ liệu dày đặc, mang cảm giác được kỹ thuật hóa chứ không chỉ hiển thị."

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|------|"
      info: "| caption | 12px | 1.57 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.57 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.67 | — | `--text-body` |"
      info: "| subheading | 18px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.31px | `--text-heading-sm` |"
      info: "| stat-figure | 56px | 1 | -4.7px | `--text-stat-figure` |"
      info: "| display | 64px | 1.13 | -1.28px | `--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: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 152 | 152px | `--spacing-152` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 4px |"
      info: "| cards | 8px |"
      info: "| buttons | 4px |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Filled button cho hành động quan trọng nhất trên một màn hình"

      info: "Background #27f795 (Cursor Green), text #000000 hoặc #0a0a0a, Roboto weight 600 ở 16px, radius 4px, padding dọc 12px và ngang 24px. Đây là filled button duy nhất trong hệ thống — mọi interactive element khác đều là ghost hoặc text. Fill xanh là tương đương trực quan của một con trỏ nhấp nháy."

    ghost_link_button:
      vai_trò: "Secondary action nằm cạnh primary CTA"

      info: "Không background, text #27f795, Roboto weight 400 ở 16px, không border, không radius. Đọc như text link với cursor affordance — người bạn đồng hành yên tĩnh hơn cho filled CTA."

    navigation_header:
      vai_trò: "Thanh trên cùng cố định với product link và auth action"

      info: "Background trong suốt trên canvas #0a0a0a. Logo (bird mark + 'tinybird' wordmark) bên trái màu trắng ở 14px weight 700. Nav item trung tâm màu trắng ở 14px weight 400. Bên phải: ghost 'Sign in' text link màu #27f795, tiếp theo là filled 'Sign up' button dùng style Primary CTA với padding dọc 10px và ngang 16px gọn hơn."

    bracket_workflow_tag:
      vai_trò: "Step indicator trong workflow sequence"

      info: "Không background, Roboto Mono weight 400 ở 12px, màu #27f795 cho step đang hoạt động và #8d8d8d cho step không hoạt động. Được bọc trong dấu ngoặc vuông: [Get Started] [Develop] [Ingest] [Query] [Monitor] [Iterate]. Pipe characters ngăn cách các step. Đây là micro-component đặc trưng — nó làm cho giao diện có cảm giác như log output."

    category_tag:
      vai_trò: "Badge phân loại chủ đề"

      info: "1px border màu #353535 (Border Smoke), background trong suốt, Roboto Mono weight 400 ở 12px, text #d9d9d9, radius 4px, padding dọc 4px và ngang 12px. Dùng trong hero để phân loại use case như 'SaaS / Dashboards', 'Observability', 'AI Analytics'."

    stat_card:
      vai_trò: "Hiển thị số liệu hero"

      info: "Roboto Mono figure lớn ở 56px weight 400 màu #27f795, tracking -0.084em để nén chữ số thành khối dày đặc. Label kề bên bằng Roboto Mono ở 12px màu #8d8d8d, chữ hoa. Không card chrome — nằm trực tiếp trên canvas."

    testimonial_card:
      vai_trò: "Social proof block trong grid 3 cột"

      info: "Background #262626 (Card Graphite), radius 8px, padding 24px tất cả các mặt. Avatar tròn 40px góc trên bên trái, tên bằng Roboto weight 600 ở 14px màu #ffffff, chức danh và công ty màu #8d8d8d ở 12px. Quote body bằng Roboto weight 400 ở 14px màu #d9d9d9. 1px border màu #353535 để xác định ranh giới trên bề mặt card sáng hơn một chút."

    hero_section:
      vai_trò: "Headline và CTA phía trên fold"

      info: "Bố cục căn giữa trên nền #0a0a0a. Headline ở 64px Roboto weight 700 màu #ffffff, tracking -0.020em, line-height 1.13. Subtext ở 18px Roboto weight 400 màu #8d8d8d. Primary CTA và ghost link cạnh nhau với gap 16px. Category tag bên dưới với gap 8px."

    logo_bar:
      vai_trò: "Dải logo đối tác hoặc khách hàng"

      info: "Một hàng duy nhất gồm 7–8 logo grayscale căn giữa, cách nhau bởi gap 40px, nằm trong card với background #262626 và border 1px #353535. Logo hiển thị màu #8d8d8d để lùi lại — chúng là bằng chứng, không phải ngôi sao."

    video_embed_frame:
      vai_trò: "Media container full-width cho demo"

      info: "Background #151515 (Panel Charcoal), 1px border màu #353535, không radius. Nút play tròn căn giữa đường kính 64px, fill #353535 với biểu tượng tam giác trắng. Frame kéo dài edge-to-edge trong container của nó mà không có padding bên trong — video là nội dung."

    data_hero_band:
      vai_trò: "Dải quảng cáo kết hợp social proof và số liệu trực tiếp"

      bố_cục_inline_trên_canvas: "attribution đối tác (avatar nhỏ + tên) màu #8d8d8d, tiếp theo là câu mô tả với cụm '30M requests/day' được highlight màu #27f795. Bên dưới, chia hai cột: cột trái có stat figure xếp chồng màu Cursor Green, cột phải có testimonial block dạng white-quote."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng fill #27f795 cho một action quan trọng nhất trên mỗi màn hình — một filled CTA, mọi thứ khác là ghost hoặc text."
      - "Bọc workflow step và inline label trong dấu ngoặc vuông hiển thị bằng Roboto Mono để duy trì thẩm mỹ terminal-log."
      - "Dùng Roboto Mono cho mọi số liệu, stat và tag label; chỉ dùng Roboto cho văn xuôi, mô tả và headline."
      - "Đặt tracking headline ở -0.020em tại 64px và tracking stat-figure ở -0.084em tại 56px để nén type thành các khối dày đặc, tự tin."
      - "Xây dựng hệ thống phân cấp surface qua bốn cấp độ than chì (0a0a0a → 151515 → 262626 → 353535) thay vì drop shadow."
      - "Giữ tất cả border chính xác ở 1px màu #353535 — hệ thống được xác định bởi hairline edge, không phải độ dày."
      - "Dùng radius 4px cho button và radius 8px cho card — không có radius lớn hơn ở bất kỳ đâu."

    không_nên_làm:
      - "Không đưa bất kỳ màu nào ngoài bảng màu — hệ thống là achromatic cộng với một màu xanh, thêm giọng màu thứ hai sẽ phá vỡ ẩn dụ terminal."
      - "Không dùng filled button với background trung tính hoặc trắng — màu fill duy nhất là #27f795, và chỉ dành cho primary action."
      - "Không dùng Roboto cho tag, label hoặc code — những thứ này phải ở Roboto Mono để giữ bản sắc developer-tool."
      - "Không dùng shadow hoặc glow để tạo elevation — thiết kế đạt được phân lớp qua độ tối của surface, không bao giờ dùng drop shadow."
      - "Không dùng radius lớn hơn 8px — bất kỳ thứ gì tròn hơn sẽ có cảm giác thân thiện với người dùng và phá vỡ cảm giác kỹ thuật."
      - "Không dùng màu đỏ #800000 làm error state — nó là inline accent yên tĩnh, không phải tín hiệu ngữ nghĩa."
      - "Không căn trái nội dung hero — headline căn giữa với tracking chặt là signature opener."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#000000` | Surface sâu nhất cho hero band và full-bleed media frame |"
    info: "| 1 | Console | `#0a0a0a` | Canvas trang chính trên tất cả các section |"
    info: "| 2 | Panel | `#151515` | Media container nhúng, video poster |"
    info: "| 3 | Card | `#262626` | Background cho testimonial và content card |"
    info: "| 4 | Edge | `#353535` | Border, input field, divider tinh tế |"

  elevation:

    - "**Card on Canvas:** `không — đạt được qua surface #262626 trên canvas #0a0a0a`"
    - "**Testimonial Card:** `không — border 1px #353535 trên surface #262626`"
    - "**Video Frame:** `không — border 1px #353535 trên surface #151515`"

  imagery:

    info: "Hình ảnh tối giản và chức năng. Nội dung ảnh duy nhất là avatar chân dung tròn nhỏ trong testimonial card (40px, cắt sát mặt). Artifact hình ảnh chính là video demo frame full-bleed được hiển thị dưới dạng panel than chì phẳng với nút play căn giữa — không thumbnail, không preview. Logo đối tác trong logo bar được giảm bão hòa thành đơn sắc #8d8d8d, trình bày social proof như bằng chứng hơn là sự chứng thực. Không có illustration, không 3D render, không đồ họa trang trí. Điểm nhấn xanh làm công việc thị giác mà ornament sẽ làm ở nơi khác."

  layout:

    info: "Nội dung căn giữa max-width 1200px trên canvas full-bleed #0a0a0a. Trang tuân theo nhịp điệu dọc của các section full-width cách nhau bởi gap 80px, không có band sáng/tối xen kẽ — mọi section đều chia sẻ cùng một canvas tối. Mỗi section được căn giữa, ưu tiên text, với hero dùng stack căn giữa (headline → subtext → cặp CTA → hàng tag) và các section tiếp theo xen kẽ giữa khối text căn giữa và grid card 3 cột. Navigation là thanh trên cùng trong suốt tối giản, không có sticky shadow. Content density comfortable thay vì dày đặc — khoảng thở dọc lớn và bố cục căn giữa tạo ra một sân khấu cho điểm nhấn xanh duy nhất."

  agent_prompt_guide:

  quick_color_reference:

    - "text: #ffffff (primary), #8d8d8d (secondary), #999999 (tertiary)"
    - "background: #0a0a0a (page canvas), #262626 (cards), #151515 (panels)"
    - "border: #353535 (hairline), #d9d9d9 (emphasis)"
    - "accent: #27f795 (Cursor Green — links, tags, highlights)"
    - "primary action: không có màu CTA riêng biệt"

  3_example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; dùng neutral button treatment đã trích xuất thay vì tự tạo màu filled CTA."

    - "**Tạo testimonial grid**: Grid 3 cột trên canvas #0a0a0a, column gap 24px, row gap 40px. Mỗi card: background #262626, radius 8px, border 1px #353535, padding 24px. Avatar tròn 40px góc trên bên trái. Tên bằng Roboto weight 600 14px #ffffff, chức danh ở 12px #8d8d8d, quote ở 14px #d9d9d9. Section gap phía trên: 80px."

    - "**Tạo stat display**: Bố cục hai cột trên nền #0a0a0a. Cột trái: stat figure xếp chồng bằng Roboto Mono 56px weight 400, #27f795, letter-spacing -4.7px, line-height 1.00. Label kề bên bằng Roboto Mono 12px chữ hoa, #8d8d8d. Cột phải: quote block với border trái 1px màu #27f795, body text bằng Roboto 16px #d9d9d9."

  similar_brands:

    - "**Vercel** — Cùng thẩm mỹ developer-tool black-canvas với một điểm nhấn sắc độ và headline sans-serif hình học, dù Vercel dùng điểm nhấn trắng trong khi Tinybird dùng xanh"
    - "**Railway** — Dark-mode infrastructure product page với monospace label và flat surface layering, dù Railway thiên về tím hơn xanh"
    - "**PlanetScale** — Terminal-grade dark interface với monospace stat figure và flat card hierarchy, dù PlanetScale dùng bảng màu gradient rộng hơn"
    - "**Supabase** — Dark developer-tool product page với một màu nhấn sống động duy nhất (xanh cho Supabase) và monospace tag badge"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cursor-green: #27f795;
          --color-hover-green: #008060;
          --color-terminal-red: #800000;
          --color-pure-white: #ffffff;
          --color-void-black: #000000;
          --color-console-black: #0a0a0a;
          --color-panel-charcoal: #151515;
          --color-card-graphite: #262626;
          --color-border-smoke: #353535;
          --color-muted-ash: #8d8d8d;
          --color-tertiary-fog: #999999;
          --color-highlight-mist: #d9d9d9;
        
          /* Typography — Font Families */
          --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.57;
          --text-body-sm: 14px;
          --leading-body-sm: 1.57;
          --text-body: 16px;
          --leading-body: 1.67;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.31px;
          --text-stat-figure: 56px;
          --leading-stat-figure: 1;
          --tracking-stat-figure: -4.7px;
          --text-display: 64px;
          --leading-display: 1.13;
          --tracking-display: -1.28px;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-152: 152px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 8px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-console: #0a0a0a;
          --surface-panel: #151515;
          --surface-card: #262626;
          --surface-edge: #353535;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cursor-green: #27f795;
          --color-hover-green: #008060;
          --color-terminal-red: #800000;
          --color-pure-white: #ffffff;
          --color-void-black: #000000;
          --color-console-black: #0a0a0a;
          --color-panel-charcoal: #151515;
          --color-card-graphite: #262626;
          --color-border-smoke: #353535;
          --color-muted-ash: #8d8d8d;
          --color-tertiary-fog: #999999;
          --color-highlight-mist: #d9d9d9;
        
          /* Typography */
          --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.57;
          --text-body-sm: 14px;
          --leading-body-sm: 1.57;
          --text-body: 16px;
          --leading-body: 1.67;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.31px;
          --text-stat-figure: 56px;
          --leading-stat-figure: 1;
          --tracking-stat-figure: -4.7px;
          --text-display: 64px;
          --leading-display: 1.13;
          --tracking-display: -1.28px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-152: 152px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
        }