keepgrading___style_reference: info: "> Polaroids rải rác trong phòng tối" theme: "dark" info: "KeepGrading là một portfolio editorial mang phong cách phòng tối: một canvas gần như đơn sắc hoàn toàn, nơi các bức ảnh trôi nổi như những khung hình rải rác trong khoảng không sâu thẳm. UI được thiết kế lặng lẽ có chủ đích để hình ảnh lên tiếng — chỉ có display type Cabinet Grotesk, đường viền trắng mảnh 1px, và một pill-shaped ghost control duy nhất làm thành phần giao diện. Không có điểm nhấn màu sắc, không gradient, không đổ bóng; toàn bộ hệ thống phân cấp thị giác được dẫn dắt bởi độ tương phản, tỷ lệ và khoảng trắng giữa các bức ảnh. Mật độ thoải mái nhưng nhịp dọc lỏng lẻo, với khoảng thở 48px giữa các dải và các khung hình được giữ cố định bởi một đường viền trắng 1px duy nhất. Các component là tối giản — một nav toggle hình tròn, logo wordmark, các thẻ ảnh nổi với góc bo mềm 160px, và pill buttons với bán kính 9999px — để nhiếp ảnh chiếm ưu thế trong trải nghiệm." tokens___colors: info: "| Tên | Giá trị | Token | Vai trò |" info: "|------|-------|-------|------|" info: "| Studio White | `#f8f8f8` | `--color-studio-white` | Văn bản chính, viền ghost-button, đường viền khung ảnh, nét nav icon — giọng nói ánh sáng duy nhất trong căn phòng tối |" info: "| Void Black | `#080808` | `--color-void-black` | Canvas trang, nền phía sau mọi thứ, phần điền khung ảnh giữa các bức ảnh |" info: "| Pure Black | `#000000` | `--color-pure-black` | Phần điền SVG icon, lớp bề mặt sâu nhất cho đồ họa inline và các dấu trang trí |" info: "| Bone White | `#f0f0f0` | `--color-bone-white` | Văn bản phụ mềm mại và các nét viền mảnh hỗ trợ khi màu trắng tinh khiết cảm thấy quá lâm sàng |" info: "| Pewter Border | `#2a2a2a` | `--color-pewter-border` | Đường phân cách tương phản thấp và cạnh khung không hoạt động, lùi vào khoảng không |" tokens___typography: cabinet_grotesk___display_thương_hiệu_và_logo_wordmark___headline_96px_weight_400_là_phản_quy_ước__không_đậm__không_thủ_thuật_display__chỉ_một_weight_duy_nhất_được_đẩy_lên_kích_thước_hoành_tráng__tạo_cảm_giác_tự_tin_qua_sự_kiềm_chế__cũng_được_dùng_ở_24px_cho_subheading_ngắn_và_16px_cho_nav_labels__typeface_tùy_chỉnh_này_mang_toàn_bộ_nhận_diện_thương_hiệu_____font_cabinet_grotesk: - "**Thay thế:** General Sans, Migra, Söhne" - "**Weights:** 400" - "**Kích thước:** 16px, 20px, 24px, 96px" - "**Line height:** 1.0–1.5" - "**Vai trò:** Display thương hiệu và logo wordmark — headline 96px weight 400 là phản quy ước; không đậm, không thủ thuật display, chỉ một weight duy nhất được đẩy lên kích thước hoành tráng, tạo cảm giác tự tin qua sự kiềm chế. Cũng được dùng ở 24px cho subheading ngắn và 16px cho nav labels. Typeface tùy chỉnh này mang toàn bộ nhận diện thương hiệu." inter___body_text_và_supporting_copy_ở_16px_và_20px__cả_hai_đều_ở_weight_400___không_có_biến_thể_bold_nào_được_dùng__hệ_thống_giữ_một_weight_duy_nhất_ngay_cả_để_nhấn_mạnh__để_kích_thước_và_màu_sắc_làm_công_việc_phân_cấp____font_inter: - "**Thay thế:** system-ui, -apple-system, Helvetica Neue" - "**Weights:** 400" - "**Kích thước:** 16px, 20px" - "**Line height:** 1.4–1.5" - "**Vai trò:** Body text và supporting copy ở 16px và 20px, cả hai đều ở weight 400 — không có biến thể bold nào được dùng, hệ thống giữ một weight duy nhất ngay cả để nhấn mạnh, để kích thước và màu sắc làm công việc phân cấp" type_scale: info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |" info: "|------|------|-------------|----------------|-------|" info: "| body | 16px | 1.4 | — | `--text-body` |" info: "| subheading | 20px | 1.5 | — | `--text-subheading` |" info: "| heading-lg | 24px | 1.33 | — | `--text-heading-lg` |" info: "| display | 96px | 1 | — | `--text-display` |" tokens___spacing___shapes: đơn_vị_cơ_bản: "8px" mật_độ: "thoải mái" spacing_scale: info: "| Tên | Giá trị | Token |" info: "|------|-------|-------|" info: "| 12 | 12px | `--spacing-12` |" info: "| 15 | 15px | `--spacing-15` |" info: "| 24 | 24px | `--spacing-24` |" info: "| 48 | 48px | `--spacing-48` |" border_radius: info: "| Element | Giá trị |" info: "|---------|-------|" info: "| nav | 9999px |" info: "| cards | 160px |" info: "| buttons | 9999px |" layout: - "**Section gap:** 48px" - "**Card padding:** 24px" - "**Element gap:** 15px" components: ghost_pill_button: vai_trò: "Primary navigation/action control" info: "Pill có viền với border 1px solid #f8f8f8, border-radius 9999px, fill trong suốt để lộ canvas tối phía sau. Label bằng Inter 16px weight 400, #f8f8f8. Internal padding 12px 24px. Icon mũi tên dẫn ở cuối với nét vẽ #f8f8f8 1px. Không có fill state, không có hover glow — button truyền đạt tính tương tác hoàn toàn qua đường viền của nó." circular_nav_toggle: vai_trò: "Menu trigger ở góc trên bên phải" info: "Hình tròn đường kính 160px với border 1px solid #f8f8f8, fill trong suốt. Glyph dấu trừ hoặc hamburger ở giữa, màu #f8f8f8, nét vẽ 1px. Nằm sát cạnh canvas, không có nền hoặc bóng." wordmark_logo: vai_trò: "Nhận diện thương hiệu ở góc trên bên trái" info: "‘KEEPGRADING’ được đặt bằng Cabinet Grotesk 96px / 1.0 line-height, weight 400, #f8f8f8. Kerning ngang chặt; wordmark có thể bị cắt hoặc mở rộng ra ngoài cạnh viewport để tạo sự căng thẳng editorial. Không có tagline, không có biểu tượng — chỉ riêng typeface đã mang thương hiệu." floating_image_frame: vai_trò: "Thẻ ảnh rải rác trên canvas" info: "Ảnh được bọc trong border 1px solid #f8f8f8, border-radius 160px (góc rất mềm, không hẳn là hình tròn). Không fill, không bóng, không padding — ảnh nằm trực tiếp bên trong cạnh viền. Nhiều khung hình được đặt ở các offset và kích thước khác nhau trên viewport; sự sắp xếp rải rác là pattern layout, không phải grid." canvas_layer: vai_trò: "Bề mặt nền cho toàn bộ trang" info: "Fill #080808 đặc, phủ kín toàn bộ viewport. Không texture, không gradient, không noise. Tất cả các element khác — văn bản, khung hình, controls — nổi trên bề mặt này với khoảng thở dọc 48px giữa các dải." section_spacer: vai_trò: "Nhịp dọc giữa các dải nội dung" info: "Khoảng trống dọc 48px trên canvas #080808 giữa các cụm nội dung. Không có đường phân cách nhìn thấy được; sự phân tách đạt được hoàn toàn qua whitespace, duy trì bầu không khí phòng tối." nav_label: vai_trò: "Văn bản điều hướng phụ" info: "Cabinet Grotesk 16px weight 400, #f8f8f8, đi kèm với circular nav toggle. Xử lý chữ hoa toàn bộ với letter-spacing rộng rãi để tạo nhịp editorial." do_s_and_don_ts: do: - "Sử dụng #f8f8f8 cho tất cả văn bản, viền và nét icon trên canvas #080808 — không bao giờ đưa điểm nhấn màu sắc để nhấn mạnh." - "Đặt display headlines bằng Cabinet Grotesk 96px weight 400, line-height 1.0; weight duy nhất ở kích thước hoành tráng là chữ ký." - "Sử dụng border-radius 9999px cho tất cả buttons, tags và nav toggle để duy trì vốn từ vựng hình dạng pill/circle." - "Sử dụng border-radius 160px cho khung ảnh để giữ góc mềm nhưng khác biệt so với controls dạng pill hoàn toàn." - "Duy trì khoảng cách dọc tối thiểu 48px giữa các dải nội dung; để whitespace phân tách các section thay vì divider hay bóng." - "Giữ tất cả UI chrome ở weight 400 trên cả Cabinet Grotesk và Inter; hệ thống phân cấp đến từ kích thước, không phải weight." - "Đặt các khung ảnh như các element nổi rải rác với offset và kích thước khác nhau thay vì căn chỉnh chúng vào một grid nghiêm ngặt." don_t: - "Không đưa bất kỳ màu thương hiệu, điểm nhấn hay gradient nào — khoảng không đơn sắc chính là thương hiệu." - "Không thêm drop shadows, glows, hay bất kỳ hiệu ứng độ cao nào — chiều sâu đến từ layering và độ tương phản đơn thuần." - "Không sử dụng weight bold (600+) hoặc semibold để nhấn mạnh; thay vào đó, chuyển đổi kích thước hoặc màu sắc." - "Không sử dụng góc nhọn (bán kính 0–8px) trên bất kỳ element nhìn thấy nào — tất cả bề mặt phải được bo tròn dạng pill hoặc cong mềm mại." - "Không áp dụng background fill cho buttons; kiểu ghost outlined là cách xử lý button duy nhất." - "Không giới hạn trang ở một cột max-width; canvas đen full-bleed là thiết yếu cho cảm giác phòng tối." - "Không thêm icons, badges, hay đồ họa trang trí vào UI chrome — type, borders và ảnh là những element thị giác duy nhất." surfaces: info: "| Cấp độ | Tên | Giá trị | Mục đích |" info: "|-------|------|---------|---------|" info: "| 0 | Void Canvas | `#080808` | Nền trang full-bleed; lớp cơ sở mà mọi thứ nổi trên đó |" info: "| 1 | Deep Surface | `#061c32` | Panel xanh đậm hiếm khi xuất hiện cho nội dung cần hơi nhô lên khỏi khoảng không (được phát hiện trong các cặp tương phản) |" info: "| 2 | Mid Surface | `#1d2d44` | Bề mặt card hoặc modal được nâng lên cho các khối nội dung phân lớp |" elevation: info: "Không có bóng. Không có glows. Không có hiệu ứng drop-shadow trên bất kỳ element nào. Chiều sâu và sự phân tách đạt được độc quyền thông qua border 1px #f8f8f8, whitespace dọc (khoảng cách 48px) và thứ tự z của các khung ảnh rải rác. Ẩn dụ phòng tối đòi hỏi không có gì đổ bóng — khoảng không là phẳng và vô hạn." imagery: info: "Nhiếp ảnh là nội dung thị giác chính. Các bức ảnh màu lớn, đầy đủ về con người, phương tiện và cảnh sinh hoạt được trình bày dưới dạng các khung nổi rải rác trên canvas đen ở nhiều tỷ lệ và vị trí khác nhau. Cách xử lý mang phong cách tài liệu/chân thực hơn là thương mại dàn dựng — khoảnh khắc xã hội bên hồ bơi, một chiếc sedan xanh trên đường ven biển, cảnh sinh hoạt nội thất. Các khung được cắt sát với border trắng 1px và corner radius 160px; không có chú thích hoặc text overlay trên chính ảnh. Layout đọc như một spread photo-editorial hơn là một product gallery — ảnh được đặt off-grid, một phần chồng lên cạnh viewport, và ở các kích thước khác nhau để tạo nhịp thị giác trên toàn trang." layout: info: "Canvas tối full-bleed không có ràng buộc max-width; nội dung mở rộng đến các cạnh viewport. Hero chính là trang — không có headline hoặc CTA block tập trung. Thay vào đó, một wordmark logo lớn nằm ở góc trên bên trái (có thể bị cắt ra ngoài viewport), một circular nav toggle ở góc trên bên phải, và phần còn lại của viewport được lấp đầy bởi các khung ảnh rải rác ở nhiều vị trí và kích thước khác nhau. Một ghost pill button duy nhất (‘Show me more’) xuất hiện ở phần dưới, căn giữa. Điều hướng là tối thiểu — một thanh trên cùng chỉ với logo và hamburger, không có menu ngang. Nội dung chảy như một scroll dọc qua nhiều cụm ảnh rải rác hơn, được phân tách bởi khoảng cách 48px. Không có cấu trúc section truyền thống; trang đọc như một bề mặt phòng tối liên tục với các bức ảnh được ghim vào đó ở các offset editorial." agent_prompt_guide: info: "Tham khảo màu nhanh:" - "text: #f8f8f8" - "background: #080808" - "border: #f8f8f8 (1px)" - "muted border: #2a2a2a" - "accent: không có (hệ thống đơn sắc)" - "primary action: không có màu CTA riêng biệt" info: "Ví dụ Component Prompts:" - "Tạo một hero section: canvas #080808 full-bleed. Wordmark ‘KEEPGRADING’ ở góc trên bên trái, Cabinet Grotesk 96px weight 400, #f8f8f8, line-height 1.0, được phép cắt ở cạnh viewport. Nút nav hình tròn ở góc trên bên phải: đường kính 160px, border 1px solid #f8f8f8, fill trong suốt, glyph hamburger căn giữa với nét vẽ #f8f8f8 1px." - "Tạo một floating image card: ảnh với border 1px solid #f8f8f8, border-radius 160px, không fill, không bóng, không padding — ảnh lấp đầy khung hình từ cạnh này sang cạnh kia. Đặt ở offset không theo grid trên canvas." - "Tạo một ghost pill button: background trong suốt, border 1px solid #f8f8f8, border-radius 9999px, padding 12px 24px. Label bằng Inter 16px weight 400 #f8f8f8, theo sau là icon mũi tên phải với nét vẽ #f8f8f8 1px." - "Tạo một scattered photo grid: 3–5 khung ảnh ở các kích thước khác nhau (rộng 300px–600px), được đặt với offset editorial (không căn chỉnh theo grid), cách nhau ít nhất 48px khoảng cách dọc, mỗi khung có corner radius 160px và border 1px #f8f8f8, trên canvas #080808." - "Tạo một section spacer: dải #080808 trống cao 48px giữa các cụm nội dung, không có đường phân cách nhìn thấy được, không có bóng." similar_brands: - "**Vincent Moschetti portfolio sites** — Cùng canvas tối full-bleed với các khung ảnh rải rác và xử lý type đơn sắc tối giản" - "**Studio Bruch** — Layout editorial ưu tiên ảnh với các khung nổi trên khoảng không đen và display typography một weight" - "**Forma editorial** — Custom display type tỷ lệ lớn trên canvas gần đen với nhiếp ảnh là nội dung màu sắc duy nhất" - "**Pentagram case studies** — Branding wordmark chiếm ưu thế ở góc trên bên trái với circular nav toggle và chrome tối giản xung quanh tác phẩm được trưng bày" - "**Locomotive Mtl** — Bề mặt tối full-bleed với hình ảnh editorial rải rác và ghost pill controls" quick_start: css_custom_properties: css: | :root { /* Colors */ --color-studio-white: #f8f8f8; --color-void-black: #080808; --color-pure-black: #000000; --color-bone-white: #f0f0f0; --color-pewter-border: #2a2a2a; /* Typography — Font Families */ --font-cabinet-grotesk: 'Cabinet Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-body: 16px; --leading-body: 1.4; --text-subheading: 20px; --leading-subheading: 1.5; --text-heading-lg: 24px; --leading-heading-lg: 1.33; --text-display: 96px; --leading-display: 1; /* Typography — Weights */ --font-weight-regular: 400; /* Spacing */ --spacing-unit: 8px; --spacing-12: 12px; --spacing-15: 15px; --spacing-24: 24px; --spacing-48: 48px; /* Layout */ --section-gap: 48px; --card-padding: 24px; --element-gap: 15px; /* Border Radius */ --radius-full: 160px; --radius-full-2: 9999px; /* Named Radii */ --radius-nav: 9999px; --radius-cards: 160px; --radius-buttons: 9999px; /* Surfaces */ --surface-void-canvas: #080808; --surface-deep-surface: #061c32; --surface-mid-surface: #1d2d44; } tailwind_v4: css: | @theme { /* Colors */ --color-studio-white: #f8f8f8; --color-void-black: #080808; --color-pure-black: #000000; --color-bone-white: #f0f0f0; --color-pewter-border: #2a2a2a; /* Typography */ --font-cabinet-grotesk: 'Cabinet Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-body: 16px; --leading-body: 1.4; --text-subheading: 20px; --leading-subheading: 1.5; --text-heading-lg: 24px; --leading-heading-lg: 1.33; --text-display: 96px; --leading-display: 1; /* Spacing */ --spacing-12: 12px; --spacing-15: 15px; --spacing-24: 24px; --spacing-48: 48px; /* Border Radius */ --radius-full: 160px; --radius-full-2: 9999px; }