# Flowers For Society

> # Flowers For Society — Style Reference

## Prompt Content

```
# Flowers For Society — Style Reference
> indigo editorial trên nền gallery trắng — một giọng tím đậm duy nhất đặt trên canvas giấy trắng, nơi ảnh sản phẩm và typography làm toàn bộ công việc kể chuyện.

**Theme:** light

Flowers For Society là một fashion house nói bằng một giọng duy nhất, đầy quyết đoán: deep indigo (#203b90) xuyên suốt mọi bề mặt — logo, heading, button, border, và hero scrim — được neo bởi một gallery trắng thoáng đãng. Sản phẩm là hero: ảnh full-bleed với gradient overlay để đảm bảo độ dễ đọc, CTA hình pill cỡ lớn với border-radius 41-60px, và display type căn giữa sử dụng line-height cực sít của Integral (0.92-1.0) để nén không gian dọc. Hệ thống cố tình tối giản — hai custom typeface, không shadow, border-radius cực rộng, và một màu sắc duy nhất. Soehne đảm nhận UI với letter-spacing rộng (0.033-0.063em) giúp ngay cả chữ nhỏ cũng mang nhịp điệu boutique, editorial. Kết quả mang cảm giác như một trang tạp chí: tự tin, kiềm chế, và mang đậm dấu ấn thương hiệu.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Indigo Statement | `#203b90` | `--color-indigo-statement` | Màu thương hiệu chính — logo, tất cả heading, primary action fill, action border, và hero scrim bên trái. Đây là màu sắc duy nhất trong hệ thống; nó xuất hiện trên hầu hết mọi bề mặt để khẳng định sự hiện diện của thương hiệu |
| Indigo Mist | `#7989bc` | `--color-indigo-mist` | Màu tím nhẹ cho border tinh tế và secondary outline — phiên bản dịu hơn của Indigo Statement, dùng khi độ bão hòa đầy đủ sẽ cảm thấy nặng nề |
| Paper White | `#ffffff` | `--color-paper-white` | Trạng thái form trung tính, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc nên giữ ở mức kín đáo. Không nâng cấp nó thành màu CTA chính |
| Carbon | `#000000` | `--color-carbon` | Icon stroke, border sắc nét, và điểm nhấn văn bản tương phản cao. Dùng có chọn lọc khi màu thương hiệu indigo quá mềm |
| Graphite | `#1b1b1b` | `--color-graphite` | Gần đen cho button border và chữ SHOP NOW — giải pháp thay thế mềm hơn so với đen nguyên chất cho các cạnh tinh tế |
| Fog | `#f2f2f2` | `--color-fog` | Footer background — điểm khác biệt duy nhất so với trắng tinh, tạo một dải màu yên tĩnh ở cuối trang |

## Tokens — Typography

### Soehne — Body, navigation, buttons, UI text — con ngựa thồ. Tracking cố tình rộng trên các kích thước nhỏ (0.063em ở 11px, 0.055em ở 14px) mang lại cho ngay cả utility text nhịp điệu boutique, editorial. Weight 700 dành riêng cho nav items và button labels. · `--font-soehne`
- **Thay thế:** Inter, DM Sans
- **Weights:** 400, 700
- **Kích thước:** 11px, 14px, 16px, 18px
- **Line height:** 1.20, 1.30, 1.40, 1.50, 1.80
- **Letter spacing:** 0.033em ở 16-18px, 0.043-0.056em ở 14px, 0.063em ở 11px
- **Vai trò:** Body, navigation, buttons, UI text — con ngựa thồ. Tracking cố tình rộng trên các kích thước nhỏ (0.063em ở 11px, 0.055em ở 14px) mang lại cho ngay cả utility text nhịp điệu boutique, editorial. Weight 700 dành riêng cho nav items và button labels.

### Integral — Display và headings — giọng editorial. Dùng ở một weight duy nhất (400) dựa vào mật độ tự nhiên của font và line-height cực sít (0.92-1.0) để tạo display type nén, kiểu tạp chí. Tracking 0.077em ở 52px là xử lý dành riêng cho logo. · `--font-integral`
- **Thay thế:** Druk Wide, Bebas Neue, Anton (chỉ cho display)
- **Weights:** 400
- **Kích thước:** 13px, 15px, 18px, 35px, 37px, 45px, 52px
- **Line height:** 0.92, 1.00, 1.10, 1.28
- **Letter spacing:** 0.013-0.017em ở 45-52px (sít), 0.035-0.048em ở 35-37px (vừa phải), 0.04em ở 18px, 0.077em ở 52px (logo display)
- **Vai trò:** Display và headings — giọng editorial. Dùng ở một weight duy nhất (400) dựa vào mật độ tự nhiên của font và line-height cực sít (0.92-1.0) để tạo display type nén, kiểu tạp chí. Tracking 0.077em ở 52px là xử lý dành riêng cho logo.

