dennis_snellenberg___style_reference:
  info: "> Canvas editorial tối với headline khổng lồ, trầm lặng"

  theme: "dark"

  info: "Ngôn ngữ portfolio editorial tối được xây dựng trên nền gần như đen, nơi màu sắc duy nhất có giá trị là một tông violet rực rỡ duy nhất. Toàn bộ giao diện thu gọn về hai tông — `#1c1d20` cho thế giới, `#ffffff` cho mọi chữ viết — với một custom sans-serif ở weight medium cố định làm tất cả công việc kể chuyện. Typography là nhân vật chính: một display name 216px tràn ra ngoài mép trang, trong khi body copy 12–15px nổi bên cạnh ảnh full-bleed. Violet xuất hiện như dấu câu hiếm hoi trên card và link fills, không bao giờ là trang trí. Các component phẳng, không viền, và lớn — rounded pills thay thế button, và một vòng trắng inset 1px duy nhất là toàn bộ ngôn ngữ shadow trong hệ thống."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian Canvas | `#1c1d20` | `--color-obsidian-canvas` | Nền trang, bề mặt card, text trên nền sáng, viền mảnh — màu gần đen chiếm 95% giao diện |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Text chính, bề mặt card đảo ngược, link text trên violet, viền inset nhẹ — tông sáng duy nhất trong hệ thống |"
    info: "| Fog | `#999d9e` | `--color-fog` | Text phụ mờ, chú thích, metadata — nằm giữa canvas và trắng trong thang neutral |"
    info: "| Graphite | `#494a4d` | `--color-graphite` | Lớp bề mặt nâng cao hơn canvas, nền card mềm, hiệu ứng hover của link — thêm nửa bậc chiều sâu mà không phá vỡ cảm giác đơn sắc |"
    info: "| Electric Iris | `#455ce9` | `--color-electric-iris` | Card accent fill, nền link/button, highlight trạng thái active — giọng chromatic duy nhất; độ rực rỡ của nó được khuếch đại bởi 99% môi trường xung quanh achromatic |"
    info: "| Deep Iris | `#334bd3` | `--color-deep-iris` | Bề mặt accent thứ cấp, biến thể card violet đậm hơn — dùng khi primary iris cần một companion bậc thang cho card xếp lớp hoặc stack có cảm giác gradient |"

  tokens___typography:

    dennis_sans___hệ_thống_một_font_duy_nhất__weight_450_không_chuẩn___không_light__không_bold__nằm_ở_khoảng_medium_để_tạo_cảm_giác_editorial_thay_vì_corporate__letter_spacing_đồng_nhất_0_0500em_trên_mọi_kích_thước_tạo_nhịp_điệu_cơ_học_đặc_trưng__display_sizes_60_216px_dùng_line_height_chặt_1_00_1_07_để_headline_chạm_hoặc_gần_chạm_nhau__body_sizes_14_17px_mở_rộng_lên_1_40_1_66_để_dễ_đọc__hero_name_216px_là_signature_element___nó_lấn_át_mọi_thứ_khác_và_tràn_ra_ngoài_canvas_như_một_tuyên_bố_____font_dennis_sans:
      - "**Thay thế:** Inter (weight 500) hoặc Untitled Sans"
      - "**Weights:** 450"
      - "**Sizes:** 10, 12, 14, 15, 17, 33, 60, 76, 88, 216px"
      - "**Line height:** 1.00–1.66 (display 1.00–1.07, body 1.40–1.66)"
      - "**Letter spacing:** 0.0500em trên mọi kích thước"
      - "**Vai trò:** Hệ thống một font duy nhất. Weight 450 không chuẩn — không light, không bold, nằm ở khoảng medium để tạo cảm giác editorial thay vì corporate. Letter-spacing đồng nhất 0.0500em trên mọi kích thước tạo nhịp điệu cơ học đặc trưng. Display sizes (60–216px) dùng line-height chặt (1.00–1.07) để headline chạm hoặc gần chạm nhau; body sizes (14–17px) mở rộng lên 1.40–1.66 để dễ đọc. Hero name 216px là signature element — nó lấn át mọi thứ khác và tràn ra ngoài canvas như một tuyên bố."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.45 | 0.5px | `--text-caption` |"
      info: "| body-lg | 15px | 1.66 | 0.75px | `--text-body-lg` |"
      info: "| heading-sm | 33px | 1.2 | 1.65px | `--text-heading-sm` |"
      info: "| heading | 60px | 1.07 | 3px | `--text-heading` |"
      info: "| heading-lg | 88px | 1.06 | 4.4px | `--text-heading-lg` |"
      info: "| display | 216px | 1 | 10.8px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 63 | 63px | `--spacing-63` |"
      info: "| 115 | 115px | `--spacing-115` |"
      info: "| 189 | 189px | `--spacing-189` |"
      info: "| 230 | 230px | `--spacing-230` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 10px |"
      info: "| links | 36.72px |"
      info: "| badges | 36.72px |"
      info: "| buttons | 36.72px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

      - "**Section gap:** 120-160px"
      - "**Card padding:** 18-22px"
      - "**Element gap:** 12px"

  components:

    full_bleed_hero:
      vai_trò: "Viewport mở đầu với ảnh và tên khổng lồ"

      info: "Ảnh edge-to-edge (không radius, không border) trên nền Obsidian Canvas. Tên được đặt bằng Dennis Sans 216px / 1.00 line-height / letter-spacing 10.8px, màu #ffffff, căn góc dưới-trái và cố tình tràn ra ngoài mép canvas. Không có button trong hero — navigation chỉ là top-bar."

    top_navigation_bar:
      vai_trò: "Navigation tối giản của site"

      info: "Absolute-positioned phía trên hero. Logo '© Code by Dennis' bằng 12px #ffffff ở góc trên-trái (cách mép 12px). Nav items (Work, About, Contact) bằng 12px #ffffff ở góc trên-phải, gap 32px giữa các item. Không background, không border, không underline — text nổi trực tiếp trên ảnh."

    location_pill_badge:
      vai_trò: "Chỉ báo metadata địa lý"

      info: "Pill radius 36.72px, padding 18px dọc / 22px ngang, background #1c1d20 (hoặc transparent trên ảnh). Icon globe trắng bên phải, text 'Located in the Netherlands' bằng 12px #ffffff xếp thành ba dòng với line-height 1.20 bên trái. Cảm giác như một floating tag, không phải button."

    pill_link___button:
      vai_trò: "Interactive element chính trong toàn hệ thống"

      info: "Border-radius 36.72px (hình pill hoàn chỉnh). Padding 12px 22px. Background #1c1d20 hoặc #455ce9 tùy biến thể. Text 14px Dennis Sans 450 #ffffff hoặc #1c1d20. Inset border tùy chọn: rgba(255,255,255,0.2) 0 0 0 1px inset để tạo định nghĩa nhẹ. Không drop shadow, không hover lift — thay đổi trạng thái chỉ qua swap background."

    violet_accent_card:
      vai_trò: "Card nổi bật hoặc danh mục"

      info: "Border-radius 10px, background #455ce9, padding 22px. Text trắng ở 17–33px. Dùng để phá vỡ grid đơn sắc bằng một khối chromatic duy nhất — không bao giờ quá 1–2 card mỗi trang."

    graphite_card:
      vai_trò: "Card nâng cao tiêu chuẩn trên nền tối"

      info: "Border-radius 10px, background #494a4d, padding 18–22px. Text trắng ở 14–17px. Nằm nửa bậc trên canvas để tạo layering nhẹ nhàng mà không cần shadow."

    arrow_indicator:
      vai_trò: "Tín hiệu định hướng hoặc scroll"

      info: "SVG arrow trắng mảnh 1px (↘) không có container. Thường đi kèm với body text bên cạnh như 'Freelance Designer & Developer' bằng 15px #ffffff. Arrow mang ý nghĩa tương tác; text hoàn toàn mang tính mô tả."

    section_headline_block:
      vai_trò: "Phần mở đầu typography lớn cho section"

      info: "Dennis Sans 60–88px / line-height 1.06–1.07 / letter-spacing 3–4.4px, màu #ffffff. Căn trái, nằm trực tiếp trên Obsidian Canvas không có eyebrow label, không underline, không container — chỉ type định nghĩa section."

    inset_border_link:
      vai_trò: "Text link với focus ring nhẹ"

      info: "Text container hình pill (36.72px) với inset border trắng 1px ở độ mờ 20%. Text 14px #ffffff. Inset border là toàn bộ hệ thống depth — không có drop shadow nào tồn tại trong ngôn ngữ thiết kế này."

    metadata_caption:
      vai_trò: "Text phụ trợ, label, chú thích nhỏ"

      info: "10–12px Dennis Sans 450 màu #999d9e. Letter-spacing 0.5–0.6px. Dùng cho ngày tháng dự án, danh mục, thông tin kiểu footnote. Không bao giờ có màu — luôn nằm trong khoảng xám neutral."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng Dennis Sans ở weight 450 — không bao giờ bold, không bao giờ light; single weight là bản chất của hệ thống"
      - "Đặt letter-spacing 0.0500em trên mọi text element kể cả body copy; uniform tracking là signature"
      - "Dùng #1c1d20 làm canvas cho mọi trang; các bề mặt khác (#494a4d, #455ce9) là ngoại lệ, không phải quy tắc"
      - "Đặt tất cả interactive elements (links, buttons, badges) ở border-radius 36.72px để có hình pill hoàn chỉnh"
      - "Dùng inset border trắng 1px ở độ mờ 20% làm kỹ thuật elevation duy nhất — không drop shadow"
      - "Để display headlines (88–216px) tràn ra ngoài mép canvas để tạo tension editorial"
      - "Dành #455ce9 cho một accent element mỗi viewport — violet là dấu câu, không phải trang trí"

    don_t:
      - "Đừng thêm weight khác (400, 600, 700) — hệ thống single-weight có chủ đích và dễ vỡ"
      - "Đừng thêm drop shadow hoặc multi-layer elevation; inset border là toàn bộ từ vựng depth"
      - "Đừng dùng #455ce9 trên nhiều hơn một element mỗi section — lạm dụng làm giảm tác động của accent"
      - "Đừng dùng góc nhọn (0–4px radius) trên interactive elements; hình pill là signature"
      - "Đừng thêm màu chromatic mới — palette là monochrome cộng một violet, chấm hết"
      - "Đừng căn giữa body copy hoặc text dài; căn trái mọi thứ để giữ gravity editorial"
      - "Đừng dùng line-height trên 1.07 cho display sizes (60px+); leading chặt là thứ làm type trông nguyên khối"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Obsidian Canvas | `#1c1d20` | Nền trang — ground mặc định cho mọi màn hình |"
    info: "| 2 | Graphite | `#494a4d` | Bề mặt nâng cao cho card, badge, và panel thứ cấp |"
    info: "| 3 | Deep Iris | `#334bd3` | Bề mặt accent cho card nổi bật hoặc danh mục |"
    info: "| 4 | Electric Iris | `#455ce9` | Bề mặt accent cao nhất cho CTA card và interactive link fills |"

  elevation:

    - "**Inset-Border Link:** `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset`"

  imagery:

    info: "Ảnh editorial full-bleed chiếm ưu thế trong ngôn ngữ thị giác. Ảnh là chân dung độ phân giải cao hoặc ảnh môi trường với ánh sáng tự nhiên và color grading tối thiểu — chúng nằm trực tiếp trên Obsidian canvas không có frame, mask, hoặc góc bo tròn. Photography là nguồn màu duy nhất ngoài violet accent; mọi thứ khác đều đơn sắc. Không illustration, không 3D, không đồ họa trừu tượng. Chủ thể của ảnh là hero — không phải sản phẩm, không phải UI mockup, mà là một người hoặc địa điểm được thể hiện ở tỷ lệ con người."

  layout:

    info: "Trang full-bleed không có max-width container — canvas kéo dài edge-to-edge. Hero là một viewport duy nhất: ảnh full-bleed với navigation nổi ở góc trên, location badge neo ở giữa-trái, và tên 216px tràn ra mép dưới-trái. Các section nội dung bên dưới theo nhịp single-column căn trái với vertical gap rộng rãi (120–160px giữa các section). Card và content block dùng radius 10px và nằm trên nền tối không có ranh giới nhìn thấy — chúng được định nghĩa chỉ bằng bước màu bề mặt. Grid là implicit, không được vẽ: element neo vào mép trái với gutter 12px, tạo luồng editorial left-gravity mạnh mẽ."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "canvas: #1c1d20"
    - "text: #ffffff"
    - "muted text: #999d9e"
    - "elevated surface: #494a4d"
    - "accent card: #455ce9"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompts:"

    - "Hero section: Nền Obsidian Canvas (#1c1d20), ảnh full-bleed phủ lên. Góc trên-trái: '© Code by Dennis' bằng 12px Dennis Sans 450 #ffffff, cách mép 12px. Nav góc trên-phải: 'Work  About  Contact' bằng 12px #ffffff, gap 32px. Góc dưới-trái: display name bằng 88–216px Dennis Sans 450, #ffffff, letter-spacing 10.8px, line-height 1.00, cố tình tràn ra mép canvas bên trái."

    - "Location pill badge: Radius 36.72px, padding 18px 22px, background #1c1d20, icon globe trắng (stroke 1px) bên phải, text 'Located in the Netherlands' xếp 3 dòng bằng 12px #ffffff line-height 1.20 bên trái. Nổi trên ảnh hero không có border."

    - "Violet accent card: Radius 10px, background #455ce9, padding 22px mọi phía, content text bằng 17px Dennis Sans 450 #ffffff, line-height 1.40. Tối đa một card mỗi viewport."

    - "Inset-border link: Pill radius 36.72px, background #1c1d20, padding 12px 22px, inset border 1px rgba(255,255,255,0.2), text 14px Dennis Sans 450 #ffffff với letter-spacing 0.7px. Inset border là chỉ báo depth duy nhất."

    - "Section headline: Dennis Sans 60px, weight 450, #ffffff, line-height 1.07, letter-spacing 3px, căn trái trực tiếp trên Obsidian Canvas không có eyebrow, không underline, không container. Vertical gap 120–160px phía trên."

  similar_brands:

    - "**Cody Lindquist** — Cùng hero ảnh tối full-bleed, display name single-weight khổng lồ tràn ra canvas, canvas đơn sắc với một chromatic accent"
    - "**Rauno Freiberg** — Cùng ngữ pháp portfolio editorial — canvas tối, tên cỡ lớn làm hero element, nav tối giản, custom sans-serif single-weight"
    - "**Tobias van Schneider** — Cùng triết lý kiềm chế: nền gần đen, ảnh full-bleed, type lớn tự tin, accent violet/xanh dương dùng như dấu câu hiếm hoi"
    - "**Basement Studio** — Portfolio dark-mode với ảnh full-bleed, interactive element hình pill, và một accent color duy nhất trên nền đơn sắc"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-canvas: #1c1d20;
          --color-bone-white: #ffffff;
          --color-fog: #999d9e;
          --color-graphite: #494a4d;
          --color-electric-iris: #455ce9;
          --color-deep-iris: #334bd3;
        
          /* Typography — Font Families */
          --font-dennis-sans: 'Dennis Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.45;
          --tracking-caption: 0.5px;
          --text-body-lg: 15px;
          --leading-body-lg: 1.66;
          --tracking-body-lg: 0.75px;
          --text-heading-sm: 33px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.65px;
          --text-heading: 60px;
          --leading-heading: 1.07;
          --tracking-heading: 3px;
          --text-heading-lg: 88px;
          --leading-heading-lg: 1.06;
          --tracking-heading-lg: 4.4px;
          --text-display: 216px;
          --leading-display: 1;
          --tracking-display: 10.8px;
        
          /* Typography — Weights */
          --font-weight-w450: 450;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-22: 22px;
          --spacing-43: 43px;
          --spacing-54: 54px;
          --spacing-58: 58px;
          --spacing-63: 63px;
          --spacing-115: 115px;
          --spacing-189: 189px;
          --spacing-230: 230px;
        
          /* Layout */
          --section-gap: 120-160px;
          --card-padding: 18-22px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-3xl: 36.72px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-links: 36.72px;
          --radius-badges: 36.72px;
          --radius-buttons: 36.72px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-obsidian-canvas: #1c1d20;
          --surface-graphite: #494a4d;
          --surface-deep-iris: #334bd3;
          --surface-electric-iris: #455ce9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-canvas: #1c1d20;
          --color-bone-white: #ffffff;
          --color-fog: #999d9e;
          --color-graphite: #494a4d;
          --color-electric-iris: #455ce9;
          --color-deep-iris: #334bd3;
        
          /* Typography */
          --font-dennis-sans: 'Dennis Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.45;
          --tracking-caption: 0.5px;
          --text-body-lg: 15px;
          --leading-body-lg: 1.66;
          --tracking-body-lg: 0.75px;
          --text-heading-sm: 33px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.65px;
          --text-heading: 60px;
          --leading-heading: 1.07;
          --tracking-heading: 3px;
          --text-heading-lg: 88px;
          --leading-heading-lg: 1.06;
          --tracking-heading-lg: 4.4px;
          --text-display: 216px;
          --leading-display: 1;
          --tracking-display: 10.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-22: 22px;
          --spacing-43: 43px;
          --spacing-54: 54px;
          --spacing-58: 58px;
          --spacing-63: 63px;
          --spacing-115: 115px;
          --spacing-189: 189px;
          --spacing-230: 230px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-3xl: 36.72px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
        }