← Xem demo Design system · An Tâm Kho mẫu

Design system

An Tâm

Phòng khám kiểu Thuỵ Sĩ: nền trắng xám lạnh, một màu xanh rêu đậm làm điểm tựa, chữ grotesk không chân. Lưới kẻ mảnh có dấu + ở góc, mỗi section mở bằng dải nhãn và số thứ tự. Thông tin xếp thành ô bento nền nhạt, giá công khai trong bảng so sánh. Không bóng đổ lớn, không gradient, không chữ nghiêng.

Font

Tiêu đề

Hanken Grotesk

Nụ cười khoẻ, không phát sinh chi phí

Nội dung

Manrope

Bác sĩ khám, chụp phim và báo giá trọn gói trước khi điều trị. Bạn chỉ trả đúng số tiền đã ký.

Số liệu

Hanken Grotesk (số đều)

28.500.000đ · 3.200+ ca

Nhãn

Manrope in hoa

Nha khoa thẩm mỹ · Quận 7

Màu

Nền

#F5F7F7

CMS: Màu nền

Chữ

#0F1C1F

CMS: Màu chữ

Chính

#0F5B54

Nút, icon, cột nổi bật. CMS: Màu chính

Phụ

#DDEBE8

Ô bento khi rê chuột, nhãn. CMS: Màu phụ

Nhấn

#1FA67A

Chấm "còn lịch". CMS: Màu nhấn

Ô bento

chính 6% trên nền

Tự tính

Thang chữ

H1

Tinh tế trong từng chi tiết

Grotesk 500 · 40→72px · -3.5%

H2

Tinh tế trong từng chi tiết

Grotesk 500 · 30→48px · -3%

Số

Tinh tế trong từng chi tiết

Grotesk 500 · số đều · 48px

H3

Tinh tế trong từng chi tiết

Grotesk 500 · 20–22px

Thân

Tinh tế trong từng chi tiết

Manrope 400 · 15→16px

Nhãn

Tinh tế trong từng chi tiết

Manrope 500 · 11px · in hoa · +20%

Bo góc

  • Thẻ, ô bentoCMS (mặc định 8px)
  • Nút, ô nhập60% bo thẻ
  • Dải số liệu, bảng0 / theo thẻ

Khoảng cách

  • Khung nội dung1152px, lề 24px, kẻ dọc hai mép
  • Khoảng section64px → 96px
  • Lưới bento3 cột, khe 16px, ô 2/3 – 1/3

Chuyển động

Tiêu đề hero hiện từng từ (45ms/từ, nhích 0.3em). Khối khác mờ → rõ, nhích 10px, 600ms cubic-bezier(.16,1,.3,1), so le 70ms. Đánh giá chạy ngang hai hàng ngược chiều, dừng khi rê. Menu điện thoại lật từng dòng. Tắt hết khi người dùng chọn giảm chuyển động.

Thành phần

Nút
Đặt lịch khám Xem bảng giá Giữ chỗ
Ô nhập
Dải nhãn đầu section
Dịch vụ 02

Điều trị đúng chỉ định, báo giá trước

Trạng thái Còn lịch khám trong tuần
Ô bento
từ 14.900.000đ

Trồng răng implant

Chụp CT 3D, máng hướng dẫn, bảo hành trụ trọn đời.

Ô số liệu + khung dấu +

15 năm

điều trị implant

4.9/5

đánh giá Google

Hàng bảng so sánh giá
Bảo hành trụ 10 năm Trọn đời Trọn đời
Máng hướng dẫn phẫu thuật

Tham chiếu 21st.dev