# robot.com

> robot.com — Style Reference

## Prompt Content

```
# robot.com — Style Reference
> một trang editorial in ấn với bút highlight màu vàng

Giấy off-white ấm áp, chữ đen mực in, và một điểm nhấn neon-vàng duy nhất đánh dấu những gì quan trọng — hệ thống hoạt động như một layout tạp chí tự tin, không phải dashboard phần mềm.

**Theme:** light

robot.com nói bằng giọng gần như đơn sắc — nền canvas off-white ấm áp, chữ đen mực in, và một điểm nhấn vàng chói duy nhất hoạt động như bút highlight trên trang giấy in. Hệ thống mang phong cách editorial và đầy tự tin: typography mạnh mẽ (custom Yellix lên đến 100px với negative tracking), pill controls (bán kính 24-30px chiếm ưu thế), và các khối màu cấp section đảo giữa off-white, gần-đen và vàng thay vì gradient nhẹ. Ảnh sản phẩm được xử lý như cinematic evidence full-bleed — không crop, không UI chrome xung quanh — trong khi các khối chữ nằm trong cột hẹp canh trái, để lại khoảng thở rộng bên phải. Nhịp điệu thị giác đan xen giữa các dải đơn sắc yên tĩnh với các khối accent đậm, khiến màu vàng có cảm giác xứng đáng chứ không chỉ để trang trí.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Yellix Yellow | `#fff65d` | `--color-yellix-yellow` | Primary action buttons, section accent blocks, highlight tags, decorative fills — màu sắc duy nhất, dùng tiết kiệm để làm nổi bật một phần tử duy nhất trên mỗi view |
| Bone White | `#ffffff` | `--color-bone-white` | Page canvas, chữ inverted trên khối tối, chữ trên filled button |
| Warm Parchment | `#f8f6f3` | `--color-warm-parchment` | Card surfaces, secondary canvas tone, tạo độ cao nhẹ so với pure white |
| Fog Gray | `#d9d7d5` | `--color-fog-gray` | Lớp bề mặt trung tính nhẹ nhất, divider mờ, nền muted |
| Ash Gray | `#8f8e8d` | `--color-ash-gray` | Body text cấp ba, border nhẹ, caption-weight copy |
| Stone Gray | `#727272` | `--color-stone-gray` | Body text cấp hai, helper copy nhẹ, border cấp hai |
| Ink Black | `#262626` | `--color-ink-black` | Text chính, heading color, dominant border color, dark section fill — gần-đen nhưng hơi ấm, không bao giờ là #000 thuần |
| Charcoal | `#2d2d2d` | `--color-charcoal` | Bề mặt tối cấp card, accent block tối thay thế cho Ink Black |
| Pure Black | `#000000` | `--color-pure-black` | Primary action button fill, decorative fills tương phản cao — chỉ dùng khi cần trọng lượng tối đa |

## Tokens — Typography

### Yellix — Yellix là custom grotesque có cá tính — tỷ lệ hơi humanist, tracking cực kỳ chặt ở display sizes (-0.214em ở 100px) khiến headline đọc như khối editorial nén chặt chứ không phải tiêu đề SaaS thoáng. Các tính năng ss01 và salt gợi ý alternates và stylistic glyph variants được dùng có chọn lọc. Yellix mang toàn bộ hệ thống: nav, body, display, buttons. Tỷ lệ line-height thu hẹp ở display (0.96-1.0) tạo mật độ headline chồng lên nhau, sau đó mở ra 1.16-1.25 cho body để dễ đọc. · `--font-yellix`
- **Thay thế:** Inter, GT Walsheim, hoặc Söhne
- **Weights:** 400, 500, 600
- **Sizes:** 10, 12, 14, 15, 16, 18, 24, 32, 38, 41, 52, 72, 100
- **Line height:** 0.96, 1.00, 1.06, 1.10, 1.16, 1.22, 1.25
- **Letter spacing:** Tracking thắt chặt mạnh theo kích thước: -0.214em ở 100px, -0.03em ở 52px, -0.025em ở 38-41px, -0.02em ở 24-32px, -0.01em ở 18px, normal ở 10-16px
- **OpenType features:** `"ss01" on, "salt" on`
- **Vai trò:** Yellix là custom grotesque có cá tính — tỷ lệ hơi humanist, tracking cực kỳ chặt ở display sizes (-0.214em ở 100px) khiến headline đọc như khối editorial nén chặt chứ không phải tiêu đề SaaS thoáng. Các tính năng ss01 và salt gợi ý alternates và stylistic glyph variants được dùng có chọn lọc. Yellix mang toàn bộ hệ thống: nav, body, display, buttons. Tỷ lệ line-height thu hẹp ở display (0.96-1.0) tạo mật độ headline chồng lên nhau, sau đó mở ra 1.16-1.25 cho body để dễ đọc.

