Design system
Atelier Tre
Phòng trưng bày trắng, đọc như một cuốn catalogue bảo tàng: nền trắng tuyệt đối, ảnh lớn có chú thích nghiêng đánh số "Hình 01", chữ Work Sans mảnh 300 cho tiêu đề và cỡ rất nhỏ in hoa giãn chữ cho nhãn. Đường kẻ tóc 1px thay cho khung, bóng đổ và bo góc. Màu duy nhất là ô vuông xanh lá tre đánh dấu thứ đang chọn. Lưu trữ dự án lọc theo loại hình, năm, địa điểm và chuyển giữa lưới ảnh và bảng mục lục có ảnh nổi theo con trỏ.
Font
Tiêu đề
Work Sans 300
Nhà cho khí hậu nhiệt đới
Nội dung
Work Sans 400
Chúng tôi vẽ nhà ở, quán cà phê và nơi lưu trú nhỏ, bắt đầu từ hướng gió và bóng nắng của khu đất.
Nhãn & chú thích
Work Sans 500 in hoa · 400 nghiêng
Cat. 014 · Hình 03 — Giếng trời nhà Gió
Màu
Nền
#FFFFFF
Tường phòng trưng bày. CMS: Màu nền
Chữ
#141414
CMS: Màu chữ
Chính
#141414
Nút chữ nhật đen. CMS: Màu chính
Nhấn
#4F6B3A
Xanh lá tre, chỉ cho ô đánh dấu. CMS: Màu nhấn
Tường xám
#F2F2EF
Nền chờ ảnh, cột gói nổi bật. CMS: Màu phụ
Kẻ tóc
chữ 10% / 24%
Tự tính
Thang chữ
Bìa
Tinh tế trong từng chi tiết
Work Sans 300 · 38→88px · -4%
H1
Tinh tế trong từng chi tiết
Work Sans 300 · 34→64px · -3,5%
H2
Tinh tế trong từng chi tiết
Work Sans 300 · 27→44px · -3%
Thân
Tinh tế trong từng chi tiết
Work Sans 400 · 15→16px · dòng 1,65
Chú thích
Tinh tế trong từng chi tiết
Work Sans 400 nghiêng · 12px
Nhãn
Tinh tế trong từng chi tiết
Work Sans 500 · 10,5px · in hoa · +14%
Bo góc
- Mọi thành phần0
- Chữ cái đầu (người)999px
Khoảng cách
- Khung nội dung1408px, lề 20 → 40px
- Khoảng section56px → 96px
- Lưới12 cột, khe 24–40px; chữ hay lệch về cột 8–12
Chuyển động
Hiện dần 900ms cubic-bezier(.16,1,.3,1): mờ → rõ, nhích 16px. Ảnh lớn mở từ trên xuống bằng clip-path 1,4s. Ảnh phóng 2,5% rất chậm khi rê. Ảnh bìa trong bảng mục lục trôi theo con trỏ (lerp).
Thành phần
Nhà Gạch Thủ Đức
Nhà ở · Thủ Đức, TP.HCM · 210 m²
Hình 01 — Mặt tiền gạch thông gió
- Địa điểm
- Thủ Đức, TP.HCM
- Diện tích
- 210 m²
- Vật liệu
- Gạch nung Bình Dương, gỗ dầu
Trang đang xem