← Xem demo Design system · An Cư Kho mẫu
An Cư Realty

Design system

An Cư

Sàn giao dịch đáng tin pha chất boutique: nền giấy trắng ấm, mực chàm, hồng "sổ hồng" làm điểm nhấn. Dữ liệu (giá, m², phòng ngủ, đơn giá/m²) dày nhưng yên: số đặt bằng mono nhỏ, giá bằng serif đậm trong viên chàm nhạt, thẻ trắng bo 14px viền mảnh. Khối features đọc quy ước "Nhãn: giá trị" để tự thành thẻ tin đăng có lọc, thẻ khu vực có biểu đồ, hoặc thẻ chuyên viên.

Font

Tiêu đề

Petrona

Tìm đúng căn, ở thật lâu

Nội dung

Work Sans

Căn hộ 2 phòng ngủ, ban công hướng Đông Nam, sổ hồng riêng, bàn giao nội thất cơ bản.

Số liệu & nhãn

Reddit Mono

AC-2411 · 82 m² · ≈ 83 tr/m²

Màu

Nền

#F6F5F1

CMS: Màu nền

Chữ

#181A2C

Mực chàm. CMS: Màu chữ

Chính

#2B3272

Chàm: nút, giá, chip đang chọn. CMS: Màu chính

Nhấn

#C4566A

Hồng "sổ hồng": chữ nghiêng, thẻ giảm giá, chip pháp lý. CMS: Màu nhấn

Phụ

#E6E3EE

Nền giấy của dải khu vực, chân trang. CMS: Màu phụ

Chàm nhạt

chính 7% trên nền

Viên giá, mục menu đang mở

Đang trực

#1F8A5B

Chấm xanh nhấp nháy, thẻ "Mới", xu hướng tăng

Thang chữ

H1

Tinh tế trong từng chi tiết

Petrona 500 · 38→70px · -2,5%

H2

Tinh tế trong từng chi tiết

Petrona 500 · 30→46px · -2%

Giá

Tinh tế trong từng chi tiết

Petrona 600 · số lining tabular

H3

Tinh tế trong từng chi tiết

Work Sans 600 · 17px

Thân

Tinh tế trong từng chi tiết

Work Sans 400 · 15→16px

Nhãn

Tinh tế trong từng chi tiết

Reddit Mono 500 · 11px · in hoa · +8%

Bo góc

  • Thẻ, ảnh14–20px
  • Nút, ô nhập10px
  • Chip lọc, viên giá999px
  • Thẻ trên ảnh7px

Khoảng cách

  • Khung nội dung1248px, lề 16 → 32px
  • Khoảng section64px → 96px
  • Lưới tin1 → 2 → 3 cột, khe 20px

Chuyển động

Hiện dần 500ms cubic-bezier(.22,1,.36,1): mờ → rõ, nhích 12px, nhoè 6px → 0 (hero-09). Ảnh thẻ phóng 6% và tối nhẹ khi rê, nút mũi tên trượt lên (card-02). Lọc tin: ô hiện lại phóng từ 96% (filter-grid). Cột biểu đồ mọc từ đáy có độ nảy (stats-card-1). Chấm "đang trực" nhấp nháy 2s.

Thành phần

Nút
Định giá miễn phí Hỏi chuyên viên Gọi lại cho tôi Xem tất cả tin đăng
Chip lọc có bộ đếm · ô phân đoạn
Thủ Đức 4 Quận 7 3
Thẻ trên ảnh · pháp lý · giá
Mới Giảm 5% Độc quyền
Sổ hồng riêng 6,8 tỷ ≈ 83 tr/m²
Hàng thông số (card-02)
2 phòng ngủ
2 WC
82 m²
Ô nhập
Tìm nhà

Tham chiếu 21st.dev