design_full_time___style_reference:
  info: "> black-box cinema với một ngọn đèn sân khấu ấm áp duy nhất"

  theme: "dark"

  info: "Design Full-Time vận hành như một rạp chiếu phim black-box: canvas thuần #000000, chữ trắng, và một gradient ấm tập trung (amber → ember → red) chỉ dành riêng cho các bề mặt chuyển đổi và khoảnh khắc tiết kiệm. Trang gần như hoàn toàn achromatic — video thumbnails, course metadata và navigation đều sống trong thang xám đơn sắc, để banner gradient duy nhất đóng vai trò như một ngọn đèn sân khấu. Các component phẳng và hình chữ nhật với hairline borders, bo góc tối thiểu, và không có shadow; hệ thống phân cấp đến từ type weight, khoảng trắng, và những dấu câu màu sắc hiếm hoi. Inter ở 700/800 mang giọng nói tự tin, mang tính hướng dẫn của thương hiệu, trong khi body text giữ ở 400/600 với các sắc xám nhẹ."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Canvas trang, background chủ đạo — hấp thụ mọi thứ để nội dung và banner gradient ấm có thể thu hút sự chú ý |"
    info: "| Surface Black | `#111111` | `--color-surface-black` | Card backgrounds, elevated panels, filled neutral button surface — cách canvas một bước tạo chiều sâu mà không có gray noise |"
    info: "| Lifted Charcoal | `#252525` | `--color-lifted-charcoal` | Bề mặt mid-elevation, hover states, và card depth tinh tế — kết nối page black và border tones |"
    info: "| Border Gray | `#343434` | `--color-border-gray` | Hairline dividers, card outlines, table rules — xác định các cạnh cấu trúc trong một thế giới phẳng |"
    info: "| Edge Gray | `#4d4d4d` | `--color-edge-gray` | Border dày hơn trên outlined buttons và grouped control frames |"
    info: "| Muted Text | `#888888` | `--color-muted-text` | Secondary body text, metadata, timestamps, supporting copy |"
    info: "| Helper Gray | `#a0a0a0` | `--color-helper-gray` | Body text borders và helper text nhẹ nhàng khi full white quá chói |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary headings, nav text, button text, logo fill — màu duy nhất được phép cạnh tranh với banner gradient |"
    info: "| Amber Glow | `linear-gradient(90deg, #ffc84 0%, #fa3a19 100%)` | `--color-amber-glow` | Điểm bắt đầu của promotional banner — nguồn gốc vàng lạnh của gradient đèn sân khấu ấm (cũng là gradient) |"
    info: "| Ember Orange | `linear-gradient(90deg, #ff8a00 0%, #fa3a19 100%)` | `--color-ember-orange` | Màu hỗ trợ cho các điểm nhấn trang trí nhỏ khi bảng màu chính cần độ tương phản. Không nâng cấp nó thành màu CTA chính |"
    info: "| Crimson Heat | `linear-gradient(90deg, #ff8a00 0%, #fa3a19 100%)` | `--color-crimson-heat` | Màu hỗ trợ cho các điểm nhấn trang trí nhỏ khi bảng màu chính cần độ tương phản. Không nâng cấp nó thành màu CTA chính |"

  tokens___typography:

    inter___kiểu_chữ_duy_nhất__inter_700_800_cho_wordmark_và_section_headlines_tự_tin__mang_tính_hướng_dẫn__600_cho_video_titles_và_nav_labels__400_cho_body_copy_và_metadata__không_có_display_size_font_trong_hệ_thống___thương_hiệu_giữ_type_compact_giới_hạn_ở_24px_và_để_banner_gradient_cùng_video_thumbnails_gánh_trọng_lượng_thị_giác_thay_thế_____font_inter:
      - "**Thay thế:** Inter (Google Fonts) hoặc system-ui làm fallback"
      - "**Weights:** 400, 600, 700, 800"
      - "**Kích thước:** 15, 16, 18, 20, 24"
      - "**Line height:** 1.00, 1.33, 1.40, 1.50, 1.56"
      - "**Vai trò:** Kiểu chữ duy nhất. Inter 700/800 cho wordmark và section headlines (tự tin, mang tính hướng dẫn); 600 cho video titles và nav labels; 400 cho body copy và metadata. Không có display-size font trong hệ thống — thương hiệu giữ type compact (giới hạn ở 24px) và để banner gradient cùng video thumbnails gánh trọng lượng thị giác thay thế."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|-----------|-------------|----------------|-------|"
      info: "| caption | 15px | 21 | — | `--text-caption` |"
      info: "| body-lg | 18px | 28 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 28 | — | `--text-subheading` |"
      info: "| heading | 24px | 32 | — | `--text-heading` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "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` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|--------|"
      info: "| cards | 6px |"
      info: "| badges | 4px |"
      info: "| banner | 4px |"
      info: "| buttons | 6px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    top_navigation_bar:
      vai_trò: "Primary site navigation"

      info: "Thanh #000000 full-width với vertical padding 16px, horizontal padding 32px. Nav links căn trái ở Inter 600/16px trắng, 'Student Login' outlined button căn phải. Bottom border 1px #343434 ngăn cách với page canvas."

    brand_wordmark:
      vai_trò: "Logo / identity"

      info: "'DESIGN FULL-TIME' căn giữa, màu trắng, Inter 800, được đặt thành hai dòng xếp chồng với một đường cong nhẹ/hình vòng cung làm khung — brand mark không màu duy nhất, gradient sống ở nơi khác."

    promo_banner_gradient_strip:
      vai_trò: "Conversion / offer highlight"

      info: "Thanh full-width cao 64-72px với lớp phủ gradient ấm (amber 12% opacity → red 10% opacity) trên nền #000000. Border nhẹ 1px, radius 4px. Chứa ba khu vực: bên trái 'Save 60%' ở dạng gradient text (amber → crimson), trung tâm 'Get all 5 courses for $399!' màu trắng, bên phải gradient-filled CTA button. Đây là component DUY NHẤT được phép đưa màu ấm vào."

    promo_gradient_button:
      vai_trò: "Primary conversion CTA trên banner"

      info: "Filled button với background linear-gradient(90deg, #ff8a00, #fa3a19), chữ trắng Inter 700, radius 6px, padding 8px 16px. Nằm căn phải bên trong promo banner."

    outlined_nav_button:
      vai_trò: "Secondary account action"

      info: "Background trong suốt, border 1px #343434, radius 6px, padding 8px 16px, label trắng Inter 600/15px. Được sử dụng cho 'Student Login' và các hành động cấp tài khoản tương tự."

    video_lesson_card:
      vai_trò: "Điểm vào khóa học / bài học miễn phí"

      info: "Background #111111, border 1px #343434, radius 6px, internal padding 16px. Bao gồm video thumbnail 16:9 ở trên, sau đó gap 8px đến title (Inter 700/16px trắng) và gap 4px đến category label (Inter 400/15px #a0a0a0). Có thể nhấp như một khối thống nhất."

    video_duration_badge:
      vai_trò: "Thumbnail metadata overlay"

      info: "Định vị tuyệt đối ở góc dưới bên phải của video thumbnail. Background #000000 80% opacity, radius 4px, padding 4px 8px, chữ trắng Inter 600/13px. Hiển thị thời lượng (ví dụ: '21:35', '1:16')."

    section_heading:
      vai_trò: "Tiêu đề phần"

      info: "Căn trái Inter 700/24px trắng, bottom margin 16px, letter-spacing 0. Được sử dụng cho các header kiểu 'Try these FREE video lessons'. Không có accent color, không gạch chân, không trang trí — chỉ type weight đảm nhiệm."

    video_title:
      vai_trò: "Nhãn chính của lesson card"

      info: "Inter 700/16px trắng, line-height 1.4, tối đa hai dòng. Thiết lập giọng nói của card."

    category_label:
      vai_trò: "Lesson card metadata"

      info: "Inter 400/15px #a0a0a0, một dòng, bên dưới video title. Xác định khóa học nguồn (ví dụ: 'Standout Web Designer', 'That Portfolio Course')."

  do_s_and_don_ts:

    do:
      - "Sử dụng #000000 làm page canvas và giữ tất cả nội dung không phải promo ở dạng achromatic — để banner gradient ấm là sự kiện màu sắc duy nhất trên trang."
      - "Áp dụng linear-gradient(90deg, #ff8a00, #fa3a19) độc quyền cho promo CTA button; không bao giờ sử dụng cho nav, icons, hoặc course cards."
      - "Sử dụng Inter 700/800 cho tất cả headings và Inter 400/600 cho body — không bao giờ trộn thêm họ typeface thứ hai."
      - "Xác định cạnh card bằng border 1px #343434 trên bề mặt #111111; bỏ qua shadows và dựa vào các bước màu phẳng để tạo hệ thống phân cấp."
      - "Đặt card padding video thành 16px và duy trì gap 8px giữa thumbnail, title và category label bên trong mỗi card."
      - "Giữ type scale giới hạn ở 24px — để video thumbnails và banner gradient gánh trọng lượng thị giác thay vì headlines quá khổ."
      - "Sử dụng #ffffff cho interactive text và headings, #a0a0a0 / #888888 cho metadata và secondary copy."

    don_t:
      - "Đừng đưa vào bất kỳ accent màu xanh dương, xanh lá cây hoặc tím nào — thương hiệu là hệ thống hai tông màu (monochrome + warm gradient) và các sắc thái bổ sung sẽ làm loãng hiệu ứng đèn sân khấu."
      - "Đừng áp dụng warm gradient cho body text, icons hoặc borders — chỉ dành riêng cho bề mặt promo banner và CTA button của nó."
      - "Đừng sử dụng shadows hoặc bo góc quá nặng (>=12px); hệ thống cố tình phẳng với radii 4-6px và hairline borders."
      - "Đừng đặt headings trên 24px; display type quá khổ phá vỡ cảm giác compact, mang tính hướng dẫn."
      - "Đừng sử dụng #111111 làm button background cho các hành động chính — vai trò đó chỉ thuộc về warm gradient CTA."
      - "Đừng đưa vào typeface thứ hai, custom display face hoặc serif — một mình Inter mang thương hiệu ở mọi weight."
      - "Đừng đặt gradient banner bên trong cards hoặc danh sách lặp lại; nó phải là một sự kiện chuyển đổi full-width duy nhất."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#000000` | Background toàn trang; hấp thụ nhiễu thị giác để video thumbnails và banner gradient được đọc trước tiên |"
    info: "| 1 | Card | `#111111` | Video lesson cards và các khối nội dung được nhóm; cách canvas một bước để xác định các cạnh mà không có gray noise |"
    info: "| 2 | Elevated | `#252525` | Độ cao tinh tế cho hover states, tooltips hoặc promotional panels cấp cao hơn |"

  imagery:

    info: "Hình ảnh chủ yếu là video thumbnails 16:9 hiển thị người hướng dẫn (có râu, đội mũ beanie) trong studio của anh ấy với bảng thiết kế và các công cụ hiển thị phía sau. Thumbnails được xử lý như các crop hình chữ nhật không có bo góc hoặc xử lý màu sắc — chúng trông giống như các bản screencap trực tiếp. Một vài thumbnails sử dụng slide/UI overlay ở nửa bên trái (ví dụ: slide 'modern way to build for the web') được ghép với người hướng dẫn ở bên phải. Không có illustration, không có đồ họa trừu tượng, không có nhiếp ảnh ngoài video hướng dẫn. Việc sử dụng icon là tối thiểu (chevrons trong nav dropdowns). Promo banner giới thiệu màu sắc phi nhiếp ảnh duy nhất thông qua gradient. Mật độ thị giác ở mức trung bình: trang kết hợp các hàng thumbnail 4 cột với các phần dẫn dắt bằng văn bản, do đó thumbnails chiếm khoảng 40-50% không gian thị giác above-the-fold."

  layout:

    info: "Full-bleed dark layout không có decorative side margins — nội dung được căn giữa trong container max-width 1200px. Hero là một stack căn giữa: nav bar → logo căn giữa → dòng phụ đề đơn → promo banner full-width → section heading → hàng thumbnail 4 cột. Các section xếp chồng theo chiều dọc với gap 48px và không có các dải sáng/tối xen kẽ (trang đồng nhất #000000). Video grid là một hàng 4 cột có chiều rộng bằng nhau trên desktop, thu gọn xuống 2-1 cột trên các chiều rộng nhỏ hơn. Sắp xếp nội dung được căn trái nghiêm ngặt trong cards và sections; chỉ logo và phụ đề mới được căn giữa. Navigation là một top bar phẳng với một dropdown duy nhất (Courses → Jobs and Events / Coming Soon) và một login button căn phải. Không có sidebar, không có sticky header, không có mega-menu."

  gradient_system:

    info: "Thương hiệu chạy một họ gradient ấm duy nhất với ba biến thể hoạt động: (1) Text gradient — linear-gradient(90deg, #ffc840, #fa3a19) được áp dụng cho wordmark 'Save 60%' trên promo banner; (2) Button gradient — linear-gradient(90deg, #ff8a00, #fa3a19) được áp dụng cho promo CTA fill; (3) Wash gradient — cùng các màu ở opacity 10-12% được sử dụng làm background tint mềm phía sau văn bản promo banner. Không bao giờ mở rộng họ này sang các bề mặt UI khác."

  agent_prompt_guide:

    primary_action: "#111111 (filled action)"
    tạo_primary_action_button: "background #111111, chữ #ffffff, radius 9999px, compact pill padding. Sử dụng filled treatment này cho CTA chính."

    info: "Ví dụ Component Prompts:"

    - "Promo banner: thanh full-width, radius 4px, border nhẹ 1px, background wash amber→crimson mềm (12%→10% opacity). Khu vực bên trái: 'Save 60%' ở dạng gradient text (amber #ffc840 → crimson #fa3a19, Inter 700/20px). Khu vực trung tâm: chữ trắng Inter 600/16px. Khu vực bên phải: gradient-filled button (90deg, #ff8a00 → #fa3a19), label trắng Inter 700/15px, radius 6px, padding 8px 16px."

    - "Video lesson card: bề mặt #111111, border 1px #343434, radius 6px, padding 16px. Thumbnail (16:9) lấp đầy phía trên, duration badge góc dưới bên phải (#000000 80% opacity, radius 4px, chữ trắng Inter 600/13px). Gap 8px đến title (Inter 700/16px #ffffff), gap 4px đến category (Inter 400/15px #a0a0a0)."

    - "Outlined nav button: background trong suốt, border 1px #343434, radius 6px, padding 8px 16px, label trắng Inter 600/15px. Được sử dụng cho 'Student Login'."

    - "Section heading: căn trái Inter 700/24px #ffffff, bottom margin 16px, không trang trí. Theo sau là video grid 4 cột bằng nhau với gap 16px."

    - "Page canvas: background #000000 full-bleed, content container căn giữa max-width 1200px, gap dọc 48px giữa các section chính, không shadows, không dải xen kẽ."

  similar_brands:

    - "**Maven** — Cùng canvas nền tảng khóa học dark monochrome với video thumbnails do người hướng dẫn và hệ thống phân cấp tối thiểu dựa trên type"
    - "**Refind** — Trang web nội dung trên nền đen để một accent color hoặc gradient ấm duy nhất sở hữu khoảnh khắc màu sắc duy nhất trên trang"
    - "**Levels.fyi** — Background đen thuần với hairline gray borders, card hình chữ nhật phẳng, và không có decorative shadow — mật độ ưu tiên nội dung"
    - "**Design Buddies** — Thương hiệu giáo dục thiết kế sử dụng layout nền đen với wordmark căn giữa đậm và các dải khuyến mãi tập trung vào chuyển đổi"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-black: #000000;
          --color-surface-black: #111111;
          --color-lifted-charcoal: #252525;
          --color-border-gray: #343434;
          --color-edge-gray: #4d4d4d;
          --color-muted-text: #888888;
          --color-helper-gray: #a0a0a0;
          --color-pure-white: #ffffff;
          --color-amber-glow: #ffc840;
          --gradient-amber-glow: linear-gradient(90deg, #ffc84 0%, #fa3a19 100%);
          --color-ember-orange: #ff8a00;
          --gradient-ember-orange: linear-gradient(90deg, #ff8a00 0%, #fa3a19 100%);
          --color-crimson-heat: #fa3a19;
          --gradient-crimson-heat: linear-gradient(90deg, #ff8a00 0%, #fa3a19 100%);
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 21;
          --text-body-lg: 18px;
          --leading-body-lg: 28;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --text-heading: 24px;
          --leading-heading: 32;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-cards: 6px;
          --radius-badges: 4px;
          --radius-banner: 4px;
          --radius-buttons: 6px;
        
          /* Surfaces */
          --surface-canvas: #000000;
          --surface-card: #111111;
          --surface-elevated: #252525;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-black: #000000;
          --color-surface-black: #111111;
          --color-lifted-charcoal: #252525;
          --color-border-gray: #343434;
          --color-edge-gray: #4d4d4d;
          --color-muted-text: #888888;
          --color-helper-gray: #a0a0a0;
          --color-pure-white: #ffffff;
          --color-amber-glow: #ffc840;
          --color-ember-orange: #ff8a00;
          --color-crimson-heat: #fa3a19;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 15px;
          --leading-caption: 21;
          --text-body-lg: 18px;
          --leading-body-lg: 28;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --text-heading: 24px;
          --leading-heading: 32;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        }