Letters
Một cuộc hẹn buổi sáng tại một phòng khám ngoài trời - một chiếc bàn trắng tinh dưới trần nhà màu xanh nhạt, ngổn ngang những dụng cụ phẫu thuật màu xanh lam.
Letters là một công cụ viết thư y tế bắt đầu với phần tiêu đề hình bầu trời mở chuyển sắc – một dải màu xanh lam nhẹ nhàng, tạo nên bầu không khí tĩnh lặng, mang tính chuyên môn – trước khi chuyển sang không gian làm việc màu trắng sạch sẽ. Hệ thống được thiết kế theo phong cách đơn sắc: một nền trắng sạch, văn bản gần như đen (#070709), các nút kêu gọi hành động hình viên thuốc màu tối và các thẻ tròn nổi trên những bóng mờ tinh tế. Một màu xanh lam sáng duy nhất (#2597d0) được dành riêng cho các dấu câu chức năng – biểu tượng, đồ họa siêu nhỏ, trình phát dạng sóng – không bao giờ được sử dụng cho các nút hoặc các vùng tô màu lớn. Kiểu chữ sử dụng Open Runde, một kiểu chữ sans-serif hình học nhân văn với khoảng cách chữ âm mạnh ở kích thước màn hình lớn hơn (-0.04em ở 80px), giúp nén các tiêu đề thành các khối rõ ràng. Các thành phần tạo cảm giác nhẹ nhàng, giống như một dụng cụ y tế: viền mỏng, khoảng cách thẻ rộng rãi, các nút hình viên thuốc và việc sử dụng độ cao một cách tinh tế cho phép phần tiêu đề hình bầu trời thực hiện nhiệm vụ truyền tải cảm xúc.
Trang chủ có hiệu ứng chuyển màu xanh da trời trải rộng toàn bộ chiều rộng trang, với tiêu đề và phụ đề được căn giữa, cùng nút kêu gọi hành động ở phía dưới. Nó chuyển tiếp mượt mà sang khu vực nội dung màu trắng với khoảng cách rộng rãi giữa các phần (80-120px). Các phần tính năng sử dụng lưới hai cột gồm các thẻ lớn, bo tròn (bán kính 18-32px) có kích thước bằng nhau. Tiêu đề các phần luôn được căn giữa, trong một cột duy nhất, phía trên lưới thẻ. Thanh điều hướng là thanh trên cùng màu trắng cố định với cụm liên kết được căn giữa và các nút đăng nhập được căn phải. Nhịp điệu tổng thể là một dải chính duy nhất, tạo cảm giác dễ chịu, sau đó xen kẽ các phần màu trắng và #f5f5f5 với khoảng cách thở dọc nhất quán. Không có thanh bên, không có menu lớn, không có bố cục bất đối xứng — trang web tạo cảm giác như một cột đối xứng, tĩnh lặng.
Thiết kế hình ảnh gần như tập trung hoàn toàn vào giao diện người dùng của sản phẩm—không có ảnh minh họa phong cách sống, không có hình ảnh 3D trừu tượng. Ngôn ngữ hình ảnh được xây dựng xung quanh các thẻ sản phẩm thể hiện giao diện gốc của ứng dụng: so sánh tài liệu "Trước" và "Sau", khu vực tải với đường viền chấm, và trình phát âm thanh dưới dạng sóng âm. Yếu tố hình ảnh mang tính chất không gian duy nhất là hiệu ứng chuyển màu bầu trời trong hình ảnh chính. Các biểu tượng là các biểu tượng đường thẳng phẳng, đơn sắc #2597d0 (phong bì, micro, dấu tích) với độ dày đường kẻ đồng nhất, không có biến thể tô màu. Phong cách minh họa được tiết chế: các mô hình sản phẩm được hiển thị trên nền trắng, xoay nhẹ để tạo chiều sâu, không bao giờ nghiêng quá mạnh. Phông chữ viết tay (The Doctor) là yếu tố hữu cơ/thủ công duy nhất, chỉ được sử dụng để gợi lên nét chữ viết tay mang tính chuyên môn trên thẻ "Trước".
Bảng màu
Thương hiệu
- Surgical Blue
#2597d0— Các biểu tượng, biểu tượng micro, trình phát sóng âm thanh và các điểm nhấn chức năng nhỏ tạo nên một nốt nhạc thống nhất xuyên suốt giao diện.
Trung lập
- Obsidian
#070709— Phần nội dung chính, các nút kêu gọi hành động được tô màu và các yếu tố giao diện người dùng tối màu—màu gần đen được chọn thay vì màu #000 thuần túy để làm giảm độ tương phản với nền trắng. - Paper White
#ffffff— Nền trang, bề mặt thẻ và văn bản nút là khung chính cho tất cả các phần bên dưới phần tử chính. - Cloud Gray
#f5f5f5— Các bề mặt thẻ bổ sung và nền của các phần giúp phân tách các khối chức năng khỏi khung vẽ chính. - Sky Tint
#d7e6f5— Màu sắc của khung bìa cứng và tông màu xanh nhạt gần như không thể nhận thấy của bề mặt tạo nên cảm giác về không gian, thay vì sự xám xịt. - Charcoal
#60606c— Văn bản chính, văn bản phụ và đường viền mờ - màu trung tính chủ đạo cho nội dung không phải tiêu đề. - Slate
#8b8b8b— Văn bản nhỏ và các vùng biên giới không hoạt động - được sử dụng để chỉ vị trí và đảm bảo khả năng tiếp cận cho người khuyết tật.
Kiểu chữ
Từ 12 đến 80px · 8 bước
- sans-serif — thay thế: Inter · phác thảo 400, 700 · sans-serif - được tìm thấy trong dữ liệu đã trích xuất nhưng không được AI mô tả.
- Open Runde — thay thế: Inter Tight · phác thảo 400, 500, 600, 700, 900 · Phông chữ chính cho tiêu đề và điều hướng là phông chữ nhân văn hình học, với khoảng cách chữ hẹp ở kích thước lớn; -0.04em ở 80px sẽ nén tiêu đề thành một khối duy nhất, rõ nét. Sử dụng cho tất cả các tiêu đề, điều hướng và văn bản lớn.
- Inter — thay thế: system-ui · phác thảo 400, 500 · Văn bản phụ và giao diện người dùng – được sử dụng cho các tiêu đề nhỏ, các yếu tố điều hướng và các liên kết nội tuyến khi cần nhịp điệu đọc trung tính hơn. Kết hợp với Open Runde để tạo độ tương phản phân cấp.
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 | 12-16px |
| Bán kính nút | 100px |
| Bán kính thẻ | 18px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 80-120px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách Letters 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ự
- Integrated Biosciences — phòng thí nghiệm phát quang sinh học lúc nửa đêm
- 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.
- Render — Thiết kế sử dụng chất liệu nhôm phay xước. Giao diện mang lại cảm giác như một bản vẽ kỹ thuật hình học gọn gàng – khoảng trắng, những đường nét mảnh và một đường màu tím duy nhất thu hút sự chú ý vào các thao tác.
- Grafbase — Bản vẽ kỹ thuật trên đá cẩm thạch lạnh
- Slash — Hầm chứa đồ lúc nửa đêm với sổ sách kế toán mạ vàng
- Modal — Một thiết bị đầu cuối phát quang trong phòng máy chủ tối om - nguồn sáng duy nhất là màu xanh lá cây sáng.
- Whimsical — Mực màu mận đậm trên nền tím oải hương — một cuốn sổ tay sáng tạo có thể dùng như bảng trắng kỹ thuật.
- AgentQL — Cực quang trên bầu trời nhà ga vào ban đêm
- Alveos One — Một chốn ẩn náu ấm cúng được làm từ những viên đá sông – một phòng thiền yên tĩnh, ánh sáng dịu nhẹ, nơi một vật thể bằng than chì duy nhất nằm trong ánh sáng hổ phách mềm mại.
- 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.
- Buddy — Bản vẽ kỹ thuật trên giấy kẻ ô. Bề mặt giấy trắng được kẻ một lưới ô vuông gần như không nhìn thấy được, bằng mực gần như đen, với các vạch màu xanh lá cây huỳnh quang và các nét vẽ chuyển màu óng ánh.