# Healthy Together

> Healthy Together — Style Reference

## Prompt Content

```
# Healthy Together — Style Reference
> Xanh nửa đêm với dải ribbon màu violet dạng nét cọ.

**Theme:** dark

Healthy Together là một nền tảng gov-tech lấy tối làm chủ đạo: canvas xanh nửa đêm sâu thẳm làm nền cho những headline cỡ lớn đầy tự tin, bị phá vỡ bởi các section accent màu violet điện rực rỡ và những khoảng thở màu oải hương nhạt. Một dải ribbon hồng-tím đặc trưng lướt qua hero như một nét cọ, mang đến cho dark UI vốn nghiêm ngặt một khoảnh khắc năng lượng hữu cơ duy nhất. Cards được bo tròn rộng rãi (42px), buttons có dạng pill hoàn toàn, và tracking dày đặc của Inter ở kích thước lớn (64–92px) tạo cho headline một cảm giác nén chặt, có cấu trúc kiến trúc. Nhịp điệu thị giác luân phiên dark → vivid → soft, không bao giờ trắng trên trắng đơn thuần — mọi bề mặt đều là một nhiệt độ được chủ ý.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|---------|
| Midnight Ink | `#101722` | `--color-midnight-ink` | Primary text, hero canvas, nav bar, nền tối cấp trang — mỏ neo cấu trúc của toàn bộ hệ thống |
| Linen Lavender | `#f9f0ff` | `--color-linen-lavender` | Section canvas, card fills, lớp highlight mềm — bề mặt thở giữa các khối hero tối |
| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, nav dividers, button text — bề mặt nội thất sạch sẽ |
| Muted Graphite | `#6c6c7a` | `--color-muted-graphite` | Secondary text, helper copy, muted headings, đường viền nhẹ |
| Deep Charcoal | `#3f424e` | `--color-deep-charcoal` | Body text trên nền sáng khi Midnight Ink quá nặng — làm mềm hệ thống phân cấp |
| Electric Iris | `linear-gradient(270deg, #4541fe 40%, #fe0f83)` | `--color-electric-iris` | Primary action buttons, nền section sống động, active nav indicators, brand accent — khoảnh khắc màu sắc duy nhất bật UI lên; Hero ribbon graphic, accent gradients — đường quét hồng-tím là chuyển động trang trí duy nhất trong hệ thống |
| Lilac Whisper | `#d9c6ff` | `--color-lilac-whisper` | Màu violet nhẹ cho nền tag/chip, accent surface washes, decorative fills |
| Hot Magenta | `#fe0f83` | `--color-hot-magenta` | Điểm cuối của gradient ribbon đặc trưng — mỏ neo ấm áp cho Electric Iris mát mẻ |

## Tokens — Typography

### Inter — Một typeface duy nhất trên toàn bộ hệ thống. Weight 700 ở 64–92px với letter-spacing -0.05em tạo ra display headline nén chặt, mang cảm giác kiến trúc hơn là marketing. Body ở 400/16px, nav và labels ở 600/14px. Không có secondary hay display face — hệ thống dựa vào tính trung lập của Inter và độ tương phản kích thước, không phải sự đa dạng typeface. · `--font-inter`
- **Thay thế:** Inter (Google)
- **Weights:** 400, 600, 700
- **Kích thước:** 14px, 16px, 24px, 36px, 64px, 72px, 92px
- **Line height:** 1.15-1.40 body, 0.88-1.00 display
- **Letter spacing:** -0.05em trên mọi kích thước
- **OpenType features:** `"ss01" on, "cv11" on`
- **Vai trò:** Một typeface duy nhất trên toàn bộ hệ thống. Weight 700 ở 64–92px với letter-spacing -0.05em tạo ra display headline nén chặt, mang cảm giác kiến trúc hơn là marketing. Body ở 400/16px, nav và labels ở 600/14px. Không có secondary hay display face — hệ thống dựa vào tính trung lập của Inter và độ tương phản kích thước, không phải sự đa dạng typeface.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 14px | 1.4 | -0.7px | `--text-caption` |
| body | 16px | 1.4 | -0.8px | `--text-body` |
| subheading | 24px | 1.3 | -1.2px | `--text-subheading` |
| heading-sm | 36px | 1.15 | -1.8px | `--text-heading-sm` |
| heading | 64px | 1.1 | -3.2px | `--text-heading` |
| heading-lg | 72px | 1 | -3.6px | `--text-heading-lg` |
| display | 92px | 0.88 | -4.6px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 96 | 96px | `--spacing-96` |
| 112 | 112px | `--spacing-112` |
| 120 | 120px | `--spacing-120` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 9999px |
| cards | 42px |
| small | 20px |
| inputs | 12px |
| buttons | 9999px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| xl | `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px` | `--shadow-xl` |
| xl-2 | `rgb(69, 65, 254) 40px 0px 576px 160px` | `--shadow-xl-2` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 56px
- **Card padding:** 24px
- **Element gap:** 16px

