Caldera

Bảng màu

Thương hiệu

• Ember #fc5000 — Các nút hành động chính, thẻ thống kê và các điểm nhấn hình ảnh quan trọng là những điểm nhấn màu sắc nổi bật duy nhất; sự phong phú của chúng trên nền tông màu xám ấm áp tạo nên cảm giác khẩn trương mà không cần thêm các yếu tố trang trí khác.
• Plasma Violet #524ae9 — Nền gradient halftone chính, một bề mặt thẻ bổ sung - Được sử dụng gần như độc quyền trong mẫu chấm chính và trên một thẻ chuyên dụng; không bao giờ được sử dụng cho các thẻ điều khiển.

Trung lập

• Sulfur #f5f28e — Nền của các biểu tượng thẻ và danh mục, những điểm nhấn nhỏ, có màu vàng nhạt được sử dụng để chỉ ra các danh mục bài đăng trên blog và thông báo chương trình.
• Limestone #f7f6f2 — Các bề mặt thẻ, nền khối nội dung và màu nền của các nút bổ sung đều có tông màu trắng nhạt hơn, ấm hơn, giúp các yếu tố nổi bật trên nền trang.
• Pumice #e2e2df — Màu nền chính của trang là màu xám trung bình ấm áp, đóng vai trò là nền tảng cho mỗi phần; nó hơi tối hơn so với bề mặt giấy, cho phép phân tách tinh tế giữa hình ảnh và nền mà không tạo bóng.
• Obsidian #070607 — Văn bản chính, tiêu đề, văn bản liên kết và khung nút gần như có màu đen với một chút sắc ấm khó nhận thấy, phù hợp với màu ấm của nền tranh.
• Chalk #ffffff — Văn bản trong các vùng tối, văn bản nhập trên nền tối, lớp phủ có độ tương phản cao - Màu trắng tinh khiết chỉ được sử dụng khi cần độ tương phản tối đa với bề mặt tối.

Kiểu chữ

Từ 12 đến 189px · 10 bước

• PP Neue Corp Compact — thay thế: Bebas Neue · phác thảo 400 (Ultrabold cut) · Tất cả tiêu đề và văn bản hiển thị. Một phông chữ được thiết kế riêng, cô đọng và cực đậm mang lại cho các tiêu đề vẻ mạnh mẽ, đậm chất công nghiệp và biển hiệu. Kích thước 189px trong khối chính phản ánh phong cách đặc trưng của thương hiệu: cô đọng, gần như mang tính cấu trúc hơn là kiểu chữ. Các thiết lập "ss06" và "ss10" kích hoạt các dạng chữ và khoảng cách xen kẽ để tạo ra nhịp điệu mạnh mẽ và cô đọng hơn. Khoảng cách chữ dương (+0.02em) là điều bất thường đối với kích thước hiển thị và giúp tránh cảm giác văn bản bị chật chội ở kích thước 80–189px.
• DM Sans — thay thế: Inter · phác thảo 500 (Medium only — never Regular or Bold) · Văn bản chính, các liên kết điều hướng, nhãn nút và tiêu đề phụ có kích thước tối đa 30px. Độ đậm phông chữ trung bình được lựa chọn một cách có chủ ý—phông chữ thường sẽ trông quá mảnh so với phông chữ tiêu đề đậm, còn phông chữ đậm sẽ cạnh tranh với nó. Phông chữ DM Sans tạo ra một sự tương phản mang tính nhân văn, hơi hướng hình học với phông chữ tiêu đề mang hơi hướng công nghiệp.
• System sans-serif — thay thế: Inter · phác thảo 400 · Chú thích, siêu văn bản, ngày tháng, thẻ nhỏ. Chỉ được sử dụng ở kích thước 12px, nơi mà trọng lượng và khả năng nhận diện thương hiệu ít quan trọng hơn so với việc tiết kiệm kích thước.

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

Phong cách tương tự

• teenage engineering — Danh mục sản phẩm công nghiệp về đèn chiếu sáng studio - sản phẩm là đối tượng duy nhất nổi bật trên trang, và mọi thứ khác đều được thảo luận xung quanh nó.
• basement — Một máy in trống rỗng lúc 3 giờ sáng – những phông chữ khổng lồ, nén chặt trải dài trên nền đen kịt, một vệt sáng màu cam duy nhất trên thanh điều hướng, mọi thứ khác đều trắng hoặc xám lờ mờ.
• amra — Một quả cầu óng ánh trên nền trắng—màu tím oải hương là điểm nhấn màu sắc duy nhất trên một trang gần như hoàn toàn không màu, và quả cầu chuyển màu đơn lẻ này đảm nhiệm vai trò mà hình minh họa chính thường làm.
• Stink Studios — Một xưởng phim lúc nửa đêm - máy chiếu kêu vo vo, căn phòng tối om, chỉ có cuộn phim được chiếu sáng.
• Andrei Rybin — Sổ phác thảo đơn sắc là một loại sổ tay thiết kế trong đó màn hình điện thoại được gắn vào một bức tường trắng giống như các bản in ảnh.
• Uniswap Cup — Buổi phát sóng cuộc thi thể thao điện tử diễn ra trên một trang web mô phỏng - một bút dạ màu hồng vạch ra một lưới gồm các ô vuông màu trắng và các đường mỏng.
• Freytag Anderson — Màn chiếu phim mở ra chỉ với một từ duy nhất. Một hình ảnh chuyển động khổng lồ chiếm trọn màn hình, tên thương hiệu nằm ở góc như một tiêu đề, và không có gì khác làm xao nhãng.
• Integrated Biosciences — phòng thí nghiệm phát quang sinh học lúc nửa đêm
• Vercel — Thiết bị đầu cuối được in trên giấy trắng.
• Mintlify — Một khu vườn mây phía trên chiếc bàn kính. Bầu trời vẽ tay và hình ảnh tư liệu được đóng khung cùng nhau—nơi duy nhất mà màu sắc và ý tưởng giao thoa trước khi trang giấy chìm vào gam màu trắng tĩnh lặng.
• Gleap — Một không gian làm việc được trang trí bằng tông màu kem ấm áp với điểm nhấn màu than chì—một studio nơi những chấm mực đen mờ dường như lơ lửng trên nền vải lanh.
• ClickUp — Một bảng điều khiển mạnh mẽ trên nền đá cẩm thạch trắng. Trang này là một tài liệu quảng cáo sản phẩm cho một công cụ năng suất, vì vậy ngôn ngữ hình ảnh được lấy cảm hứng từ chính sản phẩm đó: danh sách dày đặc, chỉ báo trạng thái, nhóm hình đại diện và các câu chữ in đậm trông giống như một bản mô tả sản phẩm được trưng bày.