# Vibrants

> # Vibrants — Style Reference

## Prompt Content

```
# Vibrants — Style Reference
> Skyborne apothecary trên nền đá cẩm thạch trắng — mực xanh navy đậm là cối giã thuốc, quang phổ cầu vồng là liều thuốc.

**Theme:** light

Vibrants mang phong cách quầy wellness sáng sủa, mang hơi hướng lâm sàng: nền trắng, mực xanh navy đậm làm nhiệm vụ chính cho chữ và primary buttons, và một dải cầu vồng full-spectrum chỉ xuất hiện trên bề mặt sản phẩm. Ngữ pháp thị giác có chủ đích là yên tĩnh bên ngoài hero và product imagery — gần như cấu trúc đơn sắc với một điểm xanh lá tươi duy nhất dùng để nhấn mạnh khuyến mãi, badge và xác nhận. Headlines sử dụng custom serif nghiêng về editorial và đáng tin cậy, trong khi body copy và UI dùng geometric sans-serif mang cảm giác chính xác như dược phẩm. Các component phẳng với hairline borders, bo góc 8px mềm mại, và elevation tối thiểu; chiều sâu đến từ độ tương phản màu sắc và khoảng trắng rộng rãi thay vì đổ bóng. Hero gradient xanh trời và product mockup nổi tạo tông màu điềm tĩnh, lạc quan mà phần còn lại của trang duy trì qua khoảng cách thoáng đãng và typography tiết chế.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|-------|
| Deep Navy | `#021422` | `--color-deep-navy` | Primary text, primary filled buttons, nav backgrounds, heading ink, footer surface — gần như đen nhưng đọc như mực chứ không phải đen tuyền, neo trang trong khi vẫn đủ mềm để kết hợp với trắng |
| Vibrant Green | `#00852e` | `--color-vibrant-green` | Sale badges, discount pills, success indicators, điểm nhấn dùng một lần — sắc thái rực rỡ duy nhất chạm vào chrome; mọi bề mặt màu sắc khác đều thuộc về sản phẩm |
| Midnight Navy | `#001f38` | `--color-midnight-navy` | Nhấn mạnh secondary text, card border accent trên hero product, phân cấp heading ngay dưới Deep Navy — xanh lam hơn một chút để tạo biến thể tông màu mà không rời khỏi họ |
| Sky Wash | `#91c3ff` | `--color-sky-wash` | Outlined button borders, icon accents, link highlights — xanh lam nhẹ thì thầm chứ không la hét, dùng cho ghost controls vẫn cần định nghĩa màu sắc |
| Snow | `#ffffff` | `--color-snow` | Page canvas, card surface, button text trên nền tối, badge text — background chủ đạo |
| Cloud | `#f2f6ff` | `--color-cloud` | Bề mặt tông lạnh cho elevated cards, lớp wash nhẹ phía sau testimonials, backdrop panels xanh lam rất nhạt — mặt lạnh của surface stack |
| Warm Sand | `#fff6ea` | `--color-warm-sand` | Bề mặt tông ấm cho promotional hoặc seasonal highlight cards, sale callout backgrounds — điểm đối trọng ấm của Cloud |
| Silver Mist | `#ccd2d7` | `--color-silver-mist` | Card borders, badge backgrounds, hairline dividers — màu xám cấu trúc phân tách các lớp trắng-trên-trắng |
| E6e8e9 | `#e6e8e9` | `--color-e6e8e9` | Navigation dividers, secondary hairline borders — nhạt hơn Silver Mist một chút cho các cạnh ít nổi bật |
| Iron Gray | `#808f9c` | `--color-iron-gray` | Muted card borders, secondary borders, card outlines đã giảm nhấn — xám lạnh với undertone xanh lam |
| Slate | `#6a7c89` | `--color-slate` | Muted body text, helper text, de-emphasized metadata — dễ đọc nhưng rõ ràng là phụ so với Deep Navy |
| Graphite | `#67727a` | `--color-graphite` | Heading sub-labels, nav secondary text, card meta text — xám trung bình cho phân cấp thông tin |
| Charcoal | `#262626` | `--color-charcoal` | Icon fills, micro-typography, SVG strokes mảnh — đen mềm không bao giờ chạm #000 tuyệt đối |
| Spectrum Gradient | `linear-gradient(90deg, rgba(114,77,153,0.05) 0%, rgba(58,61,138,0.05) 17%, rgba(2,175,224,0.05) 35%, rgba(95,183,62,0.05) 51%, rgba(255,237,0,0.05) 67%, rgba(237,116,43,0.05) 83%, rgba(222,39,53,0.05) 100%)` | `--color-spectrum-gradient` | Decorative product-spectrum gradient chảy tím → chàm → lục lam → xanh lá → vàng → cam → đỏ — chỉ dùng trong hero wash và product card colorways, không bao giờ trên UI chrome |

