# Textla

> Textla — Style Reference

## Prompt Content

```
# Textla — Style Reference
> Cuốn niên giám thực vật cổ điển ngập nắng — trang giấy kem-vàng in mực xanh rừng sâu, minh họa bằng nét vẽ xương rồng, đóng dấu với bóng đổ offset cứng.

**Theme:** light

Textla khoác lên sản phẩm SMS marketing vỏ bọc của một cuốn niên giám thực vật cổ điển ngập nắng: nền canvas kem-vàng ấm áp (#f2ee98) làm chủ mọi trang, với xanh rừng sâu (#10380b) đảm nhận vai trò mực in, đường viền, bóng đổ và brand mark. Typography là giọng nói nổi bật nhất — một condensed display face (National 2 Condensed) dẫn dắt các headline in nghiêng cỡ lớn lên đến 180px, trong khi một sans-serif đậm (RethinkSans, 600-800) xử lý toàn bộ UI ở 16-20px, mang đến cho hệ thống sự tự tin của một tấm poster in ấn. Các component nghiêng về phong cách neobrutalist: bóng đổ offset cứng 8px bằng brand green, pill controls 1440px, card bo tròn 40px, và star rating màu vàng marigold rực rỡ. Minh họa nét vẽ tay về xương rồng, mây và hình người sa mạc lấp đầy khoảng trống âm, khiến sản phẩm giống một cuốn field guide cổ điển hơn là một dashboard.

## Tokens — Colors

| Tên | Giá trị | Token | Vai trò |
|------|-------|-------|------|
| Sunlit Cream | `#f2ee98` | `--color-sunlit-cream` | Page canvas và section background — lớp nền ánh sáng sa mạc ấm áp, tạo nên tâm trạng thực vật cho toàn hệ thống |
| Forest Ink | `#10380b` | `--color-forest-ink` | Primary text, pill button fill, icon stroke, hard offset shadow và brand mark — một màu xanh đậm duy nhất đảm nhận 80% công việc cấu trúc |
| Marigold | `#fce519` | `--color-marigold` | Yellow state accent cho badge, validation surface và status label ngắn. Không nâng cấp lên làm primary CTA color |
| Sage Wash | `#dbe8ac` | `--color-sage-wash` | Muted card và surface tint — một màu xanh thực vật nhẹ dùng để phân biệt panel tinh tế trên nền cream canvas |
| Vivid Fern | `#30be60` | `--color-vivid-fern` | Green outline accent cho tag, divider và focused UI edge. Không nâng cấp lên làm primary CTA color |
| Parchment | `#fefde6` | `--color-parchment` | Lighter card surface nằm cao hơn Sunlit Cream một bậc — dùng cho product mockup card, testimonial card và elevated panel |
| Snowcap | `#ffffff` | `--color-snowcap` | Pure white cho text tương phản cao trên nền Forest Ink và cho icon stroke mảnh bên trong product UI mockup |

## Tokens — Typography

### National 2 Condensed — Display and heading face — headline condensed cỡ lớn lên đến 180px dẫn dắt nhận diện thị giác kiểu poster. Letter-spacing -0.03em ở mọi kích thước, line-height rất chặt 0.8 ở display weight, tạo hiệu ứng headline xếp chồng nén chặt. Hero 'Unbeatable' xuất hiện ở italic 800. · `--font-national-2-condensed`
- **Thay thế:** Bebas Neue, Oswald, Antonio
- **Weights:** 600, 700, 800
- **Kích thước:** 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 86px, 104px, 156px, 180px
- **Line height:** 0.80–1.30
- **Letter spacing:** -0.03em
- **Vai trò:** Display and heading face — headline condensed cỡ lớn lên đến 180px dẫn dắt nhận diện thị giác kiểu poster. Letter-spacing -0.03em ở mọi kích thước, line-height rất chặt 0.8 ở display weight, tạo hiệu ứng headline xếp chồng nén chặt. Hero 'Unbeatable' xuất hiện ở italic 800.

