Steep
Phân tích phông chữ Serif trên giấy ấm
Steep trình bày các phân tích dưới dạng nội dung biên tập—các tiêu đề chữ serif của Signifier nổi bật trên nền trắng gần như đơn sắc, và một điểm nhấn màu đào ấm áp duy nhất (#fbe1d1) làm nổi bật hệ thống gần như không màu. Trang này trông giống như một trang tạp chí sản phẩm: kiểu chữ viết tay lớn, không gian văn bản rộng rãi, các thẻ lớn với các cạnh bo tròn bán kính 24px, và các nút điều khiển hình viên thuốc nằm phẳng trên bề mặt. Các thành phần tạo cảm giác nhẹ nhàng và thanh thoát—bóng đổ tinh tế, đường viền mỏng, và màu sắc được sử dụng để nhấn mạnh chức năng (chú thích màu đào, chữ màu nâu đậm trên nền đào). Các bề mặt sản phẩm (bảng khu vực, sơ đồ kích hoạt, trình tạo AI) được trình bày dưới dạng các phần tử nổi xung quanh tiêu đề thay vì được lồng ghép bên trong khung bảng điều khiển.
Bố cục trang có chiều rộng tối đa 1200px, căn giữa, với các phần chính chiếm gần hết chiều rộng trang nhưng vẫn nằm trong khung chứa. Bố cục chính có tiêu đề căn giữa với phông chữ serif lớn, tiêu đề phụ và một cặp nút hình viên thuốc, được bao quanh bởi bốn thẻ mô tả sản phẩm nổi (bảng khu vực phía trên bên trái, thẻ đăng ký bên phải, sơ đồ kích hoạt phía dưới bên trái, trình chỉnh sửa AI phía dưới ở giữa) chồng lên một nền trắng với các khoảng cách khác nhau. Các phần xen kẽ giữa nền Trắng Giấy và Xám Thẻ, tạo nên nhịp điệu nhẹ nhàng mà không có sự tương phản mạnh. Các phần tính năng sử dụng bố cục hai cột gồm văn bản và giao diện người dùng với khoảng cách dọc lớn 80px. Thanh điều hướng là một thanh trên cùng trong suốt duy nhất (không có nền, viền hoặc bóng) với logo ở bên trái, các liên kết điều hướng ở giữa và hai lời kêu gọi hành động (liên kết văn bản + nút hình viên thuốc) ở bên phải. Mật độ bố cục tổng thể khá rộng rãi - trang "thở" giữa các phần và nội dung không bao giờ bị dồn vào các cạnh.
Thiết kế hình ảnh tập trung vào sản phẩm, không phải phong cách sống: các yếu tố giao diện người dùng nổi (bảng khu vực với dữ liệu năm hàng, biểu đồ đường thể hiện hoạt động trong tháng 8-11, vòng tiến độ hình tròn, trường nhập liệu AI) được sắp xếp như các ảnh chụp màn hình được cắt xén xung quanh tiêu đề bài viết. Không có ảnh chụp, hình minh họa hoặc đồ họa trừu tượng. Tất cả các yếu tố hình ảnh sản phẩm đều được đặt trên các thẻ nổi màu trắng với viền mỏng và bóng mờ. Các vòng tròn avatar có một chỉ báo hướng con trỏ nhỏ—một họa tiết trực quan báo hiệu tương tác thời gian thực. Bố cục chính là sự kết hợp giữa văn bản và giao diện người dùng, chứ không phải là một tiêu đề ở giữa với ảnh có sẵn.
Bảng màu
Trung lập
- Ink Black
#17191c— Văn bản chính, nền nút được tô kín và logo điều hướng là những bề mặt tối màu duy nhất trong hệ thống; tất cả các lời kêu gọi hành động và tiêu đề trong văn bản chính đều xuất hiện trên nền gần như đen này. - Paper White
#ffffff— Màu nền chủ đạo là màu chủ đạo của trang, bao gồm màu nền của trang in, màu chữ trên nút và màu nổi của thẻ, với tần số điểm khoảng 76. - Mist Gray
#f2f2f3— Bề mặt thẻ, hình nền bổ sung, lớp phủ trường nhập liệu—một lớp vô hình nằm dưới lớp giấy để nhúng nội dung. - Fog White
#fafafb— Thêm một lớp nền trang để tạo hiệu ứng xen kẽ giữa các phần và bề mặt khi di chuột - nằm cao hơn một chút so với mặt giấy để tạo ra những biến thể sọc tinh tế. - Slate Gray
#777b86— Màu liên kết, văn bản phụ mờ, văn bản chân trang - Một màu xám nhạt, dịu mát được đặt giữa văn bản chính và văn bản không thể hiển thị. - Ash Gray
#979799— Các nhãn bổ sung, thẻ danh mục (Tiếp thị, Tài chính, Bán hàng) - có màu nhạt hơn một bậc so với màu liên kết.
Kiểu chữ
Từ 15 đến 90px · 8 bước
- Signifier — thay thế: GT Sectra · phác thảo 400 · Một kiểu chữ serif dành cho tiêu đề và tựa đề—được sử dụng độc quyền cho H1/H2 với ba kích cỡ; độ đậm của chữ vẫn giữ ở mức 400 (thường) ở mọi kích thước, một lựa chọn đặc trưng: kiểu chữ serif tạo cảm giác nhẹ nhàng hơn là nổi bật như kiểu chữ đậm.
- Sohne — thay thế: Inter · phác thảo 400, 430, 450, 480, 500 · Phông chữ chính, giao diện và điều hướng rất linh hoạt, bao gồm mọi thứ từ siêu dữ liệu đến tiêu đề phụ; độ đậm nhạt tăng dần (430, 450, 480) tạo ra một hệ thống phân cấp tinh tế mà không cần chuyển sang chữ đậm hoàn toàn.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | trung bình |
| Bước cơ bản | 8px |
| Bán kính nút | 9999px |
| Bán kính thẻ | 24px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 80px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách Steep và điền đầy đủ thông tin vào đó.
- Đăng tải sản phẩm và bài viết qua các liên kết sau: Instagram, TikTok, Facebook.
- Chuyển nội dung từ trang web cũ của bạn—chỉ cần chỉ định địa chỉ.
- Thiết kế hiện đại trên nền tảng tốt nhất: React ( Next.js) với khả năng render phía máy chủ và tối ưu hóa SEO ngay từ đầu.
- Tối ưu hóa SEO hoàn toàn tự động cho kết quả tìm kiếm và đề xuất dựa trên mạng thần kinh.
Phong cách tương tự
- Newformcap — Tờ báo xã luận trong phòng thay đồ
- Claude — Một hiện vật được in trên giấy da ấm áp—mực trên giấy xương, đất sét là điểm nhấn màu sắc duy nhất.
- 11x– Digital workers — Một khung cảnh biên tập điện ảnh hoang tàn—những bức ảnh toàn cảnh phong cảnh được đặt cạnh những tiêu đề in chữ in hoa hoành tráng, trông giống như trang bìa của một tạp chí sang trọng.
- Revolut — Một tác phẩm biên tập đơn sắc dựa trên bức ảnh chụp những đám mây—mực trắng, cúc áo kiểu hộp thuốc, một vệt màu xanh duy nhất trong một thế giới toàn màu xám.
- Scheduling — Mực in biên tập trên giấy màu kem
- Titan — kho lưu trữ đơn sắc tông ấm
- Programa — Một xưởng thiết kế Thụy Sĩ vào giữa trưa. Bức tường trưng bày màu trắng được chiếu sáng bởi một chiếc đèn bàn màu vàng duy nhất—mọi thứ đều mang sắc thái xám cho đến khi một nút bấm, biểu tượng hoặc điểm nhấn nào đó thu hút sự chú ý, và rồi điểm nhấn màu vàng duy nhất đó định hình toàn bộ căn phòng.
- Sana Agents — Ánh nhũ xanh lá cây trên nền trắng trong bài viết biên tập
- Visual — Ấn phẩm samizdat ấm áp. Giấy màu kem, áp phích chữ có chân, ghi chú bên lề đen trắng, một bút dạ vàng.
- Midday — Tờ rơi biên tập trên giấy da - Tiêu đề chân chữ 72px trên nền màu đá ấm, nội dung chính không chân chữ có khoảng cách, các nút điều khiển hình viên thuốc, không có bóng
- Chat for impact — Một phòng khám màu xanh lá cây rừng với các phòng được sơn màu pastel.
- Handhold — Giấy da ấm áp bên dưới những nét chữ mảnh mai gần như không nghe thấy – một bố cục biên tập được sắp chữ thủ công không gây nhiễu màu sắc, nơi phông chữ serif 200 điểm tinh tế nhất truyền tải trọn vẹn ý nghĩa.