Nguyên Tắc Thiết Kế Cốt Lõi

Bốn trụ cột định hình phong cách giao diện của ANTO, đảm bảo sự cân bằng hoàn hảo giữa tính thẩm mỹ đột phá và hiệu năng sử dụng thực tiễn.

Giọng Thương Hiệu (Voice & Tone)

Ngôn ngữ của ANTO là sự kết hợp giữa tính hiện đại, đĩnh đạc và hành động thực tiễn.

Ba Bề Mặt Web Cốt Lõi

Quy chuẩn không gian hiển thị được thiết kế chuyên biệt cho từng mục đích trải nghiệm.

Logo & Khối Nhận Diện (Lockup)

Biểu tượng kim cương đa sắc hội tụ cùng chữ ANTO in hoa theo tỷ lệ vàng chuẩn mực.

Clear space

Đơn vị X = chiều cao kim cương. Vùng đệm tối thiểu 0.5X mọi phía; ưu tiên 1X trên hero / hồ sơ năng lực. Không đặt chữ hay UI trong vùng này.

0.5X

Kích thước tối thiểu

Biến thể

Nền

Sai bố cục

Tải tài nguyên

Bản vector trong HIG này là SVG gốc. PNG 4K / EPS / PDF bổ sung khi xuất bộ brand kit.

Bảng Màu Hệ Thống & Color Tokens

Palette cố định + token ngữ nghĩa đổi theo data-theme. Click swatch để copy HEX.

Semantic tokens

Status

Glass & overlay

WCAG AA

Chữ nhỏ ≥ 4.5:1. Icon / UI ≥ 3:1. Neon #00D2FF và #FF0076 chỉ là chữ trên Dark Void. Light mode tự đổi --cyan / --pink thành #0071E3 / #E6006C.

Interactive states

Copy tokens