## Tokens — Typography

### Montserrat — Họ label, badge-support và footer-typography. Dùng cho uppercase labels ở 10–12px với tracking rộng (0.10–0.13em), và cho body copy cần tông geometric trung tính. Khoảng cách chữ rộng ở kích thước nhỏ là động thái xác định cho category labels và section eyebrows. · `--font-montserrat`
- **Thay thế:** Montserrat, Work Sans, hoặc Space Grotesk
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 10px, 12px, 14px, 15px, 16px, 20px
- **Line height:** 1.14–1.80
- **Letter spacing:** 0.10em ở 10px, 0.13em ở 12px
- **Vai trò:** Họ label, badge-support và footer-typography. Dùng cho uppercase labels ở 10–12px với tracking rộng (0.10–0.13em), và cho body copy cần tông geometric trung tính. Khoảng cách chữ rộng ở kích thước nhỏ là động thái xác định cho category labels và section eyebrows.

### New Kansas — Họ display và heading chính — một custom serif với sự ấm áp và uy tín editorial. Đảm nhận headlines 36–48px, subheads 20–28px, và emphasized body 16–20px. Việc chọn serif thay vì geometric sans là quyết định typography đặc trưng của thương hiệu: nó mang cảm giác apothecary và đáng tin cậy thay vì tech-SaaS. Weight 600 là mặc định cho headlines; 500 cho emphasis kiểu italic. · `--font-new-kansas`
- **Thay thế:** Fraunces, Playfair Display, hoặc DM Serif Display
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 14px, 15px, 16px, 18px, 20px, 22px, 24px, 28px, 32px, 36px, 44px, 48px
- **Line height:** 1.00–2.00
- **Letter spacing:** -0.02em ở 48px, -0.01em ở 24–32px, normal dưới 20px
- **Vai trò:** Họ display và heading chính — một custom serif với sự ấm áp và uy tín editorial. Đảm nhận headlines 36–48px, subheads 20–28px, và emphasized body 16–20px. Việc chọn serif thay vì geometric sans là quyết định typography đặc trưng của thương hiệu: nó mang cảm giác apothecary và đáng tin cậy thay vì tech-SaaS. Weight 600 là mặc định cho headlines; 500 cho emphasis kiểu italic.

### Inter — Họ UI và body cho cards, navigation, links, và small functional text. Negative letter-spacing thắt chặt ở body sizes (-0.022em ở 16px, -0.01em ở 14px) để đọc mượt, tối ưu màn hình. Xuất hiện khi New Kansas cảm thấy quá editorial — tabs, micro-copy, card metadata. · `--font-inter`
- **Thay thế:** Inter, DM Sans, hoặc system-ui
- **Weights:** 400, 500, 600
- **Kích thước:** 12px, 13px, 14px, 16px
- **Line height:** 1.00–1.33
- **Letter spacing:** -0.022em ở 16px, -0.01em ở 14px, -0.008em ở 12px
- **Vai trò:** Họ UI và body cho cards, navigation, links, và small functional text. Negative letter-spacing thắt chặt ở body sizes (-0.022em ở 16px, -0.01em ở 14px) để đọc mượt, tối ưu màn hình. Xuất hiện khi New Kansas cảm thấy quá editorial — tabs, micro-copy, card metadata.