### RethinkSans — Body and UI face — đã bắt đầu ở weight 600, nên không có light weight nào tồn tại. Hệ thống coi type như một yếu tố cấu trúc: 16px cho nav và small UI, 18px cho body, 20px cho emphasized body. Line-height 1.0 cho inline icon/badge, 1.5-1.71 cho đoạn văn dễ đọc. · `--font-rethinksans`
- **Thay thế:** Inter, Manrope, Plus Jakarta Sans
- **Weights:** 600, 700, 800
- **Kích thước:** 16px, 18px, 20px
- **Line height:** 1.00–1.71
- **Vai trò:** Body and UI face — đã bắt đầu ở weight 600, nên không có light weight nào tồn tại. Hệ thống coi type như một yếu tố cấu trúc: 16px cho nav và small UI, 18px cho body, 20px cho emphasized body. Line-height 1.0 cho inline icon/badge, 1.5-1.71 cho đoạn văn dễ đọc.

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 16px | 24 | — | `--text-caption` |
| body | 18px | 28 | — | `--text-body` |
| subheading | 20px | 32 | — | `--text-subheading` |
| heading-sm | 24px | 30 | -0.72px | `--text-heading-sm` |
| heading | 32px | 38 | -0.96px | `--text-heading` |
| heading-lg | 56px | 62 | -1.68px | `--text-heading-lg` |
| display | 86px | 70 | -2.58px | `--text-display` |
| display-xl | 180px | 144 | -5.4px | `--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` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |
| 160 | 160px | `--spacing-160` |

### Border Radius

| Element | Giá trị |
|---------|-------|
| nav | 16px |
| tags | 40px |
| cards | 40px |
| badges | 1440px |
| images | 40px |
| inputs | 1440px |
| buttons | 1440px |

### Shadows

| Tên | Giá trị | Token |
|------|-------|-------|
| subtle | `rgb(16, 56, 11) 8px 8px 0px 0px` | `--shadow-subtle` |

### Layout

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

## Components

### Marigold Pill CTA
**Vai trò:** Primary hero action button — nút filled đặc trưng trong hero section

Pill radius 1440px, nền #fce519 (Marigold), text #10380b (Forest Ink) ở 16-18px RethinkSans weight 700, padding 12px 28px. Có thể thêm margin 4px cho ghost sibling button. Không shadow.

### Forest Pill Button
**Vai trò:** Primary dark action button dùng trên nền sáng

Pill radius 1440px, nền #10380b (Forest Ink), text #f2ee98 (Sunlit Cream) ở 16-18px RethinkSans weight 700, padding 12px 28px.

### Ghost Text Button
**Vai trò:** Secondary inline action đặt cạnh filled CTA

Không nền, không border, text #10380b (Forest Ink) ở 16-18px RethinkSans weight 600, kèm icon chevron. Padding 8px 4px.

### Outlined Call Button
**Vai trò:** Phone number CTA trong nav

Pill radius 1440px, border 1px solid #10380b (Forest Ink), fill trong suốt, text Forest Ink kèm icon điện thoại. Padding 8px 20px.

### Parchment Testimonial Card
**Vai trò:** Customer quote card trên nền cream

Nền #fefde6 (Parchment), border-radius 40px, padding 24-40px. Chứa avatar (hình tròn), tên ở 20px RethinkSans 700, role ở 16px weight 600, quote ở 24-32px National 2 Condensed weight 700 Forest Ink. Có thể thêm hard offset shadow `8px 8px 0 0 #10380b`.

### Product Dashboard Card
**Vai trò:** Hero product UI mockup và ảnh chụp màn hình nhúng

Nền trắng hoặc #fefde6 (Parchment), border-radius 40px, border 1px solid #10380b, hard offset shadow 8px 8px 0 0 Forest Ink. Header pill số điện thoại màu xanh đậm, stat block với ba số condensed cỡ lớn (Campaigns/Messages/Subscribers), danh sách campaign row kèm status badge.

### Status Pill Badge
**Vai trò:** Campaign status indicator (One-time, Recurring, Sending Monday, v.v.)

Radius 1440px hoặc 40px, padding nhỏ 4px 12px, 14-16px RethinkSans weight 700. Hai biến thể màu: Forest Ink fill với Sunlit Cream text cho trạng thái mặc định; Marigold fill với Forest Ink text cho trạng thái active/highlight.

### Star Rating Display
**Vai trò:** Năm sao social proof element

Năm icon sao fill #fce519 (Marigold), kích thước 16-20px, nhóm chặt. Luôn đi kèm nhãn 'Five star rating' ở RethinkSans 16px weight 600 Forest Ink.

### Feature List Item
**Vai trò:** Danh sách onboarding ba bước với icon hình tròn

