D

System.Color

Không gian thiết kế
Bộ sẵn:

THIẾT LẬP MÀU SẮC

Preset chủ bộ màu

Mã màu cơ sở

Background

Màu nền mặc định của toàn website

Foreground

Màu chữ chính trên nền background

Secondary Background

Nền phụ (thường dùng cho sidebar/nav)

Secondary Foreground

Chữ chính trên nền phụ secondary

Primary Brand Action

Màu nhận diện, nút CTA, liên kết chính

Primary Foreground

Chữ trên nút primary (phải đủ tương phản)

Focus Ring Glow

Hào quang sáng khi nhấn phím tab focus vào ô

Muted Border Line

Viền mảnh phân chia ranh giới ngang dọc

Active Input Line

Viền ô nhập liệu khi di chuột hoặc gõ

Card Surface Base

Màu nền của các bảng thông số, thẻ thông tin

Card Foreground Text

Chữ chính bên trong thẻ hoặc card

Popover Bubble Base

Nền hộp thoại nổi, bóng đối thoại dropdown

Popover Foreground

Chữ viết bên trong hộp popover

Muted Disabled Color

Nền dải phụ hoặc phần tử bị tắt chế độ kích hoạt

Muted Foreground Caption

Màu tiêu đề phụ, chữ ghi chú nhỏ

Dùng cho tiêu đề lớn và nhãn nổi bật trong hệ thống

Dùng cho giao diện chung, nội dung bảng, nút bấm và nhãn mô tả

Tip: Click TỐI ƯU để tự động cân bằng viền (border), chữ ghi chú (muted text) hợp màu nền tương phản cao, tối giản thời gian căn chỉnh thủ công.

DucIT.dev Interactive Sandbox

Boldly Constructed.

Khai phóng sức mạnh của thiết kế đồng bộ. Thay đổi các token sắc tố để thấy toàn bộ giao diện Landing Page & Dashboard tự động đồng nhất, hỗ trợ đắc lực cho Tailwind CSS!

D

DucIT.dev

Design Workspace

DK

Cường Đỗ

ducit.dev@gmail.com

Xem thửBảng tin giao diện
Obsidian Lavender Dashboard
Tổng doanh thu

$15,231.89

+20.1% so với tháng trước

Tháng 5, 2026
T2T3T4T5T6T7CN
Mục tiêu tuần

Thiết lập hạn mức

350 KCAL / ngày

Xác thực & Tạo tài khoản

Trải nghiệm độ tương phản nút bấm, viền ô nhập liệu và hành vi focus.

hoặc nhập trực tiếp

Phân tích số phút tập luyện

Biểu đồ tổng quan tần suất vận động thực tế

Số phút chạy bộ
Cardio trong nhà
135 Phút
Thứ 2Thứ 3Thứ 4Thứ 5Thứ 6Thứ 7CN

Lịch sử giao dịch & AI Tagging

Cập nhật 1 giây trước
Nhóm dịch vụHóa đơn mãTrạng thái phân loạiCước phí
Tài liệu AI Prompts nâng cao#INV-9023AI / CLOUD$49.00
Gói Hosting VPS Cloud Run3000#INV-4822SUCCESS$120.00
Khóa học Content Creator Master#INV-2210CREATIVE$79.00

Hỗ trợ sẵn Tailwind v4 & v3

Tự động biên dịch sang mã cấu hình CSS Variable và JavaScript object chuẩn xác.

Tài liệu Markdown

Lưu lại tệp tin Design.md kèm theo các chỉ số tương phản trực quan về hệ máy tính của bạn.

Export thiết lập thiết kế đồng bộ

Copy và dán trực tiếp vào dự án của bạn để đồng bộ ngay lập tức

:root {
  --background: #0B0B12;
  --foreground: #F7F4FF;

  --primary: #A996FF;
  --primary-foreground: #0B0B12;

  --secondary: #11111A;
  --secondary-foreground: #B7B1CC;

  --card: #151520;
  --card-foreground: #F7F4FF;

  --popover: #1B1B29;
  --popover-foreground: #F7F4FF;

  --muted: #24243A;
  --muted-foreground: #7E7896;

  --destructive: #FF776B;
  --destructive-foreground: #0B0B12;

  --border: #29283A;
  --input: #3B3952;
  --ring: #A996FF;

  /* Typography Settings */
  --font-sans: var(--font-sans), ui-sans-serif, system-ui;
  --font-display: var(--font-sans), ui-sans-serif, system-ui;

  /* Accent Decorative Colors */
  --accent-pink: #FF7BCB;
  --accent-cyan: #35D5F4;
  --accent-coral: #FF776B;
  --accent-green: #22C55E;
  --accent-yellow: #F5C542;

  /* Additional Border Radius for Premium look */
  --radius-shell: 28px;
  --radius-card: 20px;
  --radius-button: 14px;
}
1024 x 768 Interactive Theme Studio Sandbox v2.4 (Vietnamese)