Soldemy · Brand & Design · v4
Hệ thống thương hiệu
Soldemy
Một hệ thống làm mới hoàn toàn — bộ chữ Soldemy (chính là chữ trong logo), tông navy thương hiệu, restraint Maven × Coursera. Mọi trang sau này phải dùng tokens dưới đây.
01 · Brand marks
Hai tài sản brand
Wordmark dùng cho header, footer, email, document. Icon "sol" dùng cho favicon, app icon, avatar mặc định, watermark. Navy #1D4598 bất khả xâm phạm cho cả hai.
Wordmark · /logo.png · /logo_dark.png
Light surface · logo.png
Navy-soft tint · logo.png
Dark surface · logo_dark.png
Brand icon · /favicon.png · "sol"
Bất kỳ surface nào · self-contained
Mark đã có nền — không cần tint
Mark đứng vững trên nền tối
Scale ladder · các kích thước thực tế
Icon đọc được từ 16px → 128px
16px
favicon
24px
nav · mobile
32px
browser tab
48px
avatar default
64px
social card
96px
app icon
128px
splash · hero
Browser tab
favicon, app shortcut, PWA icon
Avatar default
Khi user chưa upload ảnh
Mobile header
Khi không có chỗ cho wordmark đầy đủ
Watermark
Cover ảnh khoá học · social card
Brand rules · cho cả wordmark + icon
Wordmark min
24px
Dưới ngưỡng này dùng icon "sol" thay thế
Icon min
16px
Favicon hoạt động đến 16px, không nhỏ hơn
Clear space
½ × chiều cao
Khoảng trống xung quanh mọi mark
Brand color
#1D4598
Không gradient. Không tint. Không outline khác.
File swap
logo ↔ logo_dark
Tự động theo độ tối của nền
DO NOT
⛔
Skew · stretch · recolor · lồng vào ảnh chụp
02 · Type system
Soldemy + Plus Jakarta Sans
Soldemy (8 weights · variable) cho display — đây là DNA brand. Plus Jakarta Sans cho UI/body — VN-safe, modern, không tranh chấp với display.
Display · Soldemy · 8 weights
Bộ chữ thương hiệu SOL26
Hairline
w: 100
Soldemy · Học bài bản
ExtraLight
w: 200
Soldemy · Học bài bản
Light
w: 300
Soldemy · Học bài bản
Regular
w: 400
Soldemy · Học bài bản
SemiBold
w: 600
Soldemy · Học bài bản
Bold
w: 700
Soldemy · Học bài bản
Black
w: 900
Soldemy · Học bài bản
Display sizes · semantic ladder
Hero · 96px / weight 900
Soldemy
H1 · 48px / weight 700
Học công nghệ từ người làm nghề
H2 · 36px / weight 600
Khoá học mới ra mắt
H3 · 24px / weight 600
Hệ thống bảo mật ứng dụng Web
Body · Plus Jakarta Sans
UI + body
Lead 18 — Một câu mở dài hơn cho phần giới thiệu.
Body 16 — Plus Jakarta Sans được thiết kế cho Tiếng Việt: dấu hook, dấu mũ, dấu móc rõ ràng ở mọi kích thước.
Small 14 — Helper, label, meta secondary.
Caption 12 — Timestamp, footnote.
Mono · JetBrains Mono
Code + meta caps
// Mono only — code + small-caps eyebrows.
Hash::make($password);Tiếng Việt — Soldemy stress test
Dấu chồng trong typeface mới
ườậểữốặ
Tiếng Việt — ưu đãi học bổng cho người mới bắt đầu. Nguyễn Hoàng Việt hoàn thành lớp Hệ điều hành mở rộng.
QA dấu trên màn hình Android 720p ở tất cả weight trước khi ship — Soldemy chưa từng dùng cho Tiếng Việt ở quy mô lớn.
03 · Colour
Trắng + navy + amber (rất hiếm)
Cùng palette với v3. Navy = brand + mọi action. Amber = Pro tier + "đang phát" duy nhất. Không màu theo danh mục.
Background
#FFFFFF
Page
Background 2
#FAFAF9
Alternating section
Background 3
#F4F4F2
Sunken / footer
Border
#E7E5E4
Hairline · 1px
Ink
#0A0A0A
Body · AAA contrast
Ink 2
#404040
Secondary
Ink 3
#737373
Muted · meta
Navy
#1D4598
Brand · logo · CTA · link
Navy hover
#163680
CTA hover
Navy soft
#EEF2FA
Tinted bg
Navy deep
#0A1A36
Dark hero · CTA banner
Amber rare
#C8862A
Pro tier · "Đang phát" only
04 · Components
Mẫu component
Buttons
Navy primary · ghost secondary · Pro badge
Khoá học · trung cấp
Hệ thống bảo mật ứng dụng Web
với Dũng Phan
Senior Engineer · ex-VNG
Học phí 490.000đ
Chi tiết →Khoá học · trung cấp
Viết bài kỹ thuật cho dev
với Mai Vũ
Tech Writer · Stripe
Học phí 490.000đ
Chi tiết →Khoá học · trung cấp
Tài chính cá nhân cho freelancer
với Hà Lê
CFO consultant
Học phí 490.000đ
Chi tiết →05 · Anti-patterns
Tuyệt đối không
Đổi màu logo
Navy #1D4598 là brand asset. Không tô khác, không gradient, không outline.
Soldemy cho body
Display font — chỉ dùng cho heading + hero + brand moments. Body luôn Plus Jakarta Sans.
Banner giảm giá flash
Soldemy là học viện, không phải marketplace Edumall/Kyna.
Tô màu theo danh mục
Khan Academy đã bỏ. Một palette cho mọi lĩnh vực.
Streak kiểu Duolingo
Loss-aversion sai với nội dung dài.
Hai amber cùng viewport
Amber là "vàng hiếm" — Pro hoặc Đang phát. Không bao giờ làm CTA thường.
Font Latin không kiểm tra dấu
Inter / Roboto / Source Sans đều có lỗi diacritic.
Glass / orb / IDE hero
Signals dev-tool. Soldemy là cho mọi người.