# Planpoint

> Planpoint — Style Reference

## Prompt Content

```
# Planpoint — Style Reference
> Bản thiết kế trên bàn vẽ trắng — một sơ đồ bất động sản tương tác được hiển thị trên giấy tinh khiết, với một cây bút xanh và một bút highlight vàng để nhấn mạnh.

**Theme:** light

Planpoint sử dụng thẩm mỹ bản thiết kế bất động sản trên nền canvas trắng sạch: khoảng trắng rộng rãi, các thành phần hình pill, và display type đậm, tự tin mang phong cách bản vẽ mặt bằng được phác thảo trên giấy chất lượng cao. Giao diện gần như đơn sắc — chữ gần đen (#1d1d1f) và bề mặt trắng đảm nhận toàn bộ trọng lượng cấu trúc — với một màu xanh lam duy nhất (#0f68ea) dành riêng cho hành động chính và một màu vàng ấm (#ffcb00) chỉ xuất hiện như điểm nhấn mới lạ. Các component giữ nhẹ nhàng và mềm mại: bán kính pill lớn, một drop shadow nhẹ ở độ mờ 6%, không có gradient trang trí hay skeuomorphism. Typography là yếu tố thiết kế chủ đạo: Inter ở kích thước cực lớn (headline 50–72px, display 144px) với negative tracking dày đặc mang lại thẩm quyền kiến trúc cho trang, trong khi body text ở kích thước thoải mái 16–18px với line height rộng rãi.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Ink | `#1d1d1f` | `--color-ink` | Văn bản chính, nét icon, button fill tối — màu gần đen hơi ấm, chọn thay vì đen tuyền để tạo cảm giác in ấn thay vì kỹ thuật số |
| White | `#ffffff` | `--color-white` | Nền trang, bề mặt card, chữ trên button tối, tất cả input field |
| Mist | `#f0f2f4` | `--color-mist` | Bề mặt nâng nhẹ, button fill không hoạt động, nền card phụ |
| Fog | `#e5e6e8` | `--color-fog` | Viền mảnh, divider nhẹ, phân cách section |
| Carbon | `#000000` | `--color-carbon` | Viền navigation, điểm nhấn đen tuyền khi cần độ tương phản tối đa |
| Slate | `#333333` | `--color-slate` | Văn bản phụ nhẹ nhàng, viền ảnh phụ |
| Midnight | `#00051a` | `--color-midnight` | Màu hành động tím cho button fill, trạng thái navigation được chọn, và khoảnh khắc chuyển đổi tập trung. |
| Signal Blue | `#0f68ea` | `--color-signal-blue` | Primary CTA fill và outline, accent navigation hoạt động, màu hành động đơn sắc duy nhất trong hệ thống |
| Link Blue | `#007aff` | `--color-link-blue` | Màu hyperlink, accent nét icon — màu xanh Apple-system dùng cho inline text link và iconography tương tác |
| Highlight | `#ffcb00` | `--color-highlight` | Màu hành động vàng cho button fill, trạng thái navigation được chọn, và khoảnh khắc chuyển đổi tập trung. |
| Deep Navy | `#000a3b` | `--color-deep-navy` | Bề mặt tối hiếm gặp cho card nổi bật hoặc hero block — màu gần đen có chiều sâu |

## Tokens — Typography

### Inter — Kiểu chữ toàn diện cho mọi thứ — nav, body, heading, display. Tính trung lập hình học và dải weight rộng của Inter cho phép hệ thống mở rộng từ caption 14px đến display 144px mà không cần đổi font. Kích thước display ở weight 600–700 với negative tracking dày đặc tạo nên thẩm quyền kiến trúc cho trang — headline có cảm giác được khắc, không phải được tạo kiểu. · `--font-inter`
- **Thay thế:** system-ui, -apple-system, Segoe UI, Roboto, sans-serif
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 14, 16, 18, 22, 23, 29, 32, 43, 50, 72, 144
- **Line height:** 1.50, 1.55, 1.60 cho body; 1.10–1.30 cho heading; 0.90–1.00 cho display
- **Letter spacing:** -0.07em ở 14px, -0.06em ở 22px, -0.044em ở 29px, -0.036em ở 43px, -0.031em ở 72px, -0.027em ở 144px — negative tracking mạnh ở mọi kích thước, nén các dạng hình học để tăng mật độ và hiện đại
- **OpenType features:** `"cv11", "ss01"`
- **Vai trò:** Kiểu chữ toàn diện cho mọi thứ — nav, body, heading, display. Tính trung lập hình học và dải weight rộng của Inter cho phép hệ thống mở rộng từ caption 14px đến display 144px mà không cần đổi font. Kích thước display ở weight 600–700 với negative tracking dày đặc tạo nên thẩm quyền kiến trúc cho trang — headline có cảm giác được khắc, không phải được tạo kiểu.

