# sunday

> sunday — Style Reference

## Prompt Content

```
# sunday — Style Reference
> white gallery với một nhịp neon — một poster Helvetica sạch sẽ, nơi một đường hồng neon cắt ngang sự tĩnh lặng đen-trắng.

**Theme:** light

Sunday là một thương hiệu thanh toán trên nền canvas trắng dành cho ngành hospitality, với một điểm nhấn neon hồng duy nhất hoạt động như dấu câu điện giữa một hệ thống gần như không màu. Logic thị giác mang phong cách editorial: typography đảm nhiệm vai trò chính, nhiếp ảnh mang lại hơi ấm, và màu sắc chỉ xuất hiện ở nơi cần thu hút sự chú ý. Màu đen là mặc định cấu trúc — text, border, card, primary button, thậm chí cả background của feature section — trong khi #ff17e9 được dành riêng cho các tín hiệu thương hiệu (logo, active nav, heading được tô sáng, badge border). Hệ thống type được thống nhất dưới một font chữ duy nhất (Helvetica Neue) nhưng trải dài trên một dải cực rộng từ caption 12px đến stat numeral 200px, với negative tracking mạnh ở kích thước lớn và positive tracking trên các label uppercase nhỏ. Bề mặt phẳng — hầu như không có shadow, dựa vào hairline border và độ tương phản. Các component có xu hướng bo tròn: 16px cho card và input, pill 64px cho primary button, 100px cho tag. Cảm giác tổng thể là minimalism đầy tự tin, được sưởi ấm bởi ảnh chụp nhà hàng thực tế và một nhịp neon không thể nhầm lẫn.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Carbon Black | `#000000` | `--color-carbon-black` | Primary text, hairline, primary button dạng fill, background section tối, và bề mặt card trên các band tối — mặc định cấu trúc mang toàn bộ hệ thống |
| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, bề mặt card, button text trên fill tối, form input fill — khoảng không gian âm làm khung cho mọi thứ |
| Warm Gray | `#736f7c` | `--color-warm-gray` | Body text trên bề mặt sáng, border nhẹ, helper text mờ — một màu gần xám làm ấm bảng màu trung tính một chút |
| Mist | `#dedede` | `--color-mist` | Hairline divider, input border, disabled state — đường cấu trúc sáng nhất trong hệ thống |
| Fog | `#bdbdbd` | `--color-fog` | Placeholder text, inactive border, secondary divider |
| Slate | `#7f7f7f` | `--color-slate` | Inactive nav text, metadata tinh tế |
| Iris Shadow | `#8b8893` | `--color-iris-shadow` | Shadow tint hiếm gặp và muted border accent |
| Neon Pulse | `#ff17e9` | `--color-neon-pulse` | Brand accent — logo mark, active nav underline, section label được tô sáng, badge border, điểm nhấn trang trí trên các từ khóa — một màu hồng sống động giữa hệ thống đơn sắc |

## Tokens — Typography

