# Flecto

> # Flecto — Style Reference

## Prompt Content

```
# Flecto — Style Reference
> Nhà kính thực vật kiểu botanical greenhouse. Một conservatory với tường kem ấm áp, nơi những chậu cây teal đậm chứa cây non mint sáng — phẳng, bo tròn, tràn đầy sắc xanh, không bóng đổ.

**Theme:** mixed

Flecto là một aesthetic cho nền tảng cho thuê theo phong cách botanical ấm áp: cream canvas (#fffbec) thay thế cho trắng tinh, deep forest teal (#004737) làm neo cho hero sections và đường viền, và mint tươi (#56f09f) tạo điểm nhấn cho các tương tác. Typography chỉ dùng Aeonik weight 400 — không bold, không light — dùng negative letter-spacing (-0.043em ở display sizes) để tạo tương phản qua độ tight thay vì weight. Hệ thống flat, dùng border và color-block: các bề mặt bo tròn lớn (40–60px radius) màu teal đậm đặt trực tiếp trên nền kem ấm, với các đường viền màu mảnh (chromatic borders) chịu phần lớn trọng lượng cấu trúc thay vì shadow. Mint xuất hiện tiết kiệm như accent chức năng trên filled buttons, icons, và decorative shapes, không bao giờ dùng làm bề mặt lớn.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Forest Ink | `#004737` | `--color-forest-ink` | Bề mặt brand chủ đạo — hero panels, section backgrounds, đường viền cấu trúc dày, nav header, footer blocks. Teal đậm hút trang và làm cho chữ kem phát sáng |
| Mint Pulse | `#56f09f` | `--color-mint-pulse` | Accent viền xanh cho tags, dividers, và cạnh UI được focus. Không nâng cấp nó thành màu CTA chính |
| Mint Mist | `#d4ffe8` | `--color-mint-mist` | Accent xanh cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ. Không nâng cấp nó thành màu CTA chính |
| Cream Canvas | `#fffbec` | `--color-cream-canvas` | Nền trang — off-white ấm thay thế trắng tinh. Màu border trên teal sections, card fills trên vùng sáng, heading text trên bề mặt tối |
| Deep Loam | `#032019` | `--color-deep-loam` | Màu chữ trên bề mặt kem, đường viền tối nhẹ. Gần đen với sắc xanh lá hài hòa với màu brand Forest Ink |
| Sage Whisper | `#99b5af` | `--color-sage-whisper` | Body text nhẹ và đường viền phụ — xanh-xám bão hòa thấp, lùi về phía sau trên nền kem nhưng vẫn giữ tông màu với bảng brand |
| Stone Mist | `#ccdad7` | `--color-stone-mist` | Hairline dividers, icon borders, nền tint nhẹ cho cards trong sections sáng |
| Bone | `#faf2d5` | `--color-bone` | Nền card ấm mềm — ấm và bão hòa hơn cream canvas một chút, dùng để nâng các content blocks cụ thể mà không phá vỡ tonal family |
| Charcoal | `#222222` | `--color-charcoal` | Body text và đường viền button tiêu chuẩn trong ngữ cảnh trung tính. Dùng khi chromatic text không phù hợp |
| Iris Spark | `#8f37ff` | `--color-iris-spark` | Accent viền tím cho tags, dividers, và cạnh UI được focus. |

## Tokens — Typography