:root {
  --bg-primary: #050508;
  --bg-surface: #10111a;
  --bg-subtle: #171826;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-tertiary: #6b7280;
  --border-line: rgba(255,255,255,.08);
  --border-focus: #018AF9;
  --cyan: #00D2FF;
  --pink: #ff0076;
  --status-success: #2AC1BC;
  --status-warning: #FB6021;
  --status-error: #ff0076;
  --status-info: #018AF9;
  --glass-card: rgba(16,17,26,.75);
  --overlay-modal: rgba(5,5,8,.85);
  --grad-text: linear-gradient(90deg, #00D2FF 0%, #ff0076 100%);
}

Gradient & Hiệu Ứng Phát Sáng (Glow)

Chỉ dùng gradient 2 điểm dừng (Cyan → Pink) để tạo chiều sâu tinh tế, tránh lạm dụng 4 dải màu gây rối loạn thị giác.

Hệ Thống Typography

Stack sản phẩm: Plus Jakarta Sans (UI) + Nunito Sans (đọc dài) + JetBrains Mono (mã / số). Logo là SVG, không phải font UI.

Ba họ chữ — khi nào dùng

Design Tokens

Số & kỹ thuật · Tabular figures

Mọi số trên bảng giá, biểu đồ, counter dùng font-variant-numeric: tabular-nums để không giật khung khi số đổi.

Type Scale

Heading = Plus Jakarta ExtraBold. Body = Nunito Regular. Line-height heading ≈ 110% bội 4. Body ≈ 150% bội 2.

Fluid type · Desktop ↔ Mobile

H1–H3 dùng clamp(). XXL 64px desktop → 36–40px mobile.

Đoạn văn tiếng Việt

Khóa max-width: 65ch. Nunito line-height 1.5–1.6 để dấu sắc huyền hỏi ngã nặng không cấn dòng.

Gradient text

Đúng class homepage .text-gradient: linear-gradient(90deg, #00D2FF 0%, #ff0076 100%). Kéo xuyên cụm chữ nên giữa đọc thành xanh dương → tím → hồng, không thêm stop tím.

Live type tester

Gõ tiếng Việt và số để kiểm tra nét chữ, dấu thanh, tabular nums.

Iconography 8 Phân Khu Dịch Vụ

Duotone theo source Phosphor: :before là khối tô (opacity 0.2), :after là nét đè lên — giống acorn trên phosphoricons.com. Regular mới là line. Không clip gradient lên Duotone.

Khi nào Regular / Duotone

Regular = nét, đọc nhanh khi dày đặc. Duotone = khối 20% + nét, chỉ khi icon đủ lớn để lớp tô còn thấy trên Dark Void.

Toàn bộ Phosphor · Regular & Duotone

Đã nạp đủ 1530 icon (bản 2.1.2, hơn mốc 1,248 ban đầu). Cùng một gradient ANTO. Gõ để lọc.

Lưới Spacing 8-Point, Radius & Z-Index

Bội 8 (hoặc 4px micro). Nested radius: R ngoài = R trong + padding. Z-index tối đa 1500.

Spacing tokens

Radius

Lồng nhau: R_outer = R_inner + padding. Ví dụ card 18 + pad 16 → khung trong 2px sẽ không khớp; dùng inner 8 hoặc 12.

Z-index

Touch & inset

Copy tokens

:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px;
  --z-deep: -1; --z-base: 0; --z-sticky: 100; --z-header: 1000;
  --z-dropdown: 1100; --z-overlay: 1200; --z-modal: 1300;
  --z-toast: 1400; --z-tooltip: 1500;
}

Lưới Grid & Breakpoints Tương Thích

4 / 8 / 12 cột. Container max 1280. Utility .grid-2 .grid-3 .grid-4 .container.

Chế Độ Dark / Light Mode Thông Minh

localStorage['anto-theme'] + prefers-color-scheme. Body transition: background .3s, color .3s. Logo: [data-theme="light"] .brand-logo.dark { display:none }.

Vật Liệu Kính Mờ (Frosted Materials)

Header 24px + saturate 1.2 · Card 16px · Dropdown 12px. Không lồng 2 lớp blur.

Độ Sâu & Đổ Bóng (Elevation)

3 tầng + 2 glow neon Dark.

Quy Chuẩn Chuyển Động (Motion Spec)

Fast 0.15s · Normal 0.28s · Slow 0.45s. Ease cubic-bezier(0.16, 1, 0.3, 1). Reduced-motion → 0.01ms.

Photography & Tỷ Lệ Khung Ảnh

16:10 Gig · 16:9 video/banner · 1:1 avatar. WebP/AVIF + loading="lazy" + skeleton pulse.

Tỷ Lệ Thẻ 16:10

Dành riêng cho 50+ Gig Card dịch vụ

Tỷ Lệ Banner 16:9

Dành cho Video Showcase & Trình chiếu

Quy Tắc Viết Microcopy Giao Diện

Hero khẳng định. CTA động từ. Lỗi đồng cảm + hướng sửa.

Khả Năng Tiếp Cận (Accessibility WCAG AA)

Đạt chuẩn tiếp cận quốc tế giúp mọi khách hàng đều có trải nghiệm mượt mà.

Onboarding Lần Vào Đầu

Vào thẳng thông điệp chính với video demo 8 giây, loại bỏ các popup wizard gây phiền nhiễu.

Hành vi & trạng thái

Một trạng thái tĩnh. Không multi-step.

Khám Phá 50+ Dịch Vụ

Phân loại tức thì qua hệ thống Filter Pills thời gian thực mượt mà.

Hành vi & trạng thái

Click pill → filter card, không reload. Rỗng → Empty State.

Xem Chi Tiết Gig & Chọn Gói

Bố cục chia 2 cột Split Screen giúp người dùng duyệt tính năng và chốt gói dịch vụ nhanh chóng.

Hành vi & trạng thái

Cột phải sticky top 90px (dưới header 72px).

Luồng Gửi Brief Dự Án Thông Minh

Cửa sổ Modal 520px thu thập nhanh: Tên, Số Zalo, Nhu cầu và Dropzone tệp đính kèm.

Hành vi & trạng thái

Default · đang gửi · lỗi field (viền pink, text dưới ô).

Cổng Thanh Toán VietQR Tự Động

Mã QR động tự động khớp mã đơn hàng và số tiền chính xác trong 30 giây.

Hành vi & trạng thái

Chờ quét → xác nhận → thành công (ph-check-circle teal) / hết hạn.

Tài Khoản & Giỏ Hàng

Nút icon tròn 42px gắn kèm chấm đỏ thông báo số dịch vụ đang tư vấn.

Hành vi & trạng thái

Giỏ trống → ẩn dot, không hiện “0”.

Tìm Kiếm Dịch Vụ Thông Minh

Thanh tìm kiếm dạng viên thuốc tự động gợi ý các dịch vụ phổ biến theo thời gian thực.

Hành vi & trạng thái

Debounce ~250ms trước khi gợi ý. Dòng gợi ý ≥ 44px.

Social Proof & Đối Tác

Dải Logo Wall của hơn 500+ doanh nghiệp tạo dựng niềm tin tuyệt đối.

Hành vi & trạng thái

Default grayscale 70%. Hover → màu đầy đủ, 0.3s.

Mô Hình FAQ Accordion

Chỉ mở 1 câu trả lời tại một thời điểm giúp bố cục trang luôn gọn gàng.

Hành vi & trạng thái

Mở 1, đóng các cái còn lại. Animate max-height, không display:none.

Trạng Thái Rỗng (Empty State)

Hiển thị minh họa tinh tế kèm nút bấm "Xóa bộ lọc" khi không tìm thấy kết quả.

Hành vi & trạng thái

Icon mờ + lý do + hành động. Có thể “Quay lại trang chủ”.

Tải Trang & Skeleton Screen

Khung xám nhấp nháy êm ái mô phỏng sẵn hình dáng thẻ thay cho vòng xoay spinner.

Hành vi & trạng thái

Shimmer 1.2s. Kích thước khớp Gig Card để tránh CLS.

Xử Lý Lỗi & Trang 404

Thông báo lỗi xuất hiện ngay kề trường nhập liệu; trang 404 có nút quay về trang chủ ngay tức thì.

Hành vi & trạng thái

Lỗi field không dùng toast. 404 có search hoặc về home.

Thông Báo Toast Nhẹ Nhàng

Khung thông báo 320px trượt nhẹ từ góc phải và tự đóng sau 4 giây.

Hành vi & trạng thái

Slide-in từ phải. Tự ẩn 4s + fadeOut. Success teal / warning pink.

Charts & Biểu Đồ Trực Quan

Biểu đồ phẳng sắc nét thể hiện tăng trưởng dữ liệu Marketing và tiến độ phần mềm.

Image Views Khung Hình

Bo góc 16px, tỷ lệ cố định chống giật màn hình khi tải trang (CLS).

Text Views (Khóa 65ch)

Giới hạn chiều rộng văn bản tối đa 65 ký tự/dòng giữ nhịp đọc thoải mái.

Web / Embed Views

Quy chuẩn nhúng iframe với viền kính mỏng và bo góc 16px đồng bộ.

Video Player Showcase

Khung phát video 16:9 tích hợp nút Play kính mờ nổi bật giữa màn hình.

Quote & Lời Đánh Giá

Ảnh đại diện tròn 48px, tên chức danh in đậm và trích dẫn cảm nghĩ sang trọng.

Stat / Counters Bộ Số

Các chỉ số ấn tượng hiển thị font cực lớn 2.2rem in đậm 900.

Container Khung Chuẩn 1280px

Khung nội dung căn giữa với khoảng đệm an toàn 24px hai bên.

Section Header 3 Tầng

Kicker nhỏ phía trên → Tiêu đề H2 lớn → Đoạn mô tả mở đầu tối đa 2 dòng.

Cards Đa Năng

Thẻ bo góc 18px, viền kính mỏng và phản ứng nâng trục Y khi di chuột.

Gig Service Card Hoàn Chỉnh

Thẻ đại diện cho 50+ dịch vụ của ANTO với ảnh WebP, tag nhóm, tên dịch vụ và giá khởi điểm.

Công Nghệ & Web

Thiết Kế Web UI/UX Độc Bản

Website chuẩn SEO, wireframe khoa học và tối ưu tỷ lệ chuyển đổi đơn hàng.

Từ 8.500.000₫ Chi tiết →

Lists & Tables

Bảng so sánh tính năng có đường kẻ mảnh ngăn cách, chiều cao hàng tối thiểu 44px.

Bảng Giá 3 Gói Dịch Vụ (Pricing Table)

Phân cấp gói rõ ràng, gói Standard ở giữa nổi bật với dải hào quang Hồng Neon.

Tabs Chuyển Đổi Danh Mục

Dạng viên thuốc xếp ngang, tab kích hoạt có màu nền Navy phát sáng nhẹ.

Split Gig Layout

Bố cục chia đôi màn hình dành riêng cho trang chi tiết dịch vụ.

Logo Wall Đối Tác

Dải logo xám 70%, tự động sáng rõ 100% khi di chuột qua.

Buttons (Nút Conic Glow & Outline)

Nút bấm với viền xoay đa sắc khi hover tạo cảm giác công nghệ cao.

Links & Action Text

Liên kết văn bản màu xanh dương sáng, gạch chân nhẹ khi di chuột.

Icon Button Tròn 42px

Dành cho nút đổi theme, giỏ hàng và tài khoản với kích thước chạm chuẩn 42px.

Mega Menu 8 Nhóm Ngành

Trình đơn đa cấp chứa trọn vẹn 50+ dịch vụ với độ trễ đóng 40ms chống giật.

Context Menu / Dropdown

Thực đơn thả xuống nhỏ gọn dành cho việc chia sẻ hoặc lưu trữ.

Header Sticky 72px

Thanh điều hướng kính mờ ghim cố định với đầy đủ công cụ tìm kiếm và giỏ hàng.

Search Field Dạng Viên Thuốc

Chiều cao 42px, tích hợp icon kính lúp và vòng hào quang xanh khi nhấp chuột.

Breadcrumbs Đường Dẫn

Chỉ dẫn vị trí phân cấp giúp người dùng định vị trang đang xem.

Pagination Trình Phân Trang

Bộ nút số trang thanh lịch khi danh sách dịch vụ vượt quá 24 mục.

Footer Chân Trang Đầy Đủ

Bao gồm nhận diện thương hiệu, mạng xã hội và 4 cột liên kết dịch vụ rõ ràng.

Hero Section Trình Diễn

Mở màn ấn tượng với huy hiệu chuyển động, tiêu đề gradient và slider video.

Carousel Slider Tương Tác

Hỗ trợ vuốt chạm trên điện thoại và kéo chuột trên máy tính với thuật toán quán tính.

Modal & Bottom Sheet

Cửa sổ nổi bật giữa màn hình Desktop và khay trượt từ đáy trên Mobile.

Toast Alert Thông Báo

Rộng 320px, góc trên phải, tự ẩn 4s, progress thụt. z-index --z-toast.

CTA Banner Mesh Gradient

Băng rôn kêu gọi hành động cuối trang phủ mạng màu quang phổ rực rỡ.

Lightbox Xem Ảnh Fullsize

Màn che màu đen mờ 86% mở rộng chi tiết hình ảnh khi nhấp chuột.

Text Field Ô Nhập Liệu

Chiều cao chuẩn 44px, bo góc 12px có nhãn rõ ràng và cảnh báo lỗi màu hồng.

Textarea Nhập Nội Dung Dài

Chiều cao tối thiểu 120px, tích hợp bộ đếm ký tự thời gian thực.

Checkbox & Radio Controls

Vùng bấm mở rộng tối thiểu 44px cho ngón tay cảm ứng.

File Upload Dropzone

border: 2px dashed var(--line). Tối đa 25MB. Hiện progress khi tải.

Theme Switcher Đổi Giao Diện

Nút tròn chuyển đổi êm ái giữa Mặt Trăng và Mặt Trời không gây giật sáng.

Filter Chips Lọc Dữ Liệu

Thẻ lọc dữ liệu lưu giữ trạng thái trực tiếp lên đường dẫn URL.

Progress Bar Thanh Tiến Trình

Thanh mảnh 4px mang dải màu từ Blue sang Cyan biểu thị tiến độ.

Badges & Huy Hiệu Trạng Thái

Đánh dấu dịch vụ "Mới" (Hồng) hoặc "Phổ biến" (Cyan).

Skeleton Screen Khung Tải Mượt

Pulse 1.2s, bo góc đúng Gig Card 16:10. Không dùng spinner.

Form Validation Kiểm Lỗi

Báo lỗi tức thì sau khi rời trường nhập liệu (blur) với thông điệp ngắn gọn.