Notion
Một cuốn sổ tay bằng giấy ấm áp dưới ánh nắng mặt trời giữa trưa.
Giao diện của Notion trông giống như một cuốn sổ tay giấy quen thuộc dưới ánh sáng ban ngày: một nền màu kem ấm áp (#f6f5f4) tạo cảm giác dễ chịu khi chạm vào chứ không phải khô khan, kiểu chữ sans-serif rộng rãi tạo thêm điểm nhấn cho nội dung sản phẩm, và màu sắc được sử dụng như những dấu chấm câu tối giản—những "viên thuốc" màu đào làm nổi bật động từ, một màu xanh lam duy nhất làm điểm nhấn cho hành động chính, và một loạt các sắc thái nhấn nhá (san hô, hổ phách, xanh da trời, xanh nửa đêm) tô màu nền thẻ như những hình dán. Các thẻ được sắp xếp trên một nền với viền và góc mỏng—không có bóng, không có viền đen—giống như các phần có dòng kẻ của một cuốn sổ Moleskine. Hoạt ảnh vui nhộn và sống động, với các chuyển đổi mượt mà ở tốc độ 200ms và hoạt ảnh nhân vật uyển chuyển mang lại sức sống cho giao diện mà không cần phải trang trí quá mức.
Khi căn giữa, chiều rộng tối đa được giới hạn ở mức khoảng 1440px. Phần tử chính là một bố cục xếp chồng được căn giữa: một hàng biểu tượng → một tiêu đề lớn hai dòng với một viên thuốc màu được nhúng → một tiêu đề phụ → một hàng với hai nút kêu gọi hành động → một hình ảnh mô phỏng giao diện người dùng sản phẩm lớn. Bên dưới phần tử chính, các phần xen kẽ giữa lưới thẻ trắng và bảng nhấn màu sắc đầy đủ. Tường logo là một lưới một hàng được căn giữa gồm các logo đối tác ở dạng thang độ xám. Các khối tính năng sử dụng bố cục hai cột (văn bản ở bên trái, bảng màu ở bên phải), xen kẽ từ trái sang phải giữa các phần. Phần "Hỏi trợ lý của bạn theo yêu cầu" sử dụng lưới thẻ 2x2, trong đó thẻ trên cùng chiếm toàn bộ chiều rộng và hàng dưới cùng được chia thành hai cột bằng nhau. Khoảng cách giữa các phần khá rộng (~80px), tạo ra một nhịp điệu dọc hài hòa. Thanh điều hướng là một thanh trên cùng cố định cao 64px với các phần tử điều hướng được căn giữa và các nút hành động được căn phải.
Hình minh họa là yếu tố quan trọng hàng đầu, không sử dụng ảnh chụp. Ngôn ngữ hình ảnh được xây dựng dựa trên các biểu tượng phẳng, minh họa (các cạnh tròn trong các vòng tròn màu 2px), các yếu tố trang trí trừu tượng (các đường ngoằn ngoèo vẽ tay, lấp lánh, mũi tên, hình dạng hoa) và các mô phỏng giao diện người dùng của sản phẩm. Các biểu tượng xuất hiện trong cửa sổ chính dưới dạng một hàng ngang gồm bảy hình đại diện và được rải rác khắp trang như những dấu chấm câu vui nhộn. Ảnh chụp màn hình sản phẩm là những yếu tố hình ảnh "thực" duy nhất: chúng hiển thị giao diện Notion thực tế (bảng Kanban, chế độ xem tài liệu, bảng điều khiển tác nhân AI) với đầy đủ các yếu tố và dữ liệu thực. Mô phỏng sản phẩm trong cửa sổ chính có kích thước lớn, được căn giữa và tạo ra một bóng đổ duy nhất ngăn cách nó với khung vẽ. Không có ảnh chụp đời sống, không có ảnh có sẵn, không có hình ảnh 3D trừu tượng.
Bảng màu
Thương hiệu
- Notion Blue
#0075de— Yếu tố chính lấp đầy nút kêu gọi hành động (CTA), một điểm nhấn trong thanh điều hướng đang hoạt động, các nút hành động được tô màu là bảng màu duy nhất trong một hệ thống gần như đơn sắc có độ bão hòa đủ để được nhận biết như một công tắc.
Trung lập
- Paper Warmth
#f6f5f4— Màu nền trang, nền cửa sổ chính và nền các phần đều là những màu ấm, hơi ngả be, tạo cho hệ thống cảm giác quen thuộc, giống như máy chơi game analog. - Pure White
#ffffff— Bề mặt thẻ, các mảng nổi, nền logo, chữ tương phản trên nền thẻ tối màu. - Ink Black
#000000— Văn bản chính, liên kết điều hướng, tiêu đề - được sử dụng với độ trong suốt khác nhau (100%, 95%, 90%, 60%, 40%, 20%) để tạo cấu trúc phân cấp mà không cần thêm màu sắc mới. - Charcoal
#111111— Tùy chọn văn bản tối màu dành cho những khu vực giao diện người dùng mà màu đen tuyền sẽ trông quá chói. - Stone
#757575— Văn bản điều hướng phụ, văn bản hỗ trợ mờ, nhãn nút bị vô hiệu hóa - độ trong suốt của mực 60% - Graphite
#615d59— Văn bản chính có tông màu ấm - xám nâu, hài hòa với nền ấm áp.
Kiểu chữ
Từ 12 đến 96px · 10 bước
- NotionInter — thay thế: Inter · phác thảo 400, 500, 600, 700 · Phông chữ sans-serif chính là một phông chữ hình học theo phong cách nhân văn với những sắc thái tinh tế, được sử dụng ở cỡ chữ 400 cho văn bản chính, 500 cho giao diện điều hướng/người dùng và 600-700 cho tiêu đề. Tỷ lệ phông chữ sử dụng khoảng cách chữ âm mạnh ở các cỡ lớn hơn (-4,6px ở 96px, -2px ở 72px), điều này làm cho tiêu đề trông gọn gàng và tự tin hơn, thay vì thoáng đãng.
- Lyon Text — thay thế: Source Serif Pro · phác thảo 400 · Phông chữ serif dành riêng cho phần biên tập, được sử dụng cho các đoạn riêng biệt trong văn bản chính và phần giới thiệu, được sử dụng một cách tiết kiệm (bốn lần) để tạo cho kiểu chữ trọng lượng văn chương, tương tự như một trích dẫn trong bố cục tạp chí. Nó hoạt động như một điểm nhấn mang tính hệ thống hơn là một hệ thống phân cấp song song.
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 | 8px |
| Bán kính thẻ | 12px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 80px |
| Chiều rộng trang | 1440px |
AI sẽ xây dựng trang web của bạn theo phong cách Notion 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ự
- ElevenLabs — Một bộ ảnh minh họa với tông màu kem ấm áp và tiêu đề tinh tế. Một cuốn sổ tay theo phong cách Bauhaus – giấy màu trắng ngà, mực đen và điểm nhấn màu tím và cam duy nhất để trưng bày sản phẩm.
- Awesomic — Phông chữ in hoa bằng lưới kẽm với các dấu chấm câu màu cam gợi nhớ đến những mảnh giấy vụn.
- Monad — Tạp chí kỹ thuật biên tập về giấy da ấm
- Dub — Bảng điều khiển bằng giấy gạo mờ của Link
- Seline Analytics — Một chiếc bàn phân tích yên tĩnh trên nền giấy ấm áp.
- Anthropic — Một cuốn nhật ký khoa học thực địa trên giấy da ấm áp—bề mặt màu ngà dịu nhẹ, tiêu đề biên tập có chân chữ và một điểm nhấn bằng đất sét duy nhất chỉ xuất hiện khi cần hành động.
- Calendly — Mực xanh đậm trên nền đá cẩm thạch lạnh.
- Augen Pro — Cách bài trí màu trắng của Apple nổi bật với gam màu xanh điện nhẹ nhàng, tinh tế trong không gian đơn sắc.
- Antimetal — Một bản ghi chép biên tập trên giấy màu kem—một buổi sáng yên tĩnh tại một tạp chí khoa học, nơi sự tiết chế thể hiện sự tự tin và các nét chữ đảm nhiệm phần việc chính.
- Perk — Vôi điện trên giấy nướng ấm
- Ditto — Một xưởng vẽ ngập tràn ánh nắng tạo ra các mẫu hoa dại. Bề mặt màu kem ấm áp, màu vàng rực rỡ làm nền, mực màu xanh hải quân đậm, những hình dạng màu sắc tự nhiên nở rộ phía sau tác phẩm.
- Officevibe — Một tạp chí biên tập trên giấy màu kem ấm áp. Hãy tưởng tượng một bài luận sâu sắc về quản lý nhân sự, được trình bày như một sản phẩm—một kiểu chữ serif uốn lượn nhẹ nhàng trên giao diện màu xanh hiện đại.