### Aeonik — Universal typeface — headings, body, UI labels, buttons. Single weight 400 trên toàn bộ hệ thống; tương phản đạt được qua kích thước và negative letter-spacing, không phải weight. Đây là lựa chọn đặc trưng: một geometric sans monoweight nơi display headlines ở 56–74px được siết chặt đến -0.043em trong khi body text ở 14–16px nằm ở tracking normal hoặc hơi dương. Tabular numerals ('tnum') được bật cho mọi trường hợp. · `--font-aeonik`
- **Thay thế:** Inter, Satoshi, General Sans
- **Weights:** 400
- **Sizes:** 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 24px, 26px, 28px, 32px, 33px, 36px, 56px, 60px, 64px, 66px, 74px
- **Line height:** 1.00–2.88 (theo ngữ cảnh)
- **Letter spacing:** -0.0430em ở 56px+ (display), -0.0300em ở 32–36px (heading), -0.0100em ở 18–24px (subheading), normal đến +0.0200em ở 8–14px (caption/label)
- **OpenType features:** `"tnum" on`
- **Vai trò:** Universal typeface — headings, body, UI labels, buttons. Single weight 400 trên toàn bộ hệ thống; tương phản đạt được qua kích thước và negative letter-spacing, không phải weight. Đây là lựa chọn đặc trưng: một geometric sans monoweight nơi display headlines ở 56–74px được siết chặt đến -0.043em trong khi body text ở 14–16px nằm ở tracking normal hoặc hơi dương. Tabular numerals ('tnum') được bật cho mọi trường hợp.

### roobert — Secondary body face — dùng cho đoạn văn mô tả dài hơn, list items, và hero subtext. Ấm áp và nhân văn hơn Aeonik, mang lại sự đa dạng về tông màu trong văn bản dài trong khi vẫn nằm trong cùng một họ geometric, single-weight. · `--font-roobert`
- **Thay thế:** Inter, Söhne, Untitled Sans
- **Weights:** 400
- **Sizes:** 12px, 16px
- **Line height:** 1.40–1.87
- **Vai trò:** Secondary body face — dùng cho đoạn văn mô tả dài hơn, list items, và hero subtext. Ấm áp và nhân văn hơn Aeonik, mang lại sự đa dạng về tông màu trong văn bản dài trong khi vẫn nằm trong cùng một họ geometric, single-weight.

