# gettime · brand guideline cho AI agent

> Phiên bản 3.1 · cập nhật 19/10/2026
> Tài liệu này dành cho AI agent (và người) khi tạo bất kỳ thứ gì mang thương hiệu gettime: giao diện, landing page, slide, bài đăng, ảnh, email.
> Đọc theo thứ tự. Khi các quy tắc mâu thuẫn, mục nào đứng trước được ưu tiên. Bản trình bày có hình: `gettime guideline.pdf` và `gettime guideline.html` cùng thư mục.

---

## 0. Tóm tắt nhanh (đọc phần này nếu chỉ có 30 giây)

- Tên thương hiệu luôn viết **chữ thường**: `gettime`. Không viết `GetTime`, `Gettime`, `GETTIME`.
- gettime là nền tảng web để **quản lý và điều phối AI agent**. Thông điệp lõi: **lấy lại thời gian**.
- Ẩn dụ trung tâm: **dàn nhạc**. **Maestro** là nhạc trưởng (điều phối). **8 agent** là nhạc công, mỗi agent một màu và một giờ trên mặt đồng hồ.
- Nền: **kem `#FDF4E2`** (sáng) hoặc **đêm `#0D0B1E`** (tối). Màu thương hiệu: **tím `#765DF6`** (nút UI dùng `#6A4FF0`).
- Font: **Space Grotesk** (mọi chữ) + **Space Mono** (nhãn, số liệu).
- Chữ đặt trên **màu agent** luôn là **đêm `#0D0B1E`**, không bao giờ trắng.
- Maestro và chữ "get" **luôn trung tính** (đêm hoặc kem). Chỉ chữ "time" và ngôi sao ✱ được mang màu.

---

## 1. Thương hiệu là gì

| Mục | Nội dung |
|---|---|
| Sản phẩm | Nền tảng web quản lý AI agent. Người dùng giao việc bằng tiếng Việt, maestro chia việc cho các agent, agent làm và báo cáo lại để người dùng duyệt. |
| Khách hàng | Chủ doanh nghiệp và đội ngũ nhỏ (1 đến 50 người) ở Việt Nam, đang mất nhiều giờ mỗi tuần cho việc lặp lại. |
| Lời hứa | Lấy lại thời gian. Đo bằng giờ, không đo bằng tính năng. |
| Ẩn dụ | Dàn nhạc: một nhạc trưởng (maestro), nhiều nhạc công (agent). Đồng hồ: mỗi agent đứng ở một giờ. |
| Tính cách | Gọn, tự tin, hơi tinh nghịch (bộ ria, nơ), rất cụ thể về con số. |

---

## 2. Giọng văn

**Phải**
- Viết tiếng Việt tự nhiên, như người hiểu việc đang nói chuyện. Câu ngắn, chủ động.
- Nói bằng **giờ và việc cụ thể**: "trả lời 40 tin nhắn Zalo", "báo cáo tự đến sáng thứ Hai", "lấy lại 12 giờ mỗi tuần".
- Gọi người đọc là **bạn**.
- Tiêu đề và tên thương hiệu viết **chữ thường**, kể cả đầu câu. Nội dung dài viết hoa đầu câu như bình thường.
- Gọi đúng tên: **maestro**, **agent**, tên từng agent ở mục 6.

**Không được**
- Không hứa doanh thu hay con số chưa có dữ liệu. Con số thời gian phải ghi rõ là ước tính nếu chưa đo thật.
- Không bịa lời chứng thực, logo khách hàng, số người dùng, báo chí. Nếu cần chỗ trống, ghi rõ `[MẪU]` hoặc `[cần dữ liệu thật]`.
- Không dùng thuật ngữ kỹ thuật khi có từ đời thường ("giao việc" thay vì "trigger workflow").
- Không gọi agent là "bot".

---

## 3. Màu

### 3.1 Token