### Type Scale

| Vai trò | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.22 | — | `--text-caption` |
| body-sm | 14px | 1.22 | — | `--text-body-sm` |
| body | 16px | 1.25 | — | `--text-body` |
| subheading | 18px | 1.22 | -0.18px | `--text-subheading` |
| heading-sm | 24px | 1.16 | -0.48px | `--text-heading-sm` |
| heading | 38px | 1.1 | -0.95px | `--text-heading` |
| heading-lg | 52px | 1.06 | -1.56px | `--text-heading-lg` |
| display | 72px | 1 | -2.16px | `--text-display` |
| display-xl | 100px | 0.96 | -21.4px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### 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` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 24px |
| tags | 24px |
| cards | 24px |
| buttons | 30px |
| nav-large | 17px |
| buttons-pill | 9999px |
| buttons-tight | 4px |

### Layout

- **Page max-width:** 1280px
- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 8px

## Components

### Floating Pill Nav
**Vai trò:** Primary site navigation, luôn hiển thị

Thanh nav pill nổi, căn giữa ở đầu viewport (khoảng 5% từ trên xuống), cách mép với padding ngang rộng. Background: Bone White #ffffff. Border-radius: 24px. Chứa wordmark robot.com (Yellix 14-16px weight 500) và dropdown chevron. Pill nổi phía trên hero content mà không có shadow — nền trắng của nó tạo sự tách biệt tự nhiên với ảnh hero.

### Talk to Sales Button
**Vai trò:** Persistent top-right conversion CTA

Button pill ở góc trên bên phải, background: Bone White #ffffff, text: Ink Black #262626 ở Yellix 14px weight 500. Border-radius: 24px. Padding khoảng 10px 18px. Nằm cùng mức dọc với floating nav. Không đổi fill khi hover — hoạt động như ghost action hiển thị trên mọi nền.

### Black Filled Action Button
**Vai trò:** Primary conversion action (Get in Touch)

Background: Pure Black #000000. Text: Bone White #ffffff ở Yellix 16px weight 500. Border-radius: 30px (large pill). Padding khoảng 12px 24px. Không có border nhìn thấy được. Đây là interactive có trọng lượng tối đa trong hệ thống — dùng tiết kiệm cho các thời điểm conversion.

### Outlined Ghost Button
**Vai trò:** Secondary action (Explore Robots)

Background: transparent hoặc Bone White #ffffff. Border: 1px Ink Black #262626. Text: Ink Black #262626 ở Yellix 16px weight 500. Border-radius: 30px. Padding khoảng 12px 24px. Kết hợp trực tiếp với black filled button như một lựa chọn thay thế ít cam kết hơn.

### Yellow Accent Block
**Vai trò:** Section-level color punctuation

Section background full-width filled với Yellix Yellow #fff65d. Chứa display-size headlines màu Ink Black #262626. Không có card containers hay borders — màu vàng chính là container. Đây là element biểu cảm nhất của hệ thống: một dải màu full-bleed báo hiệu sự nhấn mạnh editorial thay vì phân cấp thông tin.

### Dark Quote Band
**Vai trò:** Full-width dark section cho editorial pull-quotes và testimonials

Background: Ink Black #262626. Text: Bone White #ffffff ở Yellix 38-41px weight 500 với -0.025em letter-spacing. Kèm một product thumbnail nhỏ hình vuông (khoảng 100-120px) với 10px radius. Dark band lật trang sang chế độ inverse, tạo dấu câu thị giác giữa các section sáng.

### Watch Video Button
**Vai trò:** In-hero media trigger

Button pill với background Bone White #ffffff, text Ink Black #262626 ở Yellix 16px weight 500. Chứa icon play triangle prefix. Border-radius: 24px. Nằm ở góc dưới bên phải của hero, phủ lên nền video.

