Brand Guideline

Hướng dẫn đầy đủ về cách sử dụng các yếu tố thương hiệu của 1thay trong sản phẩm.

Logo

Logo 1thay là chữ R cách điệu — viết tắt của “Reputa”, nền tảng social listening. Logo có 2 biến thể chính:

Icon (24×24)

Favicon, app icon

Symbol (24×24)

Watermark, loading

Clear space: Khoảng cách tối thiểu xung quanh logo = chiều cao logo
Màu sắc: Dùng #064BAE (1reputa/800) làm màu chính. Trên nền tối, dùng #FFFFFF
Không: Kéo giãn, xoay, đổi màu, thêm hiệu ứng
File: SVG luôn được ưu tiên. Cập nhật bằng cách chép đè file vào public/

1thay dùng kiến trúc 2 tầng: Primitive tokens (bảng màu gốc) → Semantic tokens (vai trò).

1kien (Primary)

1C1EFF

1tayquen (Success)

019A7C

1reputa (Brand)

064BAE

1haychay (Danger)

F44F44

1ghi (Neutral)

838799

Token	Light	Dark	Vai trò
`--color-bg-primary`	`#FFFFFF`	`#11131A`	Nền chính
`--color-bg-secondary`	`#F6F7F9`	`#292B35`	Nền phụ
`--color-bg-brand`	`#1C1EFF`	`#7888FF`	Nền accent
`--color-text-primary`	`#11131A`	`#FFFFFF`	Chữ chính
`--color-text-secondary`	`#838799`	`#BBBFCC`	Chữ phụ
`--color-border-primary`	`#DCDEE6`	`#3E414C`	Viền chính
`--color-accent`	`#1C1EFF`	`#7888FF`	Màu nhấn

Quy tắc: Luôn dùng semantic token trong code, không dùng primitive trực tiếp. Khi cần đổi brand color, chỉ sửa alias trong Figma.

Figma hỗ trợ 2 brand modes: reputa-blue (mặc định) và premier-red. Đổi mode trong Figma → toàn bộ component tự động cập nhật.

Token	Font	Vai trò	Mẫu
`--font-display`	Hanken Grotesk	Headings, brand	1thay
`--font-body`	Inter	UI, body text	The quick brown fox jumps
`--font-mono`	Space Grotesk	Numbers, code	$48,290.00
`--font-content`	Merriweather	Long-form reading	Design is how it works.

Token	Size	Weight	Line Height	Mẫu
`fontsize/xxs`	10px	—	—	Caption
`fontsize/xs`	12px	—	—	Small UI
`fontsize/sm`	14px	—	—	Body small
`fontsize/md`	16px	400	1.4	Body default
`fontsize/lg`	18px	—	—	Lead paragraph
`fontsize/xl`	20px	600	1.24	H4 heading
`fontsize/2xl`	24px	700	1.24	H3 heading
`fontsize/3xl`	32px	700	1.1	H2 heading
`fontsize/4xl`	40px	800	1.1	H1 mobile

Hệ thống 4px grid — mọi khoảng cách là bội số của 4.

Token	px	rem	Dùng cho
`space-1`	4	0.25	Gap siêu nhỏ
`space-2`	8	0.5	Gap trong component
`space-3`	12	0.75	Padding input
`space-4`	16	1	Padding card, section gap
`space-6`	24	1.5	Section spacing
`space-8`	32	2	Large section
`space-10`	40	2.5	Hero spacing

Quy tắc: Spacing = structural meaning. Tight = cùng nhóm. Medium = liên quan. Large = chương mới.

1thay dùng Lucide và Carbon icons qua astro-icon.

---
import { Icon } from 'astro-icon/components';
---

<Icon name="carbon:checkmark-outline" size={16} />
<Icon name="lucide:settings" size={20} />