← Xem demo Design system · Nhịp Kho mẫu
Nhịp Studio

Design system

Nhịp

Thể thao, có lực và chuyển động nhưng vẫn gọn gàng: nền phấn, chữ mực, xanh cobalt làm màu chính, cam tín hiệu chỉ là chấm "đang diễn ra / hôm nay". Tiêu đề Barlow Condensed in hoa khít dòng, chữ nhấn mạnh in nghiêng (trên nền tối là chữ viền), số và nhãn JetBrains Mono, section tự đánh số 01, 02… Góc vuông hoàn toàn, đường kẻ mực thay cho bóng đổ. Thành phần riêng: tiêu đề cắt lát, dải chữ chạy theo vận tốc cuộn, bảng lịch lớp Thứ 2 – CN, thẻ huấn luyện viên chữ cái lớn, gói tập dạng vé có đường xé, đánh giá xếp bàn cờ.

Font

Tiêu đề

Barlow Condensed

Tập mạnh. Thở sâu. Đi xa.

Nội dung

Archivo

Lớp nhỏ tối đa 10 người, huấn luyện viên sửa từng động tác.

Số & nhãn

JetBrains Mono

06:00 · T2, T4, T6 · 60 phút

Màu

Nền

#F1F0EC

Trắng phấn. CMS: Màu nền

Chữ

#0E0F12

Mực; cũng là nền của lịch tập, đánh giá. CMS: Màu chữ

Chính

#2438E6

Cobalt: nút, dải chữ chạy, footer, chữ nhấn mạnh. CMS: Màu chính

Nhấn

#FF5B24

Cam tín hiệu: chỉ chấm "đang diễn ra", cột hôm nay. CMS: Màu nhấn

Làn

#DCDAD3

Nền ô chữ cái HLV, form. CMS: Màu phụ

Đường kẻ

chữ 14% / 30% trên nền

Tự tính

Thang chữ

Hiển thị

Tinh tế trong từng chi tiết

Condensed 700 in hoa · 54→192px · lh 0.86

H2

Tinh tế trong từng chi tiết

Condensed 700 in hoa · 42→100px · lh 0.9

H3

Tinh tế trong từng chi tiết

Condensed 600 in hoa · 26→36px

Số liệu

Tinh tế trong từng chi tiết

Condensed 700 · đếm lên khi cuộn tới

Thân

Tinh tế trong từng chi tiết

Archivo 400 · 15→16px

Nhãn

Tinh tế trong từng chi tiết

JetBrains Mono 500 · 11px · in hoa · +12%

Bo góc

  • Mọi thứ (nút, thẻ, ảnh, ô nhập)0 (CMS: Bo góc = Vuông)
  • Nút tròn mũi tên, chấm tín hiệu999px

Khoảng cách

  • Khung nội dung1408px, lề 16 → 40px
  • Khoảng section80px → 128px
  • Lưới12 cột, khe 32–40px; thẻ ghép sát nhau bằng khe 1px màu mực

Chuyển động

Nhanh và dứt khoát: hiện dần 700ms cubic-bezier(.2,.9,.1,1), nhích 28px, so le 70ms. Tiêu đề hero: mỗi ký tự cắt ba lát trượt ngang rồi rõ nét. Ảnh mở như cửa cuốn (clip-path, 1s). Dải chữ chạy liên tục, tăng tốc và đổi chiều theo vận tốc cuộn. Số liệu và giá đếm lên. Khung ảnh bộ môn bám con trỏ. Tôn trọng prefers-reduced-motion.

Thành phần

Nút
Tập thử miễn phí Chọn gói Xem lịch Hỏi qua Zalo
Chip & tín hiệu
60 phút · Mọi trình độ Chọn nhiều nhất Đang mở cửa
Ô nhập
Thẻ lớp trong lịch
Strength60 PHÚT
Yoga Flow60 PHÚT
Reformer50 PHÚT
Vé gói tập
Gói tháng

1.890.000đ

Tập không giới hạn lớp nhóm

Thẻ huấn luyện viên
MK
Lê Minh Khoa Strength
Dải chữ chạy

Tham chiếu 21st.dev

Gọi Zalo Tập thử miễn phí