### Hero Headline Block
**Vai trò:** Display text căn giữa hoặc canh trái trên media full-bleed

Yellix 41-52px weight 500, Ink Black #262626 hoặc Bone White #ffffff tùy độ tương phản media. Letter-spacing: -0.025em. Line-height: 1.10. Tối đa hai dòng headline. Không kèm subtext — headline tự nói.

### Logo Trust Strip
**Vai trò:** Social proof qua partner/brand logos

Hàng ngang logo đối tác dạng grayscale (Sodexo, Grubhub, GXO, AWS, SKIP). Tất cả logo hiển thị màu Ink Black #262626 trên nền Bone White #ffffff. Section heading "Trusted by" ở Yellix 32px weight 500. Logo cách nhau khoảng 48-64px. Không có card containers — logo nổi trên canvas.

### Product Showcase Split
**Vai trò:** Two-column product reveal (text trái, ảnh phải)

Cột trái: khối chữ hẹp (~40% width) với headline ở Yellix 38-41px weight 500, body copy 16px màu Stone Gray #727272, và hai CTA buttons xếp chồng hoặc cạnh nhau. Cột phải: product render hoặc ảnh full chiếm ~55% width, không border hay radius — ảnh raw. Căn giữa theo chiều dọc.

### Section Corner Arrow
**Vai trò:** Scroll-down indicator trên hero

Button vuông nhỏ (khoảng 32-40px) ở góc dưới bên phải của hero section, background Bone White #ffffff với icon chevron xuống màu Ink Black. Border-radius: 4px. Tinh tế, không trang trí — functional scroll prompt.

### Color-Card Highlight
**Vai trò:** Yellow-filled emphasis card cho features hoặc metrics

Background: Yellix Yellow #fff65d. Border-radius: 10px. Padding: 24px. Text màu Ink Black #262626. Dùng cho các data point nổi bật, feature callouts, hoặc pricing emphasis. Radius 10px phân biệt nó với ngôn ngữ pill 24px chủ đạo — cards là hình chữ nhật mềm, không phải pill.

## Do's and Don'ts

### Do
- Dùng #fff65d yellow làm màu sắc duy nhất — không bao giờ thêm hue khác; hệ thống đơn sắc-cộng-một-màu-vàng là signature của thương hiệu
- Dùng Yellix ở display sizes (52-100px) với tracking -0.025em đến -0.214em — tracking chặt là yếu tố khiến headline mang phong cách editorial thay vì corporate
- Áp dụng border-radius 24-30px cho tất cả interactive elements (buttons, nav, tags) — ngôn ngữ pill là bắt buộc cho UI chrome
- Dùng radius 10px cho card containers và 4px cho utility buttons — radius nhỏ hơn phân biệt content với chrome
- Đan xen section backgrounds thành các khối đậm: Bone White → Warm Parchment → Ink Black → Yellix Yellow — section-level color flip là nhịp điệu của trang
- Dùng #000000 chỉ cho button quan trọng nhất trên mỗi view — để #262626 đảm nhận tất cả dark elements khác nhằm tránh pure-black fatigue
- Bật Yellix font features "ss01" và "salt" toàn cục — chúng định nghĩa cá tính custom glyph và phân biệt hệ thống với Inter generic

### Don't
- Đừng thêm gradient — hệ thống được xây trên flat color blocks; bất kỳ gradient nào cũng phá vỡ ẩn dụ editorial print
- Đừng dùng #fff65d yellow cho body text hoặc nền lớn phía sau body copy — nó chỉ dành cho accent blocks và single-element emphasis
- Đừng dùng shadow để tạo độ cao — hệ thống dựa vào color block contrast và border-radius để tạo chiều sâu; shadow sẽ thêm độ mềm SaaS-dashboard xung đột với cảm giác print editorial
- Đừng dùng serif typefaces — cá tính grotesque của Yellix là toàn bộ bản sắc typographic; serif sẽ phá vỡ giọng nói
- Đừng dùng open letter-spacing hoặc line-height rộng ở display sizes — line-height 0.96-1.10 và negative tracking ở 52-100px là thứ làm headline trở nên đặc biệt
- Đừng dùng border-radius dưới 4px trên content cards hoặc trên 30px trên UI chrome — thang radius có chủ đích: 4px (utility), 10px (cards), 24-30px (pills/buttons), 9999px (tags)
- Đừng crop hoặc đóng khung ảnh sản phẩm bằng borders hay card containers — xử lý full-bleed là thứ mang lại cinematic presence cho sản phẩm

