Modal

Bảng màu

Thương hiệu

• Lime Pulse #7fee64 — Các yếu tố chính của nhận diện thương hiệu bao gồm logo, lời kêu gọi hành động chính (CTA), cách điền thẻ, trạng thái hoạt động và màu sắc cơ bản của hình minh họa.

Trung lập

• Phosphor White #ddffdc — Văn bản chính, màu tiêu đề, đường viền biểu tượng và văn bản tô màu nút là bề mặt dễ đọc chính.
• Void Black #000000 — Khung vẽ trang, lớp nền sâu nhất
• Ground Iron #181818 — Màu nền của nút chính, bề mặt thẻ ở các vùng tối, bề mặt cơ bản của giao diện người dùng.
• Carbon Veil #212525 — Các bề mặt nhô cao, nền hiển thị thông tin định vị, có màu sáng hơn một chút so với mặt đất.
• Circuit Border #485346 — Khung viền/khung mờ của hành động, đường kẻ mỏng tương tác chính, có màu xám xanh nhạt.
• Phosphor Blue-Black #1f2a33 — Các đường kẻ mảnh thứ cấp, vạch phân chia giữa các sọc tối màu.

Kiểu chữ

Từ 12 đến 64px · 8 bước

• Goga — thay thế: Inter Tight or Space Grotesk · phác thảo 400, 500 · Phông chữ tiêu đề và tiêu đề phụ – Được sử dụng cho tất cả các tiêu đề và thẻ H1–H4. Goga là một phông chữ sans-serif hình học tùy chỉnh với các khoảng trống hẹp và các đầu chữ hơi vuông. Độ đậm trung bình (500) được dành riêng để làm nổi bật các tiêu đề cấp thẻ; độ đậm bình thường (400) được sử dụng cho các tiêu đề chính và tiêu đề phần. Để truy cập các hình dạng ký tự thay thế xác định bản sắc của Modal, bộ kiểu 'ss01' của nó phải được kích hoạt. Khoảng cách chữ âm giảm dần từ -0.007em ở 48px xuống -0.017em ở 21px.
• Inter Variable — thay thế: Inter · phác thảo 400, 500 · Giao diện người dùng và nội dung chính – điều hướng, nút bấm, nội dung chính, nhãn, chân trang. Độ đậm trung bình (500) được sử dụng mặc định cho các phần tử tương tác và điều hướng; độ đậm bình thường (400) được sử dụng cho các đoạn văn. Khoảng cách giữa các chữ cái được giảm đáng kể ngay cả ở kích thước nhỏ (-0.026em ở 14px, -0.022em ở 16px), tạo cho giao diện mật độ cô đọng, giống như ở thiết bị đầu cuối. Đối với các dấu câu thay thế, nên bao gồm biến thể ký tự 'cv11'. Nhãn viết hoa toàn bộ ở kích thước 12px sử dụng khoảng cách chữ cái +0.05em để cân bằng mật độ nội dung chính.

Khoảng cách và hình thức

Phong cách tương tự

• Slash — Hầm chứa đồ lúc nửa đêm với sổ sách kế toán mạ vàng
• AgentQL — Cực quang trên bầu trời nhà ga vào ban đêm
• GitHub — Một bảng điều khiển không gian với các điểm điều khiển phát quang sinh học—một không gian làm việc tối tăm, huyền ảo, nơi một ánh sáng xanh duy nhất chỉ lối tiến về phía trước.
• Doppler — Ánh sáng tím trong hầm chứa lúc nửa đêm. Tấm vải bạt gần như đen kịt phát sáng với một tín hiệu màu oải hương duy nhất và một đèn xác nhận màu xanh lá cây, mọi bề mặt đều cong đủ để có thể nắm bắt.
• Basedash — Một thiết bị đầu cuối dữ liệu lúc nửa đêm với phông chữ mờ. Một đài quan sát tối tăm nơi các chỉ số phát sáng màu tím và xanh lục, các tiêu đề có chân chữ nổi lên trên nền nhiễu, và các nút hình viên thuốc màu trắng là những vật thể sáng duy nhất trong một căn phòng toàn bề mặt đen mềm mại.
• Superwhisper — Ánh cực quang tan dần trên nền kính đêm.
• Better Stack — Bảng điều khiển SRE nửa đêm
• Langbase — Bảng điều khiển Midnight Northern Lights
• Astro — Trung tâm điều khiển sứ mệnh không gian sâu với ánh sáng tím duy nhất phát ra từ một tinh vân.
• Wayfinder — Màn hình đen kịt với tiêu đề gần như không nghe thấy tiếng, lơ lửng phía trên hình minh họa động. Giao diện là thanh trượt điều chỉnh độ sáng chứ không phải bảng điều khiển.
• HashiCorp — Phòng điều khiển lúc nửa đêm với ánh đèn neon tím là một không gian kỹ thuật tối tăm, nơi một khối lập phương lục giác phát sáng đóng vai trò là điểm tham chiếu màu sắc duy nhất.
• Umbrel — Một hố lửa ấm cúng trong phòng máy chủ ban đêm—một căn phòng tối tăm nơi ánh sáng màu đào duy nhất làm nổi bật những gì thực sự quan trọng.