### system-ui — Fallback phụ cho badge và link rendering khi tốc độ hệ thống quan trọng hơn độ tinh tế của Inter · `--font-system-ui`
- **Thay thế:** -apple-system, BlinkMacSystemFont, Segoe UI
- **Weights:** 500
- **Kích thước:** 14
- **Line height:** 1.50
- **Letter spacing:** -0.0410em
- **Vai trò:** Fallback phụ cho badge và link rendering khi tốc độ hệ thống quan trọng hơn độ tinh tế của Inter

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|-----------|-------------|----------------|-------|
| caption | 14px | 1.5 | -0.98px | `--text-caption` |
| body-sm | 16px | 1.6 | -1.07px | `--text-body-sm` |
| body | 18px | 1.55 | -1.17px | `--text-body` |
| subheading | 22px | 1.3 | -1.32px | `--text-subheading` |
| heading-sm | 29px | 1.25 | -1.28px | `--text-heading-sm` |
| heading | 43px | 1.15 | -1.55px | `--text-heading` |
| heading-lg | 50px | 1.1 | -1.65px | `--text-heading-lg` |
| display | 72px | 1 | -2.23px | `--text-display` |
| display-xl | 144px | 0.9 | -3.89px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** rộng rãi

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 28 | 28px | `--spacing-28` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 108 | 108px | `--spacing-108` |
| 140 | 140px | `--spacing-140` |
| 240 | 240px | `--spacing-240` |

### Border Radius