```yaml
neutral:
  cream:   "#FDF4E2"   # nền sáng chính
  night:   "#0D0B1E"   # chữ, logo, nền tối
  paper:   "#FFFFFF"   # thẻ, bảng đặt trên nền kem
  line:    "#E6DCC6"   # viền, đường phân cách
  muted:   "#6B6458"   # chữ phụ trên nền sáng
brand:
  violet:       "#765DF6"   # màu thương hiệu, chữ "time" mặc định
  violet-ui:    "#6A4FF0"   # nút bấm, link, chữ tím cỡ nhỏ
  violet-tint:  "#DFD3E6"   # nền nhấn nhạt trên kem
status:            # chỉ dùng cho trạng thái, luôn kèm chữ
  ok:   "#2E7D4F"
  warn: "#9A6B00"
  bad:  "#C8323A"
```

### 3.2 Tỉ lệ

kem 45% · đêm 30% · tím 15% · màu agent 10%.

### 3.3 Quy tắc

1. Tím **chỉ thuộc về thương hiệu và maestro**. Không agent nào dùng tím.
2. Màu agent dùng để **nhận diện agent**, không dùng cho trạng thái (xong, chờ, lỗi).
3. Không trộn quá **2 màu agent** trong một ấn phẩm marketing. Trong giao diện có dữ liệu (biểu đồ, danh sách) được dùng đủ 8.
4. Không làm gradient cầu vồng từ các màu agent.

### 3.4 Tương phản đã tính sẵn (WCAG)

| Cặp | Tỉ lệ | Dùng cho |
|---|---|---|
| đêm trên kem | 17.7 : 1 | mọi cỡ chữ |
| trắng trên violet-ui `#6A4FF0` | 5.3 : 1 | nút, chữ nhỏ |
| trắng trên violet `#765DF6` | 4.5 : 1 | chữ từ 18px |
| violet trên kem | 4.1 : 1 | chữ từ 18px |
| violet trên đêm | 4.3 : 1 | chữ từ 18px |

---

## 4. Chữ

| Vai trò | Font | Cỡ / độ đậm | Khoảng cách chữ |
|---|---|---|---|
| Tiêu đề lớn | Space Grotesk | Bold 700 | −6% (`-0.06em`) |
| Tiêu đề phụ | Space Grotesk | Medium 500 | −3% |
| Nội dung | Space Grotesk | Regular 400, line-height 1.55 | 0 |
| Nhãn, số liệu, code | Space Mono | Regular 400 | +4% |

Google Fonts: `https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap`

Trong tiêu đề, được tô màu **một cụm từ** quan trọng: tím mặc định, hoặc màu của agent nếu trang thuộc agent đó.

---

## 5. Logo

### 5.1 Thành phần

| Thành phần | Mô tả |
|---|---|
| **Mark (maestro)** | Hình tròn đặc. Bên trong khoét: vành mặt số, vạch 12, 3, 9 giờ, hai mắt viên thuốc, bộ ria làm từ hai kim đồng hồ uốn cong, nơ cổ. Chỉ maestro có **nơ**. |
| **Wordmark** | `gettime` chữ thường, chấm chữ i là ngôi sao **✱**. "get" và "time" có thể khác màu. Nguồn vector: `gettime.ai`. |
| **Lockup ngang** | Mark bên trái + wordmark. Bản chính. |
| **Lockup dọc** | Mark trên, wordmark dưới. Cho khung gần vuông. |

### 5.2 Khi nào dùng dạng nào

- Header website, email, slide, tài liệu → **lockup ngang**.
- Avatar có chữ, màn hình mở app, bìa vuông → **lockup dọc**.
- Favicon, icon app, chỗ nhỏ, hoặc tên đã xuất hiện gần đó → **mark**.
- Chỗ hẹp theo chiều cao, hoặc mark đã xuất hiện ở nơi khác → **wordmark**.

### 5.3 Tỉ lệ

- Đường kính mark = chiều cao từ đỉnh chữ t tới chân chữ của wordmark × **1.02**.
- Khoảng hở mark ↔ chữ = **0.3 × đường kính mark**.
- Ngôi sao ✱ và đuôi chữ g được phép vượt ra ngoài thân chữ.
- Vùng trống tối thiểu quanh logo: **X = ½ đường kính mark** ở cả bốn phía.
- Không tự ghép mark với chữ. Luôn dùng file lockup có sẵn.

### 5.4 Kích thước tối thiểu