### Helvetica Neue — Hệ thống một font chữ duy nhất dùng cho mọi thứ từ caption 12px đến stat numeral 200px. Dải cực rộng (thang 16×) là điểm nhấn — cùng một font-weight mang cả caption text và hero headline, để kích thước và tracking làm nhiệm vụ phân cấp. Positive letter-spacing (+0.08em) trên kích thước nhỏ nhất báo hiệu label uppercase; aggressive negative tracking (-0.05em) trên kích thước display làm chặt chữ lớn thành mật độ giống poster. · `--font-helvetica-neue`
- **Thay thế:** Inter, Helvetica, Arial
- **Weights:** 400
- **Kích thước:** 12px, 14px, 16px, 18px, 24px, 32px, 48px, 64px, 200px
- **Line height:** 0.80 đến 1.78
- **Letter spacing:** +0.08em ở 12–14px (label), -0.01em ở 16–24px (body/subhead), -0.03em ở 32–48px (heading), -0.05em ở 64–200px (display)
- **Vai trò:** Hệ thống một font chữ duy nhất dùng cho mọi thứ từ caption 12px đến stat numeral 200px. Dải cực rộng (thang 16×) là điểm nhấn — cùng một font-weight mang cả caption text và hero headline, để kích thước và tracking làm nhiệm vụ phân cấp. Positive letter-spacing (+0.08em) trên kích thước nhỏ nhất báo hiệu label uppercase; aggressive negative tracking (-0.05em) trên kích thước display làm chặt chữ lớn thành mật độ giống poster.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.78 | 0.96px | `--text-caption` |
| body-sm | 14px | 1.78 | 1.12px | `--text-body-sm` |
| body | 16px | 1.33 | -0.16px | `--text-body` |
| subheading | 18px | 1.33 | -0.18px | `--text-subheading` |
| heading-sm | 24px | 1.2 | -0.24px | `--text-heading-sm` |
| heading | 32px | 1.13 | -0.96px | `--text-heading` |
| heading-lg | 48px | 1.13 | -1.44px | `--text-heading-lg` |
| display | 64px | 0.95 | -3.2px | `--text-display` |
| display-xl | 200px | 0.8 | -10px | `--text-display-xl` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 16px |
| cards | 16px |
| badges | 100px |
| inputs | 16px |
| buttons | 64px |
| link-pills | 24px |
| large-cards | 48px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.15) 0px 12px 60px 0px` | `--shadow-xl` |

### Layout

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

## Components

### Primary Filled Button
**Vai trò:** CTA chủ đạo — dùng cho "Get a demo", "Discover it for free", và "get a free demo"

Background đặc #000000, text #ffffff, pill radius 64px, padding dọc 16px × ngang 24px. Helvetica Neue 16px weight 400, tracking -0.01em. Không shadow, không border. Sự đảo ngược tương phản cao đen-trên-trắng là tín hiệu hành động — không cần màu sắc.

### Ghost Nav Button
**Vai trò:** Hành động điều hướng phụ (Login) trong header

Background trong suốt, border 1px #ffffff (hoặc #000000 trên nền sáng), pill radius 64px, padding dọc 16px × ngang 24px. Thông số type giống filled button. Biến thể outline báo hiệu hành động ưu tiên thấp hơn bên cạnh một filled CTA.

### Navigation Header
**Vai trò:** Điều hướng trang cấp cao nhất

Sticky header trên canvas trắng. Logo bên trái (neon pink mark + black wordmark). Nav link màu #000000 ở 14–16px với padding trái/phải 8px và gap 14px giữa các mục. Cặp action căn phải: ghost Login + filled "Get a demo". Border dưới 1px tinh tế màu #dedede. Padding trên 11px / dưới 12px.

### Form Input
**Vai trò:** Text input trong form yêu cầu demo

Background #ffffff, border 1px #dedede, radius 16px. Padding dọc 16px, ngang 16px. Text 16px weight 400 màu #000000, placeholder màu #bdbdbd. Focus state: border tối thành #000000. Không shadow ở rest hoặc focus state.

### Form Textarea
**Vai trò:** Input nhiều dòng cho các trường form mở

Cùng border và radius như text input (1px #dedede, radius 16px). Chiều cao lớn hơn với padding trong 16px. Placeholder màu #bdbdbd. Không hiển thị style resize handle — mặc định theo trình duyệt.

### Dark Feature Card
**Vai trò:** Card showcase sản phẩm trong section cuộn ngang tối

Background #000000, radius 16px, không border, không shadow. Mỗi card chứa một phone hoặc product mockup với heading ngắn màu trắng ở 14–18px. Card nằm trên band trang #000000, tạo một vùng tối liền mạch không có đường nối thị giác giữa card và background.

### Stat Display
**Vai trò:** Điểm chứng minh số lớn (3,500+ clients, 80M+ diners, $176M tips, 2M reviews)

Numeral cỡ lớn 200px, weight 400, line-height 0.80, letter-spacing -0.05em màu #000000. Label bên dưới 14px màu #736f7c, tracking bình thường. Sự nhảy vọt kích thước từ body sang stat là có chủ đích — mỗi con số đọc như một poster headline.

### Brand Badge / Tag
**Vai trò:** Label section và marker danh mục

Background trong suốt với border 1px #ff17e9, pill radius 100px. Text 12–14px màu #000000 với uppercase tracking +0.08em. Dùng để đánh dấu từ được tô sáng hoặc danh mục section bằng neon hồng.

### Nav Underline Indicator
**Vai trò:** Trạng thái active hoặc hover trên navigation item

Border dưới 1px #ff17e9 dưới nav link đang active, cao 2px. Cung cấp khoảnh khắc màu sắc duy nhất trong header trên hầu hết các trang.

### Split Hero Layout
**Vai trò:** Bố cục hero phía trên fold

Hai cột trên desktop: cột trái chứa headline stack, cột phải chứa ảnh chụp. Cột trái: headline 48–64px, subtext 16–18px màu #736f7c, filled CTA bên dưới với margin trên 24px. Cột phải: ảnh full-bleed được crop với radius 16px ở cạnh ngoài.

### Footer
**Vai trò:** Footer trang với các cột link

Background trắng hoặc sáng, border trên 1px #dedede. Link text 14px màu #000000, heading 12px uppercase +0.08em màu #736f7c. Lưới link nhiều cột tiêu chuẩn.

## Do's and Don'ts

### Nên
- Chỉ dùng #ff17e9 như một tín hiệu thương hiệu — logo mark, active nav underline, từ được tô sáng trong headline, badge border. Không bao giờ dùng làm background fill hoặc body text.
- Đặt primary CTA button với fill #000000 và text #ffffff, pill radius 64px — đây là style action dạng fill duy nhất của hệ thống
- Duy trì hệ thống type một font chữ duy nhất: Helvetica Neue weight 400 ở mọi kích thước. Phân cấp thông qua kích thước và tracking, không thay đổi weight
- Áp dụng letter-spacing -0.05em ở 64px trở lên; +0.08em trên label uppercase 12–14px. Những bước nhảy tracking này mang lại cảm giác editorial
- Mặc định tất cả border là 1px màu #dedede. Chỉ dùng border #000000 cho active/focus state hoặc divider cấu trúc
- Dùng stat treatment 200px cho các điểm chứng minh số — kích thước cực lớn là điểm nhấn, không phải lỗi
- Giữ card ở radius 16px và input ở radius 16px. Dành 64px cho button và 100px cho tag/badge

### Không nên
- Không thêm màu nhấn thứ hai — hệ thống chạy trên neon hồng như giọng màu duy nhất giữa đen và trắng
- Không thêm shadow cho card, button, hoặc input. Một shadow nav duy nhất là độ cao duy nhất trong hệ thống
- Không dùng nhiều font-weight. Hệ thống chỉ có weight 400 — phân cấp đến từ kích thước và tracking
- Không dùng #ff17e9 cho background dạng fill hoặc khối text lớn — nó nên đọc như một nhịp, không phải một mảng màu
- Không bo tròn button ở 8px hoặc 12px. Hình pill (64px) là đặc điểm xác định của hành động chính
- Không dùng màu để chỉ trạng thái form field — dựa vào việc border tối dần từ #dedede thành #000000
- Không phá vỡ canvas trắng bằng background trang xám. Dùng #000000 cho các điểm ngắt tông màu, không phải xám trung gian

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Background trang chính — bức tường gallery trắng |
| 1 | Card Light | `#ffffff` | Form input, card sản phẩm sáng trên section trắng |
| 2 | Band Dark | `#000000` | Section tối full-width cho feature card, tạo điểm ngắt tông màu |
| 3 | Card Dark | `#000000` | Feature card trên band tối, không có cạnh card nhìn thấy được |

