Đúng người kiến tạo.
Đúng không gian sống.
The right people. The right space.
Nền tảng thương hiệu
Spacio là nền tảng kết nối gia chủ với chuyên gia trong ngành kiến trúc. Tài liệu này gom mọi màu sắc, con chữ và thành phần về một mối, để bất kỳ ai làm sản phẩm hay truyền thông cho Spacio cũng nói chung một ngôn ngữ: ấm áp, đáng tin và luôn đặt tổ ấm của bạn ở trung tâm.
Tính cách thương hiệu
Ấm áp
Nói chuyện như một người bạn hiểu về nhà cửa, không phải một công ty công nghệ lạnh lùng.
Tinh tế
Thẩm mỹ trung và cao cấp. Chi tiết nhỏ được chăm chút, khoảng trống được tôn trọng.
Đáng tin
Minh bạch về quy trình, chi phí và cam kết. Thanh toán theo mốc, rõ ràng từng giai đoạn.
Truyền cảm hứng
Ngôi sao trong logo là lời hứa: mỗi không gian đều có thể đẹp hơn hôm qua.
Ba trụ cột thị giác
Vòm che chở
Đường vòm trong logo gợi mái che, sự bao bọc. Trong UI, nó xuất hiện qua bo góc lớn và hình khối mềm.
Tổ ấm ở trung tâm
Ngôi nhà luôn là nhân vật chính. Nội dung của gia chủ và chuyên gia được ưu tiên hơn trang trí.
Ngôi sao sáng tạo
Điểm nhấn Đất Nung duy nhất trên nền trung tính. Dùng tiết chế để mỗi lần xuất hiện đều có sức nặng.
Định vị
Sứ mệnh
Giúp mọi gia đình Việt tìm được chuyên gia thiết kế phù hợp, để hành trình làm nhà bớt rủi ro và nhiều cảm hứng hơn.
Tầm nhìn
Trở thành điểm khởi đầu mặc định của mọi dự án nội thất tại Việt Nam, sau đó là Đông Nam Á.
Lời hứa
Đúng người, đúng phong cách, đúng ngân sách. Tiền của bạn chỉ được giải ngân khi bạn nghiệm thu từng mốc.
Hai đối tượng, một tông giọng
Người 28 đến 45 tuổi, lần đầu hoặc lần hai làm nhà, sợ chọn nhầm người và vượt ngân sách. Giao diện cho nhóm này ưu tiên cảm hứng thị giác, quy trình được diễn giải từng bước và cảm giác an toàn về tiền.
Kiến trúc sư và nhà thiết kế nội thất cần nguồn khách chất lượng và công cụ quản lý dự án gọn. Giao diện cho nhóm này ưu tiên mật độ thông tin, số liệu rõ và thao tác nhanh, nhưng vẫn giữ cùng token với phía gia chủ.
Từ khoá cảm xúc
Năm từ dưới đây là thước đo cho mọi thiết kế và câu chữ mới. Nếu một màn hình không gợi được ít nhất hai từ trong số này, cần xem lại.
Logo
Logo Spacio gồm ba thành phần: vòm che chở, ngôi nhà và ngôi sao sáng tạo. Ba phiên bản chính thức bên dưới là những cách duy nhất được phép thể hiện logo.
Các phiên bản
Logo trên các nền
Trên nền tối, ngôi sao đổi sang #E0714F để giữ độ tương phản. Trên nền Đất Nung, toàn bộ logo chuyển một màu trắng, không giữ ngôi sao màu riêng.
Khoảng trống an toàn và kích thước tối thiểu
| Phiên bản | Digital | In ấn |
|---|---|---|
| Ngang | 120px rộng | 30mm |
| Dọc | 72px rộng | 18mm |
| Icon | 24px rộng | 8mm |
Khoảng trống an toàn bằng chiều cao ngôi nhà (x) ở mọi phía. Không đặt chữ, hình hay cạnh khung lấn vào vùng này.
Các lỗi cần tránh
Cấu trúc logo
| # | Thành phần | Ý nghĩa |
|---|---|---|
| 1 | Vòm che chở | Sự bao bọc và tin cậy của một mái che, đồng thời là chữ O của Spacio |
| 2 | Tổ ấm | Ngôi nhà của gia chủ luôn ở trung tâm mọi việc Spacio làm |
| 3 | Ngôi sao sáng tạo | Khoảnh khắc ý tưởng loé lên, điểm nhấn Đất Nung duy nhất |
Chọn phiên bản nào
| Bối cảnh | Phiên bản | Ghi chú |
|---|---|---|
| Trang chủ, tài liệu in, bao bì quà tặng | Dọc | Phiên bản mặc định khi không gian cho phép |
| Header website, email, chữ ký, banner ngang | Ngang | Dùng khi chiều cao dưới 80px |
| App icon, favicon, avatar mạng xã hội, watermark | Icon | Khi tên Spacio đã xuất hiện ở ngữ cảnh xung quanh |
| Loading, splash screen app | Icon | Có thể kèm hiệu ứng ngôi sao nhấp nháy |
Icon kỹ thuật số
| Nền tảng | Kích thước | Nền | Bo góc |
|---|---|---|---|
| Favicon | 16 · 32 · 48px | Trong suốt hoặc Kem | Không |
| App icon iOS | 1024px | Kem #FBF9F6 | Hệ điều hành tự bo |
| App icon Android | 512px | Kem, adaptive icon để icon chiếm 66% vùng an toàn | Hệ điều hành tự bo |
| Avatar mạng xã hội | 800px | Kem hoặc Đất Nung (icon trắng) | Không, nền tảng tự cắt tròn |
Định dạng file logo
| Định dạng | Dùng cho | Ghi chú |
|---|---|---|
SVG | Website, app, mọi giao diện số | Nguồn chuẩn, co giãn không vỡ, đổi màu qua CSS |
PDF | In ấn, gửi nhà in, hồ sơ pháp lý | Vector gốc, hệ màu CMYK khi in offset |
PNG | Văn bản Office, đối tác không nhận vector | Nền trong suốt, xuất 1x 2x 4x, không dùng cho in |
JPG | Chỉ khi nền tảng bắt buộc | Nền Kem #FBF9F6, chất lượng 90 trở lên |
Quy tắc đặt tên file: Spacio-[phienban]-[mau]-[kichthuoc], ví dụ Spacio-ngang-den-2x.png. Phiên bản một màu: toàn đen hoặc toàn trắng, chỉ dùng khi kỹ thuật in không cho phép 2 màu (khắc laser, ép nhũ, dấu mộc).
Đồng thương hiệu
Khi đặt cạnh logo đối tác: hai logo cân bằng thị giác theo chiều cao chữ, ngăn cách bằng vạch đứng 1px màu Viền, cách mỗi bên đúng một khoảng trống an toàn x. Logo Spacio luôn dùng phiên bản ngang, đứng bên trái trong tài liệu do Spacio phát hành.
Màu sắc
Bảng màu Spacio ấm và tiết chế: nền Kem, chữ Đen Gỗ, một điểm nhấn Đất Nung. Nhấp vào bất kỳ ô màu nào để sao chép mã hex.
Màu thương hiệu
Dải Đất Nung
Trung tính ấm
Màu ngữ nghĩa
Lưu ý: màu Lỗi #9E2B25 được chọn trầm và lệch đỏ rõ rệt để không nhầm với Đất Nung. Không bao giờ dùng Đất Nung cho trạng thái lỗi, và ngược lại.
Tỷ lệ sử dụng 60 · 30 · 10
Đất Nung là gia vị, không phải món chính. Một màn hình chỉ nên có một hành động chính màu Đất Nung.
Độ tương phản · WCAG 2.1
Số liệu đo thực tế cho các cặp màu chữ nền thường dùng. AA yêu cầu 4.5:1 cho chữ thường, 3:1 cho chữ lớn từ 18px đậm và thành phần UI.
| Cặp màu | Tỷ lệ | Mức đạt | Cho phép dùng |
|---|---|---|---|
| Đen Gỗ trên Kem | 17.1:1 | AAA | Mọi cỡ chữ |
| Nâu Xám trên Kem | 5.6:1 | AA | Chữ phụ mọi cỡ |
| Đất Nung Đậm trên Kem | 5.7:1 | AA | Link, chữ nhấn cỡ nhỏ |
| Đất Nung trên Kem hoặc Trắng | 4.1 đến 4.4:1 | AA chữ lớn | Chỉ chữ từ 18px đậm, icon, viền. Chữ nhỏ dùng Đất Nung Đậm |
| Trắng trên Đất Nung (nút chính) | 4.4:1 | AA UI | Nút với chữ 14.5px weight 600 trở lên |
| Lỗi trên Trắng | 7.4:1 | AAA | Mọi cỡ chữ |
| Cảnh báo trên Trắng | 3.7:1 | AA chữ lớn | Badge kèm icon, không dùng cho đoạn chữ nhỏ |
| Chữ mờ trên Trắng | 3.1:1 | Tối thiểu | Chỉ placeholder và chú thích không thiết yếu |
Bảng token màu đầy đủ
| Token | Hex | Vai trò chính |
|---|---|---|
--ink | #1A1613 | Chữ chính, nền tối, toast |
--ink-soft | #453C34 | Đoạn văn dài, chữ trong thẻ |
--terracotta | #C8553D | Nút chính, icon active, Ngôi sao sáng tạo |
--terracotta-deep | #A84330 | Hover nút chính, link chữ nhỏ, giá tiền |
--terracotta-tint | #F6E3DC | Nền badge nhấn, gradient cover |
--terracotta-mist | #FBEFEA | Hover row, nền ghost hover, nav active |
--cream | #FBF9F6 | Nền trang toàn hệ thống |
--surface | #FFFFFF | Thẻ, panel, modal, ô nhập |
--sand | #F3EDE4 | Nền phụ, tag, header bảng, skeleton |
--border / --border-strong | #EAE2D8 · #D8CCBE | Viền thẻ · viền ô nhập và nút phụ |
--muted / --faint | #6E6259 · #9C9086 | Chữ phụ · placeholder, chú thích mờ |
--success · --warning · --error · --info | #3E7C4F · #B07C1F · #9E2B25 · #35608F | Trạng thái, mỗi màu kèm nền nhạt riêng |
Gradient
Gradient chỉ dùng làm nền trang trí, không bao giờ đặt sau đoạn văn dài và không dùng cho nút.
Chế độ tối · định hướng
MVP chưa hỗ trợ dark mode, nhưng token đã dự phòng: nền #171310, bề mặt #211C18, viền #38302A, chữ chính #F2EDE7, chữ phụ #A79C91, Đất Nung sáng lên thành #E0714F để giữ tương phản 4.5:1. Khi triển khai chỉ cần đổi giá trị biến, không đổi tên biến.
Typography
Hai giọng chữ, một cuộc trò chuyện: Fraunces mang hơi ấm biên tập cho tiêu đề, Google Sans Flex giữ sự rõ ràng hiện đại cho nội dung. Cả hai đều là font biến thiên, hỗ trợ đầy đủ tiếng Việt.
Dùng cho tiêu đề H1 đến H3, số liệu lớn, trích dẫn. Weight 460 đến 620, trục opsz để tự động tinh chỉnh theo cỡ chữ. Chữ nghiêng Fraunces dành riêng cho từ khoá cảm xúc trong tiêu đề, tối đa một cụm mỗi tiêu đề.
Dùng cho toàn bộ nội dung, nút, nhãn, bảng biểu. Weight 400 cho văn bản, 500 cho nhấn nhẹ, 600 cho nút và nhãn, 650 trở lên cho tiêu đề nhỏ trong thẻ.
Thang chữ
Quy tắc dùng chữ
Fraunces không dùng cho đoạn văn
Fraunces chỉ xuất hiện ở tiêu đề, số liệu và trích dẫn. Đoạn văn dài luôn dùng Google Sans Flex để dễ đọc.
Không viết hoa toàn bộ tiêu đề
Tiếng Việt viết hoa toàn bộ khó đọc và mất dấu thanh. Chỉ eyebrow và nhãn nhỏ được viết hoa kèm giãn chữ.
Số dùng tabular
Giá tiền, phần trăm khớp và bảng số liệu bật font-variant-numeric tabular-nums để các cột thẳng hàng.
Trục font biến thiên
| Font | Trục | Phạm vi dùng | Ghi chú |
|---|---|---|---|
| Fraunces | wght | 460 đến 620 | Nhẹ hơn 460 mảnh quá trên màn hình, đậm hơn 620 mất nét thanh lịch |
| Fraunces | opsz | auto | Để trình duyệt tự khớp optical size theo cỡ chữ |
| Fraunces | ital | 0 hoặc 1 | Italic chỉ cho từ khoá cảm xúc trong tiêu đề |
| Google Sans Flex | wght | 400 đến 700 | 400 văn bản, 500 nhấn, 600 nút và nhãn, 650+ tiêu đề trong thẻ |
| Google Sans Flex | opsz | auto | Tự tối ưu ở cỡ nhỏ giúp chú thích 12px vẫn rõ |
Thang chữ đáp ứng
| Vai trò | Desktop | Mobile | Cách viết |
|---|---|---|---|
| Display | 56/62 | 34/40 | clamp(34px, 4.5vw, 56px) |
| H1 | 40/48 | 28/36 | clamp(28px, 3.5vw, 40px) |
| H2 | 28/36 | 22/30 | clamp(22px, 2.8vw, 28px) |
| Body | 15/25 | 15/25 | Không co, giữ dễ đọc |
Quy tắc dòng cho tiếng Việt
Line-height tối thiểu 1.5
Dấu thanh tiếng Việt cần khoảng thở phía trên. Đoạn văn dùng 1.65, tiêu đề Fraunces không xuống dưới 1.1.
Độ dài dòng 45 đến 75 ký tự
Đoạn văn khoá max-width 640px. Dòng dài hơn khiến mắt lạc khi xuống dòng.
Không cắt từ
Tắt hyphenation. Tiếng Việt không dùng gạch nối cắt từ cuối dòng, để từ tự xuống dòng nguyên vẹn.
Giãn chữ
| Bối cảnh | Letter-spacing | Lý do |
|---|---|---|
| Display, H1 Fraunces | -1% đến -1.5% | Serif cỡ lớn cần siết nhẹ cho chắc khối |
| H2, H3 Fraunces | 0 | Cỡ trung giữ nguyên |
| Body Google Sans Flex | 0 | Font đã tối ưu sẵn |
| Eyebrow, nhãn viết hoa | +8% đến +14% | Chữ hoa nhỏ cần giãn để đọc rõ dấu tiếng Việt |
| Chú thích 12px | +2% | Bù độ rõ ở cỡ nhỏ |
Phân cấp trong một khối nội dung
Cập nhật 12/07/2026 · 5 phút đọc
Buổi gặp đầu tiên quyết định 80% độ khớp giữa bạn và chuyên gia. Chuẩn bị trước ba thứ: ảnh không gian hiện tại, ngân sách dự kiến và 5 tấm ảnh phong cách bạn thích.
Đọc tiếp bài viết →Chuỗi phân cấp chuẩn: eyebrow, tiêu đề Fraunces, meta mờ, đoạn dẫn, link hành động. Không bỏ cấp, không đảo thứ tự.
Khai báo font
Hoạ tiết đồ hoạ
Hai hoạ tiết được rút ra từ chính logo: Ngôi sao sáng tạo và Vòm. Chúng là toàn bộ ngôn ngữ trang trí của thương hiệu, không thêm hoạ tiết nào khác.
Ngôi sao sáng tạo
Ngôi sao đánh dấu khoảnh khắc giá trị: kết quả khớp chuyên gia, hoàn tất mốc thanh toán, đánh giá 5 sao, đầu mục chương. Luôn màu Đất Nung trên nền sáng. Tối đa 3 ngôi sao trong một khung hình. Không dùng ngôi sao làm bullet cho danh sách thường.
Vòm
Khung vòm (bo tròn lớn phía trên, bo nhẹ phía dưới) dành cho ảnh chân dung chuyên gia và ảnh dự án nổi bật ở khu vực hero. Không dùng vòm cho ảnh trong lưới danh sách, ở đó dùng bo góc 16px tiêu chuẩn để giữ mật độ thông tin.
Đường phân cách kèm ngôi sao như trên là hoạ tiết chuyển đoạn duy nhất được dùng trong nội dung dài như blog và email.
Thông số Ngôi sao sáng tạo
| Cỡ | Kích thước | Bối cảnh | Chuyển động |
|---|---|---|---|
| Lớn | 48 đến 64px | Hero, màn hình chúc mừng hoàn tất dự án | Được phép nhấp nháy scale 1 về 0.72, chu kỳ 3.2s |
| Vừa | 20 đến 32px | Đầu mục chương, khoảnh khắc khớp chuyên gia | Tĩnh |
| Nhỏ | 12 đến 16px | Eyebrow, đường phân cách, điểm nhấn inline | Tĩnh |
Luôn giữ tỷ lệ 1:1 từ file gốc, không kéo giãn. Độ mờ 100% trên nền sáng, được phép giảm về 45% khi làm hoạ tiết nền. Không xoay quá 15 độ.
Phong cách nhiếp ảnh
Ánh sáng tự nhiên
Ưu tiên ảnh chụp ban ngày, nắng xiên qua cửa sổ. Tránh đèn flash trực diện và ảnh render quá bóng bẩy thiếu chất sống.
Có hơi người
Không gian đang được sống: tách trà trên bàn, sách mở, cây xanh. Tránh ảnh staging vô trùng kiểu catalogue.
Tông ấm
Nhiệt độ màu nghiêng ấm, khớp bảng màu Kem và Cát. Hậu kỳ nhẹ tay, không filter màu lạnh hoặc HDR gắt.
Tỷ lệ ảnh chuẩn: 4:3 cho ảnh dự án trong lưới, 3:4 cho chân dung chuyên gia, 16:9 cho cover và banner, 1:1 cho toàn bộ ảnh sản phẩm Spacio Market. Ảnh render 3D của chuyên gia được dùng nhưng phải gắn nhãn "Phối cảnh 3D" ở góc ảnh.
Phong cách icon giao diện
| Thuộc tính | Giá trị |
|---|---|
| Kiểu | Outline, nét 1.75px, đầu nét bo tròn |
| Lưới | 24 x 24px, vùng an toàn 2px |
| Bo góc hình | Bo mềm 2px, không góc nhọn tuyệt đối |
| Màu | Đen Gỗ mặc định, Đất Nung khi active |
| Thư viện gốc | Lucide, tuỳ chỉnh stroke 1.75 |
Icon giao diện luôn trung tính và tối giản, nhường vai chính cho Ngôi sao sáng tạo. Không dùng icon fill trừ trạng thái active của tab bar mobile. Không trộn icon từ nhiều thư viện khác nhau trong cùng một màn hình. Icon luôn đi kèm nhãn chữ, trừ các icon phổ quát như đóng, tìm kiếm, quay lại.
Giọng thương hiệu
Spacio nói chuyện như một người bạn am hiểu về nhà cửa: ấm, thẳng và tôn trọng thời gian của người đọc. Viết để người ta hiểu, không phải để gây ấn tượng.
Quy tắc cố định
Xưng là Spacio
Thương hiệu tự xưng "Spacio", gọi người dùng là "bạn". Không dùng "mình" trong vai thương hiệu, không dùng "quý khách" trừ văn bản pháp lý.
Không dùng em dash
Tuyệt đối không dùng dấu gạch ngang dài trong mọi văn bản Spacio. Thay bằng dấu phẩy, dấu hai chấm hoặc tách câu.
Động từ dẫn đầu nút
Nút luôn bắt đầu bằng động từ và nói đúng việc sẽ xảy ra: "Nhận gợi ý chuyên gia", không phải "Gửi" hay "OK".
Nên và không nên
Spacio đã tìm được 4 chuyên gia hợp với phong cách Japandi của bạn.
Thanh toán giai đoạn 2 đã hoàn tất. Chuyên gia sẽ gửi bản vẽ 3D trong 5 ngày tới.
Chưa có dự án nào. Bắt đầu bằng bài trắc nghiệm phong cách 2 phút nhé.
Không tải được danh sách. Kiểm tra kết nối mạng rồi thử lại.
Hệ thống đã xử lý thành công yêu cầu matching của quý khách.
Lạnh và kỹ thuật.Giao dịch được thực thi.
Không nói điều gì xảy ra tiếp theo.Danh sách trống.
Bỏ lỡ cơ hội mời hành động.Ôi không, có lỗi rồi!!! 😢
Lỗi không xin lỗi kiểu cảm xúc, lỗi chỉ ra cách sửa.
Tông giọng theo ngữ cảnh
| Ngữ cảnh | Nhiệt độ | Ví dụ |
|---|---|---|
| Marketing, landing page | Ấm nhất, giàu hình ảnh | "Ngôi nhà đầu tiên xứng đáng có một khởi đầu đúng." |
| Trong sản phẩm, hướng dẫn | Ấm vừa, ngắn gọn | "Chọn tối đa 3 phong cách bạn thích." |
| Thông báo giao dịch, tiền | Trung tính, chính xác tuyệt đối | "Đã chuyển 25.000.000 đ cho giai đoạn 2, mã GD #38214." |
| Lỗi và sự cố | Bình tĩnh, hướng giải pháp | "Thanh toán chưa hoàn tất. Chưa có khoản tiền nào bị trừ, thử lại nhé." |
| Pháp lý, hợp đồng | Trang trọng, xưng Spacio và Quý khách | "Spacio cam kết hoàn tiền theo Điều 5 của Điều khoản dịch vụ." |
Bảng từ vựng
| Dùng | Tránh | Lý do |
|---|---|---|
| chuyên gia | designer, KTS (đứng một mình) | Thuần Việt, bao trùm cả kiến trúc sư lẫn nhà thiết kế |
| khớp, phù hợp | matching, match | Không chêm tiếng Anh trong câu tiếng Việt hướng gia chủ |
| mốc thanh toán, giai đoạn | milestone, escrow | Thuật ngữ tài chính cần dễ hiểu; "ký quỹ" chỉ dùng khi giải thích cơ chế |
| bảng giá, chi phí dự kiến | báo giá sốc, giá rẻ nhất | Spacio định vị trung và cao cấp, không cạnh tranh bằng giá rẻ |
| tổ ấm, không gian sống | bất động sản, căn hộ (khi nói cảm xúc) | Từ ngữ đời sống, không phải từ ngữ giao dịch |
Mẫu thông báo đẩy và email
Lê Minh Anh vừa tải lên 3 phương án cho phòng khách. Xem và phản hồi trong 7 ngày nhé.
Cấu trúc: tiêu đề nêu sự việc, thân nêu chi tiết kèm bước tiếp theo, không quá một câu cảm thán, không emoji trong thông báo giao dịch.
| Loại | Mẫu |
|---|---|
| Giao dịch | "Đã nhận thanh toán giai đoạn 2 · #38214" |
| Nhắc việc | "Còn 2 ngày để duyệt bản concept" |
| Nuôi dưỡng | "5 phòng khách Japandi khiến Spacio mê mẩn tuần này" |
| Chào mừng | "Chào bạn đến với Spacio, bắt đầu từ đâu nhỉ?" |
Tiêu đề dưới 50 ký tự, viết thường tự nhiên, mã tham chiếu đặt cuối sau dấu chấm giữa.
Quy tắc viết nút hành động
| Nguyên tắc | Nên | Tránh |
|---|---|---|
| Động từ + kết quả cụ thể | "Nhận gợi ý chuyên gia" | "Gửi", "OK", "Tiếp tục" đứng một mình |
| Tối đa 4 từ | "Bắt đầu trắc nghiệm" | "Nhấn vào đây để bắt đầu làm bài trắc nghiệm" |
| Ngôi thứ nhất khi cam kết | "Tôi đồng ý nghiệm thu" | "Đồng ý" cho hành động giải ngân tiền |
| Nút phụ nêu lối thoát rõ | "Giữ dự án" | "Huỷ" (gây nhầm với huỷ dự án) |
Định dạng số liệu
Tiền tệ
Dấu chấm ngăn cách hàng nghìn, đơn vị "đ" cách một khoảng trắng: 25.000.000 đ. Trong bảng chật có thể viết 25tr. Không dùng ký hiệu ₫.
Ngày giờ
Định dạng 13/07/2026, giờ 24h viết 14:30. Trong câu văn viết "ngày 13 tháng 7". Thời hạn tương đối: "trong 5 ngày tới".
Diện tích và phần trăm
Diện tích viết 85m². Phần trăm liền số: 92%. Điểm khớp chuyên gia luôn kèm chữ: "Khớp 92%".
UI Foundation
Toàn bộ giao diện Spacio được dựng từ các token bên dưới. Token cũng chính là biến CSS trong mã nguồn của trang này, sao chép là dùng được ngay.
Khoảng cách · thang 4px
--sp-14px · khe giữa icon và chữ--sp-28px · khe trong nhóm nhỏ--sp-312px · khe giữa nhãn và ô nhập--sp-416px · khe giữa các thẻ--sp-524px · padding trong thẻ--sp-632px · khe giữa nhóm nội dung--sp-748px · khe giữa các khối trong section--sp-864px · padding ngang trang desktop--sp-996px · khe giữa các sectionBo góc
sm cho tag nhỏ, md cho ô nhập, lg cho thẻ, xl cho modal và thẻ nổi bật, full cho nút và chip. Hình khối mềm là cách UI kế thừa đường vòm của logo.
Đổ bóng
Bóng lấy màu từ Đen Gỗ với độ mờ thấp để giữ tông ấm, không dùng bóng xám xanh mặc định.
Lưới và điểm gãy
| Điểm gãy | Phạm vi | Cột | Lề ngang |
|---|---|---|---|
| Mobile | đến 560px | 4 cột · gutter 16 | 20px |
| Tablet | 561 đến 980px | 8 cột · gutter 20 | 32px |
| Desktop | 981 đến 1400px | 12 cột · gutter 24 | 64px |
| Rộng | trên 1400px | 12 cột, khoá nội dung 1400px | tự động |
Chuyển động
Nhanh · 150ms
Hover, focus, nhấn nút. Easing cubic-bezier(.22,.61,.36,1), vào nhanh ra êm.
Vừa · 300ms
Mở dropdown, toast, chuyển tab, thẻ trượt lên khi hover.
Tôn trọng người dùng
Mọi chuyển động tắt hoàn toàn khi hệ điều hành bật prefers-reduced-motion.
Lớp z-index
| Token | Giá trị | Dành cho |
|---|---|---|
--z-base | 0 | Nội dung trang |
--z-sticky | 100 | Header dính, thanh lọc dính |
--z-dropdown | 200 | Menu thả, tooltip, popover |
--z-overlay | 300 | Lớp phủ mờ sau modal |
--z-modal | 400 | Modal, drawer |
--z-toast | 500 | Toast, luôn trên cùng |
Kích thước chạm và icon
Vùng chạm tối thiểu 44px
Mọi phần tử tương tác trên mobile có vùng chạm ít nhất 44 x 44px kể cả khi hình vẽ nhỏ hơn.
Icon 3 cỡ
16px trong dòng chữ và badge, 20px trong nút và ô nhập, 24px điều hướng và tab bar. Không dùng cỡ lẻ.
Chiều cao điều khiển
Nút và ô nhập cao 44px mặc định, 36px bản nhỏ trong bảng, 52px bản lớn ở hero.
Bố cục form
Nhãn trên ô nhập
Nhãn luôn nằm trên, không dùng nhãn nổi trong ô. Trường bắt buộc không đánh dấu sao, thay vào đó ghi "không bắt buộc" ở trường tuỳ chọn.
Một cột là mặc định
Form luôn một cột rộng tối đa 480px. Chỉ ghép 2 trường ngắn liên quan trên một hàng: ngày và giờ, tỉnh và quận.
Lỗi tại chỗ, kiểm ngay khi rời ô
Thông báo lỗi hiện dưới đúng ô sai, kiểm tra khi blur chứ không đợi bấm gửi. Nút gửi không bao giờ bị disable để người dùng luôn thấy được danh sách lỗi.
Ánh xạ đổ bóng theo thành phần
| Thành phần | Nghỉ | Hover |
|---|---|---|
| Thẻ trong lưới danh sách | sh-1 | sh-3 kèm nhích lên 3px |
| Panel nội dung tĩnh | không bóng, chỉ viền | không đổi |
| Dropdown, popover | sh-2 | không đổi |
| Modal, drawer | sh-3 | không đổi |
| Nút | không bóng | đổi màu nền, không thêm bóng |
Nguyên tắc: bóng thể hiện độ nổi vật lý, không dùng làm trang trí. Thành phần không nhấc khỏi mặt trang thì không có bóng.
Khung nội dung
| Loại trang | Max-width | Dùng cho |
|---|---|---|
| Marketing | 1400px | Trang chủ, landing, danh sách chuyên gia |
| Nội dung đọc | 760px | Blog, điều khoản, hướng dẫn |
| Dashboard | 100% trừ sidebar 260px | expert.spacio.vn và admin.spacio.vn |
| Form một cột | 480px | Đăng ký, thanh toán, quiz |
UI Components
Bộ thành phần giao diện dùng chung cho spacio.vn, expert.spacio.vn và admin.spacio.vn. Mọi thành phần bên dưới đều đang chạy thật, hover và bấm thử được.
Nút
Mỗi màn hình một nút chính. Nút phụ viền, nút ghost cho hành động rút lui. Nút huỷ hoại chỉ dùng trong hộp thoại xác nhận.
Ô nhập liệu
Lựa chọn
Chọn, vùng nhập dài và tìm kiếm
Breadcrumb và tooltip
Breadcrumb tối đa 4 cấp, cấp hiện tại không phải link. Tooltip chỉ chứa thông tin bổ sung, không bao giờ chứa thao tác hay nội dung bắt buộc phải đọc.
Bảng dữ liệu · admin.spacio.vn
| Mã dự án | Gia chủ | Chuyên gia | Giai đoạn | Giá trị | Trạng thái |
|---|---|---|---|---|---|
| #SPC-1042 | Nguyễn Thu Hà | Lê Minh Anh | GĐ2 · Bản vẽ 3D | 250.000.000 đ | Đang chạy |
| #SPC-1041 | Phạm Văn Đức | Trần Quốc Bảo | GĐ5 · Bàn giao | 480.000.000 đ | Hoàn tất |
| #SPC-1039 | Vũ Ngọc Lan | Đỗ Hải Yến | GĐ1 · Concept | 180.000.000 đ | Chờ thanh toán |
Bảng dùng cho dashboard chuyên gia và admin: header nền Cát chữ hoa nhỏ, số căn phải bằng tabular-nums khi cột thuần số, hover cả hàng màu Sương Đất Nung, mỗi hàng cao tối thiểu 48px.
Tải file lên
hoặc bấm để chọn file · JPG, PNG, HEIC · tối đa 10MB mỗi ảnh
Chip lọc
Badge trạng thái
Thẻ chuyên gia
Tiến độ mốc thanh toán
Stepper mốc thanh toán ký quỹ: mốc xong tô Đất Nung đặc, mốc hiện tại viền Đất Nung, mốc tương lai trung tính.
Toast thông báo
Tab điều hướng
Tab dùng cho các góc nhìn ngang hàng của cùng một đối tượng. Tối đa 5 tab, quá 5 chuyển sang dropdown.
Thanh cảnh báo
Trạng thái trống và tải
Bắt đầu bằng bài trắc nghiệm phong cách 2 phút, Spacio sẽ gợi ý chuyên gia hợp với bạn.
Skeleton phản chiếu đúng bố cục thật, ánh chạy 1.4s. Không dùng spinner cho nội dung, spinner chỉ dành cho hành động trong nút.
Đánh giá và nhóm avatar
Đánh giá sao dùng chính Ngôi sao sáng tạo, đây là ngoại lệ duy nhất được lặp quá 3 ngôi sao trong một khung hình.
Phân trang
Hộp thoại xác nhận
Huỷ dự án này?
Toàn bộ trao đổi và bản vẽ sẽ được lưu trữ 90 ngày. Số tiền 25.000.000 đ trong mốc chưa nghiệm thu sẽ được hoàn về tài khoản của bạn trong 3 đến 5 ngày làm việc.
Hành động huỷ hoại luôn đứng bên phải, nêu rõ hậu quả và con số cụ thể, không hỏi "Bạn có chắc không?" chung chung.
Thương mại điện tử · Spacio Market
Thẻ sản phẩm: danh mục viết hoa nhỏ, tên tối đa 2 dòng, giá hiện màu Đất Nung Đậm và giá gạch chỉ xuất hiện khi có khuyến mãi thật. Badge giảm giá dùng màu Lỗi để tách khỏi Đất Nung của giá.
Số lượng, giỏ hàng và tóm tắt đơn
Trạng thái đơn hàng
Trạng thái đơn dùng lại đúng hệ badge chương này, không tạo màu mới. Mã đơn luôn hiển thị dạng #SPM-38214 kèm nút sao chép.
Thanh điều hướng
Header nền Kem mờ 92% kèm blur, viền dưới 1px. Logo ngang 110px, một nút chính duy nhất.
Ứng dụng
Khi mọi mảnh ghép đứng cạnh nhau: một khối hero của spacio.vn được dựng hoàn toàn từ token, chữ và thành phần trong tài liệu này.
Thẻ trắc nghiệm phong cách · Spacio Swipe
Ảnh phong cách chữ nhật ngang 3:2 chiếm trọn thẻ, bo góc 24px, không phủ chữ lên ảnh. Bộ đếm "Đã chọn x / 10" đặt trên thẻ. Ba nút tròn nổi phía dưới: hoàn tác 48px trung tính, bỏ qua 58px viền Đất Nung Nhạt, thích 58px đặc Đất Nung. Vuốt phải tương đương thích, vuốt trái tương đương bỏ qua.
Tab bar mobile
Tối đa 4 mục, icon outline 22px chuyển fill màu Đất Nung khi active, nhãn 10.5px luôn hiển thị.
expert.spacio.vn · thẻ số liệu
Lead mới tuần này
Dự án đang chạy
Doanh thu tháng 7
Điểm đánh giá
Dashboard chuyên gia dùng đúng token của gia chủ, chỉ tăng mật độ: số liệu Fraunces cỡ lớn, nhãn viết hoa giãn chữ, mỗi thẻ một badge trạng thái.
Mạng xã hội và email
| Kênh | Kích thước | Quy tắc |
|---|---|---|
| Ảnh OG chia sẻ link | 1200 x 630 | Nền Kem, logo ngang góc trái trên, tiêu đề Fraunces tối đa 2 dòng, một Ngôi sao sáng tạo |
| Bài Facebook, Instagram | 1080 x 1080 | Ảnh dự án chiếm 70%, dải Kem phía dưới chứa logo và caption |
| Story, Reels cover | 1080 x 1920 | Icon thay logo ngang, chữ nằm trong vùng an toàn giữa 1080 x 1420 |
| Email header | 600 x 120 | Logo ngang 140px căn trái trên nền Kem, viền dưới 1px màu Viền |
| Chữ ký email | chữ thuần | Tên · chức danh · spacio.vn, màu Đen Gỗ, link màu Đất Nung Đậm |
Spacio Brand Identity & UI System · Phiên bản 1.2 · Tháng 7 năm 2026
Designed by Khoa Vo · The right people. The right space.