| Dạng | Màn hình | In |
|---|---|---|
| Mark | 24px (đẹp nhất 48px) | 6 mm |
| Lockup ngang | 130px rộng | 32 mm |
| Lockup dọc | 76px rộng | 20 mm |

### 5.5 Màu logo được phép

Quy tắc: **mark và "get" luôn cùng một màu trung tính**. **"time" và ✱** có thể mang màu nhấn.

| Bối cảnh | Nền | Mark + "get" | "time" + ✱ |
|---|---|---|---|
| Chính · sáng | kem | đêm | tím `#765DF6` |
| Chính · tối | đêm | kem | tím `#765DF6` |
| Một màu (in) | kem hoặc trắng | đêm | đêm |
| Thuộc một agent · tối | đêm | kem | màu **chính** của agent |
| Thuộc một agent · sáng | kem | đêm | màu **đậm** của agent |
| Trên nền tím | tím | kem | kem |
| Trên nền màu agent | màu agent | đêm | đêm |

### 5.6 Không được

- Kéo giãn, bóp méo, xoay logo.
- Thêm bóng đổ, viền, gradient, phát sáng.
- Viết hoa hoặc gõ lại tên bằng font khác thay cho file wordmark.
- Đổi khoảng cách mark ↔ chữ.
- Tô mark hoặc "get" bằng màu nhấn hay màu agent.
- Dùng logo trắng trên nền màu agent.
- Dùng hai màu nhấn khác nhau trong cùng một logo.
- Đặt logo lên ảnh hoặc nền rối không đủ tương phản.

### 5.7 SVG của mark (copy được)

Mặt được khoét bằng `mask`, nên mark chỉ cần một màu và luôn lấy màu nền ở các nét khoét. Đổi `fill` của `circle` cuối để đổi màu.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
  <defs>
    <mask id="gt-maestro" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
      <rect width="120" height="120" fill="#fff"/>
      <circle cx="60" cy="60" r="48" fill="none" stroke="#000" stroke-width="2.5"/>
      <rect x="57" y="17" width="6" height="10" rx="3" fill="#000"/>
      <path d="M17 60 L23 60 M97 60 L103 60" fill="none" stroke="#000" stroke-width="5" stroke-linecap="round"/>
      <rect x="40" y="40" width="10" height="17" rx="5" fill="#000"/>
      <rect x="70" y="40" width="10" height="17" rx="5" fill="#000"/>
      <path d="M60 72 C54.6 64 45.6 63 40.2 68 C36.6 72 32.1 71 31.2 64 M60 72 C65.4 64 74.4 63 79.8 68 C83.4 72 87.9 71 88.8 64" fill="none" stroke="#000" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="60" cy="72" r="5.5" fill="#000"/>
      <path d="M60 94 L48 87 L48 101 Z M60 94 L72 87 L72 101 Z" fill="#000" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
    </mask>
  </defs>
  <circle cx="60" cy="60" r="56" fill="#0D0B1E" mask="url(#gt-maestro)"/>
</svg>
```

---

## 6. Hệ agent

### 6.1 Tám agent

Mỗi agent có: **số = giờ** trên mặt đồng hồ, **tên**, **slug**, và ba sắc độ màu.
- **chính**: icon, biểu đồ, nền ấn phẩm, chữ trên nền đêm.
- **nhạt**: nền thẻ, nhãn trên nền kem.
- **đậm**: chữ và icon màu agent trên nền kem.

| Giờ | Tên | Slug | Chính | Nhạt | Đậm | Chữ đêm trên chính | Chính trên kem | Chính trên đêm | Đậm trên kem | Icon trên nền sáng |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | viết | `viet` | `#ED7455` | `#F9D3BD` | `#AE5746` | 6.7 | 2.7 | 6.7 | 4.5 | `#AE5746` |
| 2 | lịch | `lich` | `#FFB020` | `#FEE2B0` | `#95671F` | 10.6 | 1.7 | 10.6 | 4.5 | `#95671F` |
| 3 | code | `code` | `#CFF05B` | `#F1F3BF` | `#66743A` | 15.0 | 1.2 | 15.0 | 4.7 | `#66743A` |
| 4 | số liệu | `so-lieu` | `#2EC4B6` | `#C7E8D7` | `#217A79` | 8.9 | 2.0 | 8.9 | 4.7 | `#217A79` |
| 5 | tìm kiếm | `tim-kiem` | `#6EC8FF` | `#D8E9EA` | `#43759C` | 10.5 | 1.7 | 10.5 | 4.5 | `#43759C` |
| 6 | vận hành | `van-hanh` | `#3F6BFF` | `#CCD0EA` | `#3B63ED` | 4.4 | 4.0 | 4.4 | 4.6 | `#3F6BFF` |
| 7 | khách hàng | `khach-hang` | `#45C66E` | `#CDE8C4` | `#2F7B4E` | 8.8 | 2.0 | 8.8 | 4.7 | `#2F7B4E` |
| 8 | thiết kế | `thiet-ke` | `#FF7AB6` | `#FED4D7` | `#A8527F` | 8.0 | 2.2 | 8.0 | 4.6 | `#A8527F` |