## Elevation

- **Navigation Header:** `rgba(0, 0, 0, 0.15) 0px 12px 60px 0px — một drop shadow mềm, rộng nâng sticky header lên khỏi trang`

## Imagery

Nhiếp ảnh là ngôn ngữ thị giác chính. Người thật trong bối cảnh nhà hàng đang hoạt động — hero image cho thấy hai người trao đổi thanh toán trong một quầy bar được chiếu sáng ấm áp với ánh sáng xung quanh đỏ/cam. Ảnh full-color, năng lượng cao, và được crop để lấp đầy container với bo tròn 16px. Product mockup (màn hình điện thoại hiển thị luồng thanh toán) xuất hiện bên trong dark feature card. Không có illustration, đồ họa trừu tượng, hoặc icon decoration ngoài icon UI chức năng. Nhiếp ảnh chiếm khoảng 40% viewport trong hero và đóng vai trò là hơi ấm đối lập với bố cục lạnh lẽo do type dẫn dắt.

## Layout

Layout max-width căn giữa ~1200px với các band full-bleed. Hero là bố cục split: headline stack căn trái (50%) và ảnh căn phải (50%). Một hàng stats 4 cột nằm ngay dưới hero trên cùng canvas trắng. Một band #000000 full-bleed theo sau, chứa một cuộn ngang các dark feature card không có sự phân tách thị giác giữa card và background. Form section quay lại màu trắng với form căn giữa, giới hạn max-width. Nhịp điệu dọc rộng rãi: section gap 80px với khoảng thở thoải mái. Navigation là sticky header trắng với logo trái, link giữa, action phải.

## Agent Prompt Guide

Tham khảo màu nhanh:
  text: #000000
  background: #ffffff
  border: #dedede
  accent: #ff17e9
  primary action: không có màu CTA riêng biệt

3-5 Ví dụ Component Prompt:

Không quan sát thấy màu hành động chính riêng biệt; sử dụng các neutral button treatment đã trích xuất thay vì tự tạo màu filled CTA.

2. Tạo một hàng stats: bốn cột, mỗi cột có numeral 200px weight 400 màu #000000, line-height 0.80, letter-spacing -10px. Bên dưới mỗi numeral, một label 14px màu #736f7c. Không có divider giữa các cột.

3. Tạo một feature card trên band tối: background #000000, radius 16px, không border, không shadow. Bên trong, một heading ngắn 18px weight 400 màu #ffffff, letter-spacing -0.18px, với padding trong 24px.

4. Tạo một form input: background #ffffff, border 1px #dedede, radius 16px, padding 16px tất cả các cạnh. Text 16px weight 400 màu #000000, placeholder màu #bdbdbd.

