Cursor
Một xưởng làm giấy da ấm cúng, được thắp sáng bởi những than hồng đang cháy âm ỉ.
Cursor sử dụng kiểu chữ ấm áp, giống như giấy da: nền màu kem, chữ đen đậm và một điểm nhấn màu cam rực rỡ duy nhất kích hoạt các liên kết và lựa chọn thay vì lấp đầy các nút. Tiêu đề, được đặt bằng phông chữ CursorGothic với độ đậm 400, có khoảng cách giữa các chữ giảm dần khi kích thước tăng lên—sự uy quyền đạt được thông qua sự tiết chế và độ đậm chữ mỏng thay vì sự đậm nét. Bề mặt được giữ phẳng và giống như giấy, với các đường viền mỏng và bóng mờ màu xám ấm áp, mềm mại; các góc vẫn sắc nét với độ đậm 4px xuyên suốt văn bản. Phông chữ EB Garamond được sử dụng một cách chọn lọc cho các tiêu đề phụ và văn xuôi, trong khi berkeleyMono xử lý mã, thẻ và siêu dữ liệu, mang lại cho hệ thống một cá tính kiểu chữ giống như một tạp chí văn học hơn là một bảng điều khiển SaaS.
Chiều rộng tối đa: 1300px căn giữa, lề 24px. Thanh điều hướng trên cùng: Thanh tiêu đề trong suốt cao 52px với logo và biểu tượng thương hiệu ở bên trái, 4 liên kết điều hướng căn giữa, cụm "Đăng nhập / Liên hệ / Tải xuống" căn phải. Phần nổi bật: Tiêu đề căn trái + khối kêu gọi hành động kép với văn bản chạy từ trên cùng bên trái, sau đó là thẻ mô phỏng sản phẩm toàn chiều rộng trải dài toàn bộ chiều rộng của trang. Dải tin cậy: Một hàng ngang gồm 8 ô logo trên một dòng duy nhất trải rộng toàn bộ chiều rộng của phần. Các phần tính năng xen kẽ văn bản ở bên trái và ảnh chụp màn hình ở bên phải trong bố cục hai cột, mỗi cột 50/50, với nhịp điệu dọc 64-96px giữa các phần. Tất cả ảnh chụp màn hình tính năng đều là mô phỏng cửa sổ với kiểu dáng macOS giống hệt nhau. Chân trang: Lưới bốn cột các liên kết với biểu tượng thương hiệu ở bên trái. Các phần được phân tách bằng khoảng trống rộng rãi thay vì các đường phân cách - chính nền màu kem tạo nên sự phân tách.
Ảnh chụp màn hình sản phẩm chiếm vị trí trung tâm: các mô phỏng cửa sổ macOS lớn thể hiện hoạt động của Cursor IDE: các tab tệp, chế độ xem khác biệt, kế hoạch tác vụ, bảng điều khiển thiết bị đầu cuối và tích hợp Slack/chat. Mỗi mô phỏng cửa sổ được đóng khung bằng một thẻ #f2f1ed với độ tương phản mềm mại, ấm áp. Một bức ảnh phong cảnh mờ nhạt (núi/đường chân trời sa mạc) trải rộng ra ngoài phần chính, thêm sự ấm áp mà không cạnh tranh với giao diện người dùng. Logo của khách hàng ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) được trình bày dưới dạng chữ đơn sắc trong các ô Linen hình viên thuốc. Không có ảnh chụp người, hình minh họa hoặc các yếu tố đồ họa trang trí trừu tượng—tất cả trọng tâm hình ảnh đều tập trung vào giao diện người dùng và thương hiệu của sản phẩm. Các biểu tượng là các ký tự đơn sắc mỏng, được tô màu #7a7974 Ash, không bao giờ có màu sắc.
Bảng màu
Trung lập
- Ink
#26251e— Văn bản chính, nền nút hành động chính, văn bản điều hướng - một tông màu ấm, gần như đen, không bao giờ là màu #000 nguyên chất. - Parchment
#f7f7f4— Nền trang, phần chính của bức ảnh, có màu kem ấm áp giúp làm dịu độ tương phản và tạo cảm giác như in mực chứ không phải in kỹ thuật số. - Bone
#f2f1ed— Các bề mặt bằng bìa cứng và các vật chứa được nâng cao, có màu tối hơn một tông so với vải bố, tạo ra hiệu ứng "giấy trên giấy" nhiều lớp, không có viền. - Linen
#e6e5e0— Màu nền trung tính nhạt dùng cho các nút bấm trên bề mặt tối màu. - Stone
#cdcdc9— Viền mỏng, đường phân cách, vách ngăn tinh tế – đường kẻ 1px với tông màu ấm. - Mist
#a1a19f— Văn bản phụ trợ cấp ba, chú thích - nằm giữa văn bản tắt tiếng và văn bản phụ.
Kiểu chữ
Từ 12 đến 72px · 6 bước
- CursorGothic — thay thế: Inter · phác thảo 400, 500 · Phông chữ chính được sử dụng cho giao diện người dùng, tiêu đề, điều hướng, nội dung chính và thiết kế sản phẩm. Tiêu đề có độ đậm 400 điểm và khoảng cách giữa các chữ giảm dần (-0.005em ở 22px → -0.03em ở 72px) là một đặc điểm nổi bật của phông chữ: tiêu đề không bao giờ được in đậm. Các chức năng phông chữ ss08, ss09 và tnum kích hoạt các biến thể kiểu chữ và chữ số dạng bảng.
- EB Garamond — thay thế: Iowan Old Style · phác thảo 400, 500 · CursorGothic là một kiểu chữ serif chuyên nghiệp dùng cho các tiêu đề phụ, văn bản chính và dữ liệu dạng bảng, giúp giao diện trở nên trang nhã hơn.
- berkeleyMono — thay thế: ui-monospace · phác thảo 400, 500 · Monospace - một ngôn ngữ kỹ thuật dành cho các khối mã, đoạn mã dòng lệnh, siêu dữ liệu, đường dẫn tệp và nhãn của nhà phát triển.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | dày đặc |
| Bước cơ bản | 8px |
| Bán kính nút | 4px |
| Bán kính thẻ | 4px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 64-96px |
| Chiều rộng trang | 1300px |
AI sẽ xây dựng trang web của bạn theo phong cách Cursor 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ự
- Amplemarket — Một nơi làm việc ngập tràn ánh nắng mặt trời, điểm xuyết những mảnh giấy kim tuyến.
- Getharvest — Một chiếc bàn vào giờ hoàng hôn – một bức tranh màu kem ấm áp, những tấm bưu thiếp trắng treo trên tranh, và một ngọn lửa màu cam rực rỡ.
- Drive Capital — Poster phong cách retro cho chuyến đi đường dài, in trên giấy màu ấm.
- Wealthsimple — Nhà kho lót cashmere với hệ thống chiếu sáng kiểu phòng trưng bày.
- Huddle — Thẻ kiểm kê màu pastel trên giấy màu kem.
- Fuser — Những bức ảnh Polaroid rải rác trên bức tường làm việc của một nhà thiết kế.
- Campsite — Góc làm việc của biên tập viên ngập tràn ánh nắng - giấy màu kem ấm áp với một con dấu màu cam duy nhất.
- Redis Agency — Xưởng biên tập, mở cửa sau giờ làm việc, là một nơi tối om, nơi tất cả công việc xây dựng thương hiệu được thực hiện bằng phông chữ serif và một củ cải đỏ duy nhất.
- AI Product Generation — Studio chụp ảnh biên tập trên giấy trắng - tiêu đề làm bìa, màu cam để làm nổi bật nội dung biên tập.
- Getanchor — Sắc màu đất nung ấm áp trên nền kem phai màu do nắng.
- Flatfile — Một cuốn nhật ký dữ liệu tĩnh lặng trên giấy da ấm áp.
- Inthememory — Một bản vẽ kiến trúc trên đá cẩm thạch trắng với một nguồn sáng ấm áp duy nhất. Một phòng dữ liệu biên tập yên tĩnh, nơi mực màu xanh ngọc đậm và các nút điều khiển hình viên thuốc nổi bật trên bề mặt trắng tinh, chỉ bị phá vỡ bởi một vệt màu cam duy nhất.