Vai trò mỗi agent: viết (nội dung, email, báo cáo) · lịch (đặt lịch, nhắc việc) · code (viết code, review, sửa lỗi) · số liệu (phân tích, dashboard) · tìm kiếm (nghiên cứu, tổng hợp nguồn) · vận hành (tự động hoá quy trình) · khách hàng (trả lời, chăm sóc khách) · thiết kế (ảnh, slide, ấn phẩm).

Vị trí **9, 10, 11, 12 giờ để trống** cho agent mới. Agent mới nhận giờ trống tiếp theo, một màu chưa dùng (không phải tím), và phải qua kiểm tra tương phản ở mục 6.3.

> Lưu ý: tên và vai trò 8 agent hiện là **bản tạm**, chưa phải danh sách agent thật của sản phẩm. Khi có danh sách thật, giữ nguyên giờ và màu, chỉ đổi tên và vai trò.

### 6.2 Quy tắc màu agent (theo thứ tự ưu tiên)

1. Chữ đặt trên nền màu agent (chính hoặc nhạt) → **luôn đêm `#0D0B1E`**. Không dùng chữ trắng.
2. Trên nền **đêm** → màu **chính** dùng được cho chữ, icon, đường kẻ. Riêng vận hành chỉ dùng cho chữ từ 18px.
3. Trên nền **kem hoặc trắng** → màu chính **chỉ làm mảng màu** (thanh tiến độ, chấm, nền nhãn). Chữ và icon dùng cột **"icon trên nền sáng"**.
4. Không dùng màu agent cho trạng thái. Trạng thái dùng `status.*` và **luôn có chữ đi kèm** ("đang chạy", "chờ duyệt", "lỗi kết nối").
5. Không dùng tím cho bất kỳ agent nào.

### 6.3 Thêm agent mới: cách kiểm tra màu

- `contrast(night, chính) ≥ 4.5`. Bắt buộc.
- `contrast(chính, night) ≥ 3`. Bắt buộc.
- **đậm** = trộn dần màu chính với đêm (mỗi bước 2%) cho tới khi `contrast(đậm, cream) ≥ 4.5`.
- **nhạt** = `mix(chính, cream, 0.74)`.
- Sắc màu (hue) phải đủ khác 8 màu hiện có và khác tím.

---

## 7. Icon agent

### 7.1 Cấu tạo

Icon agent dựng thẳng từ mark maestro:
- **Giữ nguyên**: hình tròn, vành mặt số, vạch 12 giờ, hai mắt, bộ ria.
- **Bỏ**: nơ (chỉ maestro đeo nơ) và vạch 3, 9 giờ.
- **Thêm**: một **núm vặn** (núm chỉnh giờ có khía) nhô ra **ngoài viền**, ở đúng vị trí giờ của agent. Agent số 4 có núm ở 4 giờ.
- **Màu**: thân icon (hình tròn và núm) là màu agent. Mặt khoét thủng lấy màu nền.
- Maestro **không có núm**.

Không đặt chấm hay ký hiệu nào lên mặt (dễ bị đọc thành nốt ruồi).

