Đặc tả thiết kế — tila-site (trang giới thiệu TiLA Studio)¶
Phiên bản 0.2 · 2026-11-13 · Tác giả:
ai-designer· Trạng thái: sửa theo thẩm định Gate 1 vòng 1 (gate1_review.md). Nguồn:prd.mdv0.2 ·content.mdv0.2 (nguồn duy nhất cho mọi chuỗi) ·brand/README.md·ceo-inputs.md·company/04-thuong-hieu-linh-vat.md. Harness:ui-test-harness.html(mở trực tiếp; hash#v=a&l=vi&t=dark&e=1&s=page&w=automở thẳng một trạng thái). Phương án triển khai: A (Mint Canvas), do Trợ lý CEO chốt. B, C, D giữ trong harness để CEO xem, không đặc tả sâu.
0. Thay đổi so với 0.1¶
| Mã | Đã sửa |
|---|---|
| P-03 | Pigxel hero và 404 chỉ chạy 2 nhịp × 2,4 s = 4,8 s rồi dừng; không còn hiệu ứng lặp vô hạn (§7) |
| P-04 | Nút EN/VI lấy mục từ aria-current, href được cập nhật theo cuộn (§4) |
| P-05/L-04 | Thanh đầu dùng logo-a-compact* ở < 768 px, logo-a* đầy đủ rộng 160 px ở ≥ 768; thanh đầu đổi sáng/tối cùng giao diện (§5) |
| P-06 | Mục "Gặp Pigxel" dùng pigxel-meet.svg toàn thân (cả A, C, D; B cũng vậy); bỏ pigxel-mark khỏi trang |
| P-07 | Bỏ chuỗi do thiết kế tự viết; mọi chuỗi theo content.md mục 12. Bỏ trạng thái "đang tải" khỏi bản phát hành (§6) |
| P-08 | Hero không dùng hiện dần; chữ và hình hero thấy ngay khi HTML tới (§5, §7) |
| P-09 | Harness thêm khung 320 và 390; đã đo ở 320/360/390/768/1024/1440 (§8) |
| P-13 | Trang 404 dùng pigxel-404.svg |
| P-14 | Token mở rộng đã được ai-artist xác nhận về thị giác (§2); đưa vào company/04 là việc Trợ lý CEO trình CEO |
| P-16 | Bảng đối chiếu trạng thái với chuẩn 5 trạng thái (§6) |
| Dữ kiện | Email thật [email protected] (ceo-inputs.md) thay địa chỉ minh họa |
1. Quyết định đã chốt (đầu vào)¶
Logo A (QĐ-020). Hình: pigxel-hero, pigxel-meet, pigxel-saas, pigxel-game, pigxel-404; pigxel-mark/pigxel-favicon chỉ cho favicon. Chữ: Be Vietnam Pro. Hero: tiêu đề phương án B của content.md. Liên hệ mặc định là có email; chế độ không email (Empty) vẫn thiết kế đủ.
2. Design tokens¶
Màu thương hiệu theo company/04 §4. Nhóm "mở rộng" là sắc slate cùng thang với navy/surface/paper.
color:
brand: {navy_canvas: "#020617", surface: "#0F172A", tila_mint: "#2AC1BC", pigxel_pink: "#F9A8D4", pigxel_rose: "#F472B6", coin_gold: "#F59E0B", paper: "#F8FAFC"}
extended: # ai-artist xác nhận thị giác (brand/README); chưa vào company/04
white: "#FFFFFF"
slate_800: "#1E293B" # chỉ kẻ đường
slate_700: "#334155"
slate_600: "#475569"
slate_400: "#94A3B8" # KHÔNG dùng làm chữ trên nền sáng (2,45:1)
slate_300: "#CBD5E1"
slate_200: "#E2E8F0" # chỉ kẻ đường trên nền sáng
mint_deep: "#0F766E" # chữ nhấn trên nền sáng (mint thường 2,12:1 trên paper)
gold_deep: "#B45309"
rose_deep: "#9D174D"
semantic: # phương án A
dark: {bg: navy_canvas, fg: paper, muted: slate_300, card: surface, line: slate_800, accent: tila_mint, btn_bg: tila_mint, btn_fg: navy_canvas, focus: tila_mint,
header: {bg: navy_canvas, fg: paper, line: slate_700, current: tila_mint, focus: tila_mint, logo: "logo-a / logo-a-compact"}}
light: {bg: paper, fg: navy_canvas, muted: slate_600, card: white, line: slate_200, accent: mint_deep, btn_bg: tila_mint, btn_fg: navy_canvas, focus: navy_canvas,
header: {bg: paper, fg: navy_canvas, line: slate_600, current: mint_deep, focus: navy_canvas, logo: "logo-a-light / logo-a-compact-light"}}
typography:
family: "'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
weight: {regular: 400, medium: 500, semibold: 600, bold: 700, extrabold: 800}
size: # clamp(min, vw, max) / line-height / weight / tracking
h1: "clamp(38px, 10.5vw, 64px) / 1.06 / 800 / -0.025em"
h2: "clamp(28px, 6.2vw, 44px) / 1.12 / 800 / -0.02em"
h3: "22px / 1.25 / 700"
lead: "clamp(18px, 2.4vw, 22px) / 1.55 / 400"
body: "16px / 1.6 / 400" # sàn tuyệt đối 16px
button: "16px / 1.2 / 700"
spacing: {sp1: 4, sp2: 8, sp3: 12, sp4: 16, sp5: 24, sp6: 32, sp7: 48, sp8: 64, sp9: 96, sp10: 128} # px
gutter: {base: 16, "<360": 12, ">=768": 32, ">=1280": 40}
container_max: 1200
radius: {sm: 8, md: 16, lg: 24, xl: 32, pill: 999}
shadow: {light_card: "0 8px 24px rgba(2,6,23,.08)", toast: "0 8px 24px rgba(2,6,23,.4)"} # giao diện tối dùng viền, không bóng
breakpoint: {base: 0, md: 768, lg: 1024, xl: 1280} # min-width; hỗ trợ tới 320
touch_target_min: 48
nav_height: {base: 64, ">=768": 72}
logo: {compact: "cao 36 (<360: 32), rộng 83/74, dùng < 768", full: "rộng 160, dùng >= 768"} # đúng cỡ tối thiểu brand/README
motion:
duration: {fast: 150ms, base: 240ms, slow: 480ms, hero_loop: "2.4s x 2 nhịp (tổng 4,8 s)"}
easing: {out: "cubic-bezier(.22,1,.36,1)", in_out: "cubic-bezier(.65,0,.35,1)"}
3. Bốn phương án (giữ để CEO xem; triển khai A)¶
Cùng nội dung, cùng 6 mục, cùng logo A (bản sáng/tối theo giao diện). Khác ở bố cục, nhịp, hình khối và cách Pigxel xuất hiện.
| A · Mint Canvas | B · Giấy & Mực | C · Dải màu Pigxel | D · Arcade Pixel | |
|---|---|---|---|---|
| Ý tưởng | Nền navy, hero hai cột, thẻ bo tròn, nhấn mint. | Báo in: nền giấy, tiêu đề khổng lồ, cột nhãn số 01–05, kẻ ngang đậm. | Dải màu xếp lớp bo cong; Pigxel đổi trang phục theo lĩnh vực; thanh đầu viên thuốc nổi. | Thanh bên đánh số như màn chơi, viền dày, bóng cứng, nền lưới điểm ảnh. |
| Giao diện | Sáng + tối | Sáng + tối | Một | Một (tối) |
| Pigxel | Hero toàn thân, meet ở mục Pigxel, hai hóa thân ở hai lĩnh vực |
Hero nhỏ, meet ở mục Pigxel |
Hero to, hóa thân ở thẻ, meet nghiêng |
Như A, đặt trên "nền gạch" điểm ảnh |
| Điểm mạnh | An toàn, hợp bảng màu; đủ chỗ cho Pigxel mà vẫn nghiêm túc; sáng/tối (FR-P2-02); chừa chỗ thẻ sản phẩm. | Đọc nhanh, tin cậy nhất với P-A/P-B; ít hình. | Dễ nhớ; tôn vinh Pigxel ra mắt công khai. | Cá tính game rõ; điều hướng bàn phím trực quan. |
| Điểm yếu | Giống nhiều trang SaaS. | Pigxel mờ; cảm giác lạnh. | Nhiều màu, đòi kỷ luật; không có sáng/tối. | Lệch với P-A; thanh bên tốn 280 px; một giao diện. |
Khuyến nghị và quyết định: A. (1) Cân bằng P-A (cần tin) và P-C (cần thân thiện), B hy sinh Pigxel, D hy sinh P-A, C ồn với P-A. (2) Đủ P0/P2 với chi phí thấp nhất: sáng/tối theo hệ thống, tương phản đo được ở cả hai giao diện. (3) Hai thẻ lĩnh vực đã có hóa thân Pigxel để thẻ sản phẩm (FR-P2-03) thay vào sau. Rủi ro chấp nhận: ít "bất ngờ" nhất. SVG trang A (thô, wc -c): 4 logo 19.884 B + hero 6.696 + meet 6.128 + saas 5.444 + game 6.768 = 44.920 B, thấp xa ngưỡng 1 MB.
4. Luồng và sơ đồ trang¶
/ (vi) ⇄ /en/ (en) hai trang tĩnh cùng cấu trúc
└─ #home → #about → #what-we-do → #pigxel → #how-we-work → #contact (một h1, năm h2)
Thanh đầu: Logo→#home · Giới thiệu · Lĩnh vực · Pigxel · Cách làm việc · Liên hệ · [EN/VI]
Điện thoại: Logo · [Liên hệ] · [EN/VI] · [Menu]; menu chứa 4 liên kết còn lại
CTA hero: "Xem chúng tôi làm gì"→#what-we-do · "Liên hệ"→#contact (không email: "Tìm hiểu thêm"→#about)
Ngoài trang: mailto: · docs.rittruyen.com (tab mới) · 404 · (P1) trang pháp lý
Nút ngôn ngữ giữ mục đang xem (P-04, AC-02). Nguồn duy nhất của "mục đang xem" là phần tử nav a[aria-current="true"], cập nhật theo cuộn:
- Mục hiện tại = mục cuối cùng có mép trên ≤ 35% chiều cao khung nhìn; nếu đã cuộn tới đáy trang thì là mục cuối (#contact, tránh kẹt ở mục trước khi mục cuối ngắn).
- #home không mang aria-current → href của nút là /en/ hoặc / (đầu trang). Mục khác → href = <trang kia>#<id>, JS cập nhật mỗi lần cuộn (cả cuộn tay lẫn bấm neo). Không dùng hash cũ trong URL, không dùng "mục bấm gần nhất".
- Không JS: href tĩnh về đầu trang kia (đúng, chỉ mất vị trí).
- Đã kiểm trong harness (§8): cuộn tay tới #pigxel rồi bấm; bấm #about rồi cuộn tay tới #contact rồi bấm; VI→EN và EN→VI; 360 và 1440 px.
5. Đặc tả từng mục — phương án A¶
Mọi mục dùng .wrap (max 1200, gutter theo token). Chữ theo content.md.
| Mục | Bố cục & hành vi |
|---|---|
| Thanh đầu (6.7) | Dính đầu trang, cao 64 (≥768: 72). Nền theo giao diện (tối: navy; sáng: paper, kẻ dưới 1 px), logo bản tương ứng. < 768: logo-a-compact* cao 36 (rộng 83); ≥ 768: logo-a* rộng 160. Vùng chạm logo cao 48. ≥1024: 5 liên kết, "Liên hệ" là nút mint, EN/VI cuối. < 1024: Liên hệ + EN/VI + menu luôn thấy; menu xổ xuống 4 liên kết (aria-expanded; Esc hoặc bấm liên kết đóng). Mục hiện tại aria-current="true" (mint tối; mint_deep sáng). Nút ngôn ngữ là liên kết thật, có lang đích. Chữ cho logo lấy aria-label "TiLA Studio, về đầu trang". |
Hero #home (6.1) |
≥1024: lưới 1,15fr/0,85fr; chữ trái (nhãn → h1 → câu dẫn → 2 nút), pigxel-hero phải (≤ 420 px) trên quầng mint. < 1024: một cột, Pigxel dưới nút, rộng 64% (≤ 300). Không hiện dần: chữ và hình hiện ngay khi HTML tới (không opacity:0 chờ JS, P-08). Màn 360×640 thấy logo, Liên hệ, EN, h1, câu dẫn, nút chính. |
Công ty là ai #about (6.2) |
≥1024: tiêu đề + câu dẫn (5fr) trái, hai thẻ "Người đứng sau" và "Cái tên" phải (7fr). < 1024 xếp dọc (≥768 hai cột). Không ảnh CEO. |
Hai lĩnh vực #what-we-do (6.3) |
Hai thẻ đúng thứ tự: SaaS/back-office, Game/app. Mỗi thẻ: hóa thân (alt="") → h3 → cho ai → giải quyết gì → dòng cách làm/nơi phát hành in đậm ngăn nét đứt. Dưới: khung nét đứt "Hiện tại". Không ảnh sản phẩm, ngày, giá. |
Pigxel #pigxel (6.4) |
Khung lớn: pigxel-meet toàn thân (thấy đủ 5 đặc điểm, kể cả đuôi xoắn, ôm đồng xu) trái ≤ 240 px, chữ phải; < 768 xếp dọc. Quầng mint nền. Cuộn tới mới hiện dần. |
Cách làm việc #how-we-work (6.5) |
Hai thẻ "Con người làm" (chấm vàng) và "AI làm" (ô mint), mỗi thẻ 4 ý. Dưới: khung nhấn mint cho quy tắc "chỉ ra mắt sau khi con người duyệt" kèm dấu tích. Liên kết Docs mở tab mới, aria-label "mở trang khác"; trống {docs_url} thì bỏ. |
Liên hệ #contact (6.6) |
Thẻ giữa viền chuyển sắc mint→hồng đậm. Có email: câu dẫn, nhãn "Email", [email protected] cỡ 20–32 px (tự xuống dòng), nút "Gửi email cho chúng tôi" (mailto:), dòng phụ. Không email: chỉ đoạn "chưa mở kênh". |
| Chân trang (6.8) | "© {năm} TiLA Studio" trái, "Lên đầu trang" phải (cao 48). Không địa chỉ, pháp nhân, điện thoại. Liên kết pháp lý chỉ thêm khi FR-P1-04 có trang. |
B, C, D: xem harness; chỉ đặc tả sâu phương án CEO duyệt triển khai (A).
6. Trạng thái¶
Harness chọn: Success · Loading · Error · Offline · Không JS, cộng công tắc email (Empty khi chưa có email).
| Chuẩn 5 trạng thái | Trên trang tila-site | Phát hành? | Thiết kế |
|---|---|---|---|
| Success | Trang bình thường, có email | Có | §5 |
| Empty | Chế độ thông tin: chưa có email (PRD 6.9) | Dự phòng (không dùng ở bản hiện tại, content.md 7.2) |
Nút hero "Tìm hiểu thêm" → #about; mục Liên hệ chỉ một đoạn nói thẳng, không nút, không nhãn mồ côi; nav vẫn dẫn tới #contact |
| Loading | Trang là HTML dựng sẵn nên không có | Không (không chuỗi, không khung xương; content.md mục 12) |
Khung xương trong harness chỉ để CEO hình dung mạng chậm. Giữ chỗ bằng width/height/aspect-ratio cho SVG và font-display: swap để không dịch chuyển bố cục |
| Error | Trang 404 (P1) | Có | Thanh đầu + chân trang, pigxel-404 nghiêng đầu 2 nhịp, h1, đoạn giải thích, nút "Về trang chủ" (/ hoặc /en/ theo tiền tố), noindex. Chuỗi: content.md mục 9 |
| Offline | Thanh thông báo nổi dưới màn hình, role="status", viền vàng; tự bật khi trình duyệt phát offline, tự ẩn khi có mạng |
P2 (CEO quyết, xem báo cáo) | Chuỗi: content.md mục 12 #1 |
| (thêm) Không JS | Cả trang đọc được | Có | Menu trải ngang dưới thanh đầu, không nút; mọi mục hiện sẵn (hiện dần chỉ bật khi html.js); nút ngôn ngữ là liên kết về đầu trang kia |
Không có biểu mẫu, tìm kiếm, dữ liệu động: không thiết kế trạng thái trống/lỗi biểu mẫu.
7. Chuyển động (WCAG 2.2.2)¶
| Hiệu ứng | Thời lượng · easing | Ghi chú |
|---|---|---|
| Hiện dần khi cuộn | 480 ms · out; mờ + trượt 16 px |
Chỉ các mục dưới màn hình đầu; hero không dùng. IntersectionObserver ngưỡng 10%, một lần |
| Pigxel hero trôi | 2,4 s · in_out, ±8 px, đúng 2 nhịp rồi dừng (4,8 s ≤ 5 s) |
Không lặp vô hạn |
| Pigxel 404 nghiêng đầu | 2,4 s · in_out, ±4°, 2 nhịp rồi dừng |
Như trên |
| Nút | 150 ms · out, nhấc 2 px khi rê |
|
| Cuộn tới mục | cuộn mượt; sau đó focus mục (tabindex=-1) |
scroll-padding-top = nav_height + 16 |
| Menu điện thoại | tức thì |
prefers-reduced-motion: reduce: tắt mọi animation/transition, scroll-behavior:auto, nội dung hiện sẵn. Hình là SVG nội tuyến, không ảnh bitmap.
8. Khả năng tiếp cận và kết quả kiểm¶
Tương phản đã tính (WCAG 2.x, Python, 2026-11-13). Ngưỡng: chữ thường ≥ 4,5; chữ lớn và thành phần giao diện ≥ 3.
| Cặp (chữ / nền) | Dùng ở | Tỉ lệ |
|---|---|---|
| paper / navy_canvas | chữ chính, tối; thanh đầu tối | 19,28 |
| paper / surface | chữ trong thẻ, tối | 17,06 |
| slate_300 / navy_canvas · / surface | chữ phụ, tối | 13,59 · 12,02 |
| tila_mint / navy_canvas · / surface | nhãn, liên kết, mục hiện tại ở thanh đầu tối | 9,08 · 8,04 |
| navy_canvas / tila_mint | chữ nút chính và "Liên hệ" (cả hai giao diện) | 9,08 |
| navy_canvas / paper | chữ chính và thanh đầu sáng | 19,28 |
| slate_600 / paper · / white | chữ phụ, sáng | 7,24 · 7,58 |
| mint_deep / paper · / white | liên kết, nhãn, mục hiện tại thanh đầu sáng; chữ "Studio" logo-a-light |
5,23 · 5,47 |
| slate_600 / paper | viền nút ở thanh đầu sáng (thành phần giao diện) | 7,24 |
| navy_canvas / pigxel_pink · slate_700 / pigxel_pink | C: dải hero | 11,12 · 5,71 |
| navy_canvas / coin_gold · slate_800 / tila_mint | C: dải liên hệ · dải mint | 9,39 · 6,58 |
Cấm: tila_mint làm chữ trên paper (2,12:1); paper làm chữ trên nút mint (2,12:1); coin_gold và slate_400 làm chữ trên nền sáng. Viền focus: mint trên nền tối (9,08), navy trên nền sáng (19,28), hồng ở D (9,84).
- Thứ tự Tab: liên kết bỏ qua → logo → Giới thiệu → Lĩnh vực → Pigxel → Cách làm việc → (điện thoại: Liên hệ) → ngôn ngữ → (điện thoại: menu) → nội dung → chân trang. Esc đóng menu. Viền 3 px, offset 3 px, chỉ khi
:focus-visible. - Vùng chạm ≥ 48×48 và chữ ≥ 16 px: đo bằng mã trên A (tối, sáng), B (sáng, tối), C, D ở 320/360/1440: 0 vi phạm.
- Ngữ nghĩa: một
h1, nămh2;header/nav/main/footer;langđúng; nút ngôn ngữ cólangđích; hóa thân Pigxel ở thẻ lĩnh vực và số thứ tự trang tríalt=""/aria-hidden. - Không có hiệu ứng tự chạy > 5 s: đo bằng
document.getAnimations()ở cả bốn phương án, cả trang thường, 404 và khung xương: tối đa 4.800 ms, 0 lặp vô hạn. - Giãn chữ 200%/WCAG 1.4.12: CHƯA KIỂM CHỨNG.
9. Điểm cần xác nhận (đã bỏ chuỗi tự viết)¶
- Alt
pigxel-meetdo thiết kế chốt,content.mdmục 5 cần đồng bộ (hiện alt mặc định đang cho hìnhpigxel-mark). Alt Việt lấy từbrand/README.md: "Pigxel, chú heo đất hồng phấn, tai tròn, đuôi xoắn, mỉm cười, ôm một đồng xu vàng lớn; khe bỏ xu phát sáng trên đầu." Alt Anh do thiết kế dịch: "Pigxel, a soft-pink piggy bank with round ears and a curly tail, smiling and hugging a large gold coin; the coin slot glows on its head." - Alt 404 theo
content.mdmục 9 (khớppigxel-404). - Thanh ngoại tuyến: chuỗi theo
content.mdmục 12 #1; nếu CEO bỏ tính năng thì bỏ cả chuỗi. - Token mở rộng: ai-artist đã xác nhận; việc đưa vào
company/04thuộc Trợ lý CEO/CEO. - Số
1/2,01–05ở B, D là số trang trí.
10. Ghi chú cho kỹ sư web (ai-web)¶
- CSS: biến CSS từ §2, không mã màu rời. Harness là tham chiếu hình ảnh (nó dựng trang bằng JS trong iframe), không phải mã để sao chép.
- Be Vietnam Pro tự lưu trữ (AC-07): các độ đậm 400–800,
font-display: swap, tậplatin+vietnamese. Giấy phép OFL 1.1 (brand/README.md). Harness gọi Google Fonts chỉ để xem trước. - SVG:
<symbol>+<use>hoặc nhúng trực tiếp; id gradient đã duy nhất theo file. Logo đã là đường nét, không cần font. Đặtwidth/heighthoặcaspect-ratio. - Hai logo trong cùng
<a>(compact/đầy đủ) đổi bằng media querymin-width:768px; hai cặp sáng/tối đổi theoprefers-color-scheme. - JS tối đa ~2 KB, file ngoài, không phụ thuộc thứ tự do proxy chèn: menu, cuộn + focus,
aria-current+ cập nhậthrefnút ngôn ngữ, hiện dần (mục dưới màn hình), thanh ngoại tuyến. Hero không phụ thuộc JS. Qua Cloudflare, không để Rocket Loader/Email Obfuscation đổi thẻ script haymailto:(PRD §7, AC-07); đó là quyết định của CEO. color-scheme: dark light, tự theo hệ thống; không nút sáng/tối trên trang thật (FR-P2-02). Nút sáng/tối trong harness chỉ để xem.color-mix()ở nền khung nhấn: trình duyệt từ 2023; cũ hơn rơi về trong suốt, vẫn đọc được.- Harness chỉ kiểm bằng Chromium.