Brand identity

Brand
Guideline

Logo, màu và chữ của Casso cùng 9 thương hiệu thành viên. Tải file ngay tại từng mục.

Phạm vi: 10 thương hiệu
Logo: 26 biến thể
Định dạng: SVG · WebP
Version: v0.1.1

Tải trọn bộ · ZIP brand.json llms.txt

Chapter 01

Color

1.1 Brand palette & Catron

Xanh CassoPrimaryTOKENaccentHEX#00A85ERGB0, 168, 94
Xanh đậmChữ, nền tối, viềnTOKENbrand-deepHEX#0B4A2ARGB11, 74, 42
MintNhấn, trạng tháiTOKENbrand-mintHEX#4CDD9BRGB76, 221, 155
Mint sángPhát sáng, viền sángTOKENbrand-glowHEX#84F5C4RGB132, 245, 196
TrắngNền sáng, logo trên nền xanhTOKENsurfaceHEX#FFFFFFRGB255, 255, 255

1.2 Design tokens (Casso Design System)

Tên token và thang màu lấy từ Casso Design System, tài liệu nội bộ chỉ lưu hành trong Casso. Trang này chỉ liệt kê token màu dùng chung.

Token	Scale	Light	Dark	Usage
`accent`	`casso-9`	`#00A85E`		Primary accent
`fg`	`zen-gray-12`	`#0D0D0D`	`#F5F5F5`	Primary text
`canvas`	`zen-gray-2`	`#F7F7F7`	`#111111`	App background
`surface`	`zen-gray-1`	`#FFFFFF`	`#191919`	Card, surface
`positive`	`lime-9`	`#6ED507`		Success state
`negative`	`tomato-9`	`#E5532E`		Error state
`warning`	`yellow-9`	`#FFBA1A`		Warning state
`info`	`blue-9`	`#0A85FF`		Info state

Chapter 02

Typography

Hai họ chữ miễn phí trên Google Fonts, đủ dấu tiếng Việt.

Be Vietnam ProTiêu đề và nội dung

Regular 400Medium 500SemiBold 600Black 900

IBM Plex MonoNhãn kỹ thuật, mã màu, số liệu

Regular 400Medium 500SemiBold 600

Chapter 03

Logo

3.1 Logo variants

Variant	Dùng cho
Horizontal	Thanh đầu trang, chỗ hạn chế chiều cao
Vertical	Ô vuông, avatar, ấn phẩm khổ đứng
White	Nền xanh Casso hoặc nền tối
Black	Nền trắng, hoặc khi in một màu
Color	Nền trắng hoặc nền sáng

3.2 Do & Don't

DoLogo trắng trên nền xanh Casso

DoLogo màu trên nền trắng

Don'tKéo giãn hoặc bóp méo

Don'tTự đổi màu logo

Don'tThêm bóng, viền, hiệu ứng

Don'tXoay nghiêng logo

3.3 Usage rules

01Dùng đúng file logo trong bộ này: không vẽ lại, không đổi màu, không kéo giãn, không thêm hiệu ứng.
02Ưu tiên SVG; chỉ dùng WebP khi nền tảng không nhận SVG.
03Cần biến thể chưa có thì hỏi team Brand, không tự dựng.

Ô logo ở chương 04: khung nét đứt là khung bao, lưới 8 đơn vị căn theo mép logo.

3.4 Logo lineup

Khi đặt nhiều logo cạnh nhau, canh giữa theo một trục ngang và cân theo thị giác: logo dài thu nhỏ lại, logo ngắn để lớn hơn một chút, không kéo cho bằng chiều rộng. Cas ID không đặt trên nền xanh Casso.

3.5 App icon

Home screen

Casso

Casso Flow

Casso Table

Casso Xpense

payOS

Casso Capital

XInvoice

KySoQR

Quán X

Cas ID

Masking

Source

iOS

Android

