# Active Theory > Active Theory — Style Reference ## Prompt Content ``` # Active Theory — Style Reference > mái vòm đài thiên văn lúc nửa đêm — một thiết bị duy nhất phát sáng trong khoảng không, xung quanh là những micro-label bảng điều khiển **Theme:** dark Giao diện của Active Theory là một vực thẳm: canvas đen gần như tuyệt đối bị nuốt chửng bởi một artifact 3D phát sáng duy nhất, với chrome được thu gọn thành những label chữ hoa mỏng như thì thầm và những đường kẻ tóc (hairline rules). Ngôn ngữ thị giác vay mượn từ bản vẽ kiến trúc và vật lý hạt — một typeface hình học monospaced (nbarchitekt) gắn nhãn cho mọi phần tử giao diện, trong khi một serif (Times) xử lý những đoạn body text hiếm hoi, tạo ra sự căng thẳng giữa độ chính xác kỹ thuật và sự ấm áp biên tập. Các phần tử UI tồn tại ở vùng ngoại vi: một pill nav góc trên bên phải được kết nối bằng một đường kẻ, một cookie consent nhỏ neo ở góc dưới bên phải. Màu sắc gần như hoàn toàn không có sắc độ; điểm nhấn màu duy nhất là một màu tím nửa đêm bão hòa thấp (midnight violet) được sử dụng rất tiết kiệm trên affordance accept của cookie, không bao giờ vươn tới vị thế hero hay marketing. Hệ thống thiết kế về cơ bản nói rằng: bản thân tác phẩm 3D CHÍNH LÀ giao diện, và mọi phần tử chrome nên phục tùng nó. ## Tokens — Colors | Tên | Giá trị | Token | Vai trò | |------|-------|-------|------| | Void Black | `#000000` | `--color-void-black` | Canvas trang, phông nền modal, nền trường hạt | | Pure White | `#ffffff` | `--color-pure-white` | Văn bản chính, label nav, chữ trên nền tối | | Graphite Border | `#4d4d4d` | `--color-graphite-border` | Đường kẻ tóc (hairline dividers), đường viền cấu trúc mờ | | Steel Border | `#808080` | `--color-steel-border` | Viền nút outlined, đường chia thứ cấp | | Fog Border | `#999999` | `--color-fog-border` | Viền nút cấp ba, đường viền ít nhấn mạnh | | Ash Link | `#c6c6c6` | `--color-ash-link` | Màu link mờ, văn bản thông tin thứ cấp | | Midnight Violet | `#343755` | `--color-midnight-violet` | Điểm nhấn màu tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính | ## Tokens — Typography ### nbarchitekt — Signature technical-label typeface cho navigation, button và micro-copy. Tính chất monospaced/kiến trúc của nó mang lại cho giao diện chất lượng bản vẽ kỹ thuật — label chữ hoa 10–12px với tracking chặt có cảm giác như dấu hiệu dụng cụ đo lường hơn là text UI. Thay thế: Space Mono hoặc IBM Plex Mono để có tính chất hình học-kỹ thuật tương tự. · `--font-nbarchitekt` - **Thay thế:** Space Mono, IBM Plex Mono - **Weights:** 400, 700 - **Kích thước:** 10, 12, 14 - **Line height:** 1.20, 1.50, 3.00 - **Letter spacing:** normal - **Vai trò:** Signature technical-label typeface cho navigation, button và micro-copy. Tính chất monospaced/kiến trúc của nó mang lại cho giao diện chất lượng bản vẽ kỹ thuật — label chữ hoa 10–12px với tracking chặt có cảm giác như dấu hiệu dụng cụ đo lường hơn là text UI. Thay thế: Space Mono hoặc IBM Plex Mono để có tính chất hình học-kỹ thuật tương tự. ### Times — System serif dùng cho body passages và link text ở 16px. Việc chọn serif đối lập với font label hình học viết hoa toàn bộ tạo ra sự tương phản biên tập/hệ thống có chủ đích — Times mang khả năng đọc, nbarchitekt mang bản sắc. Thay thế: bất kỳ system serif nào (Georgia, Times New Roman). · `--font-times` - **Thay thế:** Georgia, Times New Roman - **Weights:** 400 - **Kích thước:** 16 - **Line height:** 1.20, 1.88 - **Vai trò:** System serif dùng cho body passages và link text ở 16px. Việc chọn serif đối lập với font label hình học viết hoa toàn bộ tạo ra sự tương phản biên tập/hệ thống có chủ đích — Times mang khả năng đọc, nbarchitekt mang bản sắc. Thay thế: bất kỳ system serif nào (Georgia, Times New Roman). ### Arial — Button fallback ở 13px. Hoạt động như một safety net hệ thống cho việc render nbarchitekt — cùng vai trò, sans trung tính. · `--font-arial` - **Thay thế:** Helvetica, system-ui - **Weights:** 400 - **Kích thước:** 13 - **Line height:** 1.20 - **Vai trò:** Button fallback ở 13px. Hoạt động như một safety net hệ thống cho việc render nbarchitekt — cùng vai trò, sans trung tính. ### Type Scale | Vai trò | Kích thước | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 10px | 1.2 | — | `--text-caption` | | body | 14px | 1.5 | — | `--text-body` | | body-lg | 16px | 1.88 | — | `--text-body-lg` | ## Tokens — Spacing & Shapes **Density:** compact ### Spacing Scale | Tên | Giá trị | Token | |------|-------|-------| | 4 | 4px | `--spacing-4` | | 6 | 6px | `--spacing-6` | | 12 | 12px | `--spacing-12` | | 13 | 13px | `--spacing-13` | | 14 | 14px | `--spacing-14` | | 16 | 16px | `--spacing-16` | | 18 | 18px | `--spacing-18` | | 28 | 28px | `--spacing-28` | ### Border Radius | Phần tử | Giá trị | |---------|-------| | panels | 12px | | buttons | 5px | | pillButtons | 500px | ### Layout - **Card padding:** 12-18px - **Element gap:** 6px ## Components ### Connected Pill Nav **Vai trò:** Navigation chính của trang — hai label với một đường kẻ nối Nav nổi góc trên bên phải. Hai label nbarchitekt chữ hoa (ví dụ 'WORK' và 'CONTACT') ở 10–12px, weight 700, màu trắng, cách nhau bằng một đường kẻ ngang 1px màu trắng. Container có border-radius 500px tạo thành hình viên nang. Không có background fill — hình dạng pill được ngụ ý bởi đường kẻ nối và vị trí label. Padding ~6px dọc, ~13px ngang. ### Outlined Ghost Button **Vai trò:** Hành động thứ cấp — từ chối cookie, dismiss tùy chọn Fill trong suốt, viền 1px #999999 hoặc #808080, radius 5px, text nbarchitekt hoặc Arial 13px chữ hoa màu trắng. Padding ngang 18px, padding dọc 1–4px. Không có fill ở trạng thái hover trong dữ liệu; dựa vào độ tương phản viền và text. ### Violet Filled Button **Vai trò:** Affordance accept cookie-consent — nút có màu duy nhất trong hệ thống Background #343755 (midnight violet), text trắng, radius 5px. NBarchitekt hoặc Arial 13px chữ hoa. Padding ~6px dọc, ~18px ngang. Hoạt động như một nút tiện ích hệ thống hơn là CTA marketing — màu chàm bão hòa thấp, mờ của nó tránh cạnh tranh với trung tâm 3D. ### Cookie Consent Panel **Vai trò:** Lớp phủ quy định góc dưới bên phải Neo ở góc dưới bên phải với margin ~20px. Radius 12px, viền 1px #4d4d4d, fill đen khớp với canvas (không có surface lift — chỉ phân biệt bằng viền). Body text bằng Times 16px màu trắng với line-height 1.88, có 'PRIVACY NOTICE' gạch chân dưới dạng link màu #c6c6c6. Chứa một violet filled button và một outlined ghost button cạnh nhau với gap ~6px. ### Label Tag **Vai trò:** Micro-copy cho section markers, metadata, instrument labels nbarchitekt 10–12px, weight 400, chữ hoa, màu trắng, tracking normal. Được sử dụng rất tiết kiệm để đánh dấu các khu vực UI giống như bản vẽ kiến trúc chú thích các thành phần. Không background, không border — chỉ text. ### 3D Centerpiece **Vai trò:** Artifact thị giác hero — chủ đề thực sự của trang Một quả cầu được render bằng WebGL/Three.js bao gồm các vòng tròn đồng tâm trong suốt với lõi hình lục giác, phát ra các tia lửa hạt màu hổ phách và để lại các vệt ruy băng lỏng. Được căn giữa trên canvas void, chiếm khoảng một phần ba trung tâm của viewport. Không có kích thước cố định — responsive theo canvas. ### Particle Field **Vai trò:** Lớp nền khí quyển phía sau centerpiece Các hạt lửa màu hổ phách/cam thưa thớt (ngụ ý bởi ánh sáng chói trong ảnh chụp màn hình) rải rác trên canvas đen với mật độ thấp. Cung cấp tín hiệu chiều sâu và motion parallax mà không cạnh tranh với centerpiece. ### Hairline Divider **Vai trò:** Phân cách cấu trúc giữa các phần tử nav, cạnh modal và khu vực UI Đường liền 1px màu #4d4d4d hoặc #ffffff. Được sử dụng để phân định các khu vực UI trên canvas đen vì các fill bị triệt tiêu. Đường kẻ nối trong pill nav là ứng dụng đặc trưng của primitive này. ### Muted Link **Vai trò:** Link nội dòng trong body hoặc consent text Times 16px, #c6c6c6, gạch chân. Nằm trong đoạn văn bản sao chép ở cùng kích thước và line-height với văn bản xung quanh. Cách xử lý gạch chân màu #c6c6c6 (không phải màu xanh link mặc định) là lựa chọn đặc trưng — link có cảm giác như chú thích biên tập, không phải chrome tương tác. ## Do's and Don'ts ### Do - Sử dụng #000000 làm màu canvas duy nhất trên tất cả các section — không bao giờ giới thiệu gray fills, nền sáng hoặc surface lifts - Đặt tất cả UI labels bằng nbarchitekt chữ hoa ở 10–14px; dành riêng Times 16px serif cho paragraph body copy - Sử dụng hairline 1px màu #4d4d4d hoặc #ffffff để phân định khu vực UI thay vì background fills hoặc shadows - Chỉ áp dụng radius 500px cho connected pill navigation; sử dụng radius 5px cho tất cả các button khác, 12px cho bất kỳ panel container nào - Để 3D centerpiece làm chủ trường thị giác; đặt tất cả chrome (nav, modal) ở các góc với khoảng trống âm (negative space) rộng rãi - Chỉ sử dụng #343755 midnight violet cho cookie-consent accept button — không bao giờ mở rộng nó sang marketing CTAs, tags hoặc icons - Đặt button padding 1–6px dọc và 13–18px ngang — hệ thống ưu tiên các control compact, gần như phẳng ### Don't - Không giới thiệu background có màu, gradient hoặc surface fills — void-black canvas là bất khả thương lượng - Không sử dụng shadows hoặc hiệu ứng elevation để phân biệt các lớp UI; sử dụng borders và positioning thay thế - Không sử dụng system sans-serif fonts (Inter, Helvetica) cho labels — tính chất kiến trúc của nbarchitekt định nghĩa thương hiệu - Không áp dụng màu #343755 violet cho bất kỳ phần tử nào khác ngoài cookie-consent accept button - Không căn giữa các khối body copy lớn hoặc xếp chồng các section nhiều text — trang web ưu tiên thị giác, ít text - Không sử dụng nhiều hơn hai typeface trên một bề mặt duy nhất (nbarchitekt + Times cho body, hoặc nbarchitekt + Arial cho buttons) - Không thêm marketing CTAs, pricing tables hoặc feature grids — hệ thống thiết kế này phục vụ một portfolio nhập vai, không phải bề mặt sản phẩm ## Surfaces | Cấp độ | Tên | Giá trị | Mục đích | |-------|------|-------|---------| | 0 | Void | `#000000` | Canvas trang full-bleed, trường hạt, nền hero | | 1 | Instrument Panel | `#000000` | Modal và bề mặt UI nâng cao — cùng màu đen với canvas, được phân biệt bằng viền mỏng, không phải bằng fill | ## Elevation Elevation cố tình không có mặt. Thiết kế sử dụng màu đen phẳng thuần túy (#000000) cho cả canvas và bề mặt modal, chỉ phân biệt các lớp UI thông qua viền hairline 1px màu #4d4d4d và thông qua định vị không gian ở các góc. Đây là một lựa chọn có chủ đích, nhất quán với khái niệm void-canvas: bất kỳ shadow hoặc surface lift nào cũng sẽ ngụ ý một 'mặt phẳng nền' mâu thuẫn với thẩm mỹ đen vô tận. Modal và panel container có cảm giác như những vết cắt trong cùng một bóng tối, không phải thẻ nổi phía trên nó. ## Imagery Ngôn ngữ thị giác của trang bị chi phối bởi một centerpiece 3D được render bằng WebGL duy nhất: các vòng tròn đồng tâm trong suốt bao quanh lõi hình lục giác, phát ra các tia lửa hạt màu hổ phách và để lại các vệt ruy băng lỏng. Đây là chủ đề thị giác duy nhất — không có nhiếp ảnh, không có minh họa, không có ảnh chụp màn hình sản phẩm, không có đồ họa trang trí. Trường hạt xung quanh nó thưa thớt và mang tính khí quyển, không dày đặc thông tin. Tác phẩm 3D nằm ở trung tâm trên một void đen thuần khiết, chiếm khoảng một phần ba trung tâm của viewport, và hoạt động như cả hero và nội dung xung quanh liên tục. Iconography là tối thiểu hoặc không có; những gì UI tồn tại sử dụng text labels trong typeface kiến trúc nbarchitekt thay vì iconography. Tỷ lệ imagery-to-text cực kỳ cao về thị giác so với text — bản thân đối tượng 3D CHÍNH LÀ trang. ## Layout Layout là một canvas nhập vai full-bleed không có max-width container. Hero lấp đầy toàn bộ viewport như một void tối duy nhất tập trung vào artifact 3D. Chrome bị đẩy ra các góc tuyệt đối: connected pill nav nổi ở góc trên bên phải với một đường kẻ nối mỏng, và cookie consent neo ở góc dưới bên phải. Không có grid system, không có card layout, không có sidebar, không có hero-with-columns split. Nhịp điệu section được xác định bởi các scene full-viewport hơn là các dải dọc — trang đọc như một sân khấu tối liên tục duy nhất. Navigation là tối thiểu và liên tục (luôn hiển thị ở góc trên bên phải). Mật độ nội dung cực kỳ thấp: một artifact thị giác, hai nav labels, một consent panel. ## Agent Prompt Guide ## Quick Color Reference - text: #ffffff (chính), #c6c6c6 (mờ/links) - background: #000000 (canvas + panels) - border: #4d4d4d (hairline), #808080 / #999999 (viền button) - accent: #343755 (midnight violet — chỉ cookie accept) - primary action: không có màu CTA riêng biệt ## 3-5 Ví Dụ Component Prompts 1. **Connected Pill Nav**: Nổi góc trên bên phải. Hai label nbarchitekt 12px weight 700 chữ hoa màu trắng ('WORK' và 'CONTACT') được kết nối bằng một đường kẻ ngang 1px màu trắng. Container có border-radius 500px, không fill, background trong suốt. Padding 6px dọc, 13px ngang. 2. **Cookie Consent Panel**: Neo góc dưới bên phải với margin 20px. Border-radius 12px, viền 1px #4d4d4d, fill #000000, padding 16px. Body Times 16px màu trắng với line-height 1.88 có 'PRIVACY NOTICE' là link gạch chân màu #c6c6c6. Hai button: một violet filled (#343755, text trắng, radius 5px, nbarchitekt 13px) và một outlined ghost (trong suốt, viền 1px #999999, radius 5px, text trắng). 3. **Outlined Ghost Button**: Fill trong suốt, viền 1px #999999, border-radius 5px, text Arial hoặc nbarchitekt 13px chữ hoa màu trắng, padding 4px dọc và 18px ngang. 4. **Muted Inline Link**: Times 16px, #c6c6c6, gạch chân, nằm nội dòng trong một đoạn body paragraph Times 16px màu trắng với line-height 1.88. 5. **Label Tag**: nbarchitekt 10px weight 400 chữ hoa màu trắng, không background, không border, được sử dụng như một section marker độc lập với margin 6px đến các phần tử xung quanh. ## Similar Brands - **Resn** — Cùng canvas tối nhập vai với một artifact WebGL duy nhất làm chủ đề thị giác, chrome đẩy ra góc, text tối thiểu - **Locomotive** — Các trang web agency sáng tạo dark-mode với showcase thị giác full-bleed và typography UI sparse instrument-panel - **Tool** — Canvas đen vực thẳm với centerpiece 3D phát sáng, label kỹ thuật chữ hoa và hầu như không có chrome trang thông thường - **Unit9** — Thẩm mỹ agency nhập vai với một scene tối duy nhất, bầu không khí hạt và nav giảm xuống còn text mỏng + hairline - **Active Theory (các đồng nghiệp như Very Rare Surrounding)** — Micro-label bản vẽ kiến trúc trên nền void với WebGL 3D làm nội dung chính của trang ## Quick Start ### CSS Custom Properties ```css :root { /* Colors */ --color-void-black: #000000; --color-pure-white: #ffffff; --color-graphite-border: #4d4d4d; --color-steel-border: #808080; --color-fog-border: #999999; --color-ash-link: #c6c6c6; --color-midnight-violet: #343755; /* Typography — Font Families */ --font-nbarchitekt: 'nbarchitekt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 10px; --leading-caption: 1.2; --text-body: 14px; --leading-body: 1.5; --text-body-lg: 16px; --leading-body-lg: 1.88; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-bold: 700; /* Spacing */ --spacing-4: 4px; --spacing-6: 6px; --spacing-12: 12px; --spacing-13: 13px; --spacing-14: 14px; --spacing-16: 16px; --spacing-18: 18px; --spacing-28: 28px; /* Layout */ --card-padding: 12-18px; --element-gap: 6px; /* Border Radius */ --radius-md: 5px; --radius-xl: 12px; --radius-full: 500px; /* Named Radii */ --radius-panels: 12px; --radius-buttons: 5px; --radius-pillbuttons: 500px; /* Surfaces */ --surface-void: #000000; --surface-instrument-panel: #000000; } ``` ### Tailwind v4 ```css @theme { /* Colors */ --color-void-black: #000000; --color-pure-white: #ffffff; --color-graphite-border: #4d4d4d; --color-steel-border: #808080; --color-fog-border: #999999; --color-ash-link: #c6c6c6; --color-midnight-violet: #343755; /* Typography */ --font-nbarchitekt: 'nbarchitekt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Scale */ --text-caption: 10px; --leading-caption: 1.2; --text-body: 14px; --leading-body: 1.5; --text-body-lg: 16px; --leading-body-lg: 1.88; /* Spacing */ --spacing-4: 4px; --spacing-6: 6px; --spacing-12: 12px; --spacing-13: 13px; --spacing-14: 14px; --spacing-16: 16px; --spacing-18: 18px; --spacing-28: 28px; /* Border Radius */ --radius-md: 5px; --radius-xl: 12px; --radius-full: 500px; } ```