shelby_kay___style_reference:
  info: "> botanical editorial spread trên nền vải lanh ấm — hệ thống mực hai màu trên giấy cũ, với display type tràn ra ngoài mép trang và metadata thì thầm từ lề."

  theme: "light"

  info: "Shelby Kay là một portfolio editorial chủ đề thực vật: canvas vải lanh ấm, một màu mực olive đậm, và một điểm nhấn sage-green duy nhất làm toàn bộ công việc thể hiện thương hiệu. Typography cực đoan — Ranade display type kéo dài tới 265px và tràn edge-to-edge, trong khi Switzer xử lý mọi thứ còn lại ở dải compact 10–20px, tạo ra sự căng thẳng kiểu magazine-spread giữa header hoành tráng và metadata thì thầm. Navigation chỉ là text, không có button, không control bo tròn, không shadow — giao diện đọc như một cuốn sách nghệ thuật in, không phải phần mềm. Các section chuyển qua các lớp tông ấm (cream → tan → taupe) thay vì các khối màu cứng xen kẽ, và toàn bộ hệ thống tưởng thưởng cho sự kiềm chế: hierarchy đến từ kích thước, weight và whitespace, không bao giờ từ màu sắc hay chrome."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Olive Ink | `#393c2a` | `--color-olive-ink` | Text chính, border và stroke cấu trúc — tất cả type từ body đến display headings, tất cả card và image borders, tất cả interactive outlines |"
    info: "| Sage Type | `#737955` | `--color-sage-type` | Display headings và brand voice — dùng cho wordmark SHELBY hoành tráng, section anchors, và các điểm nhấn heading chọn lọc mang bản sắc thực vật của thương hiệu |"
    info: "| Linen | `#efe6d9` | `--color-linen` | Canvas chính và bề mặt card — nền trang, card fills, tông ấm nền tảng mà toàn bộ hệ thống nằm trên |"
    info: "| Sienna | `#d6b292` | `--color-sienna` | Orange wash cho highlight backgrounds, decorative bands, và soft emphasis phía sau nội dung |"
    info: "| Driftwood | `#afa199` | `--color-driftwood` | Bề mặt cấp ba và muted helpers — nền profile-section, metadata bão hòa thấp, UI text và divider ít quan trọng |"
    info: "| Riverstone | `#7b8785` | `--color-riverstone` | Neutral tông lạnh cho chuyển đổi tương phản tinh tế — bề mặt phụ, hover hoặc muted state cho UI element cần tách biệt thị giác khỏi nền ấm |"

  tokens___typography:

    ranade___display_và_editorial_headlines__dùng_ở_tỉ_lệ_cực_lớn_83_265px_cho_wordmark_và_section_anchors__và_ở_24px_cho_callout_contact__dạng_hình_học_hơi_condensed_tạo_cho_thương_hiệu_giọng_nói_hoành_tráng_nhưng_kiềm_chế___type_lấp_đầy_khung_hình_mà_không_la_hét__thay_thế__boldonse_hoặc_bold_neue_cho_display__space_grotesk_cho_các_mục_nhỏ_hơn_____font_ranade:
      - "**Thay thế:** Boldonse, Space Grotesk"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 24px, 83px, 158px, 265px"
      - "**Line height:** 0.90, 1.00, 1.20"
      - "**Vai trò:** Display và editorial headlines. Dùng ở tỉ lệ cực lớn (83–265px) cho wordmark và section anchors, và ở 24px cho callout CONTACT. Dạng hình học hơi condensed tạo cho thương hiệu giọng nói hoành tráng nhưng kiềm chế — type lấp đầy khung hình mà không la hét. Thay thế: Boldonse hoặc Bold Neue cho display, Space Grotesk cho các mục nhỏ hơn."

    switzer___mọi_thứ_còn_lại__body_copy__nav__labels__metadata__card_titles__list_items__grotesque_compact_đọc_như_editorial_running_text__weight_500_600_là_dải_workhorse__700_dành_riêng_cho_section_headers_và_emphasized_nav__thay_thế__inter__untitled_sans__hoặc_suisse_int_l_để_có_full_weight_coverage_____font_switzer:
      - "**Thay thế:** Inter, Untitled Sans"
      - "**Weights:** 500, 600, 700"
      - "**Kích thước:** 10px, 11px, 14px, 16px, 20px"
      - "**Line height:** 1.00, 1.20, 1.25, 1.30"
      - "**Vai trò:** Mọi thứ còn lại: body copy, nav, labels, metadata, card titles, list items. Grotesque compact đọc như editorial running text. Weight 500–600 là dải workhorse; 700 dành riêng cho section headers và emphasized nav. Thay thế: Inter, Untitled Sans, hoặc Suisse Int'l để có full weight coverage."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body | 14px | 1.3 | — | `--text-body` |"
      info: "| heading-sm | 20px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 24px | 1.2 | — | `--text-heading` |"
      info: "| display | 83px | 0.9 | — | `--text-display` |"
      info: "| display-lg | 158px | 0.9 | — | `--text-display-lg` |"
      info: "| wordmark | 265px | 0.9 | — | `--text-wordmark` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 56 | 56px | `--spacing-56` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 36-56px"
      - "**Card padding:** 20px"
      - "**Element gap:** 12px"

  components:

    wordmark_display:
      vai_trò: "Brand-defining type element"

      info: "Ranade ở 265px, weight 400, line-height 0.90, Sage Type (#737955), không letter-spacing. Trải dài full viewport width edge-to-edge, character spacing trực quan chặt chẽ. Đây là signature element — một từ duy nhất lấp đầy khung hình. Luôn uppercase, luôn ở tỉ lệ tối đa."

    section_anchor:
      vai_trò: "Section transition label"

      info: "Ranade ở 24px, weight 400, line-height 1.20, Olive Ink (#393c2a). Căn giữa, dùng như một callout nhẹ nhàng như 'CONTACT' mời gọi scroll thay vì ra lệnh hành động. Không gạch chân, không trang trí — typographic scale làm tất cả."

    rotated_side_label:
      vai_trò: "Vertical decorative element"

      info: "Ranade ở 83–158px, weight 400, Olive Ink (#393c2a), xoay 90° ngược chiều kim đồng hồ, ghim vào cạnh phải của viewport. Hoạt động như một running header tương đương — cố định hoặc xuất hiện trên hero để đánh dấu danh tính trang mà không cạnh tranh với wordmark."

    minimal_nav:
      vai_trò: "Text-only site navigation"

      info: "Switzer 11–14px, weight 500, uppercase, Olive Ink (#393c2a), letter-spacing normal. Căn chỉnh theo mép trang (trái cho primary links, phải cho meta như '2026'). Không button, không background, không separator giữa các item — whitespace định nghĩa các link. Link có underline hoặc border Olive Ink khi hover."

    project_card:
      vai_trò: "Work grid item"

      info: "Ảnh full-bleed bên trong khung 0px-radius trên nền Sienna (#d6b292). Date stamp ở góc trên bên trái với Switzer 10px, weight 500, Olive Ink. Nhãn hai chữ cái viết tắt căn giữa bên dưới card với Switzer 11px, weight 600, Olive Ink. Không card border, không shadow — ảnh CHÍNH LÀ card."

    date_stamp:
      vai_trò: "Editorial metadata"

      info: "Switzer 10px, weight 500, Olive Ink (#393c2a), định vị tuyệt đối ở góc trên bên trái của project card hoặc section. Định hướng dọc (xoay 90°). Hoạt động như số phát hành trên bìa tạp chí — thiết lập phép ẩn dụ editorial."

    client_list_column:
      vai_trò: "Sidebar content list"

      info: "Switzer 11–14px, weight 500, Olive Ink (#393c2a), không bullet point, không thụt lề — các item xếp chồng trực tiếp. Hoạt động như một type-only index, chạy dọc theo lề trái của work section."

    portrait_image_card:
      vai_trò: "Profile photo với duotone treatment"

      info: "Ảnh vuông hoặc gần vuông, 0px radius, desaturated để nằm trong bảng màu olive. Không border, không caption box. Ảnh tiếp xúc trực tiếp với bề mặt Driftwood (#afa199). Hoạt động như khoảnh khắc 'media' duy nhất trên profile page — type làm phần còn lại."

    recognition___award_list:
      vai_trò: "Right-aligned metadata column"

      info: "Switzer 11–14px, weight 500, Olive Ink, text căn phải. Mục nhập nhiều dòng với tên dự án trên một dòng, chi tiết giải thưởng thụt lề bên dưới. Dày đặc, compact — đọc như colophon hoặc index page từ sách in."

    full_bleed_botanical_background:
      vai_trò: "Hero atmosphere layer"

      info: "Ảnh thiên nhiên/thực vật lớn ở độ mờ cực thấp (khoảng 10–15%) phủ lên canvas Linen (#efe6d9). Ảnh kéo dài edge-to-edge không border. Tạo bầu không khí greenhouse/atelier mà không cạnh tranh với wordmark. Không rounded corners, không mask."

    hero_subtitle:
      vai_trò: "Opening statement bên dưới wordmark"

      info: "Switzer 14–16px, weight 500, line-height 1.30, Olive Ink (#393c2a). Tối đa hai dòng ngắn, căn trái. Thiết lập giọng nói editorial — đọc như tiểu sử tác giả trên bìa sách, không phải tagline marketing."

  do_s_and_don_ts:

    do:
      - "Dùng Ranade ở 83px hoặc lớn hơn cho bất kỳ brand hoặc section-defining headline nào — đây là type duy nhất được phép lấp đầy khung hình."
      - "Đặt body và metadata bằng Switzer weight 500–600 ở 10–16px — grotesque compact là workhorse và nên xử lý 90% giao diện."
      - "Xây dựng bảng màu từ chính xác hai brand colors: Olive Ink (#393c2a) cho cấu trúc, Sage Type (#737955) cho brand voice. Dùng Sage một cách tiết kiệm — tối đa một display element mỗi section."
      - "Để canvas chuyển qua các lớp tông ấm (Linen → Sienna → Driftwood) để định nghĩa section thay vì hard borders hoặc color blocks."
      - "Dùng 0px border-radius ở mọi nơi — cards, images, tags. Phép ẩn dụ trang in đòi hỏi góc sắc."
      - "Dùng padding 7–8px cho container metadata chặt chẽ và 20px cho card padding — base unit 8px chi phối tất cả spacing."
      - "Dùng Olive Ink (#393c2a) cho tất cả text và borders. Tỉ lệ tương phản 9.2:1 trên Linen giúp nó dễ đọc ở 10px và hoành tráng ở 265px."

    don_t:
      - "Đừng thêm drop shadows, glows, hoặc bất kỳ CSS elevation nào — hệ thống cố tình phẳng và giống in ấn."
      - "Đừng đưa rounded corners (border-radius > 0) vào bất kỳ element nào — nó phá vỡ phép ẩn dụ editorial."
      - "Đừng dùng Sage Type (#737955) cho body text — tỉ lệ tương phản 3.7:1 trên Linen không đạt chuẩn readability. Chỉ dùng cho display headings."
      - "Đừng tạo filled button backgrounds với bất kỳ màu nào — hệ thống này không có CTA buttons. Navigation chỉ là text, contact là typographic anchor."
      - "Đừng dùng gradients, brand illustrations, hoặc icon sets — ngôn ngữ thị giác chỉ là photography, type và tonal layering."
      - "Đừng dùng bất kỳ cool hoặc neutral gray nào ngoài token Riverstone (#7b8785) — tất cả neutral phải giữ ấm để duy trì bầu không khí thực vật."
      - "Đừng căn giữa body text. Căn trái mọi thứ ngoại trừ section anchors, là element duy nhất được xử lý căn giữa."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Linen | `#efe6d9` | Canvas trang chính — hero, section background mặc định |"
    info: "| 2 | Sienna | `#d6b292` | Work/index section — tonal page break |"
    info: "| 3 | Driftwood | `#afa199` | Profile section background — chuyển ấm sâu hơn |"
    info: "| 4 | Riverstone | `#7b8785` | Neutral pha lạnh cho contrast states hoặc secondary overlays |"

  elevation:

    info: "Hệ thống phẳng theo nguyên tắc thiết kế editorial: không drop shadows, không elevation, không floating surfaces. Chiều sâu chỉ được tạo ra thông qua tonal layering của các bề mặt ấm, border lines và ảnh full-bleed. Cards nằm trực tiếp trên bề mặt section của chúng với hairline border hoặc không có gì — phép ẩn dụ trang in cấm digital lift."

  imagery:

    info: "Photography mang tính thực vật và bầu không khí, được dùng như lớp texture mờ phía sau wordmark — cây lớn, cọ, tán lá hiển thị ở độ mờ 10–15% để chúng đọc như bóng nhà kính chứ không phải chủ thể. Một ảnh portrait full-bleed xuất hiện trên profile page, desaturated để nằm trong bảng màu olive và crop chặt. Không product photography, không abstract 3D, không illustration. Không icon system — element đồ họa duy nhất là chính type. Image treatment luôn full-bleed với 0px radius và không border hoặc mask. Imagery mang tính bầu không khí, không bao giờ giải thích."

  layout:

    info: "Full-bleed layout không có max-width container — wordmark kéo dài edge-to-edge, và section backgrounds trải dài full viewport. Hero là một headline khổng lồ duy nhất (SHELBY) phủ lên botanical photography mờ, với hero subtitle ở góc dưới bên trái và minimal nav dọc theo cạnh dưới. Một nhãn 'KAY' xoay nằm ở lề phải. Work section dùng lưới card 4 cột trên nền tan ấm, với client list dọc chạy dọc lề trái. Profile section chuyển sang layout 3 cột: portrait trái, label/title giữa, metadata dày đặc phải. Nhịp điệu section được xác định bởi chuyển đổi bề mặt tông (cream → tan → taupe) thay vì divider cứng. Navigation là thanh text minimal căn dưới trên hero; không có trên interior pages dùng scrolling. Mô hình trang là editorial — bất đối xứng, khoảng thở dọc rộng rãi giữa các section, không có ràng buộc max-width căn giữa."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #393c2a (Olive Ink)"
    - "background: #efe6d9 (Linen)"
    - "border: #393c2a (Olive Ink)"
    - "accent: #737955 (Sage Type)"
    - "primary action: không có màu CTA riêng biệt"

    3_5_example_component_prompts:

    - "**Build the wordmark hero**: Canvas #efe6d9 full-bleed với ảnh thực vật lớn ở độ mờ ~12% lấp đầy nền. Display heading 'SHELBY' căn giữa bằng Ranade weight 400, kích thước 265px, line-height 0.90, màu #737955, kéo dài edge-to-edge. Hero subtitle bên dưới bằng Switzer weight 500, 14px, line-height 1.30, màu #393c2a, căn trái, tối đa hai dòng ngắn."

    - "**Build a project card for the work grid**: Trên nền section #d6b292, render ảnh full-bleed với 0px border-radius làm thân card. Phủ date stamp ở góc trên bên trái bằng Switzer weight 500, 10px, màu #393c2a, xoay 90°. Bên dưới card, căn giữa nhãn hai chữ cái bằng Switzer weight 600, 11px, màu #393c2a. Không border, không shadow, gap 20px giữa các card."

    - "**Build the minimal nav bar**: Cố định hoặc căn dưới, padding dọc 7px. Bên trái: ba text links ('WORK', 'PROFILE', 'CONTACT') bằng Switzer weight 500, 11px, uppercase, màu #393c2a, cách nhau 20px gap. Bên phải: nhãn năm ('2026') cùng style, căn phải. Không backgrounds, không borders, không divider — whitespace định nghĩa các item."

    - "**Build the profile section**: Trên nền #afa199, đặt ảnh portrait vuông bên trái (0px radius, không border). Ở giữa, nhãn 'RECOGNITION' bằng Switzer weight 700, 14px, màu #393c2a, theo sau là danh sách tên dọc bằng Switzer weight 500, 11px. Bên phải, cột award entries căn phải bằng Switzer weight 500, 11px, với tên dự án trên một dòng và chi tiết bên dưới. Gap 36px giữa các section."

    - "**Build the rotated side label**: Ghim element text 'KAY' vào cạnh phải của viewport, xoay 90° ngược chiều kim đồng hồ. Ranade weight 400, 158px, màu #393c2a, line-height 0.90. Định vị căn giữa dọc trong hero. Hoạt động như running header — type chạm mép khung không padding."

  typography_philosophy:

    info: "Hệ thống hoạt động trên sự tương phản radical type-scale: Ranade ở 265px cho wordmark, Switzer ở 10px cho metadata. Tỉ lệ 26× này là công cụ thị giác chính — hierarchy được tạo ra chỉ bằng kích thước, không bao giờ bằng màu sắc hoặc biến thể weight trong cùng một loại element. Ranade dùng weight 400 cho display (weight nhẹ nhưng kích thước hoành tráng, tạo uy quyền qua scale chứ không qua độ đậm). Switzer weight 500 là body mặc định; weight 600 cho emphasized labels; weight 700 dành riêng cho section headers. Không italic, không underline decoration, không drop-cap — type nói qua scale và hệ thống mực hai màu."

  similar_brands:

    - "**Locomotive (locomotive.ca)** — Cùng cách tiếp cận editorial-portfolio với display type khổng lồ tràn edge-to-edge, bảng màu neutral ấm, và botanical/nature photography làm nền bầu không khí"
    - "**Bureau Cool** — Hệ thống mực hai màu (tối + một accent) trên canvas cream ấm, custom display type ở tỉ lệ cực lớn, text-only navigation, không buttons hoặc shadows"
    - "**Pentagram (pentagram.com)** — Nhịp điệu portfolio editorial — full-bleed sections, type-as-imagery, chuyển đổi bề mặt tông thay vì color blocks, zero chrome giữa các section"
    - "**Rauno Freiberg** — Minimal text-only nav, tương phản type cực đoan giữa display và metadata, bề mặt phẳng không shadows, bảng màu neutral ấm"
    - "**Eli Hava (personal portfolio)** — Hero wordmark lớn kéo dài, rotated side text element, card-based work grid với date stamps — cùng cấu trúc magazine-spread"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-olive-ink: #393c2a;
          --color-sage-type: #737955;
          --color-linen: #efe6d9;
          --color-sienna: #d6b292;
          --color-driftwood: #afa199;
          --color-riverstone: #7b8785;
        
          /* Typography — Font Families */
          --font-ranade: 'Ranade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.3;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-display: 83px;
          --leading-display: 0.9;
          --text-display-lg: 158px;
          --leading-display-lg: 0.9;
          --text-wordmark: 265px;
          --leading-wordmark: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-45: 45px;
          --spacing-56: 56px;
        
          /* Layout */
          --section-gap: 36-56px;
          --card-padding: 20px;
          --element-gap: 12px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-linen: #efe6d9;
          --surface-sienna: #d6b292;
          --surface-driftwood: #afa199;
          --surface-riverstone: #7b8785;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-olive-ink: #393c2a;
          --color-sage-type: #737955;
          --color-linen: #efe6d9;
          --color-sienna: #d6b292;
          --color-driftwood: #afa199;
          --color-riverstone: #7b8785;
        
          /* Typography */
          --font-ranade: 'Ranade', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-switzer: 'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body: 14px;
          --leading-body: 1.3;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --text-display: 83px;
          --leading-display: 0.9;
          --text-display-lg: 158px;
          --leading-display-lg: 0.9;
          --text-wordmark: 265px;
          --leading-wordmark: 0.9;
        
          /* Spacing */
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-45: 45px;
          --spacing-56: 56px;
        }