### Arial — System fallback cho các ngữ cảnh không phải thương hiệu (email, transactional surfaces). Không dùng trong site chrome chính. · `--font-arial`
- **Thay thế:** system-ui
- **Weights:** 400, 700
- **Kích thước:** 14px
- **Line height:** 1.20
- **Vai trò:** System fallback cho các ngữ cảnh không phải thương hiệu (email, transactional surfaces). Không dùng trong site chrome chính.

### Nunito-Sans-Klaviyo-Hosted — Nunito-Sans-Klaviyo-Hosted — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-nunito-sans-klaviyo-hosted`
- **Weights:** 400, 700
- **Kích thước:** 18px, 20px
- **Line height:** 1, 1.2
- **Vai trò:** Nunito-Sans-Klaviyo-Hosted — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả

### GTStandard-M — GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả · `--font-gtstandard-m`
- **Weights:** 400
- **Kích thước:** 18px
- **Line height:** 1.5
- **Letter spacing:** 0.033
- **Vai trò:** GTStandard-M — đượ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 | 11px | 1.5 | 0.69px | `--text-caption` |
| body-sm | 14px | 1.5 | 0.6px | `--text-body-sm` |
| body | 16px | 1.4 | 0.53px | `--text-body` |
| subheading | 18px | 1.1 | 0.72px | `--text-subheading` |
| heading-sm | 35px | 1 | 1.23px | `--text-heading-sm` |
| heading | 45px | 1 | 0.77px | `--text-heading` |
| heading-lg | 52px | 0.92 | 0.68px | `--text-heading-lg` |

## Tokens — Spacing & Shapes

**Density:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 13 | 13px | `--spacing-13` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |
| 50 | 50px | `--spacing-50` |
| 52 | 52px | `--spacing-52` |
| 60 | 60px | `--spacing-60` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| tags | 41px |
| cards | 4px |
| inputs | 41px |
| buttons | 41px |
| buttons-lg | 60px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 50px
- **Card padding:** 30px
- **Element gap:** 12px

## Components

### Announcement Bar
**Vai trò:** Dải utility đầu trang cho các tag khuyến mãi hoặc chiến dịch.

Nền trắng, text căn giữa bằng Soehne 11px weight 700, uppercase, letter-spacing 0.063em, #203b90. Chiều cao ~40px. Có thể kèm mũi tên glyph ở cuối.

### Header Navigation
**Vai trò:** Navigation chính của site — link trái, logo giữa, icon utility phải.

Nền trắng, không border, không shadow. Bên trái: nav links bằng Soehne 14px weight 400, #203b90, letter-spacing 0.043em, cách nhau bằng khoảng cách ~24px. Giữa: logo mark. Phải: account và cart icons màu #203b90, kích thước 20-24px.

### Logo Mark
**Vai trò:** Wordmark — yếu tố nhận diện thương hiệu duy nhất và quan trọng nhất.

"FLOWERS FOR SOCIETY" xếp thành hai dòng, Integral 52px weight 400, #203b90, letter-spacing 0.077em, line-height 0.92. Tracking rộng và line-height sít tạo nên một khối logo nén, mang phong cách editorial.

### Hero Banner
**Vai trò:** Trưng bày sản phẩm full-bleed với text overlay.

Ảnh sản phẩm edge-to-edge (giày sneaker trong cánh đồng hoa cúc). Gradient scrim từ trái sang phải từ rgba(32,59,144,0.7) đến trong suốt để đảm bảo độ dễ đọc của text. Overlay text: Soehne 14-18px weight 700, uppercase, trắng, letter-spacing 0.055em. CTA đặt ở góc dưới bên phải.

### Primary CTA Button (Pill)
**Vai trò:** Call-to-action chủ đạo — dùng cho SHOP NOW và các primary action.

