Tasco Framework

Giao diện

Chữ, khoảng cách & mật độ ​

Font, cỡ chữ và khoảng cách của app Tasco được chỉnh cho màn hình nhiều dữ liệu: gọn hơn mặc định của Ant Design nhưng vẫn đủ lớn để đọc lâu không mỏi. Các bảng token trên trang sinh từ @tasco/theme.

Font ​

Vai tròFontĐộ đậm có sẵnDùng ở
Chữ thânQuicksand300, 400, 500, 600, 700Mọi nội dung, nhãn, ô nhập, bảng
Tiêu đềMontserrat400, 500, 600, 700Tiêu đề trang (CPageHeader), tiêu đề card (CCard), số liệu (CStatistic), tên app

Cả hai font có bộ ký tự tiếng Việt đầy đủ và được layer tự host qua @nuxt/fonts — app không gọi Google Fonts lúc chạy, font có sẵn cả trong mạng nội bộ. Khi font chưa tải xong, trình duyệt dùng font hệ thống trong stack dự phòng.

BiếnGiá trị
--tasco-font-family'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
--tasco-font-family-heading'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
--tasco-font-size14px

Thang cỡ chữ ​

Cỡ cơ bản là 14px. Component đã dùng sẵn các cỡ dưới đây — thiết kế màn hình mới chọn trong thang này, không thêm cỡ lẻ.

CỡĐộ đậmFontDùng cho
24px700MontserratGiá trị số liệu lớn (CStatistic)
20px700MontserratTiêu đề trang
14px500MontserratTiêu đề card, tiêu đề khối
14px400QuicksandNội dung, ô nhập, ô bảng, nút cỡ vừa
13px400–500QuicksandMô tả dưới tiêu đề trang, nhãn số liệu, trạng thái (CStatus)
12px600QuicksandNhãn trạng thái (CTag), breadcrumb, nút cỡ nhỏ
  • Nhấn mạnh trong câu bằng độ đậm 600, không đổi cỡ, không đổi màu.
  • Không viết HOA cả câu trong nội dung. Sidebar và menu ngang hiển thị chữ hoa là do CSS — nhãn trong cấu hình vẫn viết bình thường (Đơn hàng).
  • Số trong bảng và số liệu nên canh phải và dùng chữ số đều nhau (font-variant-numeric: tabular-nums) để cột số thẳng hàng.

Khoảng cách ​

Đơn vị cơ bản là 8px (--tasco-spacing-unit). Khoảng cách chọn theo bội số của đơn vị này, thêm 4px cho chỗ rất chặt:

KhoảngDùng cho
4pxGiữa nhãn và mô tả ngắn ngay dưới
8pxGiữa icon và chữ, giữa các nút trong một nhóm, lề vùng nội dung của khung app
12pxPadding dọc thân card
16pxPadding ngang card, khoảng cách giữa các ô form, giữa các khối trong trang
24pxTách hai nhóm nội dung khác hẳn nhau
BiếnGiá trị
--tasco-radius0px
--tasco-radius-lg0px
--tasco-spacing-unit8px

Bo góc bằng 0: thương hiệu Tasco dùng góc vuông cho card, nút, ô nhập và bảng. Đừng tự bo góc một khối riêng lẻ — khối đó sẽ lạc tông với phần còn lại.

Mật độ component ​

Ant Design mặc định dùng padding 24px cho card, form và modal — hợp với trang thưa. App nội bộ dày dữ liệu nên framework giảm xuống:

Thành phầnMặc định Ant DesignTasco
Chiều cao ô nhập, nút (nhỏ / vừa / lớn)24 / 32 / 40px28 / 36 / 44px
Padding thân card (dọc / ngang)24 / 24px12 / 16px
Khoảng cách dưới mỗi ô form24px16px
Padding ô bảng16px8px
Padding thân modal, drawer24px16px

Ô nhập và nút cao hơn mặc định (36px thay vì 32px) để dễ bấm và đọc; khoảng trống xung quanh thì nhỏ lại. Giá trị đang dùng:

BiếnGiá trị
--tasco-control-height-sm28px
--tasco-control-height-lg44px
--tasco-card-padding-block12px
--tasco-card-padding-inline16px
--tasco-card-heading-height36px
--tasco-card-heading-font-size14px
--tasco-form-item-margin16px
--tasco-table-cell-padding-block8px
--tasco-table-cell-padding-inline8px
--tasco-modal-body-padding16px
--tasco-control-height36px

Mật độ áp cho toàn bộ app, kể cả component antdv dùng trực tiếp trong @tasco/ui. Một màn hình cần thưa hơn thì tăng khoảng cách giữa các khối, không đổi padding bên trong component.

Dùng trong CSS của app ​

css
.don-hang__tong-hop {
  display: grid;
  gap: calc(var(--tasco-spacing-unit) * 2);
  padding: calc(var(--tasco-spacing-unit) * 1.5) calc(var(--tasco-spacing-unit) * 2);
  font-family: var(--tasco-font-family-heading);
}

Quy tắc đầy đủ: Viết CSS trong dự án.

Đổi font hoặc mật độ ​

Đổi ở @tasco/theme để mọi app đổi theo, không ghi đè trong từng dự án — xem Đổi design token.

Liên quan ​