Container icon hình tròn 40px với fill Marigold và icon line-art tối, gap 24px đến nhãn. Nhãn ở 24-32px National 2 Condensed weight 700 Forest Ink, có thể thêm subtext ở 16px RethinkSans 600.

### G2 Leader Ribbon
**Vai trò:** Third-party award badge cho testimonial card

Ribbon gradient đỏ/cam với text trắng 'Leader' và nhãn 'SUMMER 2025', radius 0px ở góc trên, cạnh dưới nhọn. Nằm chồng lên góc trên bên phải testimonial card.

### Stat Counter Bar
**Vai trò:** Dải thống kê social proof ở cuối trang

Band full-width, nền #fce519 (Marigold), grid 4 cột. Mỗi stat: số lớn ở 48-64px National 2 Condensed 800 Forest Ink, nhãn ở 18-20px RethinkSans 600 Forest Ink. Vertical padding 80px.

### Video Testimonial Frame
**Vai trò:** Card video khách hàng nhúng

Khung video 16:9 hoặc 4:3, radius 40px, border 1px Forest Ink, hard offset shadow. Chú thích bên dưới: tên ở 24px National 2 Condensed 700, role ở 16px RethinkSans 600, hàng star rating màu Marigold.

### Chat Bubble Card
**Vai trò:** Minh họa hội thoại SMS trong feature section

Nền trắng, radius 40px với một góc bo tròn hơn (bất đối xứng để tạo đuôi hội thoại), padding 16-24px. Tin nhắn người gửi ở 16px RethinkSans 600 Forest Ink, tin nhắn trả lời cùng font trên bubble xanh đậm với text cream. Avatar hình tròn kèm chữ cái đầu.

### Navigation Bar
**Vai trò:** Header trên cùng với logo, link và dual CTA

Trong suốt trên canvas, nav link 16px ở RethinkSans 600 Forest Ink với gap 24-32px. Bên phải: outlined phone button + Marigold 'Try for free' pill. Logo là wordmark xanh đậm kèm icon mark nhỏ.

## Do's and Don'ts

### Nên làm
- Dùng #10380b (Forest Ink) cho mọi body text, border, icon và primary action fill — đây là màu mực duy nhất của hệ thống
- Áp dụng hard offset shadow 8px 8px 0 0 #10380b cho elevated card và product mockup, không bao giờ cho button hoặc input
- Sử dụng National 2 Condensed ở 56px+ cho headline, giữ nguyên letter-spacing -0.03em ở mọi kích thước
- Ghép mỗi filled pill CTA với một ghost text-link sibling để tạo nhịp hai nút (filled + chevron text)
- Dùng #f2ee98 (Sunlit Cream) làm page canvas trên mọi section mặc định; chỉ dùng #fefde6 (Parchment) cho card surface cần nâng lên một bậc
- Dùng #fce519 (Marigold) một cách tiết kiệm — chỉ cho star rating, hero CTA và decorative icon accent — không bao giờ dùng cho body text hoặc fill lớn
- Giữ tất cả button radius ở 1440px (full pill) và tất cả card/image radius ở 40px — cặp radius này định nghĩa độ mềm mại của hệ thống

