atelier_deux_cé___style_reference:
  info: "> Sunlit editorial gallery"

  theme: "light"

  info: "Atelier Deux-Cé tự giới thiệu như một phòng trưng bày editorial ngập nắng — một creative agency có trụ sở tại Paris, với website mang phong cách tạp chí được biên tập kỹ lưỡng hơn là một sản phẩm phần mềm. Hệ thống ưu tiên nhiếp ảnh: ảnh full-bleed chiếm ưu thế trên mọi màn hình, chữ đóng vai trò như caption và nhãn nhẹ nhàng thay vì chrome giao diện. Bảng màu ấm áp, phai nắng của tông đất (cream, linen, sage, taupe, olive stone) thay thế canvas SaaS trắng/xám điển hình, mang đến cho mỗi trang sự ấm áp của một biệt thự Provençal. Chữ đen nằm ở độ tương phản gần như tối đa trên các bề mặt ấm này, và một màu xanh bão hòa duy nhất được dành riêng cho footer như một khu vườn ở cuối con đường. Các component có chủ đích ít và không trọng lượng — không shadow, không gradient, không border dày hơn hairline, không bo góc nào phá vỡ cảm giác in ấn editorial."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Body text, heading, nav link, hairline border và link underline — màu chữ duy nhất trong toàn bộ hệ thống |"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang, bề mặt card, chữ đảo màu trên vùng ảnh tối |"
    info: "| Warm Linen | `#eee5da` | `--color-warm-linen` | Nền section mềm mại, bước đầu tiên ra khỏi trắng tinh — mang đến cho trang giấy sự ấm áp của giấy chưa tẩy trắng |"
    info: "| Pale Sage | `#d8ddc6` | `--color-pale-sage` | Panel section pha màu, tông canvas không trắng chiếm ưu thế |"
    info: "| Driftwood | `#d8d0c5` | `--color-driftwood` | Nền section ấm sâu hơn, dùng khi panel cần lùi lại so với Pale Sage |"
    info: "| Olive Stone | `#afb371` | `--color-olive-stone` | Nền section ấm bão hòa — bước trung tính sâu nhất trước khi có bất kỳ màu sắc nào xuất hiện |"
    info: "| Weathered Taupe | `#9c978a` | `--color-weathered-taupe` | Nền section taupe nhẹ, dùng hạn chế như một giải pháp thay thế êm dịu hơn Olive Stone |"
    info: "| Soft Pebble | `#aaaaa4` | `--color-soft-pebble` | Nền section xám ấm nhạt, trung tính nhất trong các tông đất |"
    info: "| Garden Green | `#259558` | `--color-garden-green` | Chỉ dùng cho nền footer — điểm nhấn màu duy nhất trong hệ thống, được dùng như một nhịp kết thúc có chủ đích thay vì màu thương hiệu trải khắp UI |"

  tokens___typography:

    helvetica___primary_ui_and_editorial_type___body_copy__navigation__links__project_captions__category_filters__and_all_functional_text__weight_400_for_body_and_metadata__weight_600_reserved_for_the_wordmark_and_the_few_moments_that_need_emphasis__the_system_stack_ensures_identical_rendering_across_platforms_without_depending_on_a_webfont_____font_helvetica:
      - "**Thay thế:** Helvetica Neue, Arial, sans-serif"
      - "**Weights:** 400, 600"
      - "**Kích cỡ:** 16, 17, 20, 24"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.02em trên body và UI text (0.32–0.48px), 0.04em trên navigation và label (0.64–0.96px) — tracking dương nhẹ mang đến cho chữ một chất lượng tinh tế, như được sắp chữ bằng kim loại, hiếm thấy trong web UI hiện đại"
      - "**Vai trò:** Primary UI và editorial type — body copy, navigation, link, project caption, category filter và mọi text chức năng. Weight 400 cho body và metadata, weight 600 dành riêng cho wordmark và một vài khoảnh khắc cần nhấn mạnh. System stack đảm bảo hiển thị giống hệt nhau trên mọi nền tảng mà không phụ thuộc vào webfont."

    minion_3___editorial_accent_serif___used_for_body_paragraphs_and_select_headings_where_a_literary__book_page_quality_is_desired__the_contrast_between_this_transitional_serif_and_the_geometric_helvetica_mirrors_the_brand_s_positioning__strategy___craft__editorial___commercial_____font_minion_3:
      - "**Thay thế:** Cormorant Garamond, EB Garamond, serif"
      - "**Weights:** 400"
      - "**Kích cỡ:** 16, 17, 24"
      - "**Line height:** 1.20"
      - "**Vai trò:** Editorial accent serif — dùng cho body paragraph và một số heading chọn lọc khi muốn có chất văn chương, như trang sách. Sự tương phản giữa serif chuyển tiếp này và Helvetica hình học phản ánh định vị thương hiệu: chiến lược + thủ công, editorial + thương mại."

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.2 | 0.64px | `--text-caption` |"
      info: "| subheading | 20px | 1.2 | 0.4px | `--text-subheading` |"
      info: "| heading | 24px | 1.2 | 0.48px | `--text-heading` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "6px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

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

    layout:

      - "**Section gap:** 48px"
      - "**Card padding:** 0px"
      - "**Element gap:** 24px"

  components:

    split_screen_hero:
      vai_trò: "Bố cục mở đầu full-bleed kết hợp hai bức ảnh gặp nhau tại một đường nối dọc cứng ở trung tâm"

      info: "Hai ảnh edge-to-edge, không gap, không border, không radius. Mỗi nửa là một bức ảnh full-bleed với trọng lượng ngang nhau. Chữ và một mark nhỏ màu trắng nổi trên một hoặc cả hai nửa. Nền của vùng ảnh là ẩn; canvas xung quanh dùng Canvas White."

    hero_caption_label:
      vai_trò: "Caption editorial nhỏ nổi trên ảnh hero — credit dự án, người mẫu, địa điểm"

      info: "Chữ trắng, Helvetica 16px weight 400, letter-spacing 0.04em, line-height 1.2. Stack nhiều dòng với tên dự án ở weight 600, các dòng hỗ trợ ở weight 400. Không có nền — chữ nằm trực tiếp trên ảnh."

    wordmark___hamburger_navigation:
      vai_trò: "Global navigation tối giản — wordmark thương hiệu bên trái, một icon hamburger duy nhất bên phải"

      info: "Wordmark là Helvetica weight 600, 20px, letter-spacing 0.04em, màu Ink Black. Hamburger là icon stroke đen mảnh. Toàn bộ nav mỏng như sợi tóc và nổi trên trang mà không có nền hay border."

    editorial_body_text_block:
      vai_trò: "Đoạn văn mô tả dài dùng cho phần 'What we do' và các section tương tự"

      info: "minion-3 hoặc Helvetica ở 17px, line-height 1.2, màu Ink Black. Được đặt trong một cột đọc hẹp (khoảng 480–600px) với khoảng trắng rộng xung quanh. Không drop cap, không pull quote, không decorative rule — chữ chính là thiết kế."

    category_filter_list:
      vai_trò: "Danh sách inline nhiều dòng các category dự án kèm số lượng, hoạt động như một index điều hướng"

      info: "Helvetica 16px weight 400, letter-spacing 0.04em, màu Ink Black. Các item chạy inline với khoảng cách chữ thông thường, số lượng trong ngoặc đơn ngay sau mỗi label. Không chip, không pill, không nền — danh sách đọc như một mục lục in."

    project_card:
      vai_trò: "Mục dự án ưu tiên hình ảnh trong grid portfolio 2 cột"

      info: "Ảnh phủ kín card edge-to-edge với 0px radius. Không border, không shadow, không padding quanh ảnh. Caption nằm dưới ảnh: tên dự án ở Helvetica weight 600 16px, label chuyên ngành và ngày tháng ở Helvetica weight 400 16px, cả hai màu Ink Black, letter-spacing 0.04em. Column gap 48px giữa các card."

    read_more_link:
      vai_trò: "Text link kết thúc một đoạn editorial"

      info: "Helvetica 16px weight 600, màu Ink Black, letter-spacing 0.04em, viết hoa toàn bộ. Không underline ở trạng thái nghỉ; underline đen 1px xuất hiện khi hover. Không background, không border, không padding."

    footer_banner:
      vai_trò: "Dải đóng trang full-bleed"

      info: "Nền màu Garden Green (#259558), full viewport width, không radius, không border. Chứa navigation link và credit ở dạng chữ đảo màu (Canvas White) với cùng kích cỡ Helvetica và letter-spacing được dùng xuyên suốt."

    inline_section_label:
      vai_trò: "Tag viết hoa nhỏ xác định một section ('WHAT WE DO')"

      info: "Helvetica 16px weight 600, viết hoa toàn bộ, màu Ink Black, letter-spacing 0.04em. Nằm ở đầu section, căn trái, với gap 24px đến body text bên dưới."

  do_s_and_don_ts:

    nên:
      - "Để ảnh full-bleed dẫn dắt mọi màn hình chính — chữ và chrome là caption, không phải chủ thể"
      - "Xếp chồng các section bằng thang trung tính ấm (Canvas White → Warm Linen → Pale Sage → Driftwood → Olive Stone) để tạo nhịp điệu mà không cần shadow"
      - "Dùng hai họ chữ với sự tương phản có chủ đích: Helvetica cho UI chức năng và metadata, minion-3 cho body paragraph editorial và khoảnh khắc như trang sách"
      - "Áp dụng letter-spacing 0.02em cho body và 0.04em cho navigation, label và tag viết hoa trên cả hai họ chữ — tracking dương nhẹ này là chữ ký lặng lẽ của hệ thống"
      - "Giữ tất cả component radius ở 0px — thiết kế phẳng như in ấn, không nâng lên như card"
      - "Dành riêng Garden Green (#259558) cho footer — không đưa nó vào button, link hay accent ở nơi khác"
      - "Chỉ đặt type scale ở 16 / 17 / 20 / 24px — một scale nén là kỷ luật, không phải giới hạn"

    không_nên:
      - "Không thêm box-shadow, drop shadow, glow hay gradient overlay — hierarchy đến từ màu sắc và hình ảnh, không bao giờ từ độ cao"
      - "Không đưa màu bão hòa nào ngoài màu xanh footer duy nhất — bảng màu là tông đất ấm, chấm hết"
      - "Không bo góc trên card, button, ảnh hay tag — 0px radius là bất di bất dịch"
      - "Không dùng filled button, ghost button hay pill button — hệ thống không có component button, chỉ có text link và dải footer"
      - "Không dùng icon ngoài một hamburger tối giản duy nhất — site do ảnh dẫn dắt, không phải icon"
      - "Không đặt chữ ở letter-spacing âm — tracking dương 0.02–0.04px là lựa chọn định hình và không được thắt chặt"
      - "Không thêm border trang trí dày hơn 1px hairline, và không bao giờ dùng màu border ngoài thang trung tính"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Canvas White | `#ffffff` | Nền trang cơ bản và mọi bề mặt chữ đảo màu |"
    info: "| 2 | Warm Linen | `#eee5da` | Bước pha màu đầu tiên — section band, bề mặt project card |"
    info: "| 3 | Pale Sage | `#d8ddc6` | Tông panel ấm chiếm ưu thế, dùng cho content section và nền category list |"
    info: "| 4 | Driftwood | `#d8d0c5` | Panel ấm sâu hơn, dùng để tạo nhịp tông nhẹ giữa các section Sage |"
    info: "| 5 | Olive Stone | `#afb371` | Panel ấm bão hòa — bề mặt trung tính sâu nhất trước khi có màu sắc |"

  elevation:

    info: "Không box-shadow, không glow, không drop filter. Hệ thống tạo hierarchy độc quyền qua ảnh full-bleed và sự chuyển màu ấm giữa các section liền kề. Các component không trọng lượng — chúng nằm trên trang như những bản in ghim lên tường, không phải card nâng lên khỏi bề mặt. Bất kỳ sự phân cách nào có thể nhìn thấy đều đến từ hairline black rule hoặc một bước tông trong thang trung tính."

  imagery:

    info: "Nhiếp ảnh editorial là loại nội dung chiếm ưu thế và là chủ thể thị giác chính của mọi trang. Ảnh full-bleed, edge-to-edge, hình chữ nhật không radius, và thường được ghép đôi trong bố cục split-screen nơi hai bức ảnh gặp nhau tại một đường nối dọc cứng. Phong cách nhiếp ảnh ấm áp, ánh sáng tự nhiên và thiên về lifestyle — người mẫu thời trang, ngoại thất khách sạn, cận cảnh bao bì, phong cảnh Địa Trung Hải và ảnh sản phẩm trong bối cảnh (sâm panh trên cánh đồng cải dầu, sô cô la trên vải lanh). Không illustration, không 3D render, không đồ họa trừu tượng, không ảnh chụp màn hình UI sản phẩm. Icon duy nhất trên site là một mark trắng nhỏ tối giản trong hero. Nhiếp ảnh là ngôi sao; giao diện là khung bao quanh nó."

  layout:

    info: "Trang là bố cục full-bleed không phụ thuộc max-width, đọc từ trên xuống dưới như một tạp chí in. Hero là split-screen: hai ảnh cao full viewport gặp nhau tại một đường nối dọc cứng ở trung tâm, với chữ nổi và một mark trắng nhỏ. Bên dưới hero, các content section xen kẽ giữa cột đọc hẹp (khoảng 480–600px) của editorial body text và grid ảnh 2 cột full-bleed cho project showcase. Nhịp section được tạo ra bằng cách chuyển tông nền trung tính ấm giữa các section — không có sự luân phiên sáng/tối, chỉ có sự chuyển tông từ ấm nhạt sang ấm bão hòa. Một danh sách inline phẳng các category kèm số lượng trong ngoặc đơn hoạt động như một mục lục, nằm trên một dải Pale Sage. Navigation tối giản: wordmark trái, hamburger phải, không sticky bar, không sidebar, không mega-menu. Footer là một dải Garden Green full-bleed duy nhất."

  agent_prompt_guide:

  quick_color_reference:

    - "text: #000000"
    - "background: #ffffff"
    - "surface (warm): #eee5da"
    - "surface (tinted): #d8ddc6"
    - "border: #000000 (hairline, 1px max)"
    - "accent: #259558 (chỉ footer)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    1__split_screen_hero: "Bố cục full-bleed, hai ảnh edge-to-edge gặp nhau tại một đường nối dọc cứng ở trung tâm, không gap, không border, 0px radius. Nửa trái: ảnh chân dung editorial. Nửa phải: ảnh lifestyle/địa điểm. Caption nổi trên nửa trái — tên dự án ở Helvetica weight 600 16px #ffffff letter-spacing 0.64px, các dòng hỗ trợ ở weight 400 16px #ffffff. Mark trắng nhỏ (một glyph, ~32px) phía trên caption. Wordmark trên cùng bên trái ở Helvetica weight 600 20px #000000 letter-spacing 0.8px. Icon hamburger trên cùng bên phải là stroke đen 1px. Không nền nav."

    2__category_filter_index: "Dải section full-bleed Pale Sage (#d8ddc6), vertical padding 48px. Danh sách inline hai dòng tên category ở Helvetica weight 400 16px #000000 letter-spacing 0.64px, số lượng trong ngoặc đơn sau mỗi label, gap 24px giữa các item. Không chip, không pill, không nền. Hoạt động như một mục lục in."

    3__project_card_portfolio_grid: "Ảnh hình chữ nhật full-bleed với 0px radius, không border, không padding quanh ảnh. Column gap 48px giữa các card trong grid 2 cột. Bên dưới ảnh, tên dự án ở Helvetica weight 600 16px #000000 letter-spacing 0.64px, sau đó chuyên ngành và ngày tháng ở Helvetica weight 400 16px #000000 letter-spacing 0.64px trên dòng bên dưới. Không nền card, không shadow — ảnh chính là card."

    4__editorial_body_section: "Nền Canvas White (#ffffff). Section label ở trên cùng — 'WHAT WE DO' — ở Helvetica weight 600 16px #000000 letter-spacing 0.64px, viết hoa toàn bộ. Gap 24px bên dưới, sau đó là một cột đọc hẹp (max ~560px) body text ở minion-3 hoặc Helvetica 17px #000000 line-height 1.2 letter-spacing 0.34px. Kết thúc bằng text link 'READ MORE' ở Helvetica weight 600 16px #000000 letter-spacing 0.64px, viết hoa toàn bộ, underline đen 1px chỉ khi hover."

    5__footer_banner: "Dải full viewport width, nền #259558, không radius, không border, vertical padding 40–48px. Footer link ở Helvetica weight 400 16px #ffffff letter-spacing 0.64px. Màu sắc duy nhất trong hệ thống sống ở đây và không nơi nào khác."

  similar_brands:

    - "**Cereal Magazine** — Cùng luồng đọc editorial-magazine, nhiếp ảnh ấm áp ánh sáng tự nhiên làm nội dung chính, type scale nén và bảng màu trung tính tông đất"
    - "**Aesop** — Stack bề mặt cream-and-taupe ấm áp, trình bày sản phẩm do nhiếp ảnh dẫn dắt, Helvetica hạn chế, không shadow hay chrome trang trí"
    - "**Hermès corporate site** — Cảm giác luxury agency với bảng màu tông đất ấm, nhiếp ảnh làm ngôi sao, UI tối giản do chữ dẫn dắt"
    - "**Acne Studios** — Cảm giác editorial fashion-agency, type scale sans-serif nén, layout phẳng như in ấn với 0px radius xuyên suốt"
    - "**Maison Martin Margiela** — Sự kiềm chế editorial, chữ dùng làm caption lặng lẽ trên hình ảnh, và một điểm nhấn bão hòa duy nhất dành riêng cho nhịp kết thúc"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-canvas-white: #ffffff;
          --color-warm-linen: #eee5da;
          --color-pale-sage: #d8ddc6;
          --color-driftwood: #d8d0c5;
          --color-olive-stone: #afb371;
          --color-weathered-taupe: #9c978a;
          --color-soft-pebble: #aaaaa4;
          --color-garden-green: #259558;
        
          /* Typography — Font Families */
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-minion-3: 'minion-3', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.2;
          --tracking-caption: 0.64px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.4px;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --tracking-heading: 0.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 6px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Layout */
          --section-gap: 48px;
          --card-padding: 0px;
          --element-gap: 24px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas-white: #ffffff;
          --surface-warm-linen: #eee5da;
          --surface-pale-sage: #d8ddc6;
          --surface-driftwood: #d8d0c5;
          --surface-olive-stone: #afb371;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-canvas-white: #ffffff;
          --color-warm-linen: #eee5da;
          --color-pale-sage: #d8ddc6;
          --color-driftwood: #d8d0c5;
          --color-olive-stone: #afb371;
          --color-weathered-taupe: #9c978a;
          --color-soft-pebble: #aaaaa4;
          --color-garden-green: #259558;
        
          /* Typography */
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-minion-3: 'minion-3', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.2;
          --tracking-caption: 0.64px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.4px;
          --text-heading: 24px;
          --leading-heading: 1.2;
          --tracking-heading: 0.48px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-18: 18px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        }