clase_bcn___style_reference:
  info: "> editorial gallery on white wall"

  theme: "light"

  info: "Clase bcn là một editorial gallery trên tường trắng: một branding agency có portfolio đọc như catalogue bảo tàng. Giao diện gần như vô hình — text, đường kẻ mảnh (hairline dividers), và ảnh dự án full-bleed làm tất cả công việc. Một sans-serif duy nhất (Suisse Int'l) ở một weight (400) mang mọi element, từ navigation labels đến oversized project titles. Whitespace rộng rãi và có cấu trúc: project cards trải dài toàn bộ viewport với title và subtitle đặt chồng trực tiếp lên ảnh. Tương tác duy nhất là text links với mũi tên chỉ dẫn; không có buttons, không có fills, không có shadows, không có decorative UI chrome. Màu sắc xuất hiện dưới dạng content — các case study dự án riêng lẻ mang bảng màu riêng làm background fills — trong khi chrome giữ nguyên achromatic và yên tĩnh."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface base, text trên dark cards |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, hairline borders, nav labels — điểm neo cấu trúc của mọi element |"
    info: "| Carbon | `#0a0a0a` | `--color-carbon` | Secondary text và các bề mặt tối nơi pure black đọc quá gắt |"
    info: "| Concrete | `#939393` | `--color-concrete` | Navigation labels mờ, secondary link text, inactive nav state |"
    info: "| Ash | `#aaaaaa` | `--color-ash` | Tertiary link borders và annotation text phụ |"
    info: "| Plaster | `#e8e8e8` | `--color-plaster` | Phân chia bề mặt tinh tế, card backgrounds xen kẽ |"
    info: "| Sumi | `#0a0000` | `--color-sumi` | Project card background gần đen — đọc như neutral sâu nhất |"
    info: "| Slate Night | `#262a36` | `--color-slate-night` | Project card background — hơi lạnh tối, content-driven không phải UI |"
    info: "| Terracotta Blush | `#efccbe` | `--color-terracotta-blush` | Project card background — content fill ấm áp, không phải UI accent |"
    info: "| Verdant | `#43d491` | `--color-verdant` | Project card background — content fill sống động, không phải UI accent |"

  tokens___typography:

    suisseintl_regular___suisseintl_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_suisseintl_regular:
      - "**Weights:** 400"
      - "**Sizes:** 24px, 28px, 45px"
      - "**Line height:** 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44"
      - "**Vai trò:** SuisseIntl-Regular — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    suisse_int_l___một_typeface_duy_nhất_ở_một_weight_duy_nhất_mang_toàn_bộ_giao_diện___navigation__body__và_display__việc_từ_chối_dùng_bold_hoặc_italic_weight_buộc_hierarchy_phải_dựa_vào_size__line_height__và_whitespace__các_line_height_biến_thiên_1_11_cho_display_stacks_dày_đặc__1_79_2_44_cho_body_cho_thấy_một_weight_này_được_kéo_dãn_qua_các_mật_độ_rất_khác_nhau_____font_suisse_intl:
      - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk, Helvetica Now"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44"
      - "**Vai trò:** Một typeface duy nhất ở một weight duy nhất mang toàn bộ giao diện — navigation, body, và display. Việc từ chối dùng bold hoặc italic weight buộc hierarchy phải dựa vào size, line-height, và whitespace. Các line-height biến thiên (1.11 cho display stacks dày đặc, 1.79–2.44 cho body) cho thấy một weight này được kéo dãn qua các mật độ rất khác nhau."

    type_scale:

      info: "| Vai trò | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 24px | 1.17 | — | `--text-caption` |"
      info: "| subheading | 28px | 1.21 | — | `--text-subheading` |"
      info: "| heading | 45px | 1.11 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

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

    layout:

      - "**Section gap:** 100px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    top_navigation_bar:
      vai_trò: "Minimal text-only site header"

      info: "Nền trong suốt đặt trực tiếp trên page canvas. Không logo mark, không fill, không border-bottom. Bên trái: năm text labels (Cl, Projects, Studio, Contact, Tips) cách nhau ~20px gaps, 24px Suisse Int'l, #000000 active và #939393 inactive. Bên phải: language selector ('English') cùng treatment. Không sticky behavior, không shadow, không padding ngoài khoảng thở dọc."

    statement_headline:
      vai_trò: "Opening page declaration"

      info: "Một khối body-length text duy nhất đặt ở type size lớn nhất (45px), line-height 1.11, màu #000000, căn trái. Không label riêng, không eyebrow, không CTA bên dưới — câu statement CHÍNH LÀ hero. Chiếm khoảng một phần tư phía trên trang với margin rộng bên dưới trước project card đầu tiên."

    full_bleed_project_card:
      vai_trò: "Portfolio case study entry"

      info: "Mỗi project trải dài toàn bộ viewport width với zero border-radius. Background fill (theo project: #43d491, #0a0000, #efccbe, #262a36, hoặc ảnh) phủ kín card. Overlay text nằm ở góc trên bên trái với 20px padding từ mọi cạnh: project name ở 28px line-height 1.21 #000000, subtitle ở 24px line-height 1.17 #000000, sau đó link 'See the case →'. Không hover state, không shadow, không border — cạnh card được xác định thuần túy bởi nơi card tiếp theo bắt đầu."

    photographic_project_card:
      vai_trò: "Image-led portfolio entry"

      info: "Cùng structural treatment với colored Project Card nhưng background là ảnh full-bleed. Text overlay dùng cùng 20px padding, 28px title, 24px subtitle, và text link. Typography giữ #000000 trên ảnh sáng; text trắng hoặc gần đen trên ảnh tối. Không gradient overlays hay scrims — readability được kỳ vọng từ việc chọn ảnh."

    text_link_with_arrow:
      vai_trò: "Interactive element duy nhất trong hệ thống"

      info: "Plain text label theo sau bởi glyph mũi tên phải (→). 24px Suisse Int'l weight 400, màu #000000. Không underline, không button fill, không border, không padding. Khoảng cách giữa label và arrow sát nhau. Đây là pattern tương tác phổ quát — nó thay thế mọi conventional button trên toàn site."

    footer:
      vai_trò: "Minimal page closer"

      info: "Cùng 20px horizontal padding như project cards. Chứa text links và copyright ở 24px #000000. Không social icons, không newsletter form, không decorative elements. Footer có nhiệm vụ yên tĩnh và vô hình cho đến khi bạn scroll đến đó."

  do_s_and_don_ts:

    do:
      - "Dùng Suisse Int'l (hoặc neo-grotesque substitute như Inter) ở weight 400 cho mọi element — không bold, không italic, không second family"
      - "Để project imagery và project color fills mang toàn bộ sự đa dạng thị giác; giữ mọi UI chrome ở #000000 và #ffffff"
      - "Dùng 20px padding nhất quán cho mọi text-block insets (navigation, card text, footer)"
      - "Phân cách projects bằng 100px vertical breathing room — để mỗi card tồn tại trong sự tĩnh lặng thị giác riêng"
      - "Đánh dấu mọi tương tác là plain text link với mũi tên →, không bao giờ là filled hoặc outlined button"
      - "Scale hierarchy qua font size và line-height — 24px cho body, 28px cho subtitles, 45px cho display"
      - "Giữ border-radius ở 0 trên mọi element — góc sắc, trang là một grid"

    don_t:
      - "Đừng thêm buttons, pills, chips, hoặc bất kỳ filled interactive component nào — hệ thống này không có buttons"
      - "Đừng thêm shadows, gradients, hoặc border effects vào cards hay images — surface depth đến từ color contrast"
      - "Đừng dùng bold hoặc semibold weights — weight 400 là giọng nói duy nhất; hierarchy chỉ dựa trên size"
      - "Đừng dùng #43d491, #efccbe, hoặc #262a36 làm UI accents — chúng chỉ thuộc về project card backgrounds"
      - "Đừng thêm logo mark, wordmark treatment, hoặc branded icon — chữ 'Cl' trong nav là toàn bộ identity mark"
      - "Đừng giới hạn layout trong max-width container — project cards phải là full-bleed"
      - "Đừng thêm hover animations, transitions, hoặc micro-interactions — site đọc như tĩnh, giống catalogue in"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background mặc định và card base cho light projects |"
    info: "| 1 | Plaster | `#e8e8e8` | Off-white tinh tế cho content sections cần tonal contrast |"
    info: "| 2 | Carbon | `#0a0a0a` | Project card fill sâu nhất — white text nằm trên |"

  elevation:

    info: "Hệ thống không có shadows. Depth được truyền tải hoàn toàn qua color contrast giữa các surface fill liền kề (white canvas → photographic card → colored card → dark card) và qua vertical whitespace rộng giữa các section. Border đen 1px là structural device mạnh nhất được dùng, và thậm chí nó cũng hiếm."

  imagery:

    info: "Photography là full-bleed và mang tính kiến trúc — gallery interiors, product shots trên nền trung tính, campaign artwork. Images có raw edges không rounded corners, không shadows, không masks. Treatment mang tính tài liệu, không cách điệu: subjects (không gian bảo tàng, đồ nội thất, phòng hòa nhạc) được trình bày ở aspect ratio tự nhiên, chỉ bị crop bởi viewport. Không có người, không lifestyle scenes, không stock-style compositions. Illustration vắng mặt; graphic element duy nhất là bản phác thảo ghế Kave Home, là hand-drawn line work trên nền trắng — nhất quán với ngôn ngữ editorial-print. Icons vắng mặt; navigation là text-only."

  layout:

    info: "Full-bleed layout không max-width constraint. Trang là một vertical stack các full-viewport-width project cards được phân cách bởi whitespace, có navigation text-only tối giản và một oversized statement headline duy nhất ở phía trước. Top nav là một horizontal row đơn: năm links căn trái, một language label căn phải. Statement headline nằm ở đầu content area, căn trái, chiếm khoảng 15% chiều cao trang. Bên dưới, project cards xếp chồng dọc — mỗi card lấp đầy viewport width, chứa title/subtitle/link ở góc trên bên trái với 20px inset, và chảy trực tiếp vào card tiếp theo không gap hay divider. Không có sidebar, không multi-column grids, không card-of-cards arrangements. Nhịp điệu là: statement → project → project → project → footer, với mỗi project có trọng lượng thị giác ngang nhau."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "muted text: #939393"
    - "project card surface: theo project (không có UI accent cố định)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì phát minh ra màu CTA filled."

    - "**Full-Bleed Project Card (Photographic)** — 100vw width, viewport-tall, không border-radius. Background là ảnh full-bleed. Top-left inset 20px chứa: project name ở 28px line-height 1.21 #000000, subtitle ở 24px line-height 1.17 #000000, sau đó link 'See the case →' ở 24px #000000. Không overlay, không scrim, không border."

    - "**Full-Bleed Project Card (Color Fill)** — 100vw width, ~60vh tall, không border-radius. Background fill là một solid color duy nhất (ví dụ #43d491, #efccbe, #262a36, hoặc #0a0000). Cùng 20px top-left text inset như photographic cards. Text color điều chỉnh: #000000 trên light fills, #ffffff trên dark fills."

    - "**Text Link with Arrow** — 24px Suisse Int'l weight 400, #000000, theo sau bởi glyph mũi tên → cùng size. Không underline, không button background, không border, không padding. Arrow có ~4px space giữa nó và label text. Đây là interaction component duy nhất của hệ thống."

    - "**Top Navigation** — Hàng trong suốt trên #ffffff, không border-bottom, không background fill. Nhóm trái: 'Cl · Projects · Studio · Contact · Tips' ở 24px #000000 cách nhau ~20px gaps, với 'Cl' là active/brand label. Nhóm phải: 'English' ở 24px #939393. Không logo, không icons, không sticky behavior."

  similar_brands:

    - "**Pentagram** — Cùng ngôn ngữ editorial-portfolio — ảnh dự án full-bleed, navigation text-only tối giản, không buttons hay decorative UI chrome"
    - "**Manual (manualcreative.com)** — Sans-serif một weight ở display sizes lớn, project cards là full-viewport images với text overlay, zero interaction chrome"
    - "**Hasselblad Foundation** — Sự kiềm chế của catalogue bảo tàng — whitespace rộng, một typeface, photography là content chính, text links với mũi tên là affordance duy nhất"
    - "**Studio Dumbar** — Kỷ luật portfolio của Dutch-design agency: UI đơn sắc, project case studies là full-bleed images, nav tối giản, không decorative elements"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-carbon: #0a0a0a;
          --color-concrete: #939393;
          --color-ash: #aaaaaa;
          --color-plaster: #e8e8e8;
          --color-sumi: #0a0000;
          --color-slate-night: #262a36;
          --color-terracotta-blush: #efccbe;
          --color-verdant: #43d491;
        
          /* Typography — Font Families */
          --font-suisseintl-regular: 'SuisseIntl-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 24px;
          --leading-caption: 1.17;
          --text-subheading: 28px;
          --leading-subheading: 1.21;
          --text-heading: 45px;
          --leading-heading: 1.11;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-100: 100px;
        
          /* Layout */
          --section-gap: 100px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-plaster: #e8e8e8;
          --surface-carbon: #0a0a0a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-carbon: #0a0a0a;
          --color-concrete: #939393;
          --color-ash: #aaaaaa;
          --color-plaster: #e8e8e8;
          --color-sumi: #0a0000;
          --color-slate-night: #262a36;
          --color-terracotta-blush: #efccbe;
          --color-verdant: #43d491;
        
          /* Typography */
          --font-suisseintl-regular: 'SuisseIntl-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 24px;
          --leading-caption: 1.17;
          --text-subheading: 28px;
          --leading-subheading: 1.21;
          --text-heading: 45px;
          --leading-heading: 1.11;
        
          /* Spacing */
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-100: 100px;
        }