5. Tạo một brand badge: background trong suốt, border 1px #ff17e9, pill radius 100px, padding dọc 12px / ngang 16px. Text 12px màu #000000, uppercase, letter-spacing +0.96px.

## Tracking & Scale Philosophy

Hệ thống type là một nghiên cứu về hai lực đối lập: positive tracking trên kích thước nhỏ nhất (+0.08em ở 12–14px) trải rộng label uppercase thành caption rộng rãi, thoáng đãng, trong khi aggressive negative tracking trên kích thước display (-0.05em ở 64px+) nén headline thành các khối dày đặc, giống poster. Sự phân cực này là điểm nhấn — không có vùng trung gian. Khi nghi ngờ, ghép kích thước với vùng tracking của nó: ≤14px nhận +0.08em, 16–24px nhận -0.01em, 32–48px nhận -0.03em, 64px+ nhận -0.05em.

## Similar Brands

- **Toast** — Cả hai đều nhắm đến nhà hàng/hospitality với cách tiếp cận canvas trắng sạch sẽ, nhưng Sunday nghiêng về editorial và minimal hơn với một điểm nhấn neon duy nhất so với UI bão hòa sản phẩm rộng hơn của Toast
- **Square** — Cùng bối cảnh ngành thanh toán và bố cục white-first với black type mạnh mẽ, mặc dù điểm nhấn neon hồng và thang type cực lớn của Sunday khác biệt hơn so với thiết kế utility-first của Square
- **Stripe** — Cùng sự tự tin trong bảng màu gần như không màu với một điểm nhấn sống động duy nhất và thang type editorial, mặc dù điểm nhấn của Sunday là magenta thay vì indigo và khung hospitality ấm áp hơn
- **Clover** — Cả hai đều phục vụ thanh toán nhà hàng với thẩm mỹ sáng sủa, dễ tiếp cận, nhưng ngôn ngữ thiết kế của Sunday minimal kiểu Swiss-poster hơn trong khi Clover dày đặc product-screenshot hơn
- **Lightspeed Restaurant** — Cùng vị trí hospitality-fintech, mặc dù cách tiếp cận một điểm nhấn, nhiếp ảnh ấm áp của Sunday tương phản với UI dày đặc, hướng dashboard của Lightspeed

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-carbon-black: #000000;
  --color-pure-white: #ffffff;
  --color-warm-gray: #736f7c;
  --color-mist: #dedede;
  --color-fog: #bdbdbd;
  --color-slate: #7f7f7f;
  --color-iris-shadow: #8b8893;
  --color-neon-pulse: #ff17e9;

  /* Typography — Font Families */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.78;
  --tracking-caption: 0.96px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.78;
  --tracking-body-sm: 1.12px;
  --text-body: 16px;
  --leading-body: 1.33;
  --tracking-body: -0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.13;
  --tracking-heading: -0.96px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -1.44px;
  --text-display: 64px;
  --leading-display: 0.95;
  --tracking-display: -3.2px;
  --text-display-xl: 200px;
  --leading-display-xl: 0.8;
  --tracking-display-xl: -10px;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-120: 120px;

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

  /* Border Radius */
  --radius-sm: 1px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 48px;
  --radius-full-2: 64px;
  --radius-full-3: 100px;

  /* Named Radii */
  --radius-nav: 16px;
  --radius-cards: 16px;
  --radius-badges: 100px;
  --radius-inputs: 16px;
  --radius-buttons: 64px;
  --radius-link-pills: 24px;
  --radius-large-cards: 48px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.15) 0px 12px 60px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-card-light: #ffffff;
  --surface-band-dark: #000000;
  --surface-card-dark: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-carbon-black: #000000;
  --color-pure-white: #ffffff;
  --color-warm-gray: #736f7c;
  --color-mist: #dedede;
  --color-fog: #bdbdbd;
  --color-slate: #7f7f7f;
  --color-iris-shadow: #8b8893;
  --color-neon-pulse: #ff17e9;

  /* Typography */
  --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.78;
  --tracking-caption: 0.96px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.78;
  --tracking-body-sm: 1.12px;
  --text-body: 16px;
  --leading-body: 1.33;
  --tracking-body: -0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.18px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.13;
  --tracking-heading: -0.96px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.13;
  --tracking-heading-lg: -1.44px;
  --text-display: 64px;
  --leading-display: 0.95;
  --tracking-display: -3.2px;
  --text-display-xl: 200px;
  --leading-display-xl: 0.8;
  --tracking-display-xl: -10px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 48px;
  --radius-full-2: 64px;
  --radius-full-3: 100px;

  /* Shadows */
  --shadow-xl: rgba(0, 0, 0, 0.15) 0px 12px 60px 0px;
}
```