| Element | Giá trị |
|---------|--------|
| tags | 46.8px |
| cards | 28.8px |
| badges | 100px |
| inputs | 18px |
| buttons | 100px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.06) 0px 8px 48px 0px` | `--shadow-xl` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 14px

## Components

### Primary Pill Button
**Vai trò:** Main call-to-action — button xanh fill đơn lẻ

Fill với #0f68ea (Signal Blue), chữ trắng ở 16px Inter weight 500–600, bo tròn hoàn toàn ở 100px radius, padding 20px 22px. Nằm nổi bật trong nav và hero. Một soft shadow ở rgba(0,0,0,0.06) 0px 8px 48px 0px tạo độ nâng mà không nặng nề.

### Dark Pill Button
**Vai trò:** Secondary navigation CTA trong header

Dark fill (#1d1d1f Ink), chữ trắng, 100px radius, 22px padding ngang, 20px dọc. Dùng cho các hành động cấp nav như "Free trial" khi màu xanh sẽ cạnh tranh với primary content CTA.

### Outline Pill Button
**Vai trò:** Tertiary hoặc hành động ghép đôi

Transparent fill, viền 1px ở #1d1d1f hoặc #ffffff, màu chữ tương ứng, 100px radius, 22px padding. Dùng cho "See what's new" và "Book a demo" ghép đôi bên dưới hero video.

### New Badge
**Vai trò:** Chỉ báo mới lạ trên tính năng hoặc thông báo

Yellow fill (#ffcb00 Highlight), chữ tối (#1d1d1f) ở 14px Inter weight 500, pill bo tròn hoàn toàn (100px), padding 2px 10px. Xuất hiện như dấu câu ấm áp bên cạnh tên tính năng như "Redesigned Editor".

### Hero Section
**Vai trò:** Value proposition màn hình đầu tiên

White canvas, headline căn giữa ở 72px Inter weight 700 với tracking -2.23px, màu #1d1d1f. Subhead ở 18px màu #1d1d1f hoặc xám nhẹ. Bên dưới: video embed tỷ lệ 16:9 với khung nền xanh lam đặc (#0f68ea) và nút play màu trắng.

### Video Embed Frame
**Vai trò:** Container trình diễn sản phẩm

Bảng nền xanh #0f68ea full-bleed chứa video player. Khung xanh lam làm cho video trở thành điểm neo thị giác của trang và củng cố màu thương hiệu như hành động hướng tới.

### Trust Headline
**Vai trò:** Tiêu đề phần bằng chứng xã hội

Căn giữa ở 43px Inter weight 600, #1d1d1f, tracking -1.55px, với hai dòng: "Trusted by successful developers, property owners & marketing teams alike."

### Logo Cloud
**Vai trò:** Grid logo khách hàng/đối tác

Logo hiển thị trong grid 3 hàng, mỗi hàng 6–7 cột, mỗi logo nằm trong container hình pill #f0f2f4 (Mist) với 18px radius. Logo hiển thị ở màu thương hiệu gốc để thêm đa dạng thị giác trong khi container trung tính giữ nhịp điệu nhất quán.

### Top Navigation Bar
**Vai trò:** Header toàn trang

Nền trắng, cao 64–80px. Bên trái: logo kim cương xanh + wordmark "Planpoint" ở #1d1d1f. Giữa-trái: nav link dạng text ở 16px Inter weight 500, #1d1d1f. Bên phải: icon cờ ngôn ngữ, "Support", "Login" text link, sau đó dark pill CTA "Free trial" với icon mũi tên phải.

### Card Surface
**Vai trò:** Container nội dung, logo tile, feature block

Nền trắng (#ffffff) hoặc Mist (#f0f2f4), 28.8px border radius, 24px padding. Tùy chọn viền 1px ở #f0f2f4 hoặc #e5e6e8. Soft shadow ở rgba(0,0,0,0.06) 0px 8px 48px 0px để tạo độ nâng khi cần.

### Input Field
**Vai trò:** Form text input (không hiển thị trong screenshot nhưng được hệ thống ngụ ý)

White fill, viền 1px ở #e5e6e8 (Fog), 18px radius, placeholder text 16px Inter ở #333333. Trạng thái focus: viền chuyển sang #0f68ea Signal Blue.

## Do's and Don'ts

### Do
- Sử dụng Inter weight 700 ở 50–72px cho tất cả headline cấp trang với tracking từ -1.65px đến -2.23px — negative tracking dày đặc là yếu tố làm cho display type có cảm giác được khắc.
- Sử dụng #0f68ea Signal Blue độc quyền cho primary action button và trạng thái nav hoạt động; không bao giờ dùng làm nền fill cho card hoặc khối trang trí.
- Áp dụng 100px border-radius cho tất cả button và tag — hình học pill là yếu tố đặc trưng, không phải làm tròn tùy chọn.
- Sử dụng #ffcb00 Highlight chỉ cho badge mới lạ hoặc trạng thái (≤1% diện tích màn hình); dấu câu ấm áp, không phải surface fill.
- Xếp chồng surface dưới dạng #ffffff (nền) → #f0f2f4 (nâng lên) → #0f68ea (thương hiệu) để duy trì hệ thống phân cấp độ nâng rõ ràng mà không dựa vào shadow nặng.
- Duy trì section gap rộng rãi 80px giữa các section chính của trang; mật độ rộng rãi là yếu tố giúp white canvas có không gian thở.
- Sử dụng #1d1d1f Ink cho tất cả văn bản và nét icon — không bao giờ dùng #000000, độ ấm nhẹ tạo cảm giác in ấn thay vì kỹ thuật số.

### Don't
- Không sử dụng #0f68ea làm màu chữ cho body copy hoặc heading; nó là màu hành động, không phải màu typography.
- Không áp dụng gradient ở bất kỳ đâu trong hệ thống — thẩm mỹ bản thiết kế phụ thuộc vào bề mặt phẳng, mờ.
- Không thêm shadow trang trí ngoài rgba(0,0,0,0.06) 0px 8px 48px 0px; shadow nặng hơn phá vỡ cảm giác nhẹ nhàng.
- Không sử dụng button vuông hoặc bán kính thấp (dưới 50px); hình pill là bắt buộc.
- Không thêm các tông màu nhấn bổ sung (xanh lá, tím, đỏ) — hệ thống là hai màu cộng với vàng, thêm màu sẽ làm loãng thương hiệu.
- Không sử dụng viền #ffffff trên bề mặt trắng; viền phải ít nhất là #f0f2f4 để vẫn nhìn thấy được.
- Không đặt display type dưới weight 600 hoặc trên 72px mà không có lý do cụ thể — sự kết hợp 700/72px là lockup đặc trưng.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Nền trang chính — giấy vẽ trắng |
| 1 | Surface | `#f0f2f4` | Nền card, container logo, button fill không hoạt động — độ nâng nhẹ so với canvas |
| 2 | Brand Surface | `#0f68ea` | Video frame, hero accent panel — bề mặt màu sắc duy nhất |
| 3 | Dark Surface | `#000a3b` | Điểm nhấn tối hiếm gặp cho card nổi bật hoặc section tương phản |
| 4 | Accent Surface | `#ffcb00` | Badge mới lạ, chỉ báo trạng thái — highlight ấm áp xuyên qua bảng màu lạnh |