NềnPhủ kín, vuông, không tự bo góc. Mặc định nền xanh Casso. Quán X nền trắng, Cas ID nền đen #111111 theo guideline riêng.
Biểu tượngCăn giữa, khoảng 58% cạnh. App con trùng mặt mèo Casso (XInvoice) thì thêm chữ thương hiệu dưới mèo.
Kích thước1024 (store) · 512 · 192 (Android) · 180 (iOS)

Tải app icon + favicon · ZIP

Cần app icon cho thương hiệu mới thì hỏi team Brand, không tự dựng.

3.6 Favicon

Browser tab

Casso · Dòng tiền tự độngTrang khác

Ô vuông bo góc, biểu tượng 70%

16 px

32 px

48 px

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3.7 In-app logo

Casso system · tokens fixed, style free

Library · CDS ColorPrimaryaccentSecondarybrand-deepSubtlebrand-glowRadiussmmdfullAtomPayButton/primary

AI agent · Bold

payOSThanh toánPaidprimary · radius/full

AI agent · Minimal

Casso FlowThanh toánPaidprimary · radius/sm · outline

AI agent · Playful

Quán XThanh toánPaidprimary · radius/md · shadow

payOS teamCasso Flow teamQuán X team

Fixed · tokens + namingFree · style per product, with AI agent

PhilosophyID · CDS/01

Simple but scalable.

Tokens and naming stay fixed in every product.
Each team works with an AI agent to style atoms its own way.
Style can change. Tokens and names cannot.

Casso Design System · internal only

Splash screen

Casso

Tải splash: Casso Casso Flow Casso Table Casso Xpense payOS Casso Capital XInvoice KySoQR Quán X Cas ID

Brand 01/10

4.01Casso

2 biến thể logoMascot: Catron OriginalTải bộ Casso · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94

Mascot

Dùng Catron Original (siêu mèo canh giữ dòng tiền, linh vật chính của Casso). Tải dáng ở thư viện Catron ↗

Brand 02/10

4.02Casso Flow

2 biến thể logoMascot: Không có riêngTải bộ Casso Flow · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94
Mint nhạtLogo colorHEX#99DCBFRGB153, 220, 191

Mascot

Không có linh vật riêng · Dùng biểu tượng dòng chảy của Casso Flow. Chỉ đi kèm Catron Original khi xuất hiện trong ấn phẩm chung của hệ sinh thái Casso.

Brand 03/10

4.03Casso Table

2 biến thể logoMascot: Không có riêngTải bộ Casso Table · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94
Mint nhạtLogo colorHEX#99DCBFRGB153, 220, 191

Mascot

Không có linh vật riêng · Dùng biểu tượng bảng của Casso Table. Chỉ đi kèm Catron Original khi xuất hiện trong ấn phẩm chung của hệ sinh thái Casso.

Brand 04/10

4.04Casso Xpense

1 biến thể logoMascot: Không có riêngTải bộ Casso Xpense · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94

Mascot

Không có linh vật riêng · Dùng biểu tượng ví chi tiêu của Casso Xpense. Chỉ đi kèm Catron Original khi xuất hiện trong ấn phẩm chung của hệ sinh thái Casso.

Brand 05/10

4.05payOS

2 biến thể logoMascot: Không dùng CatronTải bộ payOS · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94

Mascot

Không dùng linh vật Catron · payOS là thương hiệu cổng thanh toán độc lập, chỉ dùng biểu tượng mèo payOS trong logo.

Brand 06/10

4.06Casso Capital

4 biến thể logo · 2 ngang · 2 dọcMascot: Catron CapitalTải bộ Casso Capital · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Vertical · White

Xanh CassoSVG

Vertical · White

Tối · #0B4A2ASVG

Vertical · White

Đen · #111111SVG

Vertical · Black

Âm bản

Vertical · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Logo dùng dải màu dưới đây. Dùng file SVG gốc, không tự dựng lại.

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94
Xanh láLogo colorHEX#119D00RGB17, 157, 0
Xanh nõnLogo colorHEX#4CF000RGB76, 240, 0
Xanh thẫmLogo colorHEX#04653ARGB4, 101, 58
Xanh lá sángLogo colorHEX#07AF55RGB7, 175, 85

