Design System | Batdongsan.app

1. Visual Theme & Atmosphere

Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass.

NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)
Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark)
Near-black text via rgba(0,0,0,0.95) — not pure black, creating micro-warmth
Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout — whisper-weight division
Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth

2. Color Palette & Roles

Primary & Brand Secondary

Notion Black

rgba(0,0,0,0.95)

Pure White

#ffffff

Notion Blue

#0075de

Deep Navy

#213183

Warm Neutral Scale

Warm White

Warm Dark

Gray 500

Gray 300

Semantic Accent Colors

Teal#2a9d99

Green#1aae39

Orange#dd5b00

Pink#ff64c8

Purple#391c57

Brown#523410

3. Typography Rules

Compression at scale: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px.

Role	Properties	Visual
Display Hero	64px / 700 / -2.125px	Write
Display Secondary	54px / 700 / -1.875px	Plan
Section Heading	48px / 700 / -1.5px	Organize
Sub-heading	26px / 700 / -0.625px	Design systems
Card Title	22px / 700 / -0.25px	Feature note
Body (Base)	16px / 400 / normal	Warm reading text.
Badge	12px / 600 / +0.125px	Tracking+

4. Component Stylings

Buttons

Feedback Badges

Active Pending Failed Draft

5. Forms & Tables

Email Address *

Sử dụng email cá nhân để nhận mã xác thực.

Multi-Factor Authentication Yêu cầu xác thực qua điện thoại.

Tên Dự án	Trạng thái	Role	Action
V Vinhomes Grand Park	Active	Owner

6. Layout Principles & Grid

Grid & Container System: Chiều rộng tối đa của container là 1200px. Các khu vực tính năng (Feature sections) thường dùng layout dạng lưới (Grid) 2-3 cột. Spacing base unit là 8px.

1 Column (Hero / Content)

1200px max-width

3 Columns (Cards / Posts)

1/3

7. Depth & Elevation

Whisper (Level 1)

1px solid rgba(0,0,0,0.1)

Soft Card (Level 2)

4-layer shadow stack (max opacity 0.04)

Deep Card (Level 3)

5-layer shadow stack (max opacity 0.05, 52px blur). Used for Modals and Hero elements.

8. Background Patterns

Mẫu nền lưới kiến trúc (Architectural Grid) mang lại cảm giác kỹ thuật, đo lường (Data-driven) rất phù hợp với dự án BĐS. Mẫu lưới này giúp phân chia không gian rõ ràng nhưng không quá ồn ào (opacity cực thấp).

Architectural Grid

Tailwind Arbitrary Variant Config

Mã cấu hình Tailwind (Sử dụng cho thẻ main):

Quy định bắt buộc: Lưới nền (Grid Background) chỉ được tác động lên nội dung body chính. Phải sử dụng thẻ cha là relative và lưới là absolute. Tuyệt đối không dùng fixed để tránh lưới bị tràn xuống và đè lên Footer.

<!-- Wrapper Background Grid -->
<main class="relative">
  <div class="absolute inset-0 pointer-events-none z-0 overflow-hidden">
    <div class="absolute inset-0 bg-[linear-gradient(to_right,rgba(0,0,0,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.05)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_70%_70%_at_50%_0%,#000_100%,transparent_100%)] opacity-70"></div>
  </div>
  <!-- Các nội dung trang web... -->
</main>

Lưu ý: Mẫu lưới thường được kết hợp chung với màu nền var(--n-warm-white) để đạt cảm giác bề mặt giấy mịn.