Thể thao Hà Nội · Hướng dẫn giao diện sống

Design system

Token, kiểu chữ và toàn bộ component dùng chung cho cổng người dân và hệ thống điều hành nội bộ. Mọi mẫu bên dưới là component thật, chạy trực tiếp từ mã nguồn.

Next.js 16.4Tailwind CSS 4Radix UIWCAG 2.2 AA

Nguyên tắc

Bốn quy tắc cứng được thực thi ngay ở tầng token và kiểm tra tự động bằng npm run check:design.

Không emoji

Biểu tượng chỉ dùng lucide-react. Nội dung, dữ liệu mẫu và chú thích không chứa emoji.

Không giãn chữ

Không đặt letter-spacing khác 0. Namespace giãn chữ đã bị xóa khỏi theme, chỉ còn giá trị 0.

Độ đậm tối đa 700

Chỉ có font-normal, font-medium, font-semibold, font-bold (400–700).

Chỉ token ngữ nghĩa

Dùng bg-primary, text-muted-foreground... Không mã màu cứng, không màu Tailwind mặc định.

Ngôn ngữ và khả năng tiếp cận

Tiếng Việt có dấu đầy đủ, văn phong hành chính ngắn gọn. Nút chỉ có biểu tượng phải có aria-label; bảng có tiêu đề cột; trường nhập luôn có nhãn qua Field.

Màu sắc

Token định nghĩa trong globals.css dưới dạng biến CSS, tự đổi theo giao diện sáng, tối. Dùng qua lớp tiện ích: bg-*, text-*, border-*.

Bề mặt và chữ

--background

Nền trang

--surface

Bề mặt

--surface-2

Bề mặt 2

--surface-3

Bề mặt 3

--card

Thẻ

--foreground

Chữ chính

--muted-foreground

Chữ phụ

--subtle-foreground

Chữ mờ

--border

Viền

--border-strong

Viền đậm

--input

Viền ô nhập

--ring

Viền focus

Thương hiệu: Xanh sân đấu, Đỏ Thủ đô, Navy

--primary

Chính

--primary-hover

Chính — hover

--primary-subtle

Chính — nền nhạt

--accent

Nhấn

--accent-hover

Nhấn — hover

--accent-subtle

Nhấn — nền nhạt

--ink

Navy (hero, sidebar)

--ink-2

Navy 2

--volt

Vạch volt (điểm nhấn hoạt động)

--secondary

Phụ

Ngữ nghĩa

--success

Thành công

--success-subtle

Thành công — nền

--warning

Cảnh báo

--warning-subtle

Cảnh báo — nền

--danger

Nguy hiểm

--danger-subtle

Nguy hiểm — nền

--info

Thông tin

--info-subtle

Thông tin — nền

Huy chương

--medal-gold

Vàng

--medal-gold-subtle

Vàng — nền

--medal-silver

Bạc

--medal-silver-subtle

Bạc — nền

--medal-bronze

Đồng

--medal-bronze-subtle

Đồng — nền

Biểu đồ (6 màu phân loại)

--chart-1

Chuỗi 1

--chart-2

Chuỗi 2

--chart-3

Chuỗi 3

--chart-4

Chuỗi 4

--chart-5

Chuỗi 5

--chart-6

Chuỗi 6

Sidebar nội bộ

--sidebar

Nền

--sidebar-hover

Hover

--sidebar-active

Đang chọn

--sidebar-border

Viền

Chữ

Barlow Semi Condensed cho tiêu đề, con số lớn (font-display); Be Vietnam Pro cho nội dung (font-sans). Thang 1,200, cỡ gốc 16px.

font-display — Barlow Semi Condensed

Tiêu đề, KPI, bảng huy chương

text-6xl
60/68Hà Nội 29 HCV

text-5xl
48/56Hà Nội 29 HCV

text-4xl
36/44Hà Nội 29 HCV

text-3xl
30/38Hà Nội 29 HCV

text-2xl
24/32Hà Nội 29 HCV

text-xl
20/30Hà Nội 29 HCV

text-lg
18/28Hà Nội 29 HCV

font-sans — Be Vietnam Pro

Nội dung, nhãn, bảng

text-2xl
24/32Vận động viên đội tuyển điền kinh

text-xl
20/30Vận động viên đội tuyển điền kinh

