little_amps___style_reference:
  info: "> Bìa đĩa than dưới nắng chiều. Giấy kem, mực cam cháy, một con tem xanh bụi bặm, mọi nhãn đều được đặt bằng monospace — giao diện hoạt động như một tạp chí cà phê in ấn: xúc giác, mang tính editorial, không bao giờ vô trùng."

  theme: "light"

  info: "Little Amps là một thế giới quán cà phê analog ấm áp: canvas giấy kem, chữ espresso nâu đậm, và điểm nhấn cam cháy gợi cảm giác mực nhãn phai màu nắng. Giao diện mang phong cách một tạp chí in hoặc tờ rơi đĩa than — một custom display serif dày dặn xử lý headline trong khi monospace (Necto Mono, Roboto Mono) gắn nhãn mọi thứ mang tính cấu trúc: nav, button, giá cả, ngày tháng, callout. Ảnh chụp mang phong cách tài liệu và xúc giác (tay trên đĩa than, quầy cà phê, quả cà phê) và neo mọi section. Màu sắc ít nhưng dứt khoát: một màu đỏ cam rực rỡ duy nhất làm nhiệm vụ link và highlight, một màu xanh bụi bặm và vàng cúc vạn thọ xuất hiện như tín hiệu phụ nhẹ nhàng. Bề mặt phẳng, border là đường kẻ tóc màu taupe ấm, radius nhỏ (3–8px) — thẩm mỹ được tuyển chọn và mang tính editorial, không mềm mại hay bo tròn."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Espresso | `#522c25` | `--color-espresso` | Text chính, icon, card borders, nav, footer, input fields — màu tối cấu trúc giữ mọi màn hình, ấm thay vì đen để giữ đúng thương hiệu cà phê rang |"
    info: "| Burnt Orange | `#c03001` | `--color-burnt-orange` | Filled action buttons, active links, key highlights, badge fills — điểm nhấn rực rỡ duy nhất khiến các phần tử tương tác cảm giác như được bật lên trên nền cream canvas |"
    info: "| Amber Ink | `#c46500` | `--color-amber-ink` | Điểm nhấn phụ cho emphasized text, hover states, và warm callouts — một màu cam sẫm hơn kết hợp với Burnt Orange để tạo chiều sâu tông màu |"
    info: "| Marigold Wash | `#febf6f` | `--color-marigold-wash` | Nền highlight mềm, tag fills, và decorative washes — dùng tiết kiệm để thêm khoảnh khắc ánh nắng ấm vào các layout trung tính |"
    info: "| Dusty Blue | `#89b4ca` | `--color-dusty-blue` | Điểm nhấn lạnh cho secondary buttons, link backgrounds, và sự đa dạng màu sắc — màu xanh duy nhất trong hệ thống, đóng vai trò người bạn đồng hành nhẹ nhàng với bảng màu ấm |"
    info: "| Cream Paper | `#fff9f2` | `--color-cream-paper` | Page canvas, card surfaces, button fills, input backgrounds — lớp nền của mọi màn hình, trắng off-white ấm thay thế cho trắng tinh |"
    info: "| Linen Beige | `#f6ede3` | `--color-linen-beige` | Card backgrounds, section surfaces, image borders, body borders — sâu hơn canvas một bước, tạo lớp bề mặt nhẹ nhàng mà không cần elevation |"
    info: "| Taupe Hairline | `#e6dad4` | `--color-taupe-hairline` | Hairline dividers, card borders, nav separators, đường cấu trúc tinh tế — màu border duy nhất mà hầu hết component cần |"
    info: "| Sandstone | `#cbbbb4` | `--color-sandstone` | Muted card backgrounds, soft surface fills, disabled surface states — xám taupe ấm cho các panel ít nhấn mạnh |"
    info: "| Coffee Dust | `#977e77` | `--color-coffee-dust` | Muted body text, helper text, low-emphasis copy — nâu xám ấm mờ dần vào cream mà không biến mất |"

  tokens___typography:

    little_amps___custom_display_serif_cho_brand_wordmark__section_headlines__và_editorial_titles_cỡ_lớn__negative_tracking_nặng__0_10em_ở_41_51px_tạo_cảm_giác_poster_retro_chặt__dày__là_phần_tử_typographic_nặng_nhất_trên_mọi_trang_và_là_giọng_nói_đặc_trưng_của_thương_hiệu_____font_little_amps:
      - "**Thay thế:** Recoleta, Canela, hoặc DM Serif Display"
      - "**Weights:** 500"
      - "**Kích thước:** 20px, 22px, 41px, 45px, 50px, 51px"
      - "**Line height:** 0.80–1.00"
      - "**Letter spacing:** -0.10em"
      - "**Vai trò:** Custom display serif cho brand wordmark, section headlines, và editorial titles cỡ lớn. Negative tracking nặng (-0.10em) ở 41–51px tạo cảm giác poster retro chặt, dày. Là phần tử typographic nặng nhất trên mọi trang và là giọng nói đặc trưng của thương hiệu."

    inclusive_sans___body_text_và_ui_text_chính__dùng_cho_mô_tả__đoạn_văn__và_hầu_hết_nội_dung_dễ_đọc__positive_tracking_0_05em_nhất_quán_tạo_cảm_giác_hơi_lỏng_hơn__giống_tạp_chí_zine__là_ngựa_thồ___xuất_hiện_trong_hầu_hết_mọi_ngữ_cảnh_____font_inclusive_sans:
      - "**Thay thế:** Inter, Work Sans, hoặc Public Sans"
      - "**Weights:** 400"
      - "**Kích thước:** 12px, 13px, 14px, 15px, 16px"
      - "**Line height:** 1.00–1.60"
      - "**Letter spacing:** 0.05em"
      - "**Vai trò:** Body text và UI text chính. Dùng cho mô tả, đoạn văn, và hầu hết nội dung dễ đọc. Positive tracking 0.05em nhất quán tạo cảm giác hơi lỏng hơn, giống tạp chí zine. Là ngựa thồ — xuất hiện trong hầu hết mọi ngữ cảnh."

    necto_mono___labels__buttons__navigation__ngày_tháng__giá_cả__và_mọi_metadata_cấu_trúc__line_height_chặt_hơn_0_80_1_20_và_dạng_monospace_khiến_nó_giống_chữ_đóng_dấu_hoặc_chữ_máy_đánh_chữ__tracking_0_05em_là_tiêu_chuẩn_small_caps_toàn_hệ_thống_____font_necto_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Space Mono"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 10px, 12px, 13px, 14px, 16px"
      - "**Line height:** 0.80–1.20"
      - "**Letter spacing:** 0.05em"
      - "**Vai trò:** Labels, buttons, navigation, ngày tháng, giá cả, và mọi metadata cấu trúc. Line-height chặt hơn (0.80–1.20) và dạng monospace khiến nó giống chữ đóng dấu hoặc chữ máy đánh chữ. Tracking 0.05em là tiêu chuẩn small-caps toàn hệ thống."

    roboto_mono___monospace_phụ_cho_các_label_dạng_code_hoặc_kỹ_thuật__bổ_sung_cho_necto_mono_trong_ngữ_cảnh_body_và_data_____font_roboto_mono:
      - "**Thay thế:** Roboto Mono, Space Mono, hoặc IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 14px, 16px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.02em đến 0.05em"
      - "**Vai trò:** Monospace phụ cho các label dạng code hoặc kỹ thuật, bổ sung cho Necto Mono trong ngữ cảnh body và data."

    gtstandard_m___body_fallback_hiếm___xuất_hiện_trong_các_ngữ_cảnh_tối_thiểu_____font_gtstandard_m:
      - "**Thay thế:** Söhne, Inter, hoặc system-ui"
      - "**Weights:** 400"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Body fallback hiếm — xuất hiện trong các ngữ cảnh tối thiểu."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.1 | 0.5px | `--text-caption` |"
      info: "| body | 14px | 1.6 | 0.7px | `--text-body` |"
      info: "| heading-sm | 20px | 1 | -2px | `--text-heading-sm` |"
      info: "| heading | 22px | 1 | -2.2px | `--text-heading` |"
      info: "| display | 50px | 0.85 | -5px | `--text-display` |"

  tokens___spacing___shapes:

    density: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 90 | 90px | `--spacing-90` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 3px |"
      info: "| images | 8px |"
      info: "| inputs | 3px |"
      info: "| buttons | 3px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-64px"
      - "**Card padding:** 24-36px"
      - "**Element gap:** 6-12px"

  components:

    filled_action_button:
      vai_trò: "Primary CTA — Shop, Read More, Listen Now, Quick View"

      info: "Nền Burnt Orange (#c03001) đặc, text Cream Paper (#fff9f2), radius 3px, Necto Mono 12–14px weight 400, tracking 0.05em, uppercase. Padding 10px 12px. Nhỏ, chặt, giống tem. Button đọc như một nhãn in, không phải pill."

    ghost_outline_button:
      vai_trò: "Secondary action — chỉ có border"

      info: "Nền trong suốt, border Espresso (#522c25) 1px, text Espresso, radius 3px, Necto Mono 12–14px uppercase. Padding 6–10px dọc. Dùng khi filled orange button sẽ cạnh tranh với primary trên cùng màn hình."

    navigation_link:
      vai_trò: "Mục menu nav trên cùng: SHOP, ABOUT, WHOLESALE, COMMUNITY BOARD, CONTACT"

      info: "Necto Mono 12–14px weight 400, tracking 0.05em, uppercase, text Espresso (#522c25). Không nền. Dropdown caret nhỏ cạnh SHOP. Căn chỉnh thành một hàng ngang duy nhất ở giữa header."

    hero_brand_block:
      vai_trò: "Brand lockup phủ lên hero image"

      info: "Little Amps display serif 45–51px weight 500, tracking -0.10em, màu Burnt Orange (#c03001). Hai dòng: tên thương hiệu xếp chồng lên một icon line-art trang trí nhỏ (máy espresso hoặc túi cà phê). Đặt ở góc trên bên trái của hero image với padding rộng rãi."

    product_card:
      vai_trò: "Tile sản phẩm thương mại điện tử — Friend Blend được hiển thị"

      info: "Nền Linen Beige (#f6ede3), radius 8px, ảnh sản phẩm được đóng khung với radius 8px và hairline border. Bên dưới ảnh: tên sản phẩm bằng Inclusive Sans 16px Espresso, giá bằng Necto Mono, ghi chú hương vị bằng Coffee Dust (#977e77), thanh roast level, và nút Quick View màu Dusty Blue (#89b4ca) với radius 3px. Padding 24–36px."

    editorial_card:
      vai_trò: "Community Board / blog post tile"

      info: "Nền Cream Paper (#fff9f2), border Taupe Hairline (#e6dad4) 1px, radius 8px. Ảnh ở trên (radius 8px), sau đó ngày tháng bằng Necto Mono 10–12px, tiêu đề bằng Little Amps serif 20–22px tracking -0.10em, trích đoạn bằng Inclusive Sans 14px Coffee Dust, và nút Read More filled Burnt Orange với radius 3px."

    horizontal_scroll_carousel:
      vai_trò: "Community Board và product sliders"

      info: "Hàng 4–5 card với gap 14–16px nhất quán. Nút mũi tên prev/next hình tròn nhỏ (12px) ở góc trên bên phải. Không có scrollbar hiển thị — navigation chỉ có icon."

    header___nav_bar:
      vai_trò: "Navigation trên cùng toàn trang"

      info: "Nền Cream Paper (#fff9f2), border dưới Taupe Hairline (#e6dad4) mỏng 1px. Logo brand wordmark bên trái (custom mark chữ thường), nav links căn giữa bằng Necto Mono uppercase, Account dropdown và Cart counter căn phải. Chiều cao khoảng 64–80px."

    date_stamp:
      vai_trò: "Ngày xuất bản bài viết và bài đăng"

      info: "Necto Mono 10–12px weight 400, tracking 0.05em, text Coffee Dust (#977e77). Định dạng phân cách bằng dấu chấm (ví dụ '06.03.2026'). Nằm phía trên tiêu đề trong editorial cards."

    tasting_notes_bar:
      vai_trò: "Chỉ báo hồ sơ hương vị trên trang sản phẩm"

      info: "Ba monospace labels nhỏ (Roastness, Acidity, Complexity) với các chấm tròn indicator bên dưới mỗi label, bằng Necto Mono 10–12px Espresso. Thanh scale ngang bên dưới hiển thị roast level (ví dụ Medium Roast) bằng Inclusive Sans 14px."

    hero_image_banner:
      vai_trò: "Ảnh chụp full-bleed đầu trang"

      info: "Ảnh chụp lifestyle hoặc sản phẩm edge-to-edge (máy hát, nội thất quán cà phê) trên canvas Cream Paper. Không overlay, không gradient — ảnh CHÍNH LÀ hero. Thường đi kèm với Hero Brand Block ở góc trên bên trái."

    decorative_line_art_icon:
      vai_trò: "Brand mark nhỏ và điểm nhấn section (vịt, máy espresso, túi cà phê)"

      info: "Stroke Espresso (#522c25) hoặc Burnt Orange (#c03001) 1–2px, không fill, khoảng 24–40px. Phong cách vẽ tay minh họa — xuất hiện cạnh headline và làm linh vật thương hiệu trong header logo."

    slider_counter:
      vai_trò: "Chỉ báo vị trí carousel (01 — 03)"

      info: "Necto Mono 10–12px ở góc dưới bên phải của carousel. Định dạng: số slide hiện tại, em-dash, tổng số slide, kẹp giữa các nút mũi tên prev/next nhỏ."

    shop_all_pill_button:
      vai_trò: "Link chuyển section ở cuối carousel"

      info: "Nút filled Burnt Orange nhỏ với text Cream Paper, radius 3px. Necto Mono 12px uppercase, padding chặt (8–10px dọc). Xuất hiện ở góc dưới bên trái của mỗi carousel section chính."

  do_s_and_don_ts:

    do:
      - "Dùng Little Amps serif cho tất cả display headlines ở 20–51px với tracking -0.10em — đây là giọng nói duy nhất báo hiệu bản sắc thương hiệu."
      - "Đặt tất cả UI labels, nav, buttons, ngày tháng, và giá cả bằng Necto Mono uppercase với tracking 0.05em — giọng nói monospace này CHÍNH LÀ hệ thống cấu trúc."
      - "Mặc định nền trang là Cream Paper (#fff9f2) và dùng Linen Beige (#f6ede3) cho bề mặt tiếp theo — không bao giờ dùng trắng tinh."
      - "Dùng Burnt Orange (#c03001) làm màu action filled duy nhất; giữ tất cả primary CTA ở radius 3px để có cảm giác nhãn in."
      - "Hairline tất cả border ở 1px bằng Taupe Hairline (#e6dad4) — không bao giờ dùng shadow nặng hoặc border dày."
      - "Dùng Coffee Dust (#977e77) cho bất kỳ muted, secondary, hoặc helper text nào — không bao giờ dùng xám thuần."
      - "Kết hợp ảnh chụp tài liệu full-bleed với Hero Brand Block ở góc trên bên trái; để ảnh tự tạo bầu không khí."

    don_t:
      - "Không dùng đen thuần, trắng thuần, hoặc xanh xám trung tính hệ thống — bảng màu ấm và mang tông cà phê xuyên suốt."
      - "Không dùng border-radius lớn (pill shapes, 16px+, bo tròn hoàn toàn) — hệ thống có góc sắc ở 3–8px."
      - "Không dùng drop shadow nặng hoặc hiệu ứng elevation — chiều sâu đến từ sự thay đổi màu bề mặt, không phải shadow."
      - "Không đặt body hoặc paragraph text bằng display serif hoặc monospace — Inclusive Sans là body face duy nhất."
      - "Không thêm màu nhấn bổ sung — hệ thống có kỷ luật: một cam rực rỡ, một hổ phách, một cúc vạn thọ, một xanh bụi bặm."
      - "Không dùng đỏ, xanh lá, hoặc xanh dương tươi sáng cho ngữ nghĩa trạng thái — bảng màu ấm viết lại chúng thành Espresso và Burnt Orange."
      - "Không dùng Inter, Helvetica, hoặc system-ui cho các khoảnh khắc thương hiệu — cặp custom display serif và monospace là bất khả thương lượng."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Cream Paper | `#fff9f2` | Page canvas và nền mặc định |"
    info: "| 2 | Linen Beige | `#f6ede3` | Card surfaces, section bands, image frames |"
    info: "| 3 | Sandstone | `#cbbbb4` | Muted panel fills, secondary card surfaces |"

  elevation:

    info: "Hệ thống cố tình tránh drop shadows. Chiều sâu được truyền đạt qua ba cấp bề mặt cream/beige phẳng (Cream Paper → Linen Beige → Sandstone) và border hairline 1px bằng Taupe Hairline. Component nổi qua sự phân lớp màu sắc, không phải shadow. Điều này giữ thẩm mỹ phẳng, editorial, giống tạp chí zine — nhất quán với ẩn dụ nhãn in và bìa đĩa than."

  imagery:

    info: "Ảnh chụp mang phong cách tài liệu, xúc giác, và dẫn dắt bởi lifestyle: tay chạm vào máy hát, cảnh quầy cà phê với barista và khách hàng, quả cà phê tươi trong tay, đĩa than, bao bì cà phê. Xử lý ảnh ấm và hơi giảm bão hòa, phù hợp với bảng màu cream-và-espresso. Ảnh full-bleed ở cấp hero nhưng được chứa trong khung radius 8px bên trong card. Không stock photography, không abstract gradients, không 3D renders. Minh họa là line-art icons tối thiểu (máy espresso, túi cà phê, linh vật vịt) với stroke Espresso hoặc Burnt Orange 1–2px — vẽ tay, không bao giờ hình học. Ảnh chiếm khoảng 40–50% diện tích trang và mang bầu không khí thương hiệu nhiều hơn typography hoặc màu sắc đơn thuần."

  layout:

    info: "Mô hình trang là max-width căn giữa (~1200px) trên canvas Cream Paper full-bleed, với nội dung được chứa thoải mái thay vì edge-to-edge ngoại trừ hero image. Mẫu hero là ảnh chụp tài liệu full-bleed (máy hát / nội thất quán cà phê) với brand lockup phủ ở góc trên bên trái, theo sau là nav bar ngang được ghim bên dưới ảnh. Nhịp điệu section xen kẽ giữa các khối text editorial (headline căn giữa hoặc căn trái trên đoạn văn ngắn) và carousel nặng về ảnh (Community Board, product grids). Card grids dùng 3–4 cột trên desktop với gap 14–16px. Mật độ nội dung thoải mái — khoảng thở rộng rãi giữa các section (40–64px), với padding bên trong nhỏ chặt. Navigation là một thanh ngang duy nhất không có sidebar hoặc mega-menu. Carousel bao gồm điều khiển prev/next chỉ icon nhỏ và bộ đếm vị trí số."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "canvas: #fff9f2"
    - "card surface: #f6ede3"
    - "text: #522c25"
    - "muted text: #977e77"
    - "border: #e6dad4"
    - "accent: #c03001"
    - "primary action: #c03001 (filled action)"

    ví_dụ_component_prompts:

    - "*Editorial Card*: Nền Cream Paper (#fff9f2), border Taupe Hairline (#e6dad4) 1px, radius 8px. Ảnh ở trên với radius 8px. Ngày tháng bằng Necto Mono 10px Coffee Dust (#977e77), tracking 0.05em, định dạng '06.03.2026'. Tiêu đề bằng Little Amps serif 22px weight 500, Espresso (#522c25), tracking -2.2px. Trích đoạn body bằng Inclusive Sans 14px Coffee Dust. Nút Read More filled: nền Burnt Orange (#c03001), text Cream Paper, radius 3px, Necto Mono 12px uppercase, padding 10px 12px."

    - "*Product Card*: Nền Linen Beige (#f6ede3), radius 8px. Ảnh sản phẩm được đóng khung ở radius 8px. Tên bằng Inclusive Sans 16px Espresso. Giá bằng Necto Mono 13px Amber Ink (#c46500). Ghi chú hương vị bằng Inclusive Sans 14px Coffee Dust. Thanh roast level: đường Taupe Hairline 1px với đoạn đã fill bằng Espresso. Nút Quick View: nền Dusty Blue (#89b4ca), text Cream Paper, radius 3px, Necto Mono 12px uppercase."

    - "*Hero Brand Block*: Little Amps display serif 50px weight 500, Burnt Orange (#c03001), tracking -5px, hai dòng căn trái. Icon túi cà phê line-art nhỏ (24px, stroke Espresso) đặt ở bên phải dòng thứ hai. Padding 32px từ góc trên bên trái của hero image."

    - "*Nav Bar*: Nền Cream Paper (#fff9f2), border dưới Taupe Hairline 1px, cao 72px. Logo brand wordmark bên trái (custom mark chữ thường, Little Amps serif 20px Espresso). Giữa: nav items bằng Necto Mono 13px uppercase Espresso, tracking 0.05em, gap 24px: SHOP ▾, ABOUT, WHOLESALE, COMMUNITY BOARD, CONTACT. Phải: ACCOUNT ▾ và CART 0 cùng kiểu."

    - "*Ghost Outline Button*: Nền trong suốt, border Espresso (#522c25) 1px, radius 3px. Text bằng Necto Mono 13px weight 500 Espresso, tracking 0.05em, uppercase. Padding 8px 14px. Dùng cho secondary actions khi nút filled Burnt Orange đã có trên màn hình."

  typography_pairing_logic:

    info: "Hệ thống dùng hệ thống phân cấp ba font chặt chẽ: Little Amps (custom display serif) chỉ nói ở cấp brand và headline — 20px trở lên, luôn bằng Espresso hoặc Burnt Orange. Necto Mono xử lý mọi thứ cấu trúc và metadata: nav, buttons, ngày tháng, giá cả, labels — luôn uppercase, luôn tracking 0.05em, luôn trong khoảng 10–16px. Inclusive Sans là body face duy nhất, đặt ở 13–16px với tracking 0.05em. Roboto Mono xuất hiện như monospace phụ cho các ngữ cảnh data. Không bao giờ để display serif và monospace xuất hiện trên cùng một dòng body copy — chúng phục vụ các thanh ghi cảm xúc riêng biệt."

  color_behavior_rules:

    info: "Màu sắc được phân bổ, không phải trang trí. Cream Paper là mặc định cho 80% diện tích bề mặt. Linen Beige chỉ xuất hiện bên trong card hoặc section bands. Burnt Orange (#c03001) là màu filled-button duy nhất và chỉ nên xuất hiện tối đa 1–2 lần mỗi viewport. Amber Ink (#c46500) chỉ dùng để nhấn mạnh text, không phải nền. Marigold Wash (#febf6f) và Dusty Blue (#89b4ca) là điểm nhấn theo mùa hoặc phụ — không bao giờ dùng cả hai trong cùng một component. Espresso (#522c25) là màu tối cấu trúc duy nhất và xử lý tất cả text, borders, và icons."

  similar_brands:

    - "**Blue Bottle Coffee** — Cùng ảnh chụp tài liệu quán cà phê trên canvas cream/off-white với một điểm nhấn tối cho text và một điểm nhấn ấm cho CTA"
    - "**Sey Coffee** — Layout editorial giống tạp chí zine với monospaced labels, góc chặt, và bảng màu cà phê ấm thay thế neutrals tiêu chuẩn"
    - "**Onyx Coffee Lab** — Sử dụng nhiều monospaced typography cho metadata kỹ thuật (ngày rang, nguồn gốc, điểm số) và bề mặt phẳng không shadow"
    - "**Stumptown Coffee** — Canvas cream ấm, accent burnt-orange, và ảnh chụp lifestyle dẫn dắt trang thay vì hỗ trợ"
    - "**Counter Culture Coffee** — Hệ thống grid editorial với hệ thống phân cấp typographic mạnh, button radius nhỏ, và bảng màu ấm hạn chế với một điểm nhấn rực rỡ"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-espresso: #522c25;
          --color-burnt-orange: #c03001;
          --color-amber-ink: #c46500;
          --color-marigold-wash: #febf6f;
          --color-dusty-blue: #89b4ca;
          --color-cream-paper: #fff9f2;
          --color-linen-beige: #f6ede3;
          --color-taupe-hairline: #e6dad4;
          --color-sandstone: #cbbbb4;
          --color-coffee-dust: #977e77;
        
          /* Typography — Font Families */
          --font-little-amps: 'Little Amps', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inclusive-sans: 'Inclusive Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-necto-mono: 'Necto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.1;
          --tracking-caption: 0.5px;
          --text-body: 14px;
          --leading-body: 1.6;
          --tracking-body: 0.7px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -2px;
          --text-heading: 22px;
          --leading-heading: 1;
          --tracking-heading: -2.2px;
          --text-display: 50px;
          --leading-display: 0.85;
          --tracking-display: -5px;
        
          /* 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-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-90: 90px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-64px;
          --card-padding: 24-36px;
          --element-gap: 6-12px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 3px;
          --radius-images: 8px;
          --radius-inputs: 3px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-cream-paper: #fff9f2;
          --surface-linen-beige: #f6ede3;
          --surface-sandstone: #cbbbb4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-espresso: #522c25;
          --color-burnt-orange: #c03001;
          --color-amber-ink: #c46500;
          --color-marigold-wash: #febf6f;
          --color-dusty-blue: #89b4ca;
          --color-cream-paper: #fff9f2;
          --color-linen-beige: #f6ede3;
          --color-taupe-hairline: #e6dad4;
          --color-sandstone: #cbbbb4;
          --color-coffee-dust: #977e77;
        
          /* Typography */
          --font-little-amps: 'Little Amps', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inclusive-sans: 'Inclusive Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-necto-mono: 'Necto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.1;
          --tracking-caption: 0.5px;
          --text-body: 14px;
          --leading-body: 1.6;
          --tracking-body: 0.7px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -2px;
          --text-heading: 22px;
          --leading-heading: 1;
          --tracking-heading: -2.2px;
          --text-display: 50px;
          --leading-display: 0.85;
          --tracking-display: -5px;
        
          /* 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-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-90: 90px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
        }