Mascot

Dùng Catron Capital (thân mập, xách vali vốn), chỉ dùng riêng trong Casso Capital, không đặt chung khung với Catron Original. Xem mục Phát triển nhân vật ↗

Brand 07/10

4.07XInvoice

4 biến thể logo · 2 ngang · 2 dọcMascot: Không có riêngTải bộ XInvoice · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Vertical · White

Xanh CassoSVG

Vertical · White

Tối · #0B4A2ASVG

Vertical · White

Đen · #111111SVG

Vertical · Black

Âm bản

Vertical · Color

TrắngSVG

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94

Mascot

Không có linh vật riêng · Dùng biểu tượng trong logo XInvoice. Chỉ đi kèm Catron Original khi xuất hiện trong ấn phẩm chung của hệ sinh thái Casso.

Brand 08/10

4.08KySoQR

4 biến thể logo · 2 ngang · 2 dọcMascot: Không có riêngTải bộ KySoQR · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Âm bản

Horizontal · Color

TrắngSVG

Vertical · White

Xanh CassoSVG

Vertical · White

Tối · #0B4A2ASVG

Vertical · White

Đen · #111111SVG

Vertical · Black

Âm bản

Vertical · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94

Mascot

Không có linh vật riêng · Dùng biểu tượng khung QR ký số của KySoQR. Chỉ đi kèm Catron Original khi xuất hiện trong ấn phẩm chung của hệ sinh thái Casso.

Brand 09/10

4.09Quán X

3 biến thể logoMascot: Không dùng CatronTải bộ Quán X · ZIP

Logo

Horizontal · White

Xanh CassoSVG WebP

Horizontal · White

Tối · #0B4A2ASVG WebP

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

Nền trắng, in một màuSVG

Horizontal · Color

TrắngSVG

Symbol

Chỉ dùng biểu tượng khi không đủ chỗ cho logo đầy đủ: avatar, app icon, favicon, con dấu.

Color

Logo dùng dải màu dưới đây. Dùng file SVG gốc, không tự dựng lại.

Xanh CassoPrimaryHEX#00A85ERGB0, 168, 94
Xanh rừngLogo colorHEX#00542FRGB0, 84, 47

Mascot

Không dùng linh vật Catron · Quán X là thương hiệu độc lập cho hộ kinh doanh & cửa hàng, dùng biểu tượng ghim vị trí kết hợp loa của Quán X.

Brand 10/10

4.10Cas ID

2 biến thể logoMascot: Không dùng CatronTải bộ Cas ID · ZIP

Logo

Horizontal · White

Đen · #111111SVG WebP

Horizontal · Black

TrắngSVG

Color

Cas ID có hệ nhận diện độc lập đen trắng. Logo Cas ID đặt trên nền đen #111111 hoặc nền trắng #FFFFFF, không đặt trên nền xanh Casso.

Đen Cas IDPrimaryHEX#111111RGB17, 17, 17
TrắngNền sáng, chữ trên nền đenHEX#FFFFFFRGB255, 255, 255

Mascot

Không dùng linh vật Catron · Cas ID là thương hiệu định danh độc lập, chỉ dùng hệ nhận diện đen trắng riêng.

Chapter 05

AI & Dev

Dùng cho AI agent và dev đọc dữ liệu thương hiệu.

Tệp	Nội dung
`/brand.json`	Thương hiệu, logo, màu, font, cách dùng, link tải
`/llms.txt`	Tóm tắt ngắn cho AI kèm đường dẫn
`/a/mascot/library.json`	Thư viện Catron: dáng, Lottie, quy tắc
`/a/download/*.zip`	Trọn bộ hoặc từng thương hiệu

curl https://brand.casso.vn/brand.json | jq '.brands[] | {name, colors: [.colors[].hex]}'

Chapter 06

Marketing guideline

Sắp ra mắtQuy chuẩn ấn phẩm, giọng thương hiệu, mẫu truyền thông.