### 7.2 SVG icon agent (thay `H` bằng số giờ 1 đến 8, `COLOR` bằng mã màu)

`rotate(H*30)`: giờ 1 → 30, giờ 2 → 60, …, giờ 8 → 240. Khung `viewBox` rộng hơn mark để chứa núm.

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-14 -14 148 148" width="148" height="148">
  <defs>
    <mask id="gt-agent-H" maskUnits="userSpaceOnUse" x="-20" y="-20" width="160" height="160">
      <rect x="-20" y="-20" width="160" height="160" fill="#fff"/>
      <circle cx="60" cy="60" r="48" fill="none" stroke="#000" stroke-width="2.5"/>
      <rect x="57" y="17" width="6" height="10" rx="3" fill="#000"/>
      <rect x="40" y="40" width="10" height="17" rx="5" fill="#000"/>
      <rect x="70" y="40" width="10" height="17" rx="5" fill="#000"/>
      <path d="M60 72 C54.6 64 45.6 63 40.2 68 C36.6 72 32.1 71 31.2 64 M60 72 C65.4 64 74.4 63 79.8 68 C83.4 72 87.9 71 88.8 64" fill="none" stroke="#000" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
      <circle cx="60" cy="72" r="5.5" fill="#000"/>
      <g transform="rotate(H*30 60 60)">
        <path d="M53 -9 V-1 M58 -9 V-1 M62 -9 V-1 M67 -9 V-1" stroke="#000" stroke-width="1.8" stroke-linecap="round"/>
      </g>
    </mask>
  </defs>
  <g mask="url(#gt-agent-H)" fill="COLOR">
    <circle cx="60" cy="60" r="56"/>
    <g transform="rotate(H*30 60 60)">
      <rect x="54" y="-1" width="12" height="10"/>
      <rect x="47" y="-11" width="26" height="12" rx="4"/>
    </g>
  </g>
</svg>
```

Khi đặt maestro cạnh icon agent cho cùng cỡ, dùng cùng `viewBox="-14 -14 148 148"` cho mark maestro.

### 7.3 Màu icon theo nền

| Nền | Màu icon |
|---|---|
| đêm | màu chính của agent |
| kem / trắng | cột "icon trên nền sáng" (mục 6.1) |
| màu chính của agent (avatar, nhãn) | đêm `#0D0B1E` |
| in một màu | đêm `#0D0B1E` (phân biệt bằng vị trí núm) |

### 7.4 Avatar

Khung vuông bo góc (bo khoảng 23% cạnh), nền màu chính của agent, icon màu đêm chiếm khoảng 70%. Avatar maestro: nền đêm, mark kem.

Kích thước tối thiểu icon: **20px**. Dưới 20px chỉ dùng chấm tròn màu agent kèm tên.

---

## 8. Áp dụng

### 8.1 Giao diện sản phẩm

- Nền sáng: kem. Thẻ và bảng: trắng, viền `line`. Nền tối: đêm, thẻ `#24203E`.
- Nút chính: nền `violet-ui`, chữ trắng, bo 8 đến 12px. Nút phụ: nền trắng, viền đêm.
- Mỗi dòng việc: icon agent + tên việc + "agent {tên}" (chữ Space Mono nhỏ) + thanh tiến độ màu agent + trạng thái có chữ.
- Biểu đồ phân bổ theo agent: mỗi agent đúng màu chính của nó, luôn có chú thích tên.
- Nhãn giao việc: nền màu chính hoặc nhạt, icon và chữ đêm.

### 8.2 Marketing

- Ấn phẩm về **một agent**: nền màu chính của agent, chữ và icon đêm, logo một màu đêm.
- Ấn phẩm **chung**: nền kem hoặc đêm, điểm nhấn tím.
- Không quá 2 màu agent trong một ấn phẩm.

### 8.3 Landing page direct response