## Elevation

- **Primary CTA Button:** `rgba(0, 0, 0, 0.06) 0px 8px 48px 0px`
- **Elevated Card:** `rgba(0, 0, 0, 0.06) 0px 8px 48px 0px`
- **Hero Video Frame:** `rgba(0, 0, 0, 0.06) 0px 8px 48px 0px`

## Imagery

Nhiếp ảnh là tối thiểu — thiết kế dựa vào screenshot giao diện sản phẩm được nhúng trong video demo thay vì ảnh lifestyle hoặc bất động sản. Video player và ảnh chụp giao diện sản phẩm đảm nhận việc kể chuyện bằng hình ảnh. Logo cloud sử dụng wordmark màu thương hiệu trong container pill trung tính nhẹ nhàng, cho phép danh tính của mỗi đối tác đóng góp một khoảnh khắc màu sắc nhỏ mà không lấn át trang. Icon dạng nét, tối giản, và hiển thị ở #1d1d1f — nhỏ, chức năng, không bao giờ trang trí. Ngôn ngữ thị giác tổng thể là UI-first: màn hình, dashboard, và trình xem sơ đồ, không phải nhiếp ảnh.

## Layout

Container căn giữa max-width 1200px, section gap rộng rãi 80px. Hero là một stack văn bản căn giữa (badge → headline → subhead → video) trên white canvas, với video được đóng khung trong dải màu xanh #0f68ea full-width vượt ra ngoài max-width constraint. Bên dưới hero: cặp button căn giữa (outline pill) trên khoảng trắng, tiếp theo là section bằng chứng xã hội với headline 43px căn giữa và logo cloud grid 3 hàng. Navigation là thanh cố định trên cùng với text link ngang và dark pill CTA căn phải. Nhịp điệu là dọc và dựa trên stack — không có sidebar, không có split layout bất đối xứng, chỉ có các khối căn giữa với không gian thở.

## Agent Prompt Guide

**Quick Color Reference**
- background: #ffffff
- surface: #f0f2f4
- text: #1d1d1f
- border: #e5e6e8
- accent: #0f68ea (Signal Blue)
- badge: #ffcb00 (Highlight)
- primary action: #0f68ea (filled action)

**Example Component Prompts**