## Components

### Hero Headline
**Vai trò:** Display headline cỡ lớn trên canvas tối

Inter weight 700 ở 72–92px, color #ffffff, line-height 0.88–1.00, letter-spacing -0.05em. Đặt canh giữa hoặc canh trái phía trên ribbon graphic hồng-tím. Kích thước cực lớn + tracking dày đặc + line-height thấp là signature của hệ thống.

### Schedule Demo Button (Light)
**Vai trò:** Primary CTA trên hero tối

Dạng pill (radius 9999px), background #ffffff, text #101722, padding 14px 24px, Inter 600 16px. Không border, không shadow — viên pill trắng tinh trên nền navy tối.

### Need Help Button (Filled)
**Vai trò:** Persistent nav CTA

Dạng pill (radius 9999px), background #4541fe Electric Iris, text #ffffff, padding 10px 20px, Inter 600 14px. Button màu sắc duy nhất trong nav — thu hút mắt đến hành động trợ giúp.

### Review Card
**Vai trò:** Card testimonial người dùng trên canvas oải hương

Background #ffffff, border-radius 42px, padding 32px, không border nhìn thấy được. Chứa Google Play icon, tên bằng Inter 600 18px #101722, xếp hạng 5 sao màu vàng, body text bằng Inter 400 14px #3f424e. Soft shadow tùy chọn (rgba(23,73,77,0.15) 0 20px 30px).

### Star Rating Badge
**Vai trò:** Chỉ báo đánh giá 5 sao

Năm icon sao nhỏ màu vàng/gold xếp thành hàng, mỗi icon 12–16px, không background, nằm giữa tên và review text.

### Vivid Accent Section Block
**Vai trò:** Section nội dung màu sắc full-bleed

Background #4541fe Electric Iris, text #ffffff bằng Inter 700 36–64px, vertical padding rộng rãi 80–120px. Hệ thống sử dụng section này một cách tiết kiệm — tối đa một section mỗi trang — để tạo ra một dấu chấm than thị giác.

### Partner Logo Strip
**Vai trò:** Hàng logo chính phủ/khách hàng

Hàng ngang các logo đơn sắc trắng hoặc grayscale, cao 40–60px, column-gap đều 24–32px, canh giữa trên canvas tối hoặc sáng. Không border, không card backgrounds — logo nổi trên bề mặt.

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

Background #101722, chiều cao ~64px, logo bên trái (Healthy Together với icon trái tim), nav links ở giữa bằng Inter 600 14px #ffffff (Solutions, Company, Resources), CTA bên phải (Electric Iris pill). Không dropdown shadows — thanh dark phẳng.

### Floating Chat Widget
**Vai trò:** Bubble trợ giúp/chat cố định

Nút tròn nhỏ ~48px, background #4541fe với icon chat trắng, fixed bottom-right. Bao gồm tooltip có thể đóng "Hi, Need any help?" với nút X close. Đủ nhỏ để không cạnh tranh với nội dung.

### Gradient Ribbon Graphic
**Vai trò:** Hero element trang trí đặc trưng