text-lg
18/28Vận động viên đội tuyển điền kinh

text-base
16/24Vận động viên đội tuyển điền kinh

text-sm
14/22Vận động viên đội tuyển điền kinh

text-xs
12/18Vận động viên đội tuyển điền kinh

text-2xs
11/16Vận động viên đội tuyển điền kinh

Độ đậm (400–700)

Không dùng 800, 900

Aa 1.850

Trung tâm Huấn luyện và Thi đấu

font-normal · 400 · Normal

Aa 1.850

Trung tâm Huấn luyện và Thi đấu

font-medium · 500 · Medium

Aa 1.850

Trung tâm Huấn luyện và Thi đấu

font-semibold · 600 · Semibold

Aa 1.850

Trung tâm Huấn luyện và Thi đấu

font-bold · 700 · Bold

Con số dạng bảng

Thêm lớp tabular cho số trong bảng, thẻ thống kê

Mặc định

1.111 / 8.888

tabular

1.111 / 8.888

Khoảng cách, bo góc, đổ bóng

Lưới 4px. Khoảng cách giữa các khối gap-4 hoặc gap-6; giữa các section mt-6 hoặc mt-8. Thẻ dùng rounded-lg border.

Khoảng cách

4px · 1

8px · 2

12px · 3

16px · 4

24px · 6

32px · 8

48px · 12

64px · 16

Bo góc

xs · 4px

sm · 6px

md · 8px

lg · 12px

xl · 16px

full

Đổ bóng

shadow-xs

xs — thẻ, ô nhập

shadow-sm

sm — thẻ hover

shadow-md

md — popover, menu

shadow-lg

lg — dialog, sheet

Hoa văn thể thao

sport-stripes trên nền ink, vạch gradient volt — primary — accent

Dải chéo động

Biểu tượng

Chỉ dùng lucide-react, nét 2px, kích thước mặc định 16px trong nút (size-4), 18px trong thẻ thống kê. Biểu tượng trang trí đặt aria-hidden.

Bộ biểu tượng thường dùng

Users
Trophy
Medal
Award
HeartPulse
Activity
Building2
CalendarDays
ClipboardList
TicketCheck
QrCode
MapPin
Footprints
Waves
Dumbbell
Swords
Target
Timer
FileBarChart
ShieldCheck
Bell
Search
Settings2
Download

import { Trophy } from "lucide-react"

Button

CTA chính của cổng người dân dùng accent; thao tác chính trong nội bộ dùng primary. Mỗi vùng chỉ một nút chính.

Biến thể

<Button variant="primary | accent | secondary | outline | ghost | danger | link | ink | inverse">

Kích thước

size="xs | sm | md | lg | icon | icon-sm | icon-xs"

Trạng thái

Hover, focus-visible (viền ring), nhấn, vô hiệu

Badge

Nhãn trạng thái ngắn. Trạng thái nghiệp vụ dùng StatusBadge với từ điển trong lib/labels.ts, không viết cứng nhãn.

Tông màu

neutralprimaryaccentsuccesswarningdangerinfosolidoutlinegoldsilverbronze

<Badge tone="success" dot>

Form

Mọi trường nhập bọc trong Field (nhãn, gợi ý, lỗi). Lỗi đặt aria-invalid trên ô nhập và hiển thị với role alert.

Input, Field

Họ tên vận động viên

Theo giấy khai sinh

Số điện thoại

Số điện thoại gồm 10 chữ số.

Mã VĐV

Hệ thống tự sinh

import { Field } from "@/components/ui/field"

Textarea, NativeSelect

NativeSelect cho bộ lọc đơn giản, tốt trên di động

Ghi chú

Tuyến

Điều khiển lựa chọn

Select, Checkbox, Switch, RadioGroup — dựa trên Radix UI, đầy đủ bàn phím và ARIA.

Select

Radix Select — bàn phím, tìm theo ký tự

Bộ môn

import { Select } from "@/components/ui/controls"

Checkbox

Chọn, chưa chọn, trung gian, vô hiệu

Chọn tất cả tuyến

Đội tuyển

Đội tuyển trẻ

Vô hiệu (đã chọn)

import { Checkbox } from "@/components/ui/controls"

Switch

Bật, tắt tức thời — không cần nút lưu

Nhắc lịch tập qua thông báo đẩy

Vô hiệu