1. Tạo một hero section: nền trắng (#ffffff). Badge "New" căn giữa — pill fill vàng (#ffcb00), chữ #1d1d1f ở 14px Inter weight 500, 100px radius, padding 2px 10px. Headline ở 72px Inter weight 700, #1d1d1f, letter-spacing -2.23px. Subhead ở 18px Inter weight 400, #1d1d1f, line-height 1.55. Bên dưới: dải xanh (#0f68ea) full-width chứa video player 16:9 với nút play màu trắng căn giữa.

2. Tạo một primary CTA button: fill #0f68ea, chữ trắng, 16px Inter weight 600, 100px border-radius, padding 20px 22px, soft shadow rgba(0,0,0,0.06) 0px 8px 48px 0px.

3. Tạo một logo cloud row: 6–7 item trong grid ngang, mỗi logo nằm trong container pill #f0f2f4 với 18px border-radius và 14px padding. Logo căn giữa, hiển thị ở màu gốc.

4. Tạo một top navigation bar: nền trắng, cao 72px. Bên trái: glyph logo kim cương xanh + wordmark "Planpoint" ở #1d1d1f. Giữa: nav link 16px Inter weight 500 ở #1d1d1f. Bên phải: text link "Support" và "Login", sau đó dark (#1d1d1f) pill button "Free trial" với chữ trắng, 100px radius, padding 20px 22px, và icon mũi tên phải.

5. Tạo một trust headline section: 43px Inter weight 600 căn giữa, #1d1d1f, letter-spacing -1.55px, line-height 1.15. Hai dòng văn bản trên nền trắng với 80px vertical padding phía trên và phía dưới.

## Similar Brands

- **Mapbox** — Cùng cách tiếp cận white-canvas với một accent xanh lam đậm và display type đậm cho sản phẩm map/data
- **Figma** — Button hình pill, stack bề mặt trắng sạch, và negative tracking mạnh trên display type
- **Linear** — Layout rộng rãi, typeface Inter, chữ gần đen (họ #1d1d1f), và sử dụng shadow tối thiểu cho cảm giác product UI
- **Arc browser** — Bảng màu gần như đơn sắc với một màu hành động và hình học pill trên tất cả element tương tác
- **Vercel** — Hero stack căn giữa, section gap rộng rãi, Inter ở kích thước cực lớn với tracking dày đặc, và bề mặt phẳng mờ

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-ink: #1d1d1f;
  --color-white: #ffffff;
  --color-mist: #f0f2f4;
  --color-fog: #e5e6e8;
  --color-carbon: #000000;
  --color-slate: #333333;
  --color-midnight: #00051a;
  --color-signal-blue: #0f68ea;
  --color-link-blue: #007aff;
  --color-highlight: #ffcb00;
  --color-deep-navy: #000a3b;

  /* Typography — Font Families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: -0.98px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: -1.07px;
  --text-body: 18px;
  --leading-body: 1.55;
  --tracking-body: -1.17px;
  --text-subheading: 22px;
  --leading-subheading: 1.3;
  --tracking-subheading: -1.32px;
  --text-heading-sm: 29px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -1.28px;
  --text-heading: 43px;
  --leading-heading: 1.15;
  --tracking-heading: -1.55px;
  --text-heading-lg: 50px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.65px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.23px;
  --text-display-xl: 144px;
  --leading-display-xl: 0.9;
  --tracking-display-xl: -3.89px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-108: 108px;
  --spacing-140: 140px;
  --spacing-240: 240px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 14px;

  /* Border Radius */
  --radius-2xl: 18px;
  --radius-3xl: 28.8px;
  --radius-3xl-2: 46.8px;
  --radius-full: 57.6px;
  --radius-full-2: 100px;
  --radius-full-3: 160px;

  /* Named Radii */
  --radius-tags: 46.8px;
  --radius-cards: 28.8px;
  --radius-badges: 100px;
  --radius-inputs: 18px;
  --radius-buttons: 100px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.06) 0px 8px 48px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-surface: #f0f2f4;
  --surface-brand-surface: #0f68ea;
  --surface-dark-surface: #000a3b;
  --surface-accent-surface: #ffcb00;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-ink: #1d1d1f;
  --color-white: #ffffff;
  --color-mist: #f0f2f4;
  --color-fog: #e5e6e8;
  --color-carbon: #000000;
  --color-slate: #333333;
  --color-midnight: #00051a;
  --color-signal-blue: #0f68ea;
  --color-link-blue: #007aff;
  --color-highlight: #ffcb00;
  --color-deep-navy: #000a3b;

  /* Typography */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.5;
  --tracking-caption: -0.98px;
  --text-body-sm: 16px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: -1.07px;
  --text-body: 18px;
  --leading-body: 1.55;
  --tracking-body: -1.17px;
  --text-subheading: 22px;
  --leading-subheading: 1.3;
  --tracking-subheading: -1.32px;
  --text-heading-sm: 29px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -1.28px;
  --text-heading: 43px;
  --leading-heading: 1.15;
  --tracking-heading: -1.55px;
  --text-heading-lg: 50px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -1.65px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.23px;
  --text-display-xl: 144px;
  --leading-display-xl: 0.9;
  --tracking-display-xl: -3.89px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-28: 28px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-108: 108px;
  --spacing-140: 140px;
  --spacing-240: 240px;

  /* Border Radius */
  --radius-2xl: 18px;
  --radius-3xl: 28.8px;
  --radius-3xl-2: 46.8px;
  --radius-full: 57.6px;
  --radius-full-2: 100px;
  --radius-full-3: 160px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.06) 0px 8px 48px 0px;
}
```