### 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
- **Sizes:** 16px
- **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.4 | 0.1px | `--text-caption` |
| body | 14px | 1.4 | — | `--text-body` |
| body-lg | 16px | 1.5 | — | `--text-body-lg` |
| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |
| heading-sm | 28px | 1.2 | -0.56px | `--text-heading-sm` |
| heading | 36px | 1.15 | -1.08px | `--text-heading` |
| heading-lg | 56px | 1.1 | -2.4px | `--text-heading-lg` |
| display | 74px | 1 | -3.18px | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Tên | Giá trị | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 7 | 7px | `--spacing-7` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 19 | 19px | `--spacing-19` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 38 | 38px | `--spacing-38` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| cards | 19px |
| pills | 9999px |
| buttons | 40px |
| small-chips | 10px |
| icon-squares | 5.76px |
| large-panels | 60px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgba(0, 0, 0, 0.04) 0px 3px 2px 0px` | `--shadow-subtle` |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 40-80px
- **Card padding:** 12-20px
- **Element gap:** 10-12px

## Components

### Filled Mint Button
**Vai trò:** Primary call-to-action (Login, Start)

Nền #56f09f, chữ Deep Loam (#032019), Aeonik 14px weight 400, padding 10px 24px, border-radius 40px. Không border. Nằm trên bề mặt trắng hoặc kem.

### Outlined Dark Button
**Vai trò:** Secondary action (Book a Demo)

Nền trong suốt, border 1px solid #222222, chữ #222222, Aeonik 14px weight 400, padding 10px 20px, border-radius 40px. Đảo màu thành kem-trên-teal khi nằm trên dark hero panels.

### Ghost Pill Button
**Vai trò:** Tertiary action hoặc filter

Nền #d4ffe8, chữ #004737, không border, Aeonik 12px weight 400, padding 6px 14px, border-radius 9999px. Dùng cho các action dạng tag và active filter states.

### Hero Panel
**Vai trò:** Full-bleed dark section

Nền #004737, border-radius 0 ở cạnh nhưng 19–60px trên inner cards, padding dọc rộng 80–120px, headline căn giữa ở 56–74px Aeonik weight 400 màu #fffbec.

### Light Card
**Vai trò:** Content card trên cream canvas

Nền #ffffff hoặc #faf2d5, border 1px solid #ccdad7, border-radius 19px, padding 20px. Shadow rgba(0,0,0,0.04) 0px 3px 2px 0px khi không có border.

### Tinted Feature Card
**Vai trò:** Content block được làm nổi bật

Nền #d4ffe8, không border, border-radius 19px, padding 24px, heading ở 28px màu #004737.

### Language Selector
**Vai trò:** Compact utility dropdown

Nền trắng, border 1px solid #ccdad7, border-radius 10px, padding 6px 12px, chữ 12px Aeonik, icon chevron màu Sage Whisper.

### Navigation Bar
**Vai trò:** Top-level site nav

Nền trắng, chiều cao ~64px, horizontal flex: logo trái, nav links trái-giữa, utility buttons phải. Không border dưới — sự tách biệt với hero đạt được qua tương phản màu sắc.

### Decorative Shape Module
**Vai trò:** Yếu tố minh họa brand

Vector shapes phẳng màu #56f09f trên dark teal hero — hình chữ nhật bo tròn, đường nối, họa tiết key/branch hữu cơ. Không gradient, không shadow, 100% opacity mint.

### Footer Section Block
**Vai trò:** Dark footer column

Nền #004737, chữ #fffbec ở 14px, section headings ở 20px, padding rộng 40px, border-radius 0 (full-bleed).

### Icon Glyph
**Vai trò:** Hệ thống icon UI

Outlined 1.5px stroke, kích thước 16–20px, màu Sage Whisper (#99b5af) trên nền kem hoặc #fffbec trên nền teal. Rounded line caps. Biến thể filled màu #56f09f cho active states.

### Circular Action Button
**Vai trò:** Floating utility (download, scroll)

Hình tròn 40px, border 1px solid #ccdad7, nền trắng, icon căn giữa, không shadow.

## Do's and Don'ts

### Do
- Dùng Aeonik weight 400 cho mọi chữ — không bao giờ thêm bold hay light weights; để kích thước và negative tracking tạo hierarchy
- Áp dụng -0.043em letter-spacing ở 56px trở lên; siết chặt đến -0.030em ở 32–36px; nới ra đến +0.020em ở caption sizes 8–12px
- Dùng Forest Ink (#004737) cho hero backgrounds và primary structural borders; không bao giờ dùng nó làm accent nhỏ — nó là màu bề mặt
- Chỉ dùng Mint Pulse (#56f09f) trên filled buttons, active icons, và decorative shapes; sự hiếm hoi của nó chính là hệ thống
- Đặt borders ở 1–2px dùng Forest Ink trên dark sections và Stone Mist (#ccdad7) trên light sections thay vì thêm shadows
- Đặt page background là Cream Canvas (#fffbec) — không bao giờ dùng #ffffff tinh khiết cho base canvas
- Dùng border-radius 40px trên mọi buttons, 19px trên cards, và 9999px trên pill tags

### Don't
- Đừng thêm font weights khác — monoweight system là đặc trưng
- Đừng dùng Mint Pulse (#56f09f) làm bề mặt lớn — nó mất sức mạnh; giữ nó ở kích thước button và icon
- Đừng thêm drop shadows ngoài rgba(0,0,0,0.04) 0px 3px 2px 0px — tính phẳng là có chủ đích
- Đừng dùng #ffffff tinh khiết làm nền trang — độ ấm của cream là yếu tố chịu lực cho cảm giác botanical
- Đừng áp dụng gradient — hệ thống hoàn toàn là flat color blocks
- Đừng dùng #8f37ff (Iris Spark) làm màu chức năng — nó chỉ mang tính trang trí và nên xuất hiện hiếm hoi
- Đừng căn giữa body copy hay lists — chỉ headlines; body text giữ căn trái để duy trì nhịp đọc

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|---------|---------|
| 0 | Page Canvas | `#fffbec` | Nền cơ bản cho mọi light sections — warm cream thay thế trắng tinh |
| 1 | Card Lift | `#faf2d5` | Bề mặt card ấm hơn một chút trong cream pages — tách biệt nhẹ mà không cần border cứng |
| 2 | Tinted Highlight | `#d4ffe8` | Bề mặt tint mint cho các card được chọn, tag backgrounds, pill highlights |
| 3 | Dark Hero Panel | `#004737` | Dark teal sections full-bleed — hero, footer blocks, feature panels |