## Surfaces

| Level | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Page-level background, bề mặt chủ đạo cho phần lớn nội dung |
| 1 | Warm Card | `#f8f6f3` | Bề mặt card nâng cao, sắc ấm nhẹ phân biệt với canvas mà không có độ tương phản gay gắt |
| 2 | Fog | `#d9d7d5` | Neutral nhẹ nhất, divider mờ và dải nền muted |
| 3 | Charcoal Block | `#262626` | Section flip full-width sang dark mode cho editorial quotes và các khoảnh khắc tương phản |
| 4 | Yellow Accent | `#fff65d` | Section accent editorial full-bleed, độ nổi bật thị giác cao nhất trong hệ thống |

## Elevation

Hệ thống cố tình tránh shadow. Chiều sâu được truyền đạt qua color block contrast — Bone White canvas, Warm Parchment cards, Ink Black bands, và Yellix Yellow accents xếp chồng như các lớp bề mặt riêng biệt thay vì độ cao nổi. Điều này củng cố ẩn dụ editorial print: các trang không nổi lên, chúng được lật.

## Imagery

Photography và video là full-bleed và cinematic — không crop, không card framing, không decorative borders. Ảnh sản phẩm cho thấy robot hoàn chỉnh trong môi trường thực (vỉa hè, phòng thí nghiệm) với shallow depth of field. Hero dùng video muted, hơi desaturated của robot giao hàng trong công viên; product showcase dùng studio render sạch trên nền xám nhạt. Logo strip dùng grayscale partner marks. Một product thumbnail vuông nhỏ (10px radius) xuất hiện trong dark quote band. Không có illustration hay 3D abstract graphics — chỉ có ảnh thật và product renders sạch.

## Layout

Page model là full-bleed với không có fixed container width — các section trải dài toàn bộ viewport. Hero là video/ảnh full-viewport với headline căn giữa hoặc canh trái nổi phía trên, kèm floating pill nav và sales button góc trên bên phải. Nhịp điệu trang đan xen: hero full-bleed → split section xám nhạt (text hẹp trái, ảnh rộng phải) → logo strip trắng → dark quote band full-bleed → yellow accent section full-bleed. Các section cách nhau 64-80px hoặc chảy liền mạch vào các khối màu kế cận. Nội dung luôn canh trái trong cột chữ hẹp (khoảng 40% width) trong khi ảnh chiếm 55-60% còn lại. Navigation là một floating pill duy nhất, không phải thanh truyền thống — tối giản và editorial.

## Agent Prompt Guide

## Quick Color Reference
- Text primary: #262626 (Ink Black)
- Text secondary: #727272 (Stone Gray)
- Background canvas: #ffffff (Bone White)
- Background card: #f8f6f3 (Warm Parchment)
- Border: #262626 (Ink Black, 1px)
- Accent: #fff65d (Yellix Yellow)
- primary action: #fff65d (filled action)

## 3-5 Example Component Prompts

