Việc thiết kế giao diện theo phong cách tinh gọn (compact design) đòi hỏi sự kết hợp chặt chẽ giữa tính nhất quán, phân cấp thị giác và cân bằng không gian. Mục tiêu là tối đa hóa lượng thông tin hiển thị mà không gây cảm giác chật chội hay khó chịu cho người dùng.

/* Định nghĩa khung chứa chính với khoảng cách tối ưu */
.app-view-layout {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Giảm từ 16px xuống 12px để tăng mật độ thông tin */
}

/* Hiệu chỉnh các thành phần Header và Info */
.info-section-wrapper {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 0;

  /* Tối ưu padding cho Element Plus Descriptions */
  :deep(.el-descriptions__label),
  :deep(.el-descriptions__content) {
    padding: 8px 12px; 
  }
}

/* Thanh công cụ tinh gọn */
.action-toolbar {
  background: #ffffff;
  padding: 10px 16px; 
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Khu vực bộ lọc tìm kiếm */
.filter-panel {
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 4px;
  
  .filter-form-inline {
    gap: 10px; 
  }
}

/* Tinh chỉnh bảng dữ liệu mật độ cao */
:deep(.el-table) {
  .el-table__header th {
    height: 38px;
    padding: 4px 0;
    background-color: #f8f9fa;
  }
  
  .el-table__row td {
    padding: 5px 0; /* Giảm padding dòng từ 8px xuống 5px */
  }
}

/* Căn chỉnh phân trang */
:deep(.el-pagination) {
  margin-top: 10px;
  padding: 8px 0;
}

/* Spacing cho form chi tiết */
.form-compact-item {
  margin-bottom: 14px;
}

.grid-layout-tight {
  display: grid;
  gap: 12px;
}
    

Để đạt được sự chuyên nghiệp trong thiết kế layout tinh gọn, cần tuân thủ các nguyên tắc cốt lõi sau:

• Hệ thống khoảng cách đồng nhất: Sử dụng các bội số của 4 (4px, 8px, 12px, 16px) để tạo ra sự nhịp nhàng trong bố cục.
• Phân cấp vùng chức năng: Sử dụng khoảng cách nhỏ cho các dữ liệu liên quan chặt chẽ (như trong bảng) và khoảng cách lớn hơn để phân tách các khối chức năng chính.
• Tối ưu hóa không gian tương tác: Dù thu hẹp khoảng cách, các thành phần như nút bấm hoặc ô nhập liệu vẫn cần đảm bảo diện tích click an toàn để không ảnh hưởng đến trải nghiệm người dùng (UX).
• Sử dụng đổ bóng nhẹ: Thay vì dùng đường kẻ viền dày, hãy sử dụng đổ bóng (box-shadow) mờ để phân tách các lớp mà không làm giao diện bị rối.

Bên cạnh bố cục, hệ thống typography (kiểu chữ) cũng đóng vai trò quyết định đến độ tinh tế của giao diện. Việc chuẩn hóa kích thước và màu sắc chữ giúp người dùng quét thông tin nhanh hơn.

/* Hệ thống biến Typography và Màu sắc */
:root {
  --text-size-tiny: 12px;
  --text-size-small: 13px;
  --text-size-base: 14px;
  --text-size-large: 16px;
  
  --color-text-main: #2d3436;      /* Chữ chính */
  --color-text-regular: #636e72;   /* Chữ nội dung */
  --color-text-muted: #b2bec3;     /* Chữ phụ, placeholder */
  --color-primary-brand: #0984e3;  /* Màu thương hiệu */
}

/* Header và Tiêu đề Card */
.main-title, 
.card-caption,
:deep(.el-table__header th) {
  font-size: var(--text-size-base);
  font-weight: 600;
  color: var(--color-text-main);
}

/* Cấu trúc label trong form và mô tả */
:deep(.el-descriptions__label),
:deep(.el-form-item__label) {
  font-size: var(--text-size-small);
  color: var(--color-text-regular);
}

/* Nội dung dữ liệu */
:deep(.el-descriptions__content),
:deep(.el-table__row td),
.input-field-text {
  font-size: var(--text-size-small);
  color: var(--color-text-main);
}

/* Định dạng đặc biệt cho dữ liệu số hoặc mã định danh */
.code-identifier {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  color: var(--color-primary-brand);
}

/* Hiển thị thời gian và trạng thái */
.timestamp-display {
  font-size: var(--text-size-tiny);
  color: var(--color-text-muted);
}

/* Button tinh chỉnh */
.btn-action-standard {
  font-size: var(--text-size-small);
  
  &.btn-link-style {
    font-size: var(--text-size-tiny);
  }
}

/* Phân trang và Empty state */
:deep(.el-pagination),
:deep(.el-empty__description) {
  font-size: var(--text-size-small);
}
    

Các nguyên tắc áp dụng cho hệ thống typography chuyên nghiệp:

1. Giới hạn thang đo kích thước: Chỉ nên sử dụng từ 3 đến 4 kích thước font chữ cố định để tránh gây nhiễu thị giác.
2. Phân bậc bằng độ đậm (Font-weight): Thay vì tăng kích thước chữ quá lớn, hãy sử dụng font-weight: 500 hoặc 600 để nhấn mạnh tiêu đề.
3. Sử dụng font monospace: Đối với các loại dữ liệu như mã số thuế, số tài khoản, hoặc ngày giờ, font chữ đơn cách (monospace) giúp tăng khả năng đọc và căn chỉnh chính xác.
4. Độ tương phản màu sắc: Đảm bảo sự phân cấp rõ ràng giữa văn bản chính và văn bản hỗ trợ thông qua bảng màu xám có sắc độ khác nhau.