Sổ tay Thương hiệu AvibiAvibi Brand Guideline Playbook

Thương hiệu AvibiThe Avibi brand

Avibi là nền tảng tích hợp mô hình AI: một API duy nhất để truy cập các model ngôn ngữ, giọng nói, hình ảnh và video từ nhiều nhà cung cấp. Bộ nhận diện kể đúng câu chuyện đó — chữ A có thanh ngang là một nhịp cầu, gradient xanh chuyển từ chiều sâu hạ tầng (Blue) sang sự rộng mở của tiềm năng AI (Sky), đặt trên nền navy vững chãi. Avibi is an AI model integration platform: one API to reach language, voice, image and video models from many providers. The identity tells that story — an A whose crossbar is a bridge, a gradient that moves from the depth of infrastructure (Blue) to the openness of AI potential (Sky), grounded by a steady navy.

Logo chínhMaster logo

Logo Avibi gồm hai thành phần: biểu tượng chữ A gradient (đồng thời là chữ cái đầu của tên) và phần chữ vibi màu navy. Hai phần ghép thành một từ "Avibi" — luôn dùng nguyên khối, không tách rời, không giãn khoảng cách hay vẽ lại. The Avibi logo has two parts: the gradient A symbol (which is also the first letter of the name) and the navy vibi wordmark. Together they read as one word, "Avibi" — always use it as one unit; never separate, re-space or redraw it.

Cấu trúc biểu tượngSymbol anatomy

Ba chi tiết làm nên chữ A của Avibi. Khi diễn giải thương hiệu trong slide, website hay video giới thiệu, hãy dùng đúng ba ý này.Three details make the Avibi A. Use these three ideas whenever you explain the brand in slides, on the website or in a brand video.

Phiên bản logoLogo variants

Chọn phiên bản phù hợp với nền để đảm bảo độ tương phản và dễ đọc.Choose the version that fits the background to guarantee contrast and legibility.

Nền tối: dùng logo Reversed hay logo trắng?On dark backgrounds: Reversed or white logo?

Trên nền tối, ưu tiên logo Reversed (chữ A gradient + chữ "vibi" trắng) — giữ được màu thương hiệu. Chuyển sang logo trắng khi chữ A gradient không còn đủ tương phản với nền, hoặc khi bối cảnh cần một dấu hiệu trung tính.On dark backgrounds, default to the Reversed logo (gradient A + white "vibi") — it keeps the brand colour. Switch to the white logo when the gradient A loses contrast against the background, or when the context needs a neutral mark.

