focus.camp Brand Guideline

phần 1

Logo

Logo gồm đống lửa pixel đặt trong khung và chữ focus.camp hai dòng. Đống lửa giữ nguyên màu lửa ở mọi bản, chỉ khung và chữ đổi màu.

1.1 · cấu tạo

Đống lửa và chữ focus.camp

đống lửaLửa trại là chỗ cả nhóm ngồi lại với nhau. focus.camp là trại để một cộng đồng cùng theo một việc tới ngày cuối.
lưới pixel 7 × 7Đống lửa dựng trên lưới 7 × 7 khối vuông, mỗi khối chia 3 × 3 ô sắc độ. Nét pixel gợi tinh thần trò chơi: thử thách, điểm, bảng xếp hạng.
tia lửaHai khối trên cùng tách lệch khỏi thân lửa, như tia lửa đang bốc lên.
củi và thanHai hàng dưới màu nâu là củi và than hồng giữ lửa cháy.
dấu chấmDấu chấm của tên miền, nằm cuối dòng "focus", tô màu lửa.

1.2 · các dạng logo

Sáu dạng, mỗi dạng một chỗ dùng

1.3 · khung

Ba khung, cùng một đống lửa

Khung bo góc là bản chính. Khung vuông và tròn dùng khi nơi đặt logo đã có hình dạng riêng. Trong khung vuông, đống lửa chiếm 70% cạnh khung. Trong khung bo góc và khung tròn, đống lửa nhỏ lại còn 59% để không chạm góc.

1.4 · tỉ lệ và khoảng trống

Khung cao bằng khối chữ

Khung cao bằng khối chữ hai dòng, đo từ đỉnh chữ f tới chân chữ p, cộng thêm 3% ở mỗi đầu. Khoảng hở giữa khung và chữ bằng 0,11 lần cạnh khung. Quanh logo chừa trống ít nhất X, bằng một phần tư cạnh khung.

1.5 · kích thước tối thiểu

Không nhỏ hơn mức này

dưới 32px tia lửa bắt đầu nhoè · favicon trình duyệt 16–24px dùng file favicon xuất sẵn (03-event/favicon.png), không tự thu nhỏ mark

1.6 · không biến dạng

Những điều không làm với logo

phần 2

Màu

Ba lớp màu: trung tính làm nền, xanh trại là màu thương hiệu, màu lửa chỉ để nhấn.

2.1 · trung tính

Đen và trắng giữ trật tự

2.2 · màu thương hiệu

Xanh trại là giọng nói của focus.camp

Xanh trại lấy từ khung logo: dùng cho mảng màu lớn, khung logo và nút chính. Chữ đặt trên xanh trại luôn màu đen. Xanh UI và xanh đậm là màu đang chạy trong app focus.camp: xanh UI cho nút và trạng thái, xanh đậm cho link và chữ xanh trên nền sáng.

tỉ lệ gợi ý: trắng + tro 45 · đen 30 · xanh 18 · lửa 7

2.3 · màu lửa

Lửa chỉ để nhấn

Sáu màu lấy thẳng từ đống lửa và dấu chấm. Màu lửa sống trong logo. Ngoài logo, mỗi màn hình hay ấn phẩm chỉ dùng cam chấm cho một điểm nhấn: số chuỗi ngày hoặc ngày hôm nay. Trạng thái như "đang diễn ra" dùng xanh, không dùng màu lửa. Không dùng màu lửa làm nền lớn hay màu cho đoạn chữ dài.

mã màu lửa là màu đại diện: đống lửa gốc có 127 sắc, mỗi nhóm lấy sắc xuất hiện nhiều nhất · cần đúng từng ô thì dùng focuscamp-mark.svg

2.4 · tương phản

Chữ trên xanh trại luôn đen

Chữ trên nền xanh trại, cam lửa và vàng lửa luôn màu đen, không dùng trắng.
Trên nền sáng, cần chữ xanh thì dùng xanh đậm. Xanh trại trên nền trắng chỉ làm mảng màu.
Chữ trắng trên xanh UI và cam chấm chỉ đạt mức chữ lớn: dùng cho nút và nhãn chữ đậm, không dùng cho chữ nhỏ.
Trên nền đêm trại, xanh trại và cam chấm dùng được làm chữ.

đạt từ 4.5 : 1, mọi cỡ chữlớn từ 3 : 1, chữ từ 18px đậm và mảng màukhông dưới 3 : 1

phần 3

Logo có màu

Đống lửa luôn giữ màu lửa. Khung và chữ đổi màu theo bốn bộ chính thức, dấu chấm luôn cam lửa.