Đã có bản mẫu: `gettime landing page.html`. Cấu trúc: tiêu đề kiểu tin nóng → lời chứng thực → thư ngỏ của nhà sáng lập → "trang này dành cho bạn nếu…" → cơ chế dàn nhạc 8 agent → bảng tính thời gian → gạch đầu dòng theo ngày → bảng giá trị → phần thưởng → cam kết → form 2 bước → P.S. ba lần → hỏi đáp → thanh nút dính.
Highlight dùng dải màu chanh `#CFF05B` phía sau chữ. Chữ viết tay dùng font Caveat, màu tím. Mọi con số, lời chứng thực và ưu đãi trong bản mẫu là **chỗ trống cần dữ liệu thật**.

### 8.4 Mascot 3D

- Maestro 3D: thân đêm bóng, mặt đồng hồ kem chuyển đào, má hồng, mắt kiểu Mona, ria ống tròn, nơ.
- Màu nơ theo màu nhấn của trang: tím trên nền kem, chanh trên nền đêm, hoặc màu agent khi trang thuộc agent đó.
- Dùng cho minh hoạ, social, video, màn hình trống. **Không thay cho logo.**

---

## 9. Quy trình quyết định nhanh cho agent

```
Cần đặt logo?
  → nền tối? lockup kem, "time" tím (hoặc màu chính agent nếu thuộc agent)
  → nền sáng? lockup đêm, "time" tím (hoặc màu ĐẬM agent nếu thuộc agent)
  → nền là màu agent? logo một màu đêm
  → nền là tím? logo một màu kem

Cần đặt chữ lên một màu?
  → màu agent (chính/nhạt)? chữ đêm
  → tím? chữ trắng (nhỏ hơn 18px thì dùng violet-ui #6A4FF0)
  → kem/trắng? chữ đêm; chữ màu agent thì dùng màu ĐẬM

Cần biểu diễn trạng thái?
  → status.ok / warn / bad + chữ. Không bao giờ dùng màu agent.

Cần icon agent?
  → icon theo mục 7.2, màu theo bảng 7.3. Không thêm chấm lên mặt. Không có nơ.

Không chắc?
  → chọn bản trung tính (đêm trên kem, "time" tím) và ghi chú để người duyệt.
```

---

## 10. File

Thư mục gốc: `~/Desktop/GETTIME/`

| Đường dẫn | Nội dung | Trạng thái |
|---|---|---|
| `gettime guideline.pdf` / `.html` | Guideline đầy đủ có hình (bản trình bày của tài liệu này) | hiện hành |
| `gettime-brand-guideline.md` | Tài liệu này | hiện hành |
| `gettime.ai` | Wordmark gốc dạng vector (trang 2) | nguồn |
| `GetTime-logo-option4/vector/*.svg` | Wordmark, lockup ngang, lockup dọc dạng vector | hiện hành, xem lưu ý |
| `GetTime-logo-option4/svg/`, `png/` | Mark maestro riêng | xem lưu ý |
| `GetTime-maestro-3D-palette-moi/` | Mascot 3D theo bảng màu hiện hành | hiện hành |
| `GetTime-agent-icons/` | 32 icon agent | **cũ**: kiểu chấm tròn, cần xuất lại theo kiểu núm vặn (mục 7) |
| `gettime landing page.html` | Landing page direct response mẫu | bản nháp |

**Lưu ý file cũ**
- Các file có hậu tố `-mint` và màu đen `#0B0B0B` thuộc bảng màu cũ (mint / đen / tím). Bảng màu đó **đã thay** bằng kem / đêm / tím. Bản `-den` dùng tạm được nhưng màu đêm chuẩn là `#0D0B1E`.
- Các thư mục `GetTime-maestro-3D*`, `GetTime-logo-system`, `GetTime-maestro-mustache` và các bản dựng mint cũ là **tư liệu khám phá**, không dùng cho sản phẩm.

---

## 11. Còn thiếu (cần người quyết định)

- Danh sách agent thật của sản phẩm (tên, vai trò).
- Ưu đãi thật cho landing page (dùng thử bao lâu, điều kiện, cam kết).
- Số liệu thật: số giờ lấy lại trung bình, số khách hàng, lời chứng thực có tên và ảnh.
- Thông tin pháp lý: pháp nhân, chính sách bảo mật, danh sách tích hợp.
- Xuất lại bộ icon agent theo kiểu núm vặn, và lockup với màu đêm chuẩn `#0D0B1E`.