• Mặc định nền tối = logo Reversed. Nền navy, đen hoặc gần đen trung tính — luôn chọn bản Reversed trước.Dark background = Reversed logo by default. Navy, black or neutral near-black — reach for Reversed first.
• Dùng logo trắng khi: nền mang sắc xanh dương, xanh cyan hoặc tím ở mức trung bình (chữ A gradient tụt dưới 3:1); nền xám đậm (#2E3440 chỉ cho A đạt 2.2:1); nền là gradient thương hiệu; ảnh nhiều chi tiết hoặc độ sáng không đều; logo đứng trong hàng logo đối tác / nhà cung cấp model; in một màu (dập nổi, khắc laser, in lụa).Use the white logo when: the background has a mid-tone blue, cyan or violet cast (the gradient A drops below 3:1); the background is dark grey (#2E3440 gives the A only 2.2:1); the background is the brand gradient; the image is busy or unevenly lit; the logo sits in a partner / model-provider row; or it is printed in one colour (embossing, laser engraving, screen print).
• Ngưỡng tối thiểu: phần chữ 4.5:1 với nền; biểu tượng A (thành phần đồ hoạ) 3:1, đo tại điểm xanh đậm nhất #0059FC. Nếu không chắc, đặt thử cả hai bản và chọn bản dễ đọc hơn ở kích thước nhỏ nhất sẽ dùng.Minimums: wordmark 4.5:1 against the background; A symbol (a graphic element) 3:1, measured at its darkest blue #0059FC. When in doubt, try both versions and pick whichever reads better at the smallest size you'll use.
• Trên nền gradient thương hiệu, đặt logo trắng ở nửa xanh đậm (Blue). Chữ trắng trên phần Sky chỉ đạt 2.2:1.On the brand gradient, place the white logo over the deep Blue half. White on the Sky end only reaches 2.2:1.

Biểu tượng rời & App iconStandalone symbol & app icon

Khi không gian hẹp (favicon, avatar mạng xã hội, app icon, tab trình duyệt), dùng riêng biểu tượng A hoặc app icon. Không tự cắt từ logo — dùng file biểu tượng chuẩn ở mục 10.In tight spaces (favicon, social avatar, app icon, browser tab) use the A symbol or the app icon alone. Don't crop it from the logo — use the dedicated files in section 10.

Logo trên nền ảnhLogo on photo backgrounds

Trên ảnh, logo full-color dễ bị nhiễu và mất tương phản. Quy tắc: dùng logo một màu — trắng hoặc navy — chọn theo độ sáng của vùng đặt logo. Bản Reversed chỉ dùng khi vùng ảnh đó tối, phẳng và trung tính (không ngả xanh).On photos the full-colour logo gets noisy and loses contrast. Rule: use a single-colour logo — white or navy — chosen for the brightness of the area behind it. Use Reversed only when that area is dark, flat and neutral (not blue-tinted).

• Ảnh tối, vùng đặt logo phẳng và trung tính → có thể dùng logo Reversed.Dark image with a flat, neutral area → the Reversed logo is fine.
• Ảnh tối nhiều chi tiết, nhiều màu hoặc ngả xanh dương → dùng logo mono trắng.Dark images that are busy, multi-coloured or blue-tinted → use the white mono logo.
• Ảnh sáng → dùng logo mono navy.Light images → use the navy mono logo.
• Đặt logo lên vùng ảnh ít chi tiết; nếu cần, thêm lớp phủ navy hoặc trắng nhẹ (overlay) để tăng tương phản.Place the logo over a low-detail area; if needed, add a subtle navy or white overlay to boost contrast.
• Không đặt logo full-color (A gradient + chữ navy) trực tiếp lên ảnh.Never place the full-colour logo (gradient A + navy wordmark) directly on a photo.

Không gian bảo vệ logoClear space & minimum size

Luôn giữ một khoảng trống tối thiểu quanh logo để nó "thở". Đơn vị đo (ký hiệu X) là chiều cao chữ "v" trong logo (≈ 62% chiều cao logo) — chính là các chữ "v" mờ ở 4 cạnh trong hình. Không đặt chữ, hình ảnh hay viền trong vùng này.Always keep a minimum clear zone around the logo so it can breathe. The unit (marked X) is the height of the "v" in the logo (≈ 62% of the logo height) — the faded "v" on each side shows it. Keep text, imagery and edges out of this zone.

Những điều không được làmWhat not to do

Giữ logo nguyên vẹn. Dưới đây là các lỗi phổ biến cần tránh để bảo vệ tính nhất quán của thương hiệu.Keep the logo intact. Below are common mistakes to avoid in order to protect brand consistency.

Sản phẩm & dòng modelProducts & model lines

Avibi là thương hiệu mẹ. Sản phẩm dùng cấu trúc "Avibi + tên sản phẩm" và dùng chung logo, bảng màu — không tạo biểu tượng riêng. Bên dưới sản phẩm là các dòng model: đây là nhóm chức năng để điều hướng, không phải thương hiệu con.Avibi is the parent brand. Products follow the "Avibi + product name" structure and share the master logo and palette — no separate symbols. Below the product sit the model lines: functional groupings for navigation, not sub-brands.

Lockup sản phẩmProduct lockup

Tên sản phẩm đặt sau logo, ngăn bằng một vạch đứng mảnh. Tên dùng Plus Jakarta Sans SemiBold, cao bằng chiều cao chữ "b"; màu theo phần chữ của logo (navy hoặc trắng).The product name follows the logo, separated by a thin vertical rule. Set it in Plus Jakarta Sans SemiBold at the height of the "b", coloured like the wordmark (navy or white).

Cần kiểm tra một cặp màu có đủ tương phản để đọc? Dùng công cụ kiểm tra tương phản ở mục 11.Need to check whether a colour pair is readable? Use the contrast checker in section 11.

Bảng màu thương hiệuBrand palette

Ba màu lõi lấy trực tiếp từ logo: Navy của phần chữ, Blue và Sky là hai đầu gradient của chữ A. Nhấp vào ô màu bất kỳ để sao chép mã HEX.Three core colours sampled straight from the logo: the wordmark's Navy, and Blue and Sky at either end of the A's gradient. Click any swatch to copy its HEX code.

Màu chínhPrimary colors

Gradient thương hiệuBrand gradient

Gradient của chữ A — "Avibi Flow". Dùng cho biểu tượng, app icon, mảng nhấn lớn (hero, ảnh bìa) và đường kẻ nhấn mảnh. Không dùng làm nền cho đoạn văn dài, không dùng cho chữ nhỏ.The A's gradient — "Avibi Flow". Use it for the symbol, the app icon, large accent areas (hero, covers) and thin accent rules. Never as a background for long text, never on small text.

/* CSS */
background: linear-gradient(128deg,
  #0059FC 0%,
  #0064F2 50%,
  #0CBAFC 100%);

/* Figma: Linear · 3 stops · góc 128° */

Màu trung tínhNeutrals / UI

Dùng cho nền, đường kẻ, chữ phụ trong giao diện, tài liệu API và ấn phẩm. Các sắc xám đều pha nhẹ xanh navy để đồng điệu với logo.For backgrounds, dividers and secondary text in UI, API docs and print. Every grey carries a slight navy tint to sit well with the logo.

Sắc độ mở rộngExtended tints & shades

Dùng cho biểu đồ, trạng thái, nền phụ — luôn bắt nguồn từ ba màu lõi.For charts, states and secondary surfaces — always derived from the three core colours.

Hệ thống chữType system

Phần chữ "vibi" là sans-serif hình học, nét đều. Hệ thống chữ đề xuất: Plus Jakarta Sans cho tiêu đề, Inter cho nội dung và JetBrains Mono cho code, tên model, endpoint. Cả ba đều miễn phí trên Google Fonts và hỗ trợ tiếng Việt đầy đủ.The "vibi" wordmark is a geometric sans with even strokes. The recommended system pairs Plus Jakarta Sans for headings, Inter for body copy and JetBrains Mono for code, model names and endpoints. All three are free on Google Fonts and fully Vietnamese-ready.

# Tài liệu API: tên model, tham số và endpoint luôn để ở font monoAPI docs: model names, parameters and endpoints always in mono
from openai import OpenAI

client = OpenAI(base_url=AVIBI_BASE_URL, api_key="AVIBI_API_KEY")
reply = client.chat.completions.create(model="qwen-…", messages=[…])

Bộ icon — Phosphor IconsIconography — Phosphor Icons

Avibi dùng Phosphor Icons — bộ icon mã nguồn mở, hình học và thân thiện, nét bo tròn đồng điệu với đỉnh chữ A. Tải miễn phí tại phosphoricons.com. Dùng nhất quán một trọng lượng (ưu tiên Bold cho nhấn, Regular cho nội dung), màu navy, trắng hoặc Avibi Blue.Avibi uses Phosphor Icons — an open-source, geometric and friendly set whose rounded strokes echo the apex of the A. Free at phosphoricons.com. Keep one weight consistent (prefer Bold for accents, Regular for content), coloured navy, white or Avibi Blue.

Trọng lượngWeights

Cách Avibi giao tiếpHow Avibi speaks

Người đọc của Avibi phần lớn là developer và đội sản phẩm — họ cần câu trả lời nhanh và chính xác. Avibi nói chuyện như một kỹ sư giàu kinh nghiệm đang giúp đồng nghiệp: rõ ràng, chính xác, tự tin, gần gũi và thực tế.Most Avibi readers are developers and product teams — they want fast, exact answers. Avibi sounds like a seasoned engineer helping a colleague: clear, precise, confident, human and practical.

Tải bộ logoDownload the logo pack

Chọn style ở tab bên dưới (Default / Reversed / White / Navy) — bản xem trước và nút tải sẽ đổi theo. Mỗi file có hai định dạng: SVG (vector, ưu tiên) và PNG nền trong suốt (logo 2000px, biểu tượng & app icon 1024px).Pick a style from the tabs below (Default / Reversed / White / Navy) — the preview and download buttons update accordingly. Each file comes in two formats: SVG (vector, preferred) and transparent PNG (logo 2000px, symbol & app icon 1024px).

AvibiLogo chínhMaster logo

SVG PNG

Avibi ABiểu tượng — favicon, watermarkSymbol — favicon, watermark

SVG PNG

App iconAvatar mạng xã hội, ứng dụngSocial avatars, apps

SVG PNG

Công cụ kiểm tra tương phản màuColour contrast checker

Mọi cặp màu chữ / nền đều phải đủ tương phản để đọc được. Nhập hoặc chọn hai màu bên dưới — công cụ tính tỉ lệ tương phản theo chuẩn WCAG 2.1 và cho biết đạt hay không đạt. Các ô màu thương hiệu đã có sẵn để bấm nhanh. Every text / background pair must have enough contrast to be readable. Pick or type two colours below — the tool computes the WCAG 2.1 contrast ratio and tells you whether it passes. Brand colour chips are there for one-click testing.

Các cặp màu thương hiệuBrand colour pairs

Tỉ lệ dưới đây được tính trực tiếp khi bạn mở trang, nên luôn chính xác. Bấm vào một dòng để nạp cặp màu đó vào công cụ ở trên.These ratios are computed live when the page loads, so they are always accurate. Click any row to load that pair into the checker above.

Công cụ ngoàiExternal tools

Khi cần kiểm tra cả một trang web, ảnh hoặc file thiết kế, dùng thêm các công cụ chuyên dụng sau (bên thứ ba).To check a whole web page, an image or a design file, use these dedicated third-party tools as well.