Đường cong S lướt ngang chiều rộng hero, được render dưới dạng SVG hoặc CSS gradient. Gradient: linear-gradient(270deg, #4541fe 40%, #fe0f83). Nằm phía sau/xuyên qua headline, tạo chiều sâu và chuyển động mà không cần animation.

### Carousel Arrow Button
**Vai trò:** Điều hướng carousel testimonial

Nút tròn, đường kính 40px, background #101722, icon mũi tên trắng, canh giữa theo chiều ngang. Không label — chỉ icon. Được sử dụng trong review section.

### Card Carousel Track
**Vai trò:** Hàng card cuộn ngang

Cards trong một hàng flex/overflow-scroll ngang, column-gap 24px, với các card một phần hiển thị ở rìa để gợi ý khả năng cuộn. Trên canvas oải hương #f9f0ff.

## Do's and Don'ts

### Do
- Sử dụng Inter ở weight 700 với letter-spacing -0.05em cho tất cả display headline — tracking dày đặc ở kích thước lớn là chữ ký typographic của hệ thống
- Neo mọi section trang vào một trong ba màu: #101722 Midnight Ink, #f9f0ff Linen Lavender, hoặc #4541fe Electric Iris — không bao giờ dùng trắng thuần làm canvas full-bleed
- Áp dụng border-radius 42px cho tất cả cards và 9999px cho tất cả buttons và tags — hai bán kính này định nghĩa độ mềm mại của hệ thống
- Sử dụng ribbon gradient hồng-tím (linear-gradient(270deg, #4541fe 40%, #fe0f83)) chỉ trong hero như một khoảnh khắc trang trí duy nhất
- Đặt CTA buttons ở 14px hoặc 16px Inter 600 với pill radius 9999px và vertical padding 10–14px
- Duy trì card padding 24px và element gaps 16px làm baseline rhythm tokens
- Giữ Electric Iris #4541fe dành riêng cho một vivid section block và CTA fills — sự khan hiếm tạo ra tác động

### Don't
- Đừng giới thiệu typeface thứ hai — hệ thống chỉ dùng một font theo thiết kế
- Đừng sử dụng radii vuông hoặc nhỏ (4–8px) trên cards — radius 42px là bất di bất dịch cho cảm giác mềm mại
- Đừng dùng #ffffff làm canvas trang full-bleed — mọi background nên là midnight, lavender, hoặc electric iris
- Đừng áp dụng ribbon gradient cho buttons, text, hoặc các element không phải hero — nó là cử chỉ hero một lần
- Đừng dùng #fe0f83 magenta làm fill độc lập — nó chỉ tồn tại như điểm cuối gradient kết hợp với Electric Iris
- Đừng thêm drop shadow nặng vào cards — hệ thống sử dụng tối đa rgba(23,73,77,0.15) 0 20px 30px để tạo độ nâng nhẹ
- Đừng trộn nhiều hơn hai surface temperatures trên mỗi viewport nhìn thấy được (tối + accent, hoặc sáng + accent)
- Đừng sử dụng line-heights trên 1.40 cho body hoặc trên 1.10 cho display — nhịp điệu dọc nén chặt là thiết yếu

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Midnight Canvas | `#101722` | Nền tối cấp trang cho hero và nav |
| 1 | Lavender Field | `#f9f0ff` | Canvas section sáng giữa các khối tối |
| 2 | Pure Card | `#ffffff` | Nội thất card và component |
| 3 | Lilac Wash | `#d9c6ff` | Bề mặt accent mềm cho chips, tags, highlight zones |
| 4 | Electric Iris | `#4541fe` | Accent sections full-bleed sống động và CTA fills |

## Elevation

- **Card:** `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px`
- **Accent card on Electric Iris:** `rgb(69, 65, 254) 40px 0px 576px 160px — lớp phát sáng violet khuếch tán lớn bao quanh highlight cards`

## Imagery

Không ảnh chụp, dẫn dắt bằng illustration. Ngôn ngữ thị giác được xây dựng từ một element signature: một đường cong S lướt được render dưới dạng gradient tuyến tính hồng-tím (270deg, #4541fe → #fe0f83) chảy qua hero phía sau headline. Tất cả đồ họa khác đều phẳng — Google Play icons trong cards, logo đối tác chính phủ đơn sắc trong một dải, và icon trái tim trong wordmark. Không 3D, không product screenshots, không lifestyle photography. Ribbon là hình dạng hữu cơ duy nhất; mọi thứ khác đều hình học và phẳng. Icon style là filled, mono-color, weight tương đương 1.5–2px. Imagery chiếm khoảng 20% trang — text và color blocks chiếm ưu thế.

## Layout

Hero tối full-bleed với headline canh giữa hoặc canh trái được phủ bởi gradient ribbon, tiếp theo là các dải full-width luân phiên: vivid Electric Iris section, sau đó là soft Lavender section với card carousel ngang. Navigation là một thanh dark phẳng (64px) với logo trái, links giữa, CTA phải — không sticky shadow. Nội dung được canh giữa trong ~1200px max-width trên các lavender sections, nhưng các section dark và electric-iris thực sự full-bleed. Section gaps rộng rãi (56–80px). Card carousel sử dụng partial-edge visibility để gợi ý horizontal scroll. Partner logos nằm trong một hàng ngang duy nhất ở cuối hero, canh giữa. Nhịp điệu tổng thể: dark → vivid → soft → light cards, không có section nào lặp lại background color liên tiếp.

## Agent Prompt Guide

**Quick Color Reference**
- text: #101722 (Midnight Ink)
- background (dark): #101722 (Midnight Ink)
- background (light): #f9f0ff (Linen Lavender)
- surface/card: #ffffff
- border: #6c6c7a (Muted Graphite) ở độ mờ 0.3, hoặc hairline #101722 ở độ mờ 0.08
- accent: #4541fe (Electric Iris)
- primary action: #4541fe (filled action)

**3-5 Example Component Prompts**

1. Tạo một Primary Action Button: background #4541fe, text #f9f0ff, radius 9999px, padding pill nhỏ gọn. Sử dụng filled treatment này cho main CTA.

2. *Vivid accent section*: Full-bleed background #4541fe. Headline ở 48px Inter 700, #ffffff, line-height 1.1. Body text ở 18px Inter 400, #ffffff ở độ mờ 0.8. Vertical padding 96px trên và dưới.

3. *Testimonial card trên lavender*: Background #f9f0ff. Card: fill #ffffff, radius 42px, padding 32px, shadow nhẹ rgba(23,73,77,0.15) 0 20px 30px. Tên ở 18px Inter 600 #101722. Hàng sao (5 sao vàng, 14px). Body ở 14px Inter 400 #3f424e.

4. *Navigation bar*: Background #101722, chiều cao 64px, full-width. Logo trái: icon trái tim (#fe0f83) + 'Healthy Together' bằng Inter 600 16px #ffffff. Giữa: 'Solutions / Company / Resources' bằng Inter 600 14px #ffffff với khoảng cách 24px. Phải: Electric Iris pill button (background #4541fe, text #ffffff, radius 9999px, padding 10px 20px).

5. *Partner logo strip*: Hàng ngang 6–8 logo đơn sắc trắng, cao 48px, column-gap 32px, canh giữa trên background #101722. Không card backgrounds, không borders — logo nổi trực tiếp trên canvas tối.

## Similar Brands

- **Webflow** — Cùng hero dark-anchored với single vivid violet accent và oversized compressed display type
- **Cal.com** — Full-bleed dark sections luân phiên với vivid brand-color blocks, pill-shaped CTAs, card radii rộng rãi
- **Linear** — Single-font system (Inter), tight letter-spacing trên large headings, midnight canvas với một electric accent
- **Lenny's Newsletter (Lennys.com)** — Dark hero với sweeping decorative gradient ribbon, nhịp điệu section dark/light luân phiên, pill CTAs

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-ink: #101722;
  --color-linen-lavender: #f9f0ff;
  --color-pure-white: #ffffff;
  --color-muted-graphite: #6c6c7a;
  --color-deep-charcoal: #3f424e;
  --color-electric-iris: #4541fe;
  --gradient-electric-iris: linear-gradient(270deg, #4541fe 40%, #fe0f83);
  --color-lilac-whisper: #d9c6ff;
  --color-hot-magenta: #fe0f83;

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.4;
  --tracking-caption: -0.7px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: -0.8px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -1.2px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.15;
  --tracking-heading-sm: -1.8px;
  --text-heading: 64px;
  --leading-heading: 1.1;
  --tracking-heading: -3.2px;
  --text-heading-lg: 72px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -3.6px;
  --text-display: 92px;
  --leading-display: 0.88;
  --tracking-display: -4.6px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --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-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-160: 160px;

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

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 28.8px;
  --radius-3xl-2: 42px;
  --radius-full: 1600px;
  --radius-full-2: 16000px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 42px;
  --radius-small: 20px;
  --radius-inputs: 12px;
  --radius-buttons: 9999px;

  /* Shadows */
  --shadow-xl: rgba(23, 73, 77, 0.15) 0px 20px 30px 0px;
  --shadow-xl-2: rgb(69, 65, 254) 40px 0px 576px 160px;

  /* Surfaces */
  --surface-midnight-canvas: #101722;
  --surface-lavender-field: #f9f0ff;
  --surface-pure-card: #ffffff;
  --surface-lilac-wash: #d9c6ff;
  --surface-electric-iris: #4541fe;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-ink: #101722;
  --color-linen-lavender: #f9f0ff;
  --color-pure-white: #ffffff;
  --color-muted-graphite: #6c6c7a;
  --color-deep-charcoal: #3f424e;
  --color-electric-iris: #4541fe;
  --color-lilac-whisper: #d9c6ff;
  --color-hot-magenta: #fe0f83;

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

  /* Typography — Scale */
  --text-caption: 14px;
  --leading-caption: 1.4;
  --tracking-caption: -0.7px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: -0.8px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -1.2px;
  --text-heading-sm: 36px;
  --leading-heading-sm: 1.15;
  --tracking-heading-sm: -1.8px;
  --text-heading: 64px;
  --leading-heading: 1.1;
  --tracking-heading: -3.2px;
  --text-heading-lg: 72px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -3.6px;
  --text-display: 92px;
  --leading-display: 0.88;
  --tracking-display: -4.6px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-2xl: 20px;
  --radius-3xl: 28.8px;
  --radius-3xl-2: 42px;
  --radius-full: 1600px;
  --radius-full-2: 16000px;

  /* Shadows */
  --shadow-xl: rgba(23, 73, 77, 0.15) 0px 20px 30px 0px;
  --shadow-xl-2: rgb(69, 65, 254) 40px 0px 576px 160px;
}
```