## Elevation

- **Card:** `rgba(0, 0, 0, 0.04) 0px 3px 2px 0px`

## Imagery

Trang web dùng minh họa geometric phẳng thay vì ảnh chụp. Hero có một sơ đồ key-and-branch hữu cơ màu mint đặc (#56f09f) trên nền teal đậm — các hình chữ nhật bo tròn được nối bằng đường dày, gợi lên một cây đang phát triển hoặc mạng lưới. Không có product screenshots, không lifestyle photography, không 3D renders. Iconography là outlined 1.5px stroke theo một phong cách nhất quán. Imagery mang tính trang trí, tạo bầu không khí hơn là nội dung giải thích; brand dựa vào ngôn ngữ màu sắc và hình khối thay vì ảnh chụp.

## Layout

Mô hình trang là max-width 1200px căn giữa, với các dark teal sections full-bleed đột phá ra ngoài. Hero là một dải teal đậm cao bằng viewport với headline căn giữa và minh họa trang trí. Navigation là thanh trắng trên cùng với logo trái, links trái-giữa, và utility actions (language, book demo, login) căn phải. Sections xen kẽ giữa cream canvas và forest-teal panels, cách nhau bằng khoảng trống dọc rộng 40–80px. Nội dung trong light sections chủ yếu là chữ căn trái trong một cột duy nhất với max width 600–800px. Cards dùng radius 19px và xuất hiện trong grid 1 hoặc 3 cột. Nhịp điệu tổng thể là khoảng thở rộng giữa các sections, mật độ thông tin gọn nhẹ bên trong chúng.

## Agent Prompt Guide

## Quick Color Reference
- Page background: #fffbec (Cream Canvas)
- Primary text trên cream: #032019 (Deep Loam)
- Dark hero surface: #004737 (Forest Ink)
- Text trên dark: #fffbec
- Filled button / accent: #56f09f (Mint Pulse)
- Outlined chromatic action: #d4ffe8 border (Mint Mist ghost pill); primary action: #004737 (outlined action border)

## Example Component Prompts
1. **Hero Section**: Nền #004737 full-bleed, border-radius 0, padding dọc 120px. Headline căn giữa ở 74px Aeonik weight 400, màu #fffbec, letter-spacing -3.18px. Subtext ở 16px Aeonik weight 400, màu #99b5af. Bên dưới: một bố cục decorative shape phẳng màu mint (#56f09f) — hình chữ nhật bo tròn 40–60px radius, được nối bằng đường 4px dày, 100% opacity, không gradient hay shadow.

2. **Navigation Bar**: Nền trắng (#ffffff), chiều cao 64px, horizontal flex với container max-width 1200px. Trái: Flecto wordmark bằng Aeonik 20px #004737. Trái-giữa: nav link 'About' ở 14px Aeonik #222222. Nhóm phải: language pill (12px, border 1px #ccdad7, 10px radius), outlined 'Book a Demo' button (border 1px #222222, 40px radius, padding 10px 20px), filled 'Login' button (nền #56f09f, chữ #032019, 40px radius, padding 10px 24px).

3. **Feature Card (Light)**: Nền #ffffff, border 1px solid #ccdad7, border-radius 19px, padding 24px. Heading ở 28px Aeonik weight 400, màu #004737, letter-spacing -0.56px. Body ở 14px roobert, màu #032019, line-height 1.40. Không shadow.

4. **Ghost Pill Tag**: Nền #d4ffe8, không border, border-radius 9999px, padding 6px 14px. Chữ ở 12px Aeonik weight 400, màu #004737, letter-spacing +0.024em.

5. **Footer Column Block**: Nền #004737 full-bleed, padding 60px trên. Section heading ở 20px Aeonik #fffbec. Links ở 14px roobert #99b5af, row gap 10px.

## Similar Brands

- **Linear** — Cùng monoweight sans-serif (Aeonik/Inter ở single weight) với negative letter-spacing trên display sizes và flat color-block hero sections
- **Arc browser** — Cream/warm canvas với một màu accent sống động duy nhất, bề mặt bo tròn, và flat illustration thay vì photography
- **Notion** — Nền kem nhạt, border-radius rộng, và tách biệt bằng border thay vì shadow nặng
- **Mercury** — Dark brand-color hero panels với chữ kem/off-white, bề mặt phẳng, và các khoảnh khắc tương tác single-accent-color
- **Pitch** — Monoweight geometric sans, warm off-white canvas, và soft geometry dẫn dắt bằng border-radius mà không có gradient hay shadow

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-forest-ink: #004737;
  --color-mint-pulse: #56f09f;
  --color-mint-mist: #d4ffe8;
  --color-cream-canvas: #fffbec;
  --color-deep-loam: #032019;
  --color-sage-whisper: #99b5af;
  --color-stone-mist: #ccdad7;
  --color-bone: #faf2d5;
  --color-charcoal: #222222;
  --color-iris-spark: #8f37ff;

  /* Typography — Font Families */
  --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roobert: 'roobert', 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.4;
  --tracking-caption: 0.1px;
  --text-body: 14px;
  --leading-body: 1.4;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.56px;
  --text-heading: 36px;
  --leading-heading: 1.15;
  --tracking-heading: -1.08px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -2.4px;
  --text-display: 74px;
  --leading-display: 1;
  --tracking-display: -3.18px;

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

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-38: 38px;
  --spacing-40: 40px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 40-80px;
  --card-padding: 12-20px;
  --element-gap: 10-12px;

  /* Border Radius */
  --radius-md: 3.36px;
  --radius-md-2: 5.76px;
  --radius-lg: 10px;
  --radius-xl: 14.4px;
  --radius-2xl: 19px;
  --radius-3xl: 25.4118px;
  --radius-3xl-2: 28.8px;
  --radius-3xl-3: 37px;
  --radius-3xl-4: 40px;
  --radius-3xl-5: 46px;
  --radius-full: 60px;

  /* Named Radii */
  --radius-cards: 19px;
  --radius-pills: 9999px;
  --radius-buttons: 40px;
  --radius-small-chips: 10px;
  --radius-icon-squares: 5.76px;
  --radius-large-panels: 60px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 3px 2px 0px;

  /* Surfaces */
  --surface-page-canvas: #fffbec;
  --surface-card-lift: #faf2d5;
  --surface-tinted-highlight: #d4ffe8;
  --surface-dark-hero-panel: #004737;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-forest-ink: #004737;
  --color-mint-pulse: #56f09f;
  --color-mint-mist: #d4ffe8;
  --color-cream-canvas: #fffbec;
  --color-deep-loam: #032019;
  --color-sage-whisper: #99b5af;
  --color-stone-mist: #ccdad7;
  --color-bone: #faf2d5;
  --color-charcoal: #222222;
  --color-iris-spark: #8f37ff;

  /* Typography */
  --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-roobert: 'roobert', 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.4;
  --tracking-caption: 0.1px;
  --text-body: 14px;
  --leading-body: 1.4;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 28px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.56px;
  --text-heading: 36px;
  --leading-heading: 1.15;
  --tracking-heading: -1.08px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -2.4px;
  --text-display: 74px;
  --leading-display: 1;
  --tracking-display: -3.18px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-19: 19px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-38: 38px;
  --spacing-40: 40px;

  /* Border Radius */
  --radius-md: 3.36px;
  --radius-md-2: 5.76px;
  --radius-lg: 10px;
  --radius-xl: 14.4px;
  --radius-2xl: 19px;
  --radius-3xl: 25.4118px;
  --radius-3xl-2: 28.8px;
  --radius-3xl-3: 37px;
  --radius-3xl-4: 40px;
  --radius-3xl-5: 46px;
  --radius-full: 60px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 3px 2px 0px;
}
```