Fill trắng (#ffffff), text #1b1b1b, border-radius 41-60px (pill), Soehne 14px weight 700, uppercase, letter-spacing 0.043em, padding ngang 30px / padding dọc 12-15px. Không border, không shadow. Độ tương phản trắng-trên-ảnh làm nó nổi bật so với ảnh hero.

### Indigo Action Button
**Vai trò:** Secondary CTA trên các bề mặt sáng nơi màu thương hiệu nên đảm nhận hành động.

Fill #203b90, text trắng, border-radius 41px, Soehne 14px weight 700, uppercase, letter-spacing 0.043em, padding ngang 30px. Dùng trên các section trắng hoặc xám nhạt nơi pill trắng thiếu độ tương phản.

### Section Display Heading
**Vai trò:** Headline editorial căn giữa cho các section nội dung bên dưới hero.

Integral 35-45px weight 400, #203b90, uppercase, căn giữa, letter-spacing 0.017-0.035em, line-height 1.0. Ví dụ: "A BRAND BUILT ON PURPOSE" — sít, nén, tạo tuyên bố mạnh mẽ.

### Navigation Link
**Vai trò:** Header và inline navigation items.

Soehne 14px weight 400, #203b90, letter-spacing 0.043em, không gạch chân, không có chỉ dẫn đổi màu khi hover (indigo đã là màu thương hiệu). Khoảng cách 24px giữa các item.

### Footer
**Vai trò:** Khu vực utility cuối trang.

Nền #f2f2f2, padding 30px+, Soehne 14px weight 400 màu #203b90 cho links và body text. Bề mặt không trắng duy nhất trên site.

### Input Field
**Vai trò:** Form inputs (email, search, v.v.).

Border-radius 41px (pill), border 1px màu #000000 hoặc #203b90, padding 15-16px, Soehne 16px weight 400. Radius cực rộng khớp với hệ thống button để đảm bảo tính nhất quán về mặt thị giác.

## Do's and Don'ts

### Do
- Dùng #203b90 làm màu sắc duy nhất — nó nên xuất hiện trên logo, heading, border, và hero scrim để khẳng định bản sắc thương hiệu.
- Dùng button hình pill với border-radius 41-60px cho mọi hành động; không bao giờ dùng button hình chữ nhật hoặc hơi bo tròn.
- Dùng ảnh sản phẩm full-bleed với gradient scrim từ trái sang phải cho hero section.
- Dùng Soehne với letter-spacing rộng (0.043-0.063em) cho tất cả UI và body text để duy trì nhịp điệu editorial.
- Dùng Integral với line-height sít (0.92-1.0) cho tất cả display heading để tạo type nén, kiểu tạp chí.
- Giữ trang chủ đạo màu trắng — chỉ dùng #f2f2f2 cho dải footer.
- Dùng padding ngang 30px và padding dọc 12-15px trên tất cả interactive elements.

### Don't
- Không thêm màu sắc khác — toàn bộ hệ thống nói bằng indigo và màu trung tính.
- Không dùng box-shadow hoặc hiệu ứng elevation — thiết kế cố tình phẳng.
- Không dùng button hoặc input hình chữ nhật — radius cực rộng (41-60px) là signature.
- Không dùng body fonts cho heading hoặc display text — Integral đảm nhận giọng editorial độc quyền.
- Không dùng letter-spacing sít trên Soehne — tracking rộng là thứ mang lại cho UI cảm giác boutique.
- Không thêm decorative gradient hoặc background pattern vào các section không phải hero.
- Không dùng nhiều màu border — chỉ dùng #203b90 cho brand borders, #000000 cho utility borders.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 1 | Paper White Canvas | `#ffffff` | Nền trang chính — gallery trắng để indigo mang thương hiệu. |
| 2 | Fog Footer | `#f2f2f2` | Bề mặt không trắng duy nhất, dùng riêng cho dải footer. |

## Elevation

Thiết kế cố tình phẳng — không shadow, không hiệu ứng elevation. Phân cấp thị giác đạt được thông qua màu sắc (indigo trên trắng), typography (Integral display so với Soehne body), và hệ thống border-radius cực rộng, không phải thông qua chiều sâu.

## Imagery

Ảnh sản phẩm full-bleed, chất lượng cao trong bối cảnh tự nhiên, lãng mạn — giày sneaker trong cánh đồng hoa cúc, sản phẩm được tạo dáng trong môi trường hữu cơ. Hình ảnh tươi tốt, bão hòa, giàu phong cách sống, tương phản với UI chrome phẳng, tối giản. Xử lý: edge-to-edge, không bo góc, gradient scrim cho text overlay. Ảnh là hero; UI là khung.

## Layout

Hero photography full-bleed chiếm ưu thế ở viewport đầu tiên, tiếp theo là một content stack căn giữa trên canvas trắng. Header là một thanh trắng mỏng với nav căn trái, logo giữa, và icon utility phải — không có chỉ dẫn sticky behavior. Content section dùng display heading căn giữa với khoảng không dọc rộng rãi (section gap 50px+). Bố cục mang phong cách editorial: mỗi section là một tuyên bố, không phải một grid các tính năng. Navigation tối giản — bốn text links, không mega-menu, không sidebar.

## Agent Prompt Guide

**Tham khảo màu nhanh**
- text (headings): #203b90
- text (body): #000000
- background: #ffffff
- border (brand): #203b90
- accent: #7989bc
- primary action: #203b90 (filled action)

**Ví dụ Component Prompts**

1. Tạo Primary Action Button: nền #203b90, text #ffffff, border-radius 9999px, padding pill gọn. Dùng xử lý filled này cho CTA chính.

2. **Section Display Heading**: Căn giữa trên canvas trắng. "A BRAND BUILT ON PURPOSE" bằng Integral 45px weight 400, #203b90, uppercase, letter-spacing 0.017em, line-height 1.0. Margin dọc 50px phía trên và dưới.

3. **Header Navigation**: Nền trắng, không border, không shadow. Bên trái: nav links (Footwear, Apparel & Collectables, About us, Stories) bằng Soehne 14px weight 400, #203b90, letter-spacing 0.043em, gap 24px. Giữa: logo mark "FLOWERS FOR SOCIETY" bằng Integral 52px weight 400, #203b90, letter-spacing 0.077em, line-height 0.92. Bên phải: account và cart icons màu #203b90, kích thước 24px.

4. **Announcement Bar**: Nền trắng, text căn giữa "FEEL THE FLOW →" bằng Soehne 11px weight 700, uppercase, #203b90, letter-spacing 0.063em. Chiều cao 40px, không border.

5. **Footer Band**: Nền #f2f2f2, padding 40px. Links và text bằng Soehne 14px weight 400, #203b90, letter-spacing 0.043em.

## Similar Brands

- **Aesop** — Cùng cách tiếp cận nhận diện thương hiệu một màu — một màu đậm, đặc trưng được mang trên canvas trắng với typography editorial và chrome tối giản.
- **Aimé Leon Dore** — Cùng thẩm mỹ thời trang boutique — letter-spacing rộng trên UI text, button hình pill, ảnh sản phẩm lifestyle full-bleed, và một màu thương hiệu duy nhất neo toàn bộ hệ thống.
- **Glossier** — Cùng triết lý thiết kế phẳng, không shadow với một màu thương hiệu duy nhất và khoảng trắng rộng rãi để ảnh sản phẩm được thở.
- **On Running** — Cùng hệ thống border-radius cực rộng (pill buttons và inputs) và xử lý ảnh sản phẩm lifestyle với gradient scrim cho text overlay.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-indigo-statement: #203b90;
  --color-indigo-mist: #7989bc;
  --color-paper-white: #ffffff;
  --color-carbon: #000000;
  --color-graphite: #1b1b1b;
  --color-fog: #f2f2f2;

  /* Typography — Font Families */
  --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-integral: 'Integral', 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;
  --font-nunito-sans-klaviyo-hosted: 'Nunito-Sans-Klaviyo-Hosted', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --tracking-caption: 0.69px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.6px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.53px;
  --text-subheading: 18px;
  --leading-subheading: 1.1;
  --tracking-subheading: 0.72px;
  --text-heading-sm: 35px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: 1.23px;
  --text-heading: 45px;
  --leading-heading: 1;
  --tracking-heading: 0.77px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 0.92;
  --tracking-heading-lg: 0.68px;

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

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-52: 52px;
  --spacing-60: 60px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 50px;
  --card-padding: 30px;
  --element-gap: 12px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-3xl: 41px;
  --radius-full: 60px;

  /* Named Radii */
  --radius-tags: 41px;
  --radius-cards: 4px;
  --radius-inputs: 41px;
  --radius-buttons: 41px;
  --radius-buttons-lg: 60px;

  /* Surfaces */
  --surface-paper-white-canvas: #ffffff;
  --surface-fog-footer: #f2f2f2;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-indigo-statement: #203b90;
  --color-indigo-mist: #7989bc;
  --color-paper-white: #ffffff;
  --color-carbon: #000000;
  --color-graphite: #1b1b1b;
  --color-fog: #f2f2f2;

  /* Typography */
  --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-integral: 'Integral', 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;
  --font-nunito-sans-klaviyo-hosted: 'Nunito-Sans-Klaviyo-Hosted', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;
  --leading-caption: 1.5;
  --tracking-caption: 0.69px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --tracking-body-sm: 0.6px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.53px;
  --text-subheading: 18px;
  --leading-subheading: 1.1;
  --tracking-subheading: 0.72px;
  --text-heading-sm: 35px;
  --leading-heading-sm: 1;
  --tracking-heading-sm: 1.23px;
  --text-heading: 45px;
  --leading-heading: 1;
  --tracking-heading: 0.77px;
  --text-heading-lg: 52px;
  --leading-heading-lg: 0.92;
  --tracking-heading-lg: 0.68px;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-52: 52px;
  --spacing-60: 60px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-3xl: 41px;
  --radius-full: 60px;
}
```