dani_l_van_der_winden___style_reference:
  info: "> Ấn phẩm chuyên khảo in trên giấy vellum"

  theme: "light"

  info: "Đây là một folio cá nhân mang phong cách editorial, được thể hiện như một ấn phẩm chuyên khảo in trên giấy ấm. Một canvas duy nhất màu xám ấm (#e5e7eb) chứa toàn bộ nội dung, với các thành phần nội dung nổi trên đó mà không có card container hay divider dày. Hệ thống chữ chính là thiết kế: một sans nhân văn (Degular) xử lý UI, body và navigation, trong khi một serif mang chất sách vở (Blanco) đảm nhiệm toàn bộ trọng lượng editorial — headline, introduction và section title. Màu sắc gần như hoàn toàn vắng mặt; sự kiện màu sắc duy nhất là phần fill gần như đen của nút hành động duy nhất trên nền sáng. Layout là một thanh nav cố định bên trái và một cột văn bản có chiều rộng đọc thoải mái, với các bức ảnh chồng lên cột văn bản như những mảnh ghép collage. Mọi thứ khác — border, hairline, separator — đều là hairline và nhẹ nhàng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Vellum | `#e5e7eb` | `--color-vellum` | Canvas trang, hairline divider, link underline, card-edge border — trường màu xám ấm chứa toàn bộ nội dung |"
    info: "| Ink Black | `#111827` | `--color-ink-black` | Văn bản chính, nav link, body copy — màu đọc mặc định |"
    info: "| Graphite | `#374151` | `--color-graphite` | Văn bản body phụ, list item, supporting copy — sáng hơn ink primary một bậc |"
    info: "| Charcoal | `#2a2a28` | `--color-charcoal` | Heading và emphasis editorial — màu tối hơi ấm dành cho serif display |"
    info: "| Stone | `#717272` | `--color-stone` | Văn bản cấp ba, icon fill, meta label |"
    info: "| Pebble | `#909191` | `--color-pebble` | Văn bản body mờ, chú thích ảnh, chữ nhỏ |"
    info: "| Ash | `#c4c6c8` | `--color-ash` | Border ít dùng, structural separator nhẹ |"
    info: "| Slate | `#7b7c7c` | `--color-slate` | Biến thể heading nhẹ, title được giảm nhấn |"
    info: "| Pressed Ink | `#222222` | `--color-pressed-ink` | Fill nút hành động chính — bề mặt tối duy nhất trên canvas, tạo khoảnh khắc trọng lượng thị giác duy nhất |"
    info: "| Midnight | `#1a202c` | `--color-midnight` | Bề mặt tối phụ, fill nút thay thế |"

  tokens___typography:

    degular___sans_cho_ui_và_body___navigation__button__body_copy__metadata__link__tag__ngày_tháng_trong_resumé__đảm_nhiệm_toàn_bộ_văn_bản_chức_năng__các_weight_tăng_dần_từ_400_body_đến_700_để_nhấn_mạnh_trong_heading_và_ngày_tháng_____font_degular:
      - "**Thay thế:** Inter, DM Sans, hoặc General Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Cỡ chữ:** 14, 16, 18, 22, 24, 28, 32, 40"
      - "**Line height:** 1.25, 1.50"
      - "**Letter spacing:** 0.025em ở cỡ body; 0.10em cho label và tag viết hoa"
      - "**Vai trò:** Sans cho UI và body — navigation, button, body copy, metadata, link, tag, ngày tháng trong resumé. Đảm nhiệm toàn bộ văn bản chức năng. Các weight tăng dần từ 400 body đến 700 để nhấn mạnh trong heading và ngày tháng."

    blanco___serif_editorial___hero_headline__tiêu_đề_vai_trò_trong_resumé__section_heading__và_bất_kỳ_văn_bản_nào_cần_mang_cảm_giác__đã_xuất_bản__thay_vì__điều_hướng__chỉ_một_weight_400_duy_nhất__để_cỡ_chữ_và_chính_uy_tín_của_serif_đảm_nhiệm_hệ_thống_phân_cấp_____font_blanco:
      - "**Thay thế:** Source Serif 4, Tiempos Text, hoặc Lyon Display"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 14, 20, 22, 28"
      - "**Line height:** 1.40, 1.50"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Serif editorial — hero headline, tiêu đề vai trò trong resumé, section heading, và bất kỳ văn bản nào cần mang cảm giác 'đã xuất bản' thay vì 'điều hướng'. Chỉ một weight 400 duy nhất, để cỡ chữ và chính uy tín của serif đảm nhiệm hệ thống phân cấp."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | 0.1px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.4 | — | `--text-heading` |"
      info: "| heading-lg | 32px | 1.25 | 0.025px | `--text-heading-lg` |"
      info: "| display | 40px | 1.25 | 0.025px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Thành phần | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 3px |"
      info: "| tags | 3px |"
      info: "| cards | 3px |"
      info: "| images | 3px |"
      info: "| buttons | 3px |"

    layout:

      - "**Page max-width:** 720px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    sidebar_nav:
      vai_trò: "Thanh điều hướng cố định bên trái"

      info: "Cột trái cố định chứa wordmark 'Daniël van der Winden' ở trên cùng và một chồng link văn bản dọc (Journal, Library, Links, Magazine, Newsletter, Work) ở dưới cùng. Link là Degular 500 cỡ 16px màu #111827, không có decoration. Một avatar/mark nhỏ nằm ở góc trên bên phải. Không có background, không có border — nó nổi trên trường vellum."

    email_me_button:
      vai_trò: "Hành động chính và duy nhất trên trang"

      info: "Nút tối có fill, background #222222, chữ trắng. Degular 14px medium weight, padding 8px 16px, border-radius 3px. Khoảnh khắc trọng lượng thị giác duy nhất trên toàn bộ trang — nó hiệu quả vì mọi thứ khác đều giữ yên lặng."

    social_link_row:
      vai_trò: "Link liên hệ phụ bên cạnh hành động chính"

      info: "Link văn bản với icon inline nhỏ (LinkedIn, Bluesky). Degular 14px màu #111827, khoảng cách 8px giữa icon và label, được ngăn cách với nút email bằng một đường divider dọc màu #e5e7eb."

    photo_collage_block:
      vai_trò: "Thành phần hero trực quan chồng lên cột văn bản"

      info: "Hai đến ba bức ảnh đen trắng hoặc giảm bão hòa được sắp xếp trong một collage chồng lên nhau, dịch chuyển sang trái vào khu vực gutter. Không có border, không có shadow — chúng nằm trực tiếp trên nền vellum với border-radius 3px. Ảnh mang phong cách editorial: ảnh workspace, chân dung, và crop chi tiết."

    resumé_entry:
      vai_trò: "Khối kinh nghiệm được neo theo ngày tháng"

      layout_hai_cột: "cột trái hẹp với khoảng ngày tháng bằng Degular 14px #717272 (ví dụ '2023–2028'), cột phải rộng với tiêu đề vai trò bằng Blanco 400 cỡ 22px màu #2a2a28, tiếp theo là 2-3 dòng mô tả body bằng Degular 16px #374151. Các mục được ngăn cách bằng hairline 1px #e5e7eb với nhịp dọc thoải mái (24-32px giữa các mục)."

    section_heading:
      vai_trò: "Tiêu đề section editorial"

      info: "Blanco 400 cỡ 28px màu #2a2a28, căn trái, nằm phía trên khối nội dung của nó. Không có gạch chân, không có decoration. Việc chọn serif báo hiệu 'đây là tiêu đề chương, không phải label.'"

    external_link_with_arrow:
      vai_trò: "Chỉ báo link ra ngoài"

      info: "Văn bản Degular 16px #111827 với một mũi tên superscript nhỏ (↗) ở kích thước 75%, đặt ở cuối label. Không có gạch chân. Được sử dụng cho Magazine và các tham chiếu bên ngoài khác."

    nav_link:
      vai_trò: "Mục điều hướng chỉ có văn bản"

      info: "Degular 500 cỡ 16px màu #111827. Không có gạch chân, không có background, không có hover state ngoài sự chuyển màu nhẹ. Xếp dọc trong sidebar với khoảng cách 12px giữa các mục."

    body_text_block:
      vai_trò: "Đoạn văn xuôi cho bio và mô tả"

      info: "Degular 400 cỡ 18px màu #374151, line-height 1.5, max-width giới hạn trong cột đọc (~600-640px). Margin-bottom thoải mái 27px giữa các đoạn. Serif Blanco không bao giờ được dùng cho body — chỉ dùng cho title."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng #e5e7eb làm bề mặt duy nhất; không bao giờ thêm card trắng hay background thay thế."
      - "Ghép Blanco 400 cho tất cả heading và title; dành Degular cho UI, body và metadata."
      - "Dùng fill tối duy nhất (#222222) cho chính xác một hành động trên mỗi viewport — sự khan hiếm làm nó nổi bật."
      - "Đặt border-radius là 3px cho ảnh, button và tag; 8px dành cho các bề mặt tương tác lớn hơn."
      - "Neo mục resumé với label ngày tháng ở cột trái hẹp, title ở cột phải — không bao giờ inline."
      - "Để ảnh chồng lên cột văn bản; tránh đặt ảnh trong container hộp cứng nhắc."
      - "Đặt body text ở 18px Degular 400 #374151 với line-height 1.5; đây là nhịp đọc của toàn bộ site."

    don_t:
      - "Không thêm màu sắc — độ rực màu 3% là có chủ đích, không phải hạn chế cần sửa."
      - "Không thêm shadow, gradient hay hiệu ứng glow; độ cao đạt được chỉ qua fill contrast."
      - "Không dùng Blanco cho body text hay nav; nó là display face, không phải reading face."
      - "Không tạo card container có background hay border cho khối nội dung — nội dung nằm trực tiếp trên nền vellum."
      - "Không dùng border-radius pill 9999px; hệ thống này dùng 3px là lựa chọn nhẹ nhàng, mang chất sách vở."
      - "Không in đậm body text để nhấn mạnh; thay vào đó dùng cỡ chữ, màu sắc, hoặc chuyển đổi font Blanco/Degular."
      - "Không căn giữa đoạn body; căn trái ở chiều rộng đọc cố định để giữ cột editorial."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Vellum Field | `#e5e7eb` | Toàn bộ trang nằm trên nền xám ấm này; không có bề mặt card riêng biệt nào tồn tại |"
    info: "| 1 | Pressed Ink Surface | `#222222` | Nút email và bất kỳ hành động có fill nào — bề mặt duy nhất phá vỡ trường đơn sắc |"

  elevation:

    info: "Elevation cố tình vắng mặt. Thiết kế dựa vào nội dung chồng lên nhau và hairline rule thay vì shadow hay sự khác biệt trên trục z. Button đạt được trọng lượng qua fill, không phải độ sâu."

  imagery:

    info: "Ảnh mang phong cách editorial và tài liệu: ảnh workspace nội thất đen trắng hoặc giảm bão hòa, ảnh chân dung và crop chi tiết. Ảnh được xử lý như những mảnh ghép collage chồng lên cột văn bản, nằm trực tiếp trên nền vellum chỉ với border-radius 3px nhẹ nhàng — không có border, không có shadow, không có chú thích. Ngôn ngữ thị giác là tạp chí in, không phải SaaS product showcase: crop chặt, ánh sáng tự nhiên, chủ thể là con người. Site không sử dụng illustration, đồ họa trừu tượng hay 3D render. Icon chỉ xuất hiện trong social link và là SVG monoline tối giản. Tỷ lệ ảnh so với văn bản tổng thể thấp — văn bản chiếm ưu thế, ảnh được dùng làm điểm nhấn neo chứ không phải bầu không khí trang trí."

  layout:

    info: "Layout editorial chiều rộng cố định. Một sidebar trái hẹp (~180px) chứa wordmark ở trên cùng và một chồng nav link dọc ở dưới cùng, cố định theo viewport. Cột nội dung chính nằm giữa-lệch phải, giới hạn ở chiều rộng đọc ~600-720px, với khoảng trắng thoải mái ở hai bên. Hero là một photo collage chồng lên nhau ở bên trái, tràn vào intro text ở bên phải — hai khu vực chia sẻ cùng một dải ngang thay vì xếp chồng. Bên dưới, các section chảy dưới dạng văn xuôi một cột với mục resumé dùng split ngày/title hai cột. Không có card grid nhiều cột, không có dải xen kẽ, không có section tối — toàn bộ trang là một trường vellum liên tục từ trên xuống dưới. Navigation chỉ có sidebar; không có top bar, không có sticky header nào ngoài chính sidebar."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #111827"
    - "background: #e5e7eb"
    - "border: #e5e7eb"
    - "accent: không có (hệ thống đơn sắc)"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "Tạo một sidebar nav: cột trái cố định rộng 180px, wordmark 'Daniël van der Winden' bằng Degular 500 16px #111827 ở trên cùng, nav link (Journal, Library, Links, Magazine, Newsletter, Work) bằng Degular 500 16px #111827 xếp dọc ở dưới cùng với khoảng cách 12px. Không có background, không có border."

    - "Tạo một resumé entry: hàng hai cột, cột trái rộng 80px với ngày tháng '2023–2028' bằng Degular 14px #717272, cột phải với tiêu đề vai trò 'Co-Founder of TRANSCRIPT Magazine' bằng Blanco 400 22px #2a2a28 tiếp theo là mô tả bằng Degular 400 18px #374151 line-height 1.5. Ngăn cách với mục tiếp theo bằng hairline 1px #e5e7eb và khoảng cách dọc 32px."

    - "Tạo một hero block: hai bức ảnh đen trắng chồng lên nhau ở 1/3 bên trái, dịch lên và xuống 40px để tạo hiệu ứng collage. 2/3 bên phải chứa headline Blanco 400 40px #2a2a28 tiếp theo là 3 đoạn body text Degular 400 18px #374151 với margin-bottom 27px. Ảnh có border-radius 3px, không có shadow."

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA có fill."

    - "Tạo một section heading: Blanco 400 28px màu #2a2a28, căn trái, không gạch chân, nằm cách khối nội dung 40px phía trên. Đây là tiêu đề chương editorial, không phải label UI."

  similar_brands:

    - "**Are.na** — Cùng layout editorial sidebar trái + cột đọc trên nền trung tính ấm với cặp serif/sans"
    - "**Craig Mod** — Folio cá nhân thể hiện như văn xuôi nhẹ nhàng trên một canvas xám ấm duy nhất với chiều rộng đọc thoải mái và chrome tối giản"
    - "**Robin Rendle** — Thẩm mỹ portfolio văn chương tương tự — đơn sắc, typographic, không có card container, hệ thống phân cấp ưu tiên văn bản"
    - "**Pareto Design** — Cùng canvas xám ấm với sans nhân văn lớp Degular cho UI và serif accent cho heading editorial"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vellum: #e5e7eb;
          --color-ink-black: #111827;
          --color-graphite: #374151;
          --color-charcoal: #2a2a28;
          --color-stone: #717272;
          --color-pebble: #909191;
          --color-ash: #c4c6c8;
          --color-slate: #7b7c7c;
          --color-pressed-ink: #222222;
          --color-midnight: #1a202c;
        
          /* Typography — Font Families */
          --font-degular: 'Degular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-blanco: 'Blanco', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --text-heading: 28px;
          --leading-heading: 1.4;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: 0.025px;
          --text-display: 40px;
          --leading-display: 1.25;
          --tracking-display: 0.025px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 720px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-nav: 3px;
          --radius-tags: 3px;
          --radius-cards: 3px;
          --radius-images: 3px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-vellum-field: #e5e7eb;
          --surface-pressed-ink-surface: #222222;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vellum: #e5e7eb;
          --color-ink-black: #111827;
          --color-graphite: #374151;
          --color-charcoal: #2a2a28;
          --color-stone: #717272;
          --color-pebble: #909191;
          --color-ash: #c4c6c8;
          --color-slate: #7b7c7c;
          --color-pressed-ink: #222222;
          --color-midnight: #1a202c;
        
          /* Typography */
          --font-degular: 'Degular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-blanco: 'Blanco', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --text-heading: 28px;
          --leading-heading: 1.4;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: 0.025px;
          --text-display: 40px;
          --leading-display: 1.25;
          --tracking-display: 0.025px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
        }