3.1 · bản chính thức

Bốn bộ màu, chọn theo nền

3.2 · trên nền màu

Nền nào, bộ nấy

Khung phải tách khỏi nền. Trên nền xanh trại dùng khung đen, trên nền đen dùng khung xanh.

3.3 · không được làm

Sai màu thường gặp

phần 4

Chữ

Chữ trong logo là Inter Bold. Toàn bộ ấn phẩm dùng một họ Inter, nhãn và số liệu dùng JetBrains Mono.

4.1 · kiểu chữ

Inter, đậm và khít

Tiêu đề lớn
Inter Bold · −5,5%giữ lửa mỗi ngày

Tiêu đề phụ
Inter SemiBold · −3%cùng nhau đi tới ngày cuối của thử thách

Nội dung
Inter Regularfocus.camp là nền tảng cộng đồng và thử thách: mở cộng đồng, chạy challenge, bán khoá học và sự kiện, có AI agent trực cùng chủ cộng đồng.

Nhãn, số liệu
JetBrains Mono · +4%ngày 7 / 21 · 128 thành viên · chuỗi 7 ngày

Nút
xanh trại · viền đen · xanh UItham gia thử tháchxem lịchcheck-in hôm nay

Tên thương hiệu luôn viết focus.camp: chữ thường, có dấu chấm, không cách. Không viết Focus Camp, FocusCamp hay FOCUS.CAMP.
Tiêu đề trên ấn phẩm (poster, mạng xã hội, landing) viết thường như logo. Tiêu đề trong tài liệu và nội dung dài viết hoa đầu câu như bình thường.
Mỗi tiêu đề nhấn tối đa một cụm từ. Trên nền sáng: mảng xanh trại phía sau, chữ vẫn đen. Trên nền đen và đêm trại: tô chữ xanh trại, không cần mảng.
App focus.camp hiện dùng Roboto cho giao diện làm việc. Inter dùng cho logo, landing, ấn phẩm và mạng xã hội.

phần 5

Ứng dụng

5.1 · giao diện

Xanh là tiến độ, lửa là hôm nay

Xanh trại cho tiến độ và nút chính. Cam chấm chỉ đánh dấu một thứ: ngày hôm nay hoặc số chuỗi ngày. Trạng thái luôn có chữ đi kèm.

thử thách của bạndữ liệu ví dụ

chuỗi ngày21 ngày viết mỗi ngày

ngày 7 / 21chuỗi 7 ngày

cộng đồng · chế độ tốidữ liệu ví dụ

bảng xếp hạng tuầnđiểm check-in

5.2 · marketing

Bốn nền cho ấn phẩm

Ấn phẩm dùng nền đen, đêm trại, xanh trại hoặc trắng. Chữ trên xanh trại luôn đen. Mỗi ấn phẩm nhấn tối đa một cụm từ và một điểm màu lửa.

5.3 · pixel và chuyển động

Lửa được phép cháy

Logo động chỉ cho ngọn lửa đổi khung hình, mỗi khung 100ms. Khung và chữ đứng yên.
Đồ hoạ phụ dựng bằng ô vuông pixel: không bo góc, không khử răng cưa, phóng to theo bội số nguyên.
Đống lửa trần (không khung) chỉ đặt trên nền đen hoặc đêm trại.

5.4 · mạng xã hội

Ảnh bìa và ảnh đại diện

Ảnh bìa fanpage focus.camp: đống lửa pixel trên nền đen, chữ focus.camp một dòng — **Ảnh bìa fanpage** · đống lửa trần trên nền đen, chữ focus.camp một dòng.

ảnh đại diện: nền tự cắt tròn (Facebook, Zalo) dùng khung vuông · app và icon dùng khung bo góc

5.5 · bộ file

Lấy file ở đâu

thư mục	nội dung
`KeyVisualKP3/focus.camp/01-bo-logo-chinh/`	Lockup khung bo góc bốn bộ màu, lockup khung vuông đen, favicon bo góc. PNG nền trong suốt.
`AI Agent/Logo FocusCamp/`	Bộ đủ: khung vuông, bo góc, tròn × bốn bộ màu; favicon; logo động `.gif`; ảnh bìa fanpage.
`02-brand-guideline/focuscamp-mark.svg`	Đống lửa vector dựng lại từ lưới 21 × 21 ô, đúng màu từng ô của file gốc.
`KeyVisualKP3/kp3/fonts/Inter-4.1.zip`	Font Inter (OFL), dùng cho chữ thương hiệu.