SWISS PRECISION GRID · 28 COMPONENTS · 461 MOTION CURVES · ZERO RUNTIME CSS
Hệ Thống Design Token & 28 Component Chuẩn Thụy Sĩ
Sao Chép Trực Tiếp Không Phụ Thuộc Vào Framework Hay Thư Viện Quản Lý Theme
Bộ quy chuẩn thiết kế thuần HTML/CSS được xây dựng theo triết lý Bauhaus và Swiss Typography: Chuyển đổi Dark / Light mode tức thời bằng CSS Variables, 5 bảng màu động kiểm thử trực tiếp, và 461 công thức chuyển động vật lý.
14
Nhóm Design Tokens lõi
28
Component HTML/CSS độc lập
461
Công thức chuyển động vật lý
5
Bảng màu chuẩn hoá đa ngành
Interactive Palette Engine
Bộ Thử Nghiệm Bảng Màu & Token Trực Tiếp
Bấm vào các bảng màu dưới đây để chứng kiến toàn bộ hệ thống token và giao diện đổi màu ngay lập tức mà không cần tải lại trang.
/* tokens.css — Zero-Runtime Tokens */
:root {
--brand: #1d4ed8;
--brand-soft: #dbeafe;
--font-heading: 'Plus Jakarta Sans', sans-serif;
--radius-md: 12px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
✦ Sửa biến CSS ở gốc, toàn bộ 28 component tự động thích ứng chuẩn xác mà không cần biên dịch lại.
Component Library
Danh Mục 28 Component Độc Lập
Mỗi component là một file HTML/CSS độc lập. Bấm sao chép và dán thẳng vào dự án bất kỳ (React, Vue, Astro, HTML thuần).
THẺ & HIỂN THỊ
Card Pricing & Blog
HERO & BANNER
Hero Centered & Split
FORM & INPUT
Floating Labels & Multi-step
ĐIỀU HƯỚNG
Sticky Nav & Mega Menu
TƯƠNG TÁC
Modal, Drawer & Accordion
DỮ LIỆU & PHẢN HỒI
Data Table & Toasts
Motion Physics Engine
461 Công Thức Chuyển Động Vật Lý
Đường cong Bézier chuẩn mực và bảng thời lượng phân cấp chính xác từng tương tác micro-animation.
Tức thì (Micro Feedback)
Đổi màu khi rê chuột, phản hồi bấm nút tức thời.
Nhanh (State Transition)
Hiện tooltip gợi ý, đổi trạng thái switch.
Vừa (Layout Accordion)
Mở đóng FAQ accordion, trượt ngăn kéo drawer.
Chậm (Scroll Reveal)
Hiện dần các khối nội dung khi cuộn màn hình tới.
Điện ảnh (Cinematic Scene)
Chuyển cảnh toàn trang mượt mà.
Clear Answers
Câu Hỏi Thường Gặp
Thư viện này có dùng được với React, Next.js hay Vue không?
+
Hoàn toàn tương thích 100%. Component là HTML và CSS thuần tuý nên bạn chỉ việc dán trực tiếp vào JSX hoặc template Vue mà không cần bất kỳ wrapper hay adapter phức tạp nào.
Vì sao không đóng gói thành npm package?
+
Vì mục tiêu là bạn sở hữu 100% mã nguồn. Đóng gói npm tiện cập nhật nhưng rất khó tuỳ biến sâu. Với một hệ thống thiết kế nội bộ chuyên nghiệp, khả năng tinh chỉnh từng pixel quan trọng hơn.
Cơ chế chuyển đổi Sáng / Tối hoạt động ra sao?
+
Chạy bằng thuộc tính
data-theme="dark" trên thẻ gốc HTML. Toàn bộ biến màu CSS tự động chuyển đổi đồng bộ mà không cần phụ thuộc vào bất kỳ thư viện JS nặng nề nào.