import { Switch } from "@/components/ui/controls"

RadioGroup

Một lựa chọn trong nhóm nhỏ

Đội tuyển

Đội tuyển trẻ

Năng khiếu

import { RadioGroup, RadioGroupItem } from "@/components/ui/controls"

Tabs, Segmented

Tabs line cho trang chi tiết; Tabs pill cho bảng điều hành; Segmented để đổi chế độ xem.

Tabs — line

Điều hướng nội dung trong trang

Nội dung tab Lực lượng.

<TabsList variant="line">

Tabs — pill

Dùng trên bảng điều hành, cuộn ngang trên điện thoại

Số liệu tháng.

<TabsList variant="pill">

Segmented

Chuyển chế độ hiển thị, không đổi URL

Đang chọn: board · thang

import { Segmented } from "@/components/ui/controls"

Lớp phủ

Dialog, Sheet, DropdownMenu, Popover, Tooltip và thông báo toast (sonner).

Dialog

Mọi thao tác ghi mở Dialog có form đầy đủ

import { Dialog, DialogContent, ... } from "@/components/ui/overlay"

Sheet

Xem chi tiết bản ghi, không rời ngữ cảnh danh sách

<SheetContent side="right" width="max-w-md">

DropdownMenu

Thao tác phụ trên dòng; mục nguy hiểm tone danger

<DropdownMenuItem tone="danger">

Popover và Tooltip

Popover cho bộ lọc nhanh; Tooltip chỉ cho nhãn ngắn

<Tooltip content="...">

Hiển thị

Alert, Avatar, Progress, Skeleton, Breadcrumb, DescriptionList, Kbd, Separator, Card.

Alert

Thông tin

Lịch tập tuần 43 đã được công bố.

Thành công

Đã gửi báo cáo quý III tới Sở.

Cảnh báo

12 hợp đồng sắp hết hạn trong 60 ngày.

Lỗi

Không kết nối được Hệ thống báo cáo Sở.

<Alert tone="info | success | warning | danger" title="...">

Avatar

Chữ viết tắt, màu theo tên

THĐLMCQHHNMK

Progress

Có aria-label mô tả

primary

accent

success

warning

danger

Skeleton

Trạng thái đang tải

Breadcrumb, Kbd, Separator

Tìm nhanh chức năng Ctrl K

DescriptionList

Bộ môn: Karate
Tuyến: Đội tuyển
Ngày tiếp nhận: 01/03/2019
HLV phụ trách: Trần Đức Long

Card

Kế hoạch tập huấn quý IV

Bộ môn Đấu kiếm · chờ lãnh đạo duyệt

Chờ duyệt

Mục tiêu: chuẩn bị lực lượng cho Đại hội Thể thao toàn quốc lần X.

Mẫu trang

PageHeader, SectionHeader, StatCard, EmptyState, Timeline, Stepper — import từ @/components/patterns/page.

PageHeader

Vận động viên

Quản lý hồ sơ VĐV theo bộ môn, tuyến (yêu cầu 3, 11).

SectionHeader

Thành tích

Huy chương theo năm

Đoàn Hà Nội, mọi cấp giải

StatCard

Tông, biểu tượng, delta (invertDelta khi giảm là tốt), footer nguồn

Vận động viên

1.850

+7so với tháng trước

HCV SEA Games 33

Nguồn: baovanhoa.vn

Ca chấn thương

-3so với quý trước

Tỷ lệ sử dụng sân

87%

0không đổi

EmptyState

Chưa có hồ sơ đăng ký

Hồ sơ người dân gửi qua cổng sẽ hiển thị tại đây.

Timeline

Bộ môn trình kế hoạch
08:12 16/10/2026
Phòng HL&TĐ thẩm định
10:30 16/10/2026
Đề nghị bổ sung chỉ tiêu thể lực.
Lãnh đạo phê duyệt
Chờ xử lý

Stepper

Bước hiện tại dùng accent; nhãn ẩn trên màn hình nhỏ

1Chọn sân
2Chọn giờ
3Xác nhận
4Nhận mã QR

1Chọn sân
2Chọn giờ
3Xác nhận
4Nhận mã QR

Bảng dữ liệu

DataTable: tìm kiếm không dấu, sắp xếp, phân trang, chọn dòng, kết xuất Excel/PDF. Khai báo columns trong file client.