1. **Hero Section**: Ảnh/video nền full-viewport của robot giao hàng. Floating pill nav (trắng #ffffff, 24px radius, Yellix 14px weight 500) căn giữa trên cùng. Headline căn giữa "Robots for now, not someday" ở Yellix 52px weight 500, #262626, letter-spacing -1.56px, line-height 1.06. Không subtext. Button "Watch" góc dưới phải: fill trắng #ffffff, 24px radius, Yellix 16px weight 500, text #262626, kèm icon play triangle.

2. **Product Showcase Split**: Layout hai cột, trái 40% / phải 55%. Trái: headline "Not someday. Not in a lab. Today." ở Yellix 41px weight 500, #262626, -1.025px tracking. Body ở Yellix 16px weight 400, #727272. Hai buttons: filled black (#000000, text trắng, 30px radius, Yellix 16px weight 500) và ghost outlined (transparent fill, 1px border #262626, 30px radius). Phải: ảnh sản phẩm full-bleed, không border hay radius.

3. **Yellow Accent Section**: Background full-width #fff65d. Display headline "Robotics for the real world" ở Yellix 72px weight 500, #262626, letter-spacing -2.16px, line-height 1.0. Không buttons, không cards — màu vàng CHÍNH LÀ container. Thêm 80px vertical padding.

4. **Dark Quote Band**: Background full-width #262626. Product thumbnail vuông nhỏ (120px, 10px radius) canh trái. Pull quote ở Yellix 41px weight 500, #ffffff, -1.025px tracking, line-height 1.10. 80px vertical padding.

5. **Logo Trust Strip**: Background #ffffff. Section heading "Trusted by" ở Yellix 32px weight 500, #262626. Hàng ngang 5 logo grayscale màu #262626, cách nhau 64px. 48px vertical padding trên và dưới hàng logo.

## Similar Brands

- **Tesla** — Cùng bảng màu gần-đơn-sắc với một accent color đậm duy nhất, ảnh hero cinematic full-bleed, pill navigation tối giản, và editorial display typography
- **Nothing.tech** — Cùng chủ nghĩa tối giản tự tin với hệ thống single-accent color rõ rệt, custom grotesque type với tracking chặt, và product-as-hero photography không có UI framing
- **Arc browser** — Cùng cách tiếp cận editorial print-magazine: display type lớn với negative tracking, monochrome canvas với bold color-block section flips, và pill-shaped UI chrome
- **Framework Computer** — Cùng compact density, gần như không trang trí, text tối trên nền warm off-white, và photography cho thấy bối cảnh sản phẩm thực không có decorative framing

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-yellix-yellow: #fff65d;
  --color-bone-white: #ffffff;
  --color-warm-parchment: #f8f6f3;
  --color-fog-gray: #d9d7d5;
  --color-ash-gray: #8f8e8d;
  --color-stone-gray: #727272;
  --color-ink-black: #262626;
  --color-charcoal: #2d2d2d;
  --color-pure-black: #000000;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.22;
  --text-body-sm: 14px;
  --leading-body-sm: 1.22;
  --text-body: 16px;
  --leading-body: 1.25;
  --text-subheading: 18px;
  --leading-subheading: 1.22;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.16;
  --tracking-heading-sm: -0.48px;
  --text-heading: 38px;
  --leading-heading: 1.1;
  --tracking-heading: -0.95px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.06;
  --tracking-heading-lg: -1.56px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.16px;
  --text-display-xl: 100px;
  --leading-display-xl: 0.96;
  --tracking-display-xl: -21.4px;

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

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 17px;
  --radius-3xl: 24px;
  --radius-3xl-2: 30px;
  --radius-full: 9999px;

  /* Named Radii */
  --radius-nav: 24px;
  --radius-tags: 24px;
  --radius-cards: 24px;
  --radius-buttons: 30px;
  --radius-nav-large: 17px;
  --radius-buttons-pill: 9999px;
  --radius-buttons-tight: 4px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-warm-card: #f8f6f3;
  --surface-fog: #d9d7d5;
  --surface-charcoal-block: #262626;
  --surface-yellow-accent: #fff65d;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-yellix-yellow: #fff65d;
  --color-bone-white: #ffffff;
  --color-warm-parchment: #f8f6f3;
  --color-fog-gray: #d9d7d5;
  --color-ash-gray: #8f8e8d;
  --color-stone-gray: #727272;
  --color-ink-black: #262626;
  --color-charcoal: #2d2d2d;
  --color-pure-black: #000000;

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

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.22;
  --text-body-sm: 14px;
  --leading-body-sm: 1.22;
  --text-body: 16px;
  --leading-body: 1.25;
  --text-subheading: 18px;
  --leading-subheading: 1.22;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.16;
  --tracking-heading-sm: -0.48px;
  --text-heading: 38px;
  --leading-heading: 1.1;
  --tracking-heading: -0.95px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 1.06;
  --tracking-heading-lg: -1.56px;
  --text-display: 72px;
  --leading-display: 1;
  --tracking-display: -2.16px;
  --text-display-xl: 100px;
  --leading-display-xl: 0.96;
  --tracking-display-xl: -21.4px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-2xl: 17px;
  --radius-3xl: 24px;
  --radius-3xl-2: 30px;
  --radius-full: 9999px;
}
```