Button
Nút nền mực, viền, phụ, trong suốt, liên kết và nút huỷ có dấu ✕; vùng bấm 44px.
The Eloquent · Bộ giao diện
Thành phần thực dụng bằng mực và giấy
Mọi thành phần, thành phần thương hiệu và khối cho React trong một registry, dựng trên Base UI theo phong cách của tờ báo: chỉ đen, trắng và xám, tạo cấu trúc bằng đường kẻ thay vì khung. Mỗi mục cài bằng shadcn CLI và có trang tài liệu riêng.
Cài đặt
Thêm registry vào components.json:
"registries": {
"@eloquent": "https://phamdonhatminh.vercel.app/ui/r/{name}.json"
}Rồi thêm style và mục bạn cần:
npx shadcn add @eloquent/style01
Nền tảng
Các token mà mọi mục đều dùng: màu, chữ, đường kẻ và vệt đánh dấu.
Màu
paperNền giấyinkChữ và đường kẻtint-1Đánh dấu, khung nhạttint-2Dải nền, cảnh báohalftoneTrang trí, vô hiệupressKhối đảo màu duy nhất
Chữ: đọc bằng chữ có chân, dùng bằng chữ không chân
Giọng đứng mở đầu, giọng nghiêng khép lại
Source Serif 4 dùng cho thân bài: đoạn dẫn, mô tả và lời trong hộp thoại, ở độ dài dòng dễ đọc.
1.280Số Barlow Condensed
Barlow cho nhãn và nút
Đường kẻ thay cho khung
Kẻ mảnh 1px: giữa các bài, các hàng và các ô
Kẻ đậm 3px: mở đầu mỗi mục
Vệt đánh dấu
npx shadcn add @eloquent/style02
Biểu mẫu và thao tác19 mục
Nút, ô nhập và lựa chọn, kẻ dòng như một tờ phiếu báo.
Button Group
Ghép các nút liên quan thành một khối, ngăn bằng đường kẻ mực 1px chung.
Input
Ô nhập một dòng là đường kẻ mực 1px; khi sai là đường kẻ 2px; cao 44px.
Hiển thị trên trang nhất. Không quá 70 ký tự.
Input group
Một dòng nhập kèm chữ, biểu tượng hoặc nút ở hai bên, ngăn bằng đường kẻ mảnh.
https://
Bạn đọc có thể mở số báo từ địa chỉ này.
Input OTP
Nhập mã dùng một lần trên OTP Field của Base UI: ô vuông 44px chung đường kẻ 1px.
Nhập 6 chữ số chúng tôi đã gửi tới thiết bị của bạn.
Textarea
Ô nhập nhiều dòng với đường kẻ mực 1px; khi sai là đường kẻ 2px.
Ghi rõ nguồn và thời điểm.
Label
Nhãn biểu mẫu kiểu Barlow 600 viết hoa giãn chữ.
Field
Bố cục nhãn, ô nhập, mô tả và lỗi trên Field và Fieldset của Base UI; lỗi hiện bằng đường kẻ, biểu tượng và lời nhắn.
Hiển thị trên trang nhất. Không quá 70 ký tự.
Form
Biểu mẫu kiểm tra dữ liệu với react-hook-form và zod; lỗi hiện bằng biểu tượng mực và lời nhắn.
Checkbox
Ô đánh dấu trên Base UI; khi chọn là nền mực kèm dấu tích.
Radio Group
Chọn một trong nhiều mục trên RadioGroup của Base UI; mục chọn là nền mực, chấm giấy.
Phương thức nhận tin
Switch
Công tắc bật tắt trên Base UI; khi bật là rãnh mực, nút giấy, có thể ghi BẬT/TẮT.
Slider
Thanh trượt giá trị hoặc khoảng trên Base UI; rãnh mảnh, đoạn mực đậm, nút vuông.
Kéo thanh trượt, hoặc dùng phím mũi tên.
Select
Ô chọn trên Base UI: nút mực, bảng chọn nền giấy kẻ 1px, dấu tích mực ở mục đã chọn.
Native select
Ô chọn gốc của trình duyệt, viền mực, mũi tên và cao 44px; khi sai là gạch dưới 2px.
Combobox
Ô chọn có lọc, một hoặc nhiều mục, trên Combobox của Base UI; đường kẻ mực, nền tint-1 khi trỏ tới.
Ban đã đặt bài viết này.
Toggle
Nút hai trạng thái trên Base UI; khi nhấn là nền mực và aria-pressed, không dùng màu.
Toggle Group
Nhóm nút bật tắt liền nhau trên Base UI, ngăn bằng đường kẻ mực 1px chung.
Kbd
Phím và tổ hợp phím: chữ Barlow Condensed viết hoa trong khung kẻ 1px.
Nhấn CtrlK để tìm trong kho lưu trữ, hoặc Esc để đóng.
03
Lớp phủ12 mục
Hộp thoại, trình đơn và thông báo trên nền giấy, kẻ mực 1px, không đổ bóng. Hãy mở thử.
Dialog
Hộp thoại trên Base UI: nền giấy, kẻ 1px và kẻ đậm phía trên, nền phủ giấy 85%.
Alert Dialog
Hộp thoại cảnh báo trên Base UI: như Dialog, nút xác nhận ghi rõ hành động.
Sheet
Tấm trượt trên Dialog của Base UI: bảng giấy cao hết màn hình từ một cạnh, kẻ mực 1px bên trong.
Drawer
Ngăn kéo trên Base UI: bảng giấy từ một cạnh, kẻ mực đậm 3px làm tay cầm, vuốt để đóng.
Popover
Bảng nổi trên Base UI: mực trên giấy, kẻ 1px, không đổ bóng, không bo góc.
Hover Card
Thẻ xem trước trên PreviewCard của Base UI: liên kết có vệt đánh dấu, bảng nổi kẻ 1px.
Xem toàn bộ hồ sơ trong kho lưu trữ trước khi đăng lại.
Tooltip
Chú thích nổi trên Base UI: khối mực, chữ Barlow 12px màu giấy; mở cả khi lấy tiêu điểm.
Dropdown Menu
Trình đơn thả xuống trên Base UI: nền giấy, kẻ 1px, mục đang trỏ tô mực.
Context Menu
Trình đơn ngữ cảnh trên Base UI: mở tại con trỏ hoặc bằng Shift+F10.
Nhấp chuột phải vào đây, hoặc đưa tiêu điểm vào và nhấn Shift+F10
Menubar
Thanh trình đơn trên Base UI: kẻ đậm phía trên, kẻ mảnh phía dưới, nút tô mực khi mở.
Command
Bảng lệnh trên Autocomplete của Base UI: gõ để lọc, phím mũi tên để chọn, Enter để chạy.
Lệnh gần nhất: chưa có
Sonner
Thông báo nhanh trên Toast của Base UI: nền giấy kẻ 1px ở góc dưới phải, trạng thái hiện bằng biểu tượng.
05
Dữ liệu và phản hồi17 mục
Bảng, trạng thái, tiến độ và biểu đồ xám; trạng thái không bao giờ chỉ dựa vào màu.
Card
Thẻ không khung: kẻ đậm 3px phía trên, nội dung chữ có chân, chân thẻ kẻ mảnh.
Tin nhanh
Sổ đăng ký lưu trữ, cập nhật mỗi đêm
Một dòng dẫn nhập tóm tắt câu chuyện trong một câu.
Các thông báo mua sắm được lập hồ sơ, ghi ngày và lập chỉ mục ngay trong ngày, để người đọc theo dõi một quyết định từ thông báo đầu tiên đến thông báo cuối cùng.
Table
Bảng ngữ nghĩa bằng Barlow: kẻ đậm ở tiêu đề, kẻ mảnh giữa các hàng, số căn phải.
| Ban | Số bài | Số chữ |
|---|---|---|
| Chính trị | 42 | 51.230 |
| Kinh doanh | 37 | 44.105 |
| Văn hoá | 19 | 23.870 |
| Khoa học | 11 | 15.402 |
| Tổng | 109 | 134.607 |
Data table
Bảng dữ liệu có sắp xếp (aria-sort, ký hiệu mực), lọc cột, chọn cột và phân trang.
| Ngân sách qua vòng đọc thứ hai | Chính trị | 1.240 |
| Đình công cảng kéo sang ngày thứ ba | Kinh doanh | 980 |
| Bảo tàng mở lại cánh phía đông | Văn hoá | 760 |
| Kính thiên văn tìm thấy một ngôi sao lặng | Khoa học | 1.105 |
| Hội đồng bác kế hoạch xe điện | Chính trị | 870 |
Trang 1 / 2
Badge
Nhãn trạng thái vuông, chữ Barlow Condensed viết hoa: nền mực, nền nhạt, viền hoặc gạch 2px.
Đang đăngBản nhápLưu trữĐã gỡ
Avatar
Ảnh đại diện vuông trên Base UI: khung kẻ mảnh, ảnh xám, chữ viết tắt khi thiếu ảnh.
NANguyễn Thị Ánh
Alert
Khung thông báo theo trạng thái: thông tin tint-1, thành công có dấu tích, cảnh báo sọc chéo tint-2.
Đã lưu bản nháp
Các thay đổi được giữ dưới dạng bản nháp cho đến khi biên tập viên đăng.
Progress
Thanh tiến độ trên Base UI: rãnh mảnh, phần đã xong tô mực, số Barlow Condensed.
Đang tải tài liệu lên
Meter
Đồng hồ đo trên Base UI: như Progress, cho một giá trị trong khoảng đã biết.
Dung lượng đã dùng
Skeleton
Khối giữ chỗ tint-1, chỉ nhấp nháy khi cho phép chuyển động.
Đang tải trang nhất
Spinner
Ô vuông mực xoay khi đang tải; có nhãn trạng thái, vẫn đọc được khi giảm chuyển động.
Đang lấy số báo mới nhất
Empty
Trạng thái trống: kẻ mảnh, nhãn viết hoa, tiêu đề Playfair, một câu và nút tuỳ chọn.
Chưa có hồ sơ
Chưa có thông báo nào được nộp
Thông báo sẽ xuất hiện tại đây khi gói thầu đầu tiên được đăng. Cho đến lúc đó, sổ đăng ký còn trống.
Item
Một hàng bản ghi: ảnh, tiêu đề, mô tả và thao tác, khép lại bằng đường kẻ mảnh.
Thông báo mời thầu, gói 4
Nộp ngày 3 tháng 11. Nhận câu hỏi đến ngày 24 tháng 11.
Phụ lục đặc tả kỹ thuật
Nộp ngày 5 tháng 11. Thay thế mục 2.
Calendar
Lịch tháng trên react-day-picker: tuần kẻ mảnh, ngày chọn tô mực, hôm nay kẻ đậm.
Tháng Mười Một 2026
| Th 2 | Th 3 | Th 4 | Th 5 | Th 6 | Th 7 | CN |
|---|---|---|---|---|---|---|
Date picker
Ô chọn ngày từ Calendar và Popover: nút kẻ đường mở lịch vuông, Esc để quay lại.
Carousel
Trình chiếu trên Embla: trang kẻ đường, nút số Barlow Condensed, nút trước và sau có nhãn.
Chính trị
Ngân sách qua vòng đọc thứ hai
Cuộc bỏ phiếu diễn ra sau cuộc tranh luận dài về chi phí tuyến đường sắt mới.
Kinh doanh
Đình công cảng kéo sang ngày thứ ba
Các hãng tàu cho biết hàng giao lên phía bắc sẽ chậm trong tuần này.
Văn hoá
Bảo tàng mở lại cánh phía đông
Các phòng trưng bày được phục dựng lưu giữ những tấm bản đồ in cổ nhất của thành phố.
Khoa học
Kính thiên văn tìm thấy một ngôi sao lặng
Các nhà thiên văn mô tả một mặt trời già, êm ả cùng ba hành tinh nhỏ.
Chart
Biểu đồ Recharts bằng mực: các chuỗi phân biệt bằng hoạ tiết, nét đứt và nhãn.
Biểu đồ cột về số bài đã nộp và số bài đã đăng của bốn ban. Ban Chính trị dẫn đầu ở cả hai. Bảng bên dưới cho mọi giá trị.
Xem dữ liệu dạng bảng
| Ban | Đã nộp | Đã đăng |
|---|---|---|
| Chính trị | 42 | 36 |
| Kinh doanh | 37 | 31 |
| Văn hoá | 19 | 18 |
| Khoa học | 11 | 9 |
Typography
Kiểu chữ thương hiệu: tiêu đề hai giọng, nhãn, đoạn dẫn, chữ hoa đầu đoạn, trích dẫn nổi.
Phân tích
Đọc bằng chữ có chân, dùng bằng chữ không chân
Một tờ báo lưu chiếu đặt tiêu đề bằng một giọng và trả lời bằng một giọng khác.
Ban biên tập · 9 tháng 11, 2026
Mỗi bài viết mở đầu bằng một đường kẻ. Phần còn lại là chữ: tiêu đề có sức nặng, đoạn dẫn giải thích, và nội dung thưởng cho người đọc kỹ.
Cấu trúc đến từ đường kẻ, không phải khung.
Tên và con số được viết hoa để có thể quét qua trong chốc lát.
06
Thành phần thương hiệu15 mục
Các mảnh của chính The Eloquent: nhãn, tiêu đề hai giọng, số liệu và thẻ bài.
Kicker
Nhãn chữ hoa giãn cách, có thể kèm đường kẻ mực phía trước.
Công việc · 09/2025 – nay
Headline
Tiêu đề hai giọng (đứng rồi nghiêng) bốn cỡ; vệt đánh dấu hiện dưới liên kết.
Mười agent, một dây chuyền
Đọc bằng chữ có chân, dùng bằng chữ không chân
Tech line
Dòng công nghệ bằng Barlow, ngăn bằng dấu chấm giữa.
- Java
- Spring Boot
- PostgreSQL
Ink figure
Khung tranh minh hoạ xám (hoà trộn multiply) tỉ lệ 9:16, 16:9, 3:4 hoặc 1:1, bắt buộc có mô tả.
Stat tile
Ô số liệu tint-1 (số Barlow Condensed, đơn vị, chú thích) và StatRow, một hàng ô bằng nhau.
21mục
Thành phần thương hiệu ở giai đoạn 4
60thành phần gốc
Thành phần gốc trong registry
2ngôn ngữ
Tiếng Anh và tiếng Việt
Language switch
Nút đổi EN · VI; ngôn ngữ hiện tại đậm màu mực, ngôn ngữ kia là liên kết thật.
ENVI
Folio line
Tên · chức danh · thành phố giữa hai đường kẻ mực, kèm nút đổi ngôn ngữ.
Phạm Đỗ Nhật MinhKỹ sư phần mềm AgenticTP. Hồ Chí Minh
ENVI
Proof
Ba dòng Vấn đề / Đã làm / Kết quả, chữ đầu đậm không chân, phần sau có chân.
- Vấn đề. Hồ sơ mời thầu được soạn thủ công, nên mỗi gói thầu đều bắt đầu từ trang trắng.
- Đã xây. Procurement Docs Platform lập, kiểm tra và xuất hồ sơ từ một nguồn duy nhất.
- Kết quả. Việc soạn thảo rút từ vài ngày xuống vài giờ, và mọi tài liệu đều có dấu vết để rà soát.
Story card
Thẻ bài: nhãn, tiêu đề, đoạn dẫn và dòng công nghệ dưới kẻ đậm, có thể kèm tranh 9:16.
Công việc · 09/2025 – nay
Mười agent, một dây chuyền
Một dây chuyền tài liệu trong đó mỗi agent đảm nhận một công đoạn, để mọi bản thảo đều truy được về nguồn.
- Java
- Spring Boot
- PostgreSQL
Cover
Bìa: nhãn, tiêu đề hai giọng và cảnh vẽ mực 16:9, cho trang tiêu đề và ảnh chia sẻ.
Nghiên cứu điển hình · 2026
Mười agent, một dây chuyền
Language bar
Thanh mời đổi ngôn ngữ ở cuối trang, viết bằng chính ngôn ngữ được mời, chỉ hiện một lần.
Mode switcher
Dải tint-2 hỏi bạn đến tờ báo vì điều gì, với hai thẻ lớn để chọn.
Điều gì đưa bạn đến với tờ báo?
CV, các dự án gần đây và cách một dự án đi từ yêu cầu đến khi phát hành.
CTA band
Dải kêu gọi nền đảo màu: nhãn rao vặt, tiêu đề Playfair hai giọng và nút viền.
Rao vặt
Đặt một cuộc gọi miễn phí 20 phút. Không ràng buộc.
Editor panel
Khối liên hệ: các dòng liên hệ có nhãn, chỗ đặt mã QR và nút gửi thư.
Liên hệ
- name@example.com
- linkedin.com/in/example
- Điện thoại
- +00 000 000 000
- GitHub
- github.com/example
Quét để lưu liên hệ của tôi
Calling card
Danh thiếp 390 × 844 không cuộn: bốn nút liên hệ, hai ô và chân trang đen.
The EloquentDanh thiếpTP. Hồ Chí Minh
ENVI
Phạm Đỗ Nhật Minh
Kỹ sư phần mềm Agentic. Xây dựng Procurement Docs Platform.
Tuyển dụngSẵn sàng cho vị trí phù hợp
Dịch vụPhần mềm Agentic, làm theo yêu cầu
07
Khối6 mục
Trọn một phần trang, từ đầu báo tới khung in A4.
Article layout
Bố cục bài viết: liên kết trang nhất, nhãn, tiêu đề, đoạn mở, tác giả, cột nội dung và tóm tắt.
Ghi chép · Tháng 11/2026
Đường kẻ, không phải khung: một tờ báo lưu trữ, viết bằng mã
Bộ thành phần mượn cấu trúc từ trang nhất của tờ báo như thế nào: đường kẻ mảnh, đường kẻ đậm và hai giọng chữ.
Bởi Minh Pham · 09/11/2026 · 6 phút đọc
Tờ báo không bao giờ vẽ khung quanh một bài viết. Nó mở mỗi chuyên mục bằng một đường kẻ đậm, ngăn các bài bằng đường kẻ mảnh, rồi để chữ làm phần còn lại. Bộ thành phần này theo cùng một kỷ luật.
Mỗi tiêu đề có hai giọng: phần dẫn chữ đứng và phần đuôi chữ nghiêng. Phần đầu cho người đọc biết bài viết về gì; phần sau cho họ biết vì sao nên ở lại. Cả hai cùng một phông chữ, nên trang giữ một giọng điệu.
Màu sắc vắng mặt có chủ đích. Lỗi, thành công và cảnh báo được phân biệt bằng biểu tượng, đường kẻ hoặc dải gạch chéo, không bao giờ chỉ bằng sắc độ, nên trang vẫn dễ đọc khi in và khi chuyển sang thang xám.
Đọc bằng chữ có chân, dùng bằng chữ không chân.
Masthead
Đầu báo: tên báo, dòng folio có nút đổi ngôn ngữ và thanh mục.
Phạm Đỗ Nhật MinhKỹ sư phần mềm AgenticTP. Hồ Chí Minh
ENVI
Press footer
Chân trang khối đảo màu duy nhất: liên hệ, tải CV, chỗ đặt mã QR, nút đổi ngôn ngữ.
Philosophy carousel
Ba thẻ quan điểm (I, II, III), mỗi thẻ một trích dẫn Playfair và đoạn giải thích.
Hãy xây cỗ máy giúp tạo ra sản phẩm.
Các agent đảm nhận phần việc lặp lại. Thời gian của tôi dành cho phán đoán, rà soát và vài quyết định buộc phải do con người đưa ra.
— Minh Pham
Classifieds form
Biểu mẫu đặt việc (tên, công ty, thư điện tử, mô tả, bốn cỡ dự án) có bảng tổng hợp lỗi.
Print A4
Khung trang A4 (210 × 297mm, lề 44 đến 52px, cột chính và cột phụ 210 đến 228px) cho bản in.
Sơ yếu lý lịch
Alex Mẫu
Kỹ sư phần mềm, hồ sơ mẫu
Giới thiệu
Nội dung mẫu. Một đoạn ngắn về bản thân, dài ba hoặc bốn dòng, nói rõ người này xây dựng gì và làm việc ra sao.
Kinh nghiệm
2023 – nay
Kỹ sư trưởng, Procurement Docs Platform
Nội dung mẫu. Thiết kế quy trình tài liệu và các màn hình duyệt, giữ cho việc phát hành luôn êm.
2020 – 2023
Kỹ sư cao cấp, Example Studio
Nội dung mẫu. Xây công cụ nội bộ cho biên tập viên và viết bộ kiểm thử đầu tiên cho hệ thống xuất bản.
2017 – 2020
Kỹ sư, Example Works
Nội dung mẫu. Duy trì một nhóm dịch vụ và chuyển đội ngũ sang phát hành hằng tuần.