raw_materials___style_reference:
  info: "> brutalist editorial trên nền kem ấm"

  theme: "light"

  info: "Raw Materials vận hành như một hệ thống typographic maximalist: một canvas kem ấm mang display type thường xuyên vượt quá 200px, với mọi phần tử bề mặt chính đều có màu sắc riêng biệt. Hệ thống từ bỏ một màu thương hiệu duy nhất để chọn bảy màu đánh dấu section (cam, tím, mực, xanh coban, đỏ thẫm, vàng, xanh lá) — những màu này gắn nhãn cho cả navigation lẫn content blocks, tạo nhịp điệu giống tạp chí zine, nơi màu sắc cho bạn biết mình đang ở chapter nào. Các bề mặt phẳng và bo tròn 16px — không shadow, không gradient, không elevation. Typography đảm nhận toàn bộ công việc phân cấp, nhảy từ caption 12px lên display headline 259px với bốn custom typefaces, tất cả đều dùng stylistic alternate \"ss02\"."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Ember Orange | `#ff3d00` | `--color-ember-orange` | Accent màu cam hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Pulse Violet | `#5900cc` | `--color-pulse-violet` | Accent màu tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Cobalt Blue | `#2835f8` | `--color-cobalt-blue` | Accent màu xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Crimson | `#ff003d` | `--color-crimson` | Accent màu đỏ hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Caution Yellow | `#ffff00` | `--color-caution-yellow` | Accent màu vàng hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Voltage Green | `#05ff00` | `--color-voltage-green` | Accent màu xanh lá hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Electric Blue | `#1b73e6` | `--color-electric-blue` | Heading và body text trên nền kem, xanh lam bão hòa vừa dùng trong nội dung |"
    info: "| Sky Cyan | `#00c2ff` | `--color-sky-cyan` | Heading và accent text, điểm đối lập mát mẻ với kem ấm |"
    info: "| Forest | `#008163` | `--color-forest` | Card fills, xanh lá vừa phải cho content blocks cấp body |"
    info: "| Lime Pulse | `linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(62, 234, 90))` | `--color-lime-pulse` | Heading và body, xanh lá sáng hơn Voltage; Green supporting accent cho chi tiết trang trí và điểm nhấn tần suất thấp |"
    info: "| Tangerine | `#ff5c00` | `--color-tangerine` | Card fills, biến thể cam ấm cho content blocks |"
    info: "| Signal Red | `#ee2526` | `--color-signal-red` | Accent màu đỏ hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |"
    info: "| Ink | `#0e0e0e` | `--color-ink` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh |"
    info: "| Bone Cream | `#f4e9e1` | `--color-bone-cream` | Canvas trang chính, nav text trên color blocks, card surface |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Nav card đang active, elevated card surface, input fields |"
    info: "| Charcoal | `#242320` | `--color-charcoal` | Dark surface fill, image overlays, secondary text trên nền sáng |"
    info: "| Sage | `#cee4cd` | `--color-sage` | Tinted section background, lớp phủ xanh lá ấm |"
    info: "| Blush | `#e4d0cd` | `--color-blush` | Tinted section background, lớp phủ hồng ấm |"
    info: "| Sand | `#e7e4d0` | `--color-sand` | Tinted section background, lớp phủ vàng ấm, card fill |"
    info: "| Sky Tint | `#cddae4` | `--color-sky-tint` | Tinted section background, lớp phủ xanh lam mát, image-related surfaces |"
    info: "| Celadon | `#ddded3` | `--color-celadon` | Tinted section background, lớp phủ xanh lá nhạt |"
    info: "| Olive Slate | `#444639` | `--color-olive-slate` | Dark olive section background, secondary text |"
    info: "| Forest Slate | `#374936` | `--color-forest-slate` | Dark green section background, heading text trên nền sáng |"
    info: "| Cocoa Slate | `#4a3937` | `--color-cocoa-slate` | Dark warm section background, heading text trên nền sáng |"
    info: "| Plum Slate | `#493648` | `--color-plum-slate` | Dark purple section background, heading text trên nền sáng |"

  tokens___typography:

    stabilgrotesk___workhorse___mọi_nav_label__body_text__button__badge__card_label_và_sub_heading_lên_đến_46px__font_duy_nhất_chạm_vào_interactive_ui____font_stabilgrotesk:
      - "**Thay thế:** Inter, Söhne, General Sans"
      - "**Weights:** 100, 400, 500"
      - "**Cỡ chữ:** 12, 13, 14, 16, 17, 18, 19, 20, 22, 23, 24, 28, 29, 32, 40, 46"
      - "**Line height:** 1.20–1.38"
      - "**Letter spacing:** -0.05em ở 12px, -0.02em ở 18-24px, -0.01em ở 32-46px"
      - "**OpenType features:** `\"ss02\"`"
      - "**Vai trò:** Workhorse — mọi nav label, body text, button, badge, card label và sub-heading lên đến 46px. Font duy nhất chạm vào interactive UI"

    optimistic_text___display_headline_cỡ_lớn_ở_80_193px__đôi_khi_body_pull_quote_ở_23px____font_optimistic_text:
      - "**Thay thế:** Söhne Breit, GT Walsheim, Inter Display"
      - "**Weights:** 100, 400, 700"
      - "**Cỡ chữ:** 18, 23, 80, 95, 193"
      - "**Line height:** 1.00–1.38"
      - "**Letter spacing:** -0.04em ở 80-95px, -0.03em ở 23px, +0.112em khi viết hoa"
      - "**OpenType features:** `\"ss02\"`"
      - "**Vai trò:** Display headline cỡ lớn ở 80-193px, đôi khi body pull-quote ở 23px"

    klarheitkurrent___giọng_display_lớn_nhất___hero_type_200_259px__cũng_là_editorial_heading_cỡ_trung_ở_79_107px____font_klarheitkurrent:
      - "**Thay thế:** Söhne Schmal, ABC Diatype Mono, GT America Mono"
      - "**Weights:** 400, 500"
      - "**Cỡ chữ:** 20, 40, 79, 107, 200, 259"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** -0.04em ở 107-200px, -0.02em ở 79px"
      - "**OpenType features:** `\"ss02\"`"
      - "**Vai trò:** Giọng display lớn nhất — hero type 200-259px, cũng là editorial heading cỡ trung ở 79-107px"

    htq_waldenburg_fettschmal___narrow_bold_display_cho_compressed_impact_headlines__font_duy_nhất_dùng__case__feature____font_htq_waldenburg_fettschmal:
      - "**Thay thế:** Druk Condensed, Maison Neue Extended Bold"
      - "**Weights:** 500, 700"
      - "**Cỡ chữ:** 95, 193"
      - "**Line height:** 1.00–1.06"
      - "**Letter spacing:** -0.021em ở 95px, -0.002em ở 193px"
      - "**OpenType features:** `\"case\", \"ss02\"`"
      - "**Vai trò:** Narrow bold display cho compressed-impact headlines, font duy nhất dùng \"case\" feature"

    rightgrotesk___bold_geometric_display_cho_poster_scale_headline_199px____font_rightgrotesk:
      - "**Thay thế:** Inter Black, GT America Black, Söhne Breit Halbfett"
      - "**Weights:** 700"
      - "**Cỡ chữ:** 98, 199"
      - "**Line height:** 1.00–1.14"
      - "**Letter spacing:** -0.02em ở 199px, -0.01em ở 98px"
      - "**OpenType features:** `\"ss02\"`"
      - "**Vai trò:** Bold geometric display cho poster-scale headline 199px"

    moderat___wide_tracked_display___tracking__0_084em_là_signature__dùng_cho_all_caps_subhead_labels____font_moderat:
      - "**Thay thế:** Söhne Breit, GT America Expanded, Neue Haas Grotesk Display"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 24, 120"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** +0.084em ở 120px all-caps, -0.01em ở 24px"
      - "**OpenType features:** `\"ss02\"`"
      - "**Vai trò:** Wide-tracked display — tracking +0.084em là signature, dùng cho all-caps subhead labels"

    courier_new___monospaced_system_fallback_cho_data_tables__tiny_index_numbers____font_courier_new:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Cỡ chữ:** 14"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.07em ở 14px"
      - "**OpenType features:** `\"ss02\"`"
      - "**Vai trò:** Monospaced system fallback cho data tables, tiny index numbers"

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|---------|--------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.38 | -0.6px | `--text-caption` |"
      info: "| body-sm | 14px | 1.38 | -0.7px | `--text-body-sm` |"
      info: "| body | 16px | 1.38 | -0.32px | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.17 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 46px | 1.14 | -0.46px | `--text-heading-lg` |"
      info: "| display | 100px | 1.03 | -1px | `--text-display` |"
      info: "| display-lg | 200px | 1 | -2px | `--text-display-lg` |"
      info: "| display-xl | 259px | 1 | -10.36px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 232 | 232px | `--spacing-232` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 16px |"
      info: "| pills | 99px |"
      info: "| badges | 24px |"
      info: "| images | 16px |"
      info: "| buttons | 16px |"
      info: "| nav-blocks | 16px |"
      info: "| display-shapes | 187px |"

    layout:

      - "**Section gap:** 48-80px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 8-16px"

  components:

    numbered_section_nav_card:
      vai_trò: "Primary navigation — mỗi card gắn nhãn một page section với số index và tiêu đề"

      info: "Card solid-fill màu sắc rực rỡ, radius 16px, full width của sidebar (~150px). Bố cục hai dòng: số index nhỏ '00'–'07' màu Bone Cream (#f4e9e1) ở cỡ 12-13px StabilGrotesk 400, sau đó là section label màu Bone Cream ở cỡ 16-18px StabilGrotesk 400. Padding dọc 12-16px, ngang 16px. Một card cho mỗi màu section: Ember Orange, Pulse Violet, Ink, Cobalt Blue, Crimson, Caution Yellow, Voltage Green."

    active_section_nav_card:
      vai_trò: "Chỉ ra section hiện đang trong viewport"

      info: "Cùng kích thước radius 16px như Numbered Section Nav Card, nhưng fill Paper White (#ffffff) với text Ink (#0e0e0e). Sự đảo ngược màu sắc này mang ý nghĩa 'bạn đang ở đây' mà không cần gạch dưới hay chấm chỉ dẫn."

    display_headline:
      vai_trò: "Section hero type — yếu tố thị giác chủ đạo trên mọi page section"

      info: "100-259px dùng KlarheitKurrent 400-500 hoặc RightGrotesk 700. Ink (#0e0e0e) trên nền kem, hoặc Bone Cream trên color block. Line-height cố định 1.00-1.03 — type chạm vào chính nó. Letter-spacing -0.02em đến -0.04em ở cỡ display. Không có ràng buộc max-width; type tràn ra mép container hoặc xuống dòng 2-3 dòng."

    page_header:
      vai_trò: "Thanh trên cùng cố định — brand identity và tagline"

      info: "Full-width, nằm trên canvas kem với padding ~24px. Bên trái: 'Raw Materials' ở cỡ 17-18px StabilGrotesk 400 màu Ink. Bên phải: 'An Unusual Design Company' cùng cỡ và weight, màu Ink. Không có logo mark — wordmark CHÍNH LÀ logo. Không border, không background fill — type nằm trực tiếp trên nền kem."

    scroll_progress_bar:
      vai_trò: "Thanh chỉ báo tiến độ đọc ở cuối viewport"

      info: "Thanh Ember Orange (#ff3d00) full-width, cao 4-6px, cố định ở cuối viewport. Điền từ trái sang phải khi người dùng cuộn. Cũng bao gồm một bộ đếm section nhỏ '01/01' màu Ink ở cỡ 12px StabilGrotesk ở mép phải."

    color_block_content_card:
      vai_trò: "Content containers trong các section Work, Talent và case-study"

      info: "Fill bão hòa toàn phần bằng một trong các accent colors hoặc dark slates, radius 16px, padding 24px. Nội dung bên trong là type Bone Cream hoặc Paper White ở cỡ 16-18px StabilGrotesk 400. Không shadow, không border. Thường được dùng làm phần tử lưới 2 cột hoặc 3 cột."

    tinted_section_background:
      vai_trò: "Nền section full-bleed xen kẽ giữa các content blocks"

      info: "Dải màu full viewport-width bằng một trong năm lớp phủ ấm: Sage (#cee4cd), Blush (#e4d0cd), Sand (#e7e4d0), Sky (#cddae4) hoặc Celadon (#ddded3). Không border giữa các section — bản thân sự chuyển màu là dấu phân cách. Padding dọc 48-80px. Type bên trong là Ink."

    pill_tag:
      vai_trò: "Category labels, skill tags, metadata"

      info: "Radius 99.36px (full pill), padding dọc 6-8px, ngang 12-16px. Fill bằng màu section hoặc Ink, text màu Bone Cream hoặc Paper White ở cỡ 12-13px StabilGrotesk 400."

    rounded_badge:
      vai_trò: "Index numbers, status indicators, small annotations"

      info: "Radius 24px (hơi nhiều hơn fully rounded ở cỡ nhỏ), padding 4-8px. Fill bằng màu accent của section. Text ở cỡ 12px StabilGrotesk 400 màu Bone Cream hoặc Paper White."

    image_frame:
      vai_trò: "Container cho photography trong các section Work và Talent"

      info: "Radius 16px, không border, không shadow. Ảnh lấp đầy khung hình edge-to-edge. Nằm trên canvas kem hoặc bên trong Color Block Content Card."

    ghost_button:
      vai_trò: "Secondary action — 'Read more', 'View project', chuyển section"

      info: "Fill trong suốt, border Ink (#0e0e0e) 1.5-2px, radius 16px, padding 12px 20px. Text ở cỡ 16px StabilGrotesk 400 màu Ink. Không fill khi hover — thay vào đó border dày lên 3px. Đây là mặc định của hệ thống; filled colored buttons chỉ xuất hiện trong nav."

    body_text_block:
      vai_trò: "Paragraph content, descriptions, bios"

      info: "StabilGrotesk 400, 16-18px, line-height 1.38, Ink (#0e0e0e) trên nền kem, hoặc Bone Cream trên bề mặt tối/có màu. Chiều rộng đọc tối đa ~640px dù container rộng hơn — text không kéo dài full-bleed."

    section_index_header:
      vai_trò: "Marker nhỏ phía trên mỗi section — '01', '02', v.v."

      info: "12-14px StabilGrotesk 400 màu Ink hoặc Bone Cream, letter-spacing -0.05em. Nằm phía trên display headline, căn trái, với khoảng cách 8px đến headline."

    link_inline:
      vai_trò: "Inline text links trong body copy"

      info: "StabilGrotesk 400 ở cỡ body, Ink với gạch dưới 1px Ink. Khi hover: màu text chuyển sang màu accent của section hiện tại. Không chỉ dùng màu sắc để phân biệt — luôn có gạch dưới."

  do_s_and_don_ts:

    do:
      - "Dùng StabilGrotesk cho mọi interactive element và bất kỳ type nào dưới 80px — đây là font duy nhất chạm vào UI controls"
      - "Đặt tất cả type với feature-settings: 'ss02' — stylistic alternate này được áp dụng cho mọi font trên site và là một phần của visual identity"
      - "Khóa display headlines với line-height 1.00-1.03 để type chạm vào chính nó theo chiều dọc"
      - "Dùng radius 16px cho tất cả cards, buttons, images và nav blocks — không bao giờ pha trộn góc 8px hoặc 4px"
      - "Gán mỗi page section một trong bảy màu nav và mang màu đó vào content blocks, badges và accent type của nó"
      - "Để display headlines tràn ra ngoài container — không ràng buộc chúng với max-width"
      - "Xen kẽ giữa canvas kem và một trong năm nền tinted ấm (Sage, Blush, Sand, Sky, Celadon) để tạo nhịp điệu section"

    don_t:
      - "Không thêm drop-shadows, inner-shadows hoặc bất kỳ hiệu ứng blur nào — hệ thống hoàn toàn phẳng"
      - "Không dùng một màu thương hiệu 'primary' duy nhất cho CTA — buttons kế thừa màu accent của section"
      - "Không đặt body text dưới 16px hoặc trên 20px — dải body được thiết kế chặt chẽ có chủ đích"
      - "Không áp dụng letter-spacing rộng hơn +0.01em cho body hoặc subheading text — chỉ các nhãn all-caps Moderat +0.084em và Optimistic uppercase +0.112em mới dùng wide tracking"
      - "Không giới thiệu màu mới ngoài bảy màu nav và năm lớp phủ tinted — bảng màu được giới hạn có chủ đích"
      - "Không dùng bo góc nhỏ hơn 16px trên bất kỳ container nào — góc 4px hoặc 8px sẽ trông như một hệ thống khác"
      - "Không đặt display headlines căn giữa trên canvas — chúng luôn căn trái và tràn về bên phải"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Bone Cream Canvas | `#f4e9e1` | Nền trang chính, tờ giấy ấm mà mọi thứ nằm trên đó |"
    info: "| 1 | Paper White | `#ffffff` | Elevated card surfaces, active nav state, input fields |"
    info: "| 2 | Tinted Washes | `#cee4cd` | Nền section màu xen kẽ — Sage, Blush, Sand, Sky Tint, Celadon — một tint cho mỗi content block |"
    info: "| 3 | Saturated Color Blocks | `#ff3d00` | Nav cards và content blocks bão hòa toàn phần dùng bảy màu section |"
    info: "| 4 | Dark Slates | `#444639` | Dark sections với màu tối pha sắc — Olive, Forest, Cocoa, Plum |"

  elevation:

    info: "Không có shadows. Hệ thống hoàn toàn phẳng — chiều sâu đến từ độ tương phản màu sắc, không phải blur hay offset. Color blocks nằm trực tiếp trên canvas kem với zero shadow. Bo góc (16px) và độ bão hòa màu làm tất cả công việc mà drop-shadows sẽ làm trong một hệ thống thông thường."

  imagery:

    info: "Chủ yếu dựa trên typographic và color-block — hệ thống coi massive display type là hình ảnh chủ đạo. Khi photography xuất hiện (trong các section Work, Talent, Careers), nó được đặt trong khung radius 16px trên canvas kem, không bao giờ full-bleed và không bao giờ có shadow. Không illustrations, không 3D, không decorative graphics — bảy màu section và display type CHÍNH LÀ visual identity. Iconography tối thiểu đến mức vắng mặt; khi có, nó là một glyph phẳng một màu ở cỡ 16-24px. Tỷ lệ ảnh trên text thấp: text chiếm ưu thế, ảnh đóng vai trò bằng chứng trong color blocks."

  layout:

    info: "Full-bleed layout không có ràng buộc max-width. Một fixed left sidebar (~160px) giữ bảy numbered section nav cards xếp dọc, mỗi card một màu rực rỡ khác nhau. Khu vực nội dung chính lấp đầy viewport còn lại với canvas kem ấm. Hero là một display headline cỡ lớn duy nhất (200-259px) tràn ra ngoài container — type CHÍNH LÀ hero, không phải background image. Một progress bar ở cuối (Ember Orange) trải dài toàn bộ viewport width. Các section xen kẽ giữa canvas kem và một trong năm nền tinted ấm (Sage, Blush, Sand, Sky, Celadon) hoặc một trong bốn dark slates, tạo nhịp điệu chapter giống tạp chí zine. Mô hình trang không đối xứng: sidebar là một neo cố định trong khi nội dung chảy full-width sang mép phải."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #0e0e0e (Ink)"
    - "background: #f4e9e1 (Bone Cream)"
    - "border: #0e0e0e ở 1-1.5px"
    - "accent: phụ thuộc section (Ember Orange #ff3d00, Pulse Violet #5900cc, Cobalt Blue #2835f8, Crimson #ff003d, Caution Yellow #ffff00, Voltage Green #05ff00)"
    - "card surface: #ffffff (Paper White)"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Numbered Section Nav Card**: Rộng 150px, border-radius 16px, fill #ff3d00. Hai dòng: '01' ở 12px StabilGrotesk 400 màu #f4e9e1, sau đó 'Hello' ở 18px StabilGrotesk 400 màu #f4e9e1. Padding ngang 16px, dọc 12px. Không shadow."

    - "**Display Headline**: 'We are Raw Materials' ở 200px KlarheitKurrent 400, #0e0e0e, line-height 1.00, letter-spacing -4px, feature-settings 'ss02'. Không max-width — type tràn sang phải."

    - "**Scroll Progress Bar**: Full viewport width, cao 4px, cố định ở cuối. Fill #ff3d00. Lớn dần từ trái sang phải theo vị trí cuộn."

    - "**Tinted Section Background**: Dải full-width, padding dọc 80px, background #cee4cd (Sage). Chứa subheading 24px StabilGrotesk 400 màu #0e0e0e, sau đó body 18px màu #0e0e0e ở line-height 1.38, max-width 640px."

    - "**Ghost Button**: Border-radius 16px, border 1.5px #0e0e0e, fill trong suốt, padding 12px 20px. Text 'View project' ở 16px StabilGrotesk 400 màu #0e0e0e. Khi hover: border dày lên 3px, không thay đổi fill."

  color_system_logic:

    info: "Bảng màu không chỉ để trang trí — nó có chức năng. Bảy màu section (Ember Orange, Pulse Violet, Ink, Cobalt Blue, Crimson, Caution Yellow, Voltage Green) ánh xạ 1:1 với numbered navigation, vì vậy màu sắc cho người dùng biết họ đang ở chapter nào của site. Năm lớp phủ tinted ấm (Sage, Blush, Sand, Sky, Celadon) là cùng một ý tưởng ở độ bão hòa thấp hơn: chúng tạo nền section xen kẽ mà không giới thiệu màu mới. Dark sections dùng một bộ màu tối pha sắc song song (Olive, Forest, Cocoa, Plum) — không bao giờ là đen thuần, luôn mang một chút màu sắc tinh tế. Mọi màu khác trên site hoặc là biến thể của một trong những màu này, hoặc là màu minh họa một lần không nên thêm vào hệ thống."

  type_system_logic:

    info: "Bốn display fonts (Optimistic Text, KlarheitKurrent, HTQ-Waldenburg, RightGrotesk) cạnh tranh ở 95-259px — chúng KHÔNG BAO GIỜ được dùng dưới 80px, và StabilGrotesk KHÔNG BAO GIỜ được dùng trên 46px. Sự phân chia cứng nhắc này là hệ thống: StabilGrotesk làm UI, display fonts làm poster-scale. Tất cả năm custom fonts đều chia sẻ stylistic alternate 'ss02', có nghĩa là các dạng glyph thay thế là một phần của giọng thương hiệu, không phải chi tiết ẩn. Font Moderat được dành riêng cho wide-tracked all-caps labels (+0.084em) và là font duy nhất sử dụng positive letter-spacing một cách có ý nghĩa — nó hoạt động như một giọng label/caption ở quy mô display."

  similar_brands:

    - "**Pentagram** — Cùng cách tiếp cận agency maximalist nơi mỗi dự án có typographic identity riêng, với massive display type và color blocks đậm trên neutral canvases"
    - "**DIA Studio** — Cùng warm cream/neutral canvas với oversized editorial type và sự chuyển màu section-by-section; cùng DNA Swiss-poster-gặp-zine"
    - "**Locomotive (Montreal)** — Cùng thẩm mỹ agency flat-design với vivid accent colors trên nền ấm trung tính và phân cấp typography mạnh mẽ"
    - "**Studio Dumbar** — Cùng sự tự tin Dutch-design trong việc coi type là yếu tố thị giác chính, với bề mặt phẳng, color blocks bão hòa và không có decorative shadows"
    - "**Order Design** — Cùng mẫu numbered-section navigation và warm-paper canvas với bold display type, mặc dù bảng màu hơi hạn chế hơn"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember-orange: #ff3d00;
          --color-pulse-violet: #5900cc;
          --color-cobalt-blue: #2835f8;
          --color-crimson: #ff003d;
          --color-caution-yellow: #ffff00;
          --color-voltage-green: #05ff00;
          --color-electric-blue: #1b73e6;
          --color-sky-cyan: #00c2ff;
          --color-forest: #008163;
          --color-lime-pulse: #3eea5a;
          --gradient-lime-pulse: linear-gradient(rgba(0, 0, 0, 0) calc(100% - 1px), rgb(62, 234, 90));
          --color-tangerine: #ff5c00;
          --color-signal-red: #ee2526;
          --color-ink: #0e0e0e;
          --color-bone-cream: #f4e9e1;
          --color-paper-white: #ffffff;
          --color-charcoal: #242320;
          --color-sage: #cee4cd;
          --color-blush: #e4d0cd;
          --color-sand: #e7e4d0;
          --color-sky-tint: #cddae4;
          --color-celadon: #ddded3;
          --color-olive-slate: #444639;
          --color-forest-slate: #374936;
          --color-cocoa-slate: #4a3937;
          --color-plum-slate: #493648;
        
          /* Typography — Font Families */
          --font-stabilgrotesk: 'StabilGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-optimistic-text: 'Optimistic Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-klarheitkurrent: 'KlarheitKurrent', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-htq-waldenburg-fettschmal: 'HTQ-Waldenburg-FettSchmal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rightgrotesk: 'RightGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-moderat: 'Moderat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-courier-new: 'Courier New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.38;
          --tracking-caption: -0.6px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --tracking-body-sm: -0.7px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.17;
          --tracking-heading: -0.32px;
          --text-heading-lg: 46px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.46px;
          --text-display: 100px;
          --leading-display: 1.03;
          --tracking-display: -1px;
          --text-display-lg: 200px;
          --leading-display-lg: 1;
          --tracking-display-lg: -2px;
          --text-display-xl: 259px;
          --leading-display-xl: 1;
          --tracking-display-xl: -10.36px;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-232: 232px;
        
          /* Layout */
          --section-gap: 48-80px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20.88px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40.32px;
          --radius-3xl-4: 44px;
          --radius-full: 64px;
          --radius-full-2: 99.36px;
          --radius-full-3: 187.2px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-pills: 99px;
          --radius-badges: 24px;
          --radius-images: 16px;
          --radius-buttons: 16px;
          --radius-nav-blocks: 16px;
          --radius-display-shapes: 187px;
        
          /* Surfaces */
          --surface-bone-cream-canvas: #f4e9e1;
          --surface-paper-white: #ffffff;
          --surface-tinted-washes: #cee4cd;
          --surface-saturated-color-blocks: #ff3d00;
          --surface-dark-slates: #444639;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember-orange: #ff3d00;
          --color-pulse-violet: #5900cc;
          --color-cobalt-blue: #2835f8;
          --color-crimson: #ff003d;
          --color-caution-yellow: #ffff00;
          --color-voltage-green: #05ff00;
          --color-electric-blue: #1b73e6;
          --color-sky-cyan: #00c2ff;
          --color-forest: #008163;
          --color-lime-pulse: #3eea5a;
          --color-tangerine: #ff5c00;
          --color-signal-red: #ee2526;
          --color-ink: #0e0e0e;
          --color-bone-cream: #f4e9e1;
          --color-paper-white: #ffffff;
          --color-charcoal: #242320;
          --color-sage: #cee4cd;
          --color-blush: #e4d0cd;
          --color-sand: #e7e4d0;
          --color-sky-tint: #cddae4;
          --color-celadon: #ddded3;
          --color-olive-slate: #444639;
          --color-forest-slate: #374936;
          --color-cocoa-slate: #4a3937;
          --color-plum-slate: #493648;
        
          /* Typography */
          --font-stabilgrotesk: 'StabilGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-optimistic-text: 'Optimistic Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-klarheitkurrent: 'KlarheitKurrent', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-htq-waldenburg-fettschmal: 'HTQ-Waldenburg-FettSchmal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-rightgrotesk: 'RightGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-moderat: 'Moderat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-courier-new: 'Courier New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.38;
          --tracking-caption: -0.6px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --tracking-body-sm: -0.7px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.17;
          --tracking-heading: -0.32px;
          --text-heading-lg: 46px;
          --leading-heading-lg: 1.14;
          --tracking-heading-lg: -0.46px;
          --text-display: 100px;
          --leading-display: 1.03;
          --tracking-display: -1px;
          --text-display-lg: 200px;
          --leading-display-lg: 1;
          --tracking-display-lg: -2px;
          --text-display-xl: 259px;
          --leading-display-xl: 1;
          --tracking-display-xl: -10.36px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-232: 232px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20.88px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40.32px;
          --radius-3xl-4: 44px;
          --radius-full: 64px;
          --radius-full-2: 99.36px;
          --radius-full-3: 187.2px;
        }