### Không nên làm
- Không dùng #fce519 cho body text — Marigold không đạt độ tương phản trên nền cream và không nên mang nội dung đoạn văn
- Không áp dụng soft Gaussian shadow; ngôn ngữ elevation duy nhất là hard offset 8px bằng Forest Ink
- Không dùng condensed display face (National 2 Condensed) dưới 20px — nó trở nên khó đọc khi làm UI text
- Không đưa vào xanh dương, tím hoặc bất kỳ hue nào không phải xanh lá/vàng — hệ thống hoàn toàn thuộc tông thực vật ấm áp
- Không dùng radius 0px sắc cạnh trên bất kỳ container nào — hệ thống luôn bo tròn (tối thiểu 16px)
- Không đặt RethinkSans dưới weight 600 — face này không có light weight và cài đặt nhẹ hơn sẽ hiển thị sai
- Không dùng white (#ffffff) làm page background — canvas luôn là Sunlit Cream; white chỉ xuất hiện bên trong product mockup và trên bề mặt xanh đậm

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|-------|------|-------|---------|
| 0 | Sunlit Cream | `#f2ee98` | Default page canvas và section background |
| 1 | Parchment | `#fefde6` | Lighter card surface cho testimonial, product mockup và elevated panel |
| 2 | Sage Wash | `#dbe8ac` | Subtle tint cho panel phân biệt trong cream section |
| 3 | Snowcap | `#ffffff` | Pure white chỉ dùng bên trong product UI mockup và chat bubble |
| 4 | Forest Ink | `#10380b` | Inverted dark surface cho stat bar, feature card và high-contrast section |

## Elevation

- **Product Dashboard Card:** `8px 8px 0 0 #10380b`
- **Testimonial Card:** `8px 8px 0 0 #10380b`
- **Video Testimonial Frame:** `8px 8px 0 0 #10380b`
- **Feature Card:** `8px 8px 0 0 #10380b`

## Imagery

Minh họa nét vẽ tay đơn sắc là yếu tố thị giác đặc trưng của hệ thống: xương rồng, mây, mặt trời, hình người nhỏ với dù, và thực vật sa mạc được vẽ bằng nét 1.5-2px Forest Ink trên nền cream canvas. Minh họa phẳng, không tô bóng, được dùng làm scene-filler trong khoảng trống âm của hero và feature section background — chúng không bao giờ xuất hiện bên trong card. Ảnh chụp màn hình sản phẩm và dashboard mockup được đóng khung dưới dạng card với hard offset shadow, được xử lý như các đối tượng trong thế giới minh họa. Một bộ nhỏ icon line-art hình tròn (hộp quà, điện thoại, loa phóng thanh, người) xuất hiện trong vòng tròn fill Marigold cho feature list. Nhiếp ảnh chỉ giới hạn ở một khung video khách hàng nhúng; mọi thứ khác đều được minh họa.

## Layout

Max-width 1200px căn giữa với gutter 40px thoải mái. Hero là split hai cột: headline cỡ lớn + dual CTA + star social proof bên trái, product dashboard card chồng lên minh họa xương rồng bên phải. Nhịp section xen kẽ giữa Sunlit Cream và Forest Ink band với vertical gap 80-120px. Content block dùng grid testimonial 2 cột và stat bar 4 cột. Feature section ghép danh sách icon hình tròn với minh họa chat bubble trong layout 2 cột. Thống kê cuối trang là band Marigold full-bleed. Navigation là một transparent top bar đơn; không có sidebar hoặc sticky mega-menu.

## Agent Prompt Guide

**Quick Color Reference**
- text: #10380b (Forest Ink)
- background: #f2ee98 (Sunlit Cream)
- border: #10380b (Forest Ink)
- accent: #fce519 (Marigold)
- card surface: #fefde6 (Parchment)
- primary action: #10380b (filled action)

**Example Component Prompts**

1. Tạo Primary Action Button: nền #10380b, text #ffffff, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA.

2. **Testimonial Card**: nền #fefde6, radius 40px, padding 32px, shadow `8px 8px 0 0 #10380b`. Avatar hình tròn 64px ở góc trên bên trái, tên ở 20px RethinkSans 700 #10380b, role ở 16px weight 600. Quote ở 32px National 2 Condensed weight 700 #10380b, letter-spacing -0.96px. Năm sao #fce519 bên dưới quote.

3. **Product Dashboard Mockup Card**: nền trắng (#ffffff), radius 40px, border 1px solid #10380b, shadow `8px 8px 0 0 #10380b`. Header row: số điện thoại ở 16px RethinkSans 600 #10380b, card thông báo speech-bubble Forest Ink đậm ở trên. Stat row: ba cột với số 48px National 2 Condensed 800 #10380b và nhãn 14px RethinkSans 600. Campaign list rows: nền xen kẽ trắng/Sunlit Cream, status pill màu Forest Ink hoặc Marigold với radius 1440px.

4. **Stat Counter Bar**: nền #fce519 full-width, vertical padding 80px, grid 4 cột. Mỗi ô: số 56px National 2 Condensed 800 #10380b (ví dụ '2.1K', '0'), nhãn 18px RethinkSans 600 #10380b bên dưới. Không border giữa các ô.

5. **Feature List Item**: container icon hình tròn 40px với fill #fce519 và icon line-art 1.5px #10380b (loa phóng thanh, quà tặng, điện thoại). Gap 24px bên phải đến text nhãn: 24px National 2 Condensed 700 #10380b, letter-spacing -0.72px. Có thể thêm subtext 16px RethinkSans 600 bên dưới.

## Elevation Philosophy

Hệ thống chỉ dùng một shadow duy nhất: hard offset 8px bằng Forest Ink (#10380b), không blur, không spread. Đây là elevation kiểu neobrutalist — card 'đóng dấu' lên cream canvas thay vì nổi với soft shadow. Không bao giờ dùng Gaussian shadow; không bao giờ xếp chồng nhiều lớp shadow. Offset 8px là cố định: nó không thay đổi theo kích thước card hay mức độ quan trọng. Card không có shadow cảm giác như thiếu sót; button, input và inline element không bao giờ nhận shadow.

## Similar Brands

- **Gumroad** — Cùng hard offset shadow neobrutalist, pill-shaped CTA và năng lượng illustrated mascot trên nền cream canvas ấm áp
- **Postscript** — Đồng nghiệp SMS marketing với tính cách marketing-page tương tự, dù Postscript dùng bảng màu thương mại nhẹ nhàng hơn
- **Linear** — Display type condensed đậm và UI text weight-700 tự tin tạo nên sự tự tin typographic kiểu poster tương tự
- **Klaviyo** — Nền tảng marketing với hero scene minh họa và headline condensed đậm, dù Klaviyo dùng accent tím mát hơn
- **Substack** — Thương hiệu editorial/newsletter dùng display type condensed cỡ lớn gần serif và nền cream ấm áp để tạo cảm giác ấn phẩm in

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-sunlit-cream: #f2ee98;
  --color-forest-ink: #10380b;
  --color-marigold: #fce519;
  --color-sage-wash: #dbe8ac;
  --color-vivid-fern: #30be60;
  --color-parchment: #fefde6;
  --color-snowcap: #ffffff;

  /* Typography — Font Families */
  --font-national-2-condensed: 'National 2 Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rethinksans: 'RethinkSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 16px;
  --leading-caption: 24;
  --text-body: 18px;
  --leading-body: 28;
  --text-subheading: 20px;
  --leading-subheading: 32;
  --text-heading-sm: 24px;
  --leading-heading-sm: 30;
  --tracking-heading-sm: -0.72px;
  --text-heading: 32px;
  --leading-heading: 38;
  --tracking-heading: -0.96px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 62;
  --tracking-heading-lg: -1.68px;
  --text-display: 86px;
  --leading-display: 70;
  --tracking-display: -2.58px;
  --text-display-xl: 180px;
  --leading-display-xl: 144;
  --tracking-display-xl: -5.4px;

  /* Typography — Weights */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

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

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

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 1440px;

  /* Named Radii */
  --radius-nav: 16px;
  --radius-tags: 40px;
  --radius-cards: 40px;
  --radius-badges: 1440px;
  --radius-images: 40px;
  --radius-inputs: 1440px;
  --radius-buttons: 1440px;

  /* Shadows */
  --shadow-subtle: rgb(16, 56, 11) 8px 8px 0px 0px;

  /* Surfaces */
  --surface-sunlit-cream: #f2ee98;
  --surface-parchment: #fefde6;
  --surface-sage-wash: #dbe8ac;
  --surface-snowcap: #ffffff;
  --surface-forest-ink: #10380b;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-sunlit-cream: #f2ee98;
  --color-forest-ink: #10380b;
  --color-marigold: #fce519;
  --color-sage-wash: #dbe8ac;
  --color-vivid-fern: #30be60;
  --color-parchment: #fefde6;
  --color-snowcap: #ffffff;

  /* Typography */
  --font-national-2-condensed: 'National 2 Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-rethinksans: 'RethinkSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 16px;
  --leading-caption: 24;
  --text-body: 18px;
  --leading-body: 28;
  --text-subheading: 20px;
  --leading-subheading: 32;
  --text-heading-sm: 24px;
  --leading-heading-sm: 30;
  --tracking-heading-sm: -0.72px;
  --text-heading: 32px;
  --leading-heading: 38;
  --tracking-heading: -0.96px;
  --text-heading-lg: 56px;
  --leading-heading-lg: 62;
  --tracking-heading-lg: -1.68px;
  --text-display: 86px;
  --leading-display: 70;
  --tracking-display: -2.58px;
  --text-display-xl: 180px;
  --leading-display-xl: 144;
  --tracking-display-xl: -5.4px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-160: 160px;

  /* Border Radius */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 40px;
  --radius-full: 1440px;

  /* Shadows */
  --shadow-subtle: rgb(16, 56, 11) 8px 8px 0px 0px;
}
```