GDĐỗ Gia Dũng	Điền kinh	Đội tuyển	Cấp 1	1997
ATHà Anh Trung	Điền kinh	Đội tuyển	Kiện tướng	1999
TNTrịnh Thanh Nhung	Điền kinh	Đội tuyển	Kiện tướng	1999
HLĐào Hồng Linh	Điền kinh	Đội tuyển	Kiện tướng	2005
VNVũ Văn Nam	Điền kinh	Đội tuyển	Kiện tướng	2000

1–5 / 18 bản ghi

1 / 4

Họ tên trong bảng là người giả định

Biểu đồ

Recharts bọc sẵn, màu từ token chart-1..6, tối đa 6 chuỗi, luôn có chú giải hoặc nhãn trục.

BarChart

Quốc gia
Quốc tế

LineChart

Có đường tham chiếu

AreaChart — xếp chồng

Tập huấn
Đặt sân
Sự kiện

DonutChart, Sparkbar

18công trình

Tốt739%
Khá739%
Trung bình317%
Xuống cấp16%

Sparkbar

Thành phần nghiệp vụ

StatusBadge, MedalTally, MedalBadge, SourceNote, DemoDataNote — import từ @/components/patterns/domain.

MedalTally

SEA Games 33 (2025)

292327

ASIAD 20 (2026)

3111

Nguồn: baovanhoa.vn, tuoitre.vn, vietnamplus.vn

<MedalTally gold={29} silver={23} bronze={27} size="lg" />

MedalBadge, StatusBadge

HCVHCBHCĐ

Đang tập trungChấn thươngTạm dừngKết thúc tập huấn

TốtKháTrung bìnhXuống cấp

Mới giaoĐang thực hiệnChờ nghiệm thuHoàn thànhQuá hạn

Đã đặtĐã nhận sânĐã hủyKhông đến

<StatusBadge map={QUALITY} value="tot" />

SourceNote, DemoDataNote

Bắt buộc với số liệu thật và số liệu giả định

Nguồn: Cổng TTĐT Cục Thể dục thể thao Việt Nam (tdtt.gov.vn), 07/2025

Dữ liệu minh họa phục vụ trình diễn, không phải số liệu chính thức

Editorial thể thao

Mẫu học từ các trang tin thể thao quốc tế (docs/99-references/R03): ticker, kicker, tiêu đề khối, đọc nhiều, lịch và kết quả, bảng tổng sắp, thẻ trực tiếp. Import từ @/components/patterns/editorial.

ScoreTicker (E1)

Dải kéo tay, không tự chạy (WCAG 2.2.2)

Lịch và kết quả

Kicker, LiveBadge, PhasePill (E3)

Thành tích · SEA Games 33

Trực tiếpSắp diễn raKết thúcXem lại

SectionTitle (E4)

Tin mới

Xem tất cả

<SectionTitle title="Tin mới" href="/tin-tuc" />

MostRead (E5)

Đọc nhiều nhất

Thành tích
Hà Nội giành 29 HCV tại SEA Games 33
Thành tích
VĐV Hà Nội góp mặt cả 3 HCV ASIAD 20
Tin tức
Nghị quyết 82/2026/NQ-HĐND: chế độ mới cho HLV, VĐV

MedalTable (E7)

SEA Games 33 — đoàn Hà Nội
#	Môn	Huy chương vàng	Huy chương bạc	Huy chương đồng	Tổng
1	Đua thuyền	4	1	1	6
2	Karate	3	1	0	4
3	Điền kinh	2	2	0	4
4	Đấu kiếm	2	1	5	8
5	Bi sắt	2	1	2	5

FixtureList (E6)

Hôm nay, Thứ Sáu 16/10

08:00
Cầu lông phong trào cụm phường Cầu Giấy
Vòng bảng · Nhà tập Cầu lông
Trực tiếp

Thứ Bảy 18/10

07:30
Ngày hội bơi an toàn cho học sinh
Bể bơi 50 m · 450 học sinh
Sắp diễn ra

Thứ Bảy 24/10

08:00
Giải Bóng bàn người cao tuổi Thủ đô
Nhà tập Bóng bàn · 117 VĐV
Sắp diễn ra

LiveCard (E8)

Trực tiếp

Cầu lông phong trào cụm phường Cầu Giấy — vòng bảng

Đang phát · từ 08:00