### Rift Soft — Chỉ dùng riêng cho sale-badge và discount-pill text. Một condensed display face với tracking 0.063em mang lại cho promotional copy trọng lượng giống như tem, có thẩm quyền. Không bao giờ dùng ngoài ngữ cảnh giảm giá — đây là giọng badge, không phải giọng heading. · `--font-rift-soft`
- **Thay thế:** Bebas Neue, Oswald, hoặc Anton
- **Weights:** 600
- **Kích thước:** 16px
- **Line height:** 1.00
- **Letter spacing:** 0.063em
- **OpenType features:** `"ss01" on`
- **Vai trò:** Chỉ dùng riêng cho sale-badge và discount-pill text. Một condensed display face với tracking 0.063em mang lại cho promotional copy trọng lượng giống như tem, có thẩm quyền. Không bao giờ dùng ngoài ngữ cảnh giảm giá — đây là giọng badge, không phải giọng heading.

### Arial — Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-arial`
- **Weights:** 400
- **Kích thước:** 13px
- **Line height:** 1.2
- **Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|-------------|----------------|-------|
| caption | 10px | 1.2 | 1.3px | `--text-caption` |
| label | 12px | 1.2 | 1.56px | `--text-label` |
| body-sm | 14px | 1.43 | -0.14px | `--text-body-sm` |
| body | 16px | 1.5 | -0.35px | `--text-body` |
| body-lg | 20px | 1.5 | -0.1px | `--text-body-lg` |
| subheading | 24px | 1.33 | -0.24px | `--text-subheading` |
| heading-sm | 32px | 1.25 | -0.32px | `--text-heading-sm` |
| heading | 36px | 1.17 | -0.54px | `--text-heading` |
| heading-lg | 44px | 1.14 | -0.88px | `--text-heading-lg` |
| display | 48px | 1.13 | -0.96px | `--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` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 72 | 72px | `--spacing-72` |
| 80 | 80px | `--spacing-80` |
| 128 | 128px | `--spacing-128` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 12px |
| tags | 3px |
| cards | 8px |
| pills | 20px |
| badges | 3px |
| inputs | 8px |
| buttons | 8px |
| hero-panels | 12px |

### Layout

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

## Components

### Primary Filled Button (Shop Patches)
**Vai trò:** Primary CTA — navy fill tương phản cao với chữ trắng, dùng một lần mỗi section cho hành động chính

Nền Deep Navy (#021422), chữ trắng (#ffffff), border-radius 8px, padding dọc 18px, padding ngang 24px. New Kansas weight 600, 14–16px, uppercase tracking 0.10em. Không đổ bóng. Là một khối đặc — button filled duy nhất trong hệ thống.

### Secondary Outlined Button (Shop Now)
**Vai trò:** Secondary action — ghost variant cho supporting CTAs

Nền trong suốt, border 1px #021422, radius 8px, padding 16–18px, chữ Deep Navy. New Kansas weight 600 ở 14px với uppercase 0.10em tracking. Dùng khi đã có primary filled button trên trang.

### Sky Ghost Button
**Vai trò:** Tertiary action — outlined variant xanh lam nhạt cho low-emphasis links-as-buttons

Fill trong suốt, border 1px Sky Wash (#91c3ff), radius 8px, padding 14–16px, chữ Deep Navy. Inter weight 500. Border màu sắc báo hiệu khả năng tương tác mà không cạnh tranh với primary CTA.

### Sale Badge (45% OFF)
**Vai trò:** Promotional discount pill đè lên product cards

Nền Vibrant Green (#00852e), chữ trắng, border-radius 3px (hình chữ nhật góc sắc, không phải pill), padding dọc 3px / ngang 6px. Rift Soft weight 600, ~10–12px, uppercase 0.063em tracking. Nằm góc trên bên trái của product card. Góc sắc 3px phân biệt badges với tất cả các element bo tròn khác trong hệ thống.

### Star Rating Row
**Vai trò:** Social proof indicator — nội dòng với customer count

Năm icon sao vàng (màu vàng hệ thống mặc định) ở 12px, theo sau là Inter weight 400 ở 13px màu Slate (#6a7c89) cho count text. Không có container — nổi nội dòng với copy xung quanh.

### Product Card
**Vai trò:** E-commerce product tile trong carousels và grids

Bề mặt trắng, border 1px Silver Mist (#ccd2d7), radius 8px, padding 16px. Vùng ảnh là sản phẩm màu full-bleed (các biến thể xanh lá/xanh dương/đỏ). Tên sản phẩm bằng New Kansas weight 600 ở 18px Deep Navy, variant label bằng Inter 14px Slate, giá bằng New Kansas 16px Deep Navy với giá gốc gạch ngang màu Slate.

### Hero Product Mockup Panel
**Vai trò:** 3D-illustrated product showcase nổi trong hero

Các product box màu xếp chồng (xanh lá, xanh đậm, đỏ, xanh trời) với white inner cards, radius 8px trên mỗi box, border 1px nhẹ. Không có container — nổi trực tiếp trên hero background gradient xanh trời.

### Testimonial Chat Bubble
**Vai trò:** Customer review được render như một UI element dạng chat-message

Fill trắng, border 1px Silver Mist, radius 16–20px (bo tròn nhưng không phải pill), padding 12–16px. Inter weight 400 ở 14px Deep Navy. Avatar tròn nhỏ với nền màu gắn góc dưới bên phải. Hai bubble xếp chồng trên background panel tông Cloud (#f2f6ff).

### Sticky Cart Notification
**Vai trò:** Toast góc dưới bên trái xác nhận sản phẩm đã được thêm

Bề mặt trắng, border 1px #ccd2d7, radius 8px, padding 12px. Chứa icon khiên xanh nhỏ, body text Inter 12px với tên sản phẩm được link màu Vibrant Green. Trượt vào từ bên trái, cố định ở góc dưới bên trái.

### Top Announcement Bar
**Vai trò:** Sitewide promo strip phía trên nav

Nền Deep Navy (#021422), chữ trắng, căn giữa, padding 8–12px. Inter hoặc Montserrat weight 600 ở 12–14px, uppercase 0.10em tracking. Dải tối full-bleed duy nhất trên trang.

### Section Header (Our Patches)
**Vai trò:** Large editorial section title

New Kansas weight 600 ở 36–44px, Deep Navy (#021422), không có eyebrow hoặc subtitle trừ khi đi kèm với carousel control. Căn trái, khoảng trống rộng bên dưới trước khi grid bắt đầu.

### Nav Header
**Vai trò:** Sticky top navigation bar

Nền trắng, border dưới 1px #e6e8e9, padding dọc 12px. Logo (heart-icon + wordmark) bên trái, nav links ở giữa (New Kansas hoặc Inter 14–16px, Deep Navy), account/cart icons bên phải. Không đổ bóng — một hairline separator sạch sẽ xác định cạnh.

### Footer
**Vai trò:** Dark site footer với link columns và social icons

Nền Deep Navy (#021422), padding dọc 40–48px, grid link 3–4 cột. Column headers bằng Montserrat 12px Vibrant Green, uppercase 0.10em. Links bằng Inter 14px trắng ở độ mờ 60%. Social icons (Instagram, Facebook, TikTok, Pinterest) dưới dạng glyphs trắng có outline, căn phải.

### Circular Stamp Badge
**Vai trò:** Decorative approval/seal element trong section 'Feel the Difference'

Fill trắng hoặc rất nhạt, border 1px Deep Navy, hình tròn với text bao quanh chu vi (Rift Soft hoặc Montserrat 10–12px uppercase). Căn giữa phía trên section heading, dùng như thiết bị tín hiệu tin cậy.

## Do's and Don'ts

### Do
- Dùng Deep Navy (#021422) cho tất cả primary filled buttons và primary text — nó là mực cấu trúc, không chỉ là màu tối
- Dùng New Kansas cho mọi heading từ 20px trở lên; serif là chữ ký editorial của thương hiệu
- Dùng border-radius 8px cho tất cả cards, buttons và inputs làm mặc định; chỉ badges phá vỡ xuống 3px và chỉ một số decorative elements cụ thể đẩy lên 12px hoặc 20px
- Chỉ dùng Vibrant Green (#00852e) cho sale badges, discount pills và success confirmations — không bao giờ cho body copy hoặc decorative fills
- Dùng Sky Wash (#91c3ff) làm chromatic border cho outlined/ghost controls khi cần accent xanh lam nhẹ
- Giữ page chrome gần như đơn sắc; để product imagery và hero gradient mang tất cả màu quang phổ
- Dùng Montserrat với letter-spacing 0.10–0.13em cho uppercase category labels và section eyebrows
- Chỉ kết hợp sky-blue gradient hero wash với product imagery hoặc hero mockup — không bao giờ mở rộng vào card hoặc section backgrounds
- Dùng 16px làm spacing unit cơ sở cho card padding và element gaps; 48px cho section separation
- Dùng Inter với negative letter-spacing (-0.022em ở 16px) cho tất cả UI body và link text để duy trì mật độ đọc được trên màn hình

### Don't
- Không dùng đen tuyền (#000000) cho body text hoặc icons — Deep Navy (#021422) và Charcoal (#262626) là các lựa chọn tối
- Không dùng rainbow spectrum gradient trên UI chrome, buttons hoặc non-product surfaces — nó chỉ thuộc về product cards và hero wash
- Không dùng Rift Soft cho bất cứ thứ gì khác ngoài sale-badge và discount-pill text — nó là stamp face, không phải body face
- Không tạo filled buttons bằng màu sắc khác ngoài Deep Navy; chromatic fill thứ cấp duy nhất là green badge
- Không dùng shadows cho elevation; thiết kế dựa vào hairline borders (#ccd2d7) và sự khác biệt surface tint
- Không dùng giá trị radius ngoài scale đã thiết lập (3, 8, 12, 20, 32px) — sự nhất quán là điều làm cho hệ thống có chủ đích
- Không căn giữa body copy hoặc card content; căn trái các khối text trừ khi section là một câu nói duy nhất được căn giữa
- Không thêm nhiều hơn một filled primary button trên mỗi viewport — secondary actions phải là outlined hoặc ghost variants
- Không trộn New Kansas và Inter ở cùng kích thước cho cùng vai trò — New Kansas sở hữu 20px+, Inter sở hữu bên dưới
- Không dùng Warm Sand (#fff6ea) và Cloud (#f2f6ff) làm full-page backgrounds; chúng chỉ là panel-only surface tints

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Page background — màu trắng chủ đạo mà mọi thứ khác nổi trên đó |
| 1 | Cloud | `#f2f6ff` | Panel tông lạnh cho testimonial sections, feature callouts, elevation mềm không cần shadow |
| 2 | Warm Sand | `#fff6ea` | Promotional hoặc seasonal card surface tông ấm — đối trọng ấm của Cloud |
| 3 | Cream Highlight | `#ffe9c9` | Accent surface cho hero highlights hoặc featured-product callouts (hiếm khi dùng) |

## Elevation

Thiết kế cố tình tránh drop shadows. Chiều sâu được xây dựng thông qua ba kỹ thuật xếp lớp: hairline borders 1px màu Silver Mist (#ccd2d7) cho card edges, surface tint shifts từ trắng sang Cloud (#f2f6ff) hoặc Warm Sand (#fff6ea) để phân tách panel, và độ tương phản giữa Deep Navy filled elements và bề mặt trắng. Điều này tạo ra cảm giác phẳng, editorial, apothecary-counter nơi không có gì nổi — mọi thứ đặt chính xác trên một mặt phẳng. Box-shadow duy nhất được phát hiện là hairline 1px pha màu (#f2f6ff), không phải hiệu ứng elevation thực sự.

## Imagery

Ngôn ngữ thị giác bị chi phối bởi product photography của các miếng dán bio-frequency vật lý được render dưới dạng các colored boxes bão hòa — xanh lá, xanh trời, xanh navy đậm, đỏ — mỗi hộp được ghi nhãn bằng serif type trắng trên mặt hộp. Hero có một 3D-illustrated mockup của những hộp này xếp chồng ở các góc trên bệ trắng trên nền gradient xanh trời mềm, tạo cảm giác product-as-architecture. Rainbow spectrum gradient xuất hiện như một lớp wash trang trí mờ trong hero. Testimonials sử dụng avatar minh họa hình tròn nhỏ (nền phẳng, có màu, không có ảnh thực). Social proof icons (star rating) là glyphs vàng tiêu chuẩn. Phong cách nhiếp ảnh tổng thể là high-key, studio-clean và product-isolated: mọi đối tượng được chụp trên nền trắng tuyền hoặc màu tuyền, không có bối cảnh lối sống, không có chủ thể con người — miếng dán là anh hùng. Hero background xanh trời kết cấu mây là hình ảnh khí quyển/môi trường duy nhất trong hệ thống.

## Layout

Mô hình trang là max-width contained ở ~1200px, căn giữa, với top announcement bar và footer là các dải full-bleed. Hero là bố cục chia đôi: cột text bên trái (chiếm ~40% chiều rộng) với headline stack căn trái và CTA, và 3D product mockup nổi bên phải chiếm ~60% còn lại trên gradient xanh trời kéo dài đến các cạnh hero container. Các section bên dưới hero theo nhịp điệu nhất quán: white canvas sections xen kẽ với các section tông rất nhạt (Cloud) để tạo khoảng thở thị giác. Product showcases sử dụng horizontal carousels với circular arrow controls góc trên bên phải. Section 'Feel the Difference' quay lại bố cục chia đôi — text căn giữa + CTA bên trái, testimonial chat bubbles xếp chồng bên phải trên panel tông Cloud. Grids chủ yếu là bố cục card 3–4 cột cho sản phẩm. Navigation là một thanh trắng sticky đơn với hairline bottom border, không có mega-menu, không có sidebar. Density là comfortable trong suốt với section gaps rộng rãi 48px+.

## Agent Prompt Guide

Tham khảo màu nhanh:
- text (primary): #021422
- background (canvas): #ffffff
- border (hairline): #ccd2d7
- accent: #91c3ff
- sale/badge: #00852e
- primary action: #00852e (filled action)

3-5 Ví dụ Component Prompts:

1. Xây dựng hero section trên nền gradient xanh trời (#c4e4fb đến #f2f6ff). Cột trái: New Kansas weight 600, 48px, #021422, letter-spacing -0.02em headline. Bên dưới, body copy Inter 16px, #021422. Bên dưới đó, một filled navy button (nền #021422, chữ trắng, radius 8px, padding 18px/24px, New Kansas 14px uppercase 0.10em). Cột phải: một dàn sắp xếp nổi của bốn colored product cards (xanh lá #00852e, navy #001f38, đỏ #c43030, xanh trời #4ba3d8) ở các góc nghiêng nhẹ, mỗi card có white inner panel.

2. Xây dựng product card: nền trắng, border 1px #ccd2d7, radius 8px, padding 16px. Một sale badge Vibrant Green (#00852e) với radius 3px, Rift Soft 12px uppercase 0.063em, chữ trắng nằm góc trên bên trái phía trên ảnh. Tên sản phẩm bằng New Kansas 18px weight 600 #021422. Variant label bằng Inter 14px #6a7c89. Giá bằng New Kansas 16px #021422 với giá gốc gạch ngang màu #6a7c89.

3. Xây dựng testimonial panel: nền #f2f6ff, radius 20px, padding 24px. Hai white chat bubbles xếp chồng với border 1px #ccd2d7, radius 16px, padding 16px, body text Inter 14px #021422. Mỗi bubble có avatar tròn nhỏ (32px, nền màu đặc) góc dưới bên phải.

4. Xây dựng sticky cart notification: bề mặt trắng, border 1px #ccd2d7, radius 8px, padding 12px. Icon khiên xanh (16px) bên trái, sau đó text Inter 12px với tên sản phẩm được link màu #00852e. Định vị fixed góc dưới bên trái.

5. Xây dựng footer: nền #021422, padding dọc 48px, grid 4 cột. Column headers bằng Montserrat 12px #00852e uppercase 0.13em. Links bằng Inter 14px trắng ở độ mờ 60%, row gap 8px. Social icons (Instagram, Facebook, TikTok, Pinterest) dưới dạng glyphs outline trắng 20px ở cột ngoài cùng bên phải.

## Gradient System

Hai họ gradient cùng tồn tại nhưng phục vụ các mục đích khác nhau. Spectrum gradient (tím → chàm → lục lam → xanh lá → vàng → cam → đỏ ở độ mờ 5%) xuất hiện độc quyền trong hero như một lớp wash khí quyển mờ — nó báo hiệu sự đa dạng màu sắc của dòng sản phẩm mà không bao giờ lấn át. Striped diagonal gradients (trắng-xám và #021422 xen kẽ các dải 6–8px) là các mẫu sọc trang trí được dùng làm chi tiết nhấn nhỏ, không phải làm backgrounds. Một sky-gradient thứ ba (xanh lam nhạt #c4e4fb chuyển sang trắng) xuất hiện phía sau hero product mockup. Không gradient nào được áp dụng cho UI chrome, buttons, cards hoặc section backgrounds.

## Iconography & Glyphs

Icons tối giản và chức năng: dạng line, stroke 1.5px, Deep Navy (#021422) hoặc white-on-dark fill, ở kích thước 16–20px. Brand mark kết hợp một glyph trái tim cách điệu với wordmark 'Vibrants'. Social icons (Instagram, Facebook, TikTok, Pinterest) là glyphs nền tảng tiêu chuẩn được render dưới dạng outlines trắng trên footer tối. Star icons cho ratings sử dụng vàng mặc định (dải #f5b500) ở 12px. Circular stamp badge trong section 'Feel the Difference' sử dụng một vòng text theo đường tròn, render bằng Rift Soft hoặc Montserrat 10–12px uppercase. Không có bộ icon nào chiếm ưu thế — hệ thống tiết chế, chỉ sử dụng icons ở nơi chúng mang trọng lượng chức năng (cart, account, navigation arrows, social platforms).

## Similar Brands

- **Hims** — Cùng register thị giác clinical-wellness — light canvas, deep-navy ink cho primary text và CTAs, và một chromatic accent duy nhất (xanh lá) dành riêng cho promotional badges và confirmations
- **Athletic Greens / AG1** — Editorial serif headlines kết hợp với bề mặt trắng sạch, bảng màu hẹp để product imagery mang tất cả màu sắc, và uppercase tracked labels cho section eyebrows
- **Ritual** — Ngôn ngữ thương hiệu supplement tối giản với chrome gần như đơn sắc, hairline borders, bo góc 8px mềm, và pattern product carousel đặt sản phẩm màu sắc làm element chromatic duy nhất trên mỗi card
- **Care/of** — Cảm giác wellness ấm áp pha lâm sàng: trang sáng với các cool tinted surface panels thỉnh thoảng, serif display type, và việc sử dụng tiết chế màu xanh lá cho tín hiệu tin cậy/khuyến mãi

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-deep-navy: #021422;
  --color-vibrant-green: #00852e;
  --color-midnight-navy: #001f38;
  --color-sky-wash: #91c3ff;
  --color-snow: #ffffff;
  --color-cloud: #f2f6ff;
  --color-warm-sand: #fff6ea;
  --color-silver-mist: #ccd2d7;
  --color-e6e8e9: #e6e8e9;
  --color-iron-gray: #808f9c;
  --color-slate: #6a7c89;
  --color-graphite: #67727a;
  --color-charcoal: #262626;
  --color-spectrum-gradient: #724d99;
  --gradient-spectrum-gradient: linear-gradient(90deg, rgba(114,77,153,0.05) 0%, rgba(58,61,138,0.05) 17%, rgba(2,175,224,0.05) 35%, rgba(95,183,62,0.05) 51%, rgba(255,237,0,0.05) 67%, rgba(237,116,43,0.05) 83%, rgba(222,39,53,0.05) 100%);

  /* Typography — Font Families */
  --font-montserrat: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-new-kansas: 'New Kansas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rift-soft: 'Rift Soft', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 1.3px;
  --text-label: 12px;
  --leading-label: 1.2;
  --tracking-label: 1.56px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.35px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.1px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.32px;
  --text-heading: 36px;
  --leading-heading: 1.17;
  --tracking-heading: -0.54px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.14;
  --tracking-heading-lg: -0.88px;
  --text-display: 48px;
  --leading-display: 1.13;
  --tracking-display: -0.96px;

  /* 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-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-128: 128px;

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

  /* Border Radius */
  --radius-sm: 3px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 32px;
  --radius-full: 50px;

  /* Named Radii */
  --radius-nav: 12px;
  --radius-tags: 3px;
  --radius-cards: 8px;
  --radius-pills: 20px;
  --radius-badges: 3px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;
  --radius-hero-panels: 12px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-cloud: #f2f6ff;
  --surface-warm-sand: #fff6ea;
  --surface-cream-highlight: #ffe9c9;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-deep-navy: #021422;
  --color-vibrant-green: #00852e;
  --color-midnight-navy: #001f38;
  --color-sky-wash: #91c3ff;
  --color-snow: #ffffff;
  --color-cloud: #f2f6ff;
  --color-warm-sand: #fff6ea;
  --color-silver-mist: #ccd2d7;
  --color-e6e8e9: #e6e8e9;
  --color-iron-gray: #808f9c;
  --color-slate: #6a7c89;
  --color-graphite: #67727a;
  --color-charcoal: #262626;
  --color-spectrum-gradient: #724d99;

  /* Typography */
  --font-montserrat: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-new-kansas: 'New Kansas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rift-soft: 'Rift Soft', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.2;
  --tracking-caption: 1.3px;
  --text-label: 12px;
  --leading-label: 1.2;
  --tracking-label: 1.56px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.35px;
  --text-body-lg: 20px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.1px;
  --text-subheading: 24px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.24px;
  --text-heading-sm: 32px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.32px;
  --text-heading: 36px;
  --leading-heading: 1.17;
  --tracking-heading: -0.54px;
  --text-heading-lg: 44px;
  --leading-heading-lg: 1.14;
  --tracking-heading-lg: -0.88px;
  --text-display: 48px;
  --leading-display: 1.13;
  --tracking-display: -0.96px;

  /* 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-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-128: 128px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-3xl: 32px;
  --radius-full: 50px;
}
```