Column
một cuốn sổ màu xanh đậm dưới ánh bình minh mát mẻ
Giao diện Column sử dụng màu xanh hải quân đậm, mang tính chuyên nghiệp trên nền gần như trắng: trang web tạo cảm giác đây là một sản phẩm ngân hàng mạnh mẽ trước tiên, và sau đó mới là một sân chơi dành cho nhà phát triển. Màu sắc thương hiệu không phải là một màu duy nhất, mà là một cặp màu phối hợp – xanh hải quân #111a4a cho cấu trúc nghiêm túc, xanh bạc hà #44b48b cho dữ liệu và mã – với một màu cam ấm (#ec652b) được dành riêng cho các bề mặt nhấn mạnh như thẻ Brex. Kiểu chữ chủ yếu là SuisseIntl, một kiểu chữ sans serif hình học được sử dụng trên toàn bộ dải độ đậm từ 300 (liên kết) đến 600 (hiển thị), mang lại cho hệ thống một phong cách tinh tế, mang tính biên tập mà hầu hết các công ty fintech đều thiếu. Các thẻ nổi trên bề mặt trắng lớn với các bóng mờ tinh tế, nhiều lớp; hầu hết các yếu tố giao diện đều phẳng, chỉ có chiều sâu xuất hiện ở những nơi thẻ cần tạo cảm giác như một vật thể vật lý (các tiện ích giao dịch, mô hình sản phẩm). Mã và dữ liệu tài chính được trình bày bằng màu đơn sắc, màu xanh ngọc lam – một tín hiệu trực quan cho thấy đây là một ngân hàng được xây dựng bởi các kỹ sư dành cho các kỹ sư.
Trang web có cấu trúc toàn chiều rộng, căn giữa với lề rộng hai bên (64–15 cm trên máy tính để bàn). Màn hình chính được chia làm hai phần: tiêu đề và các lời kêu gọi hành động được căn trái ở khoảng cách 25 cm, trong khi tiện ích giao dịch nổi được đặt ở bên phải ở khoảng cách 55 cm trên nền bản đồ halftone. Bên dưới màn hình chính, các phần xen kẽ giữa màu trắng (4 cm) và màu vải sáng (5 cm) với khoảng cách giữa các cột dọc là 6 cm. Nội dung được sắp xếp theo một lưới 6 cột duy nhất: các khối văn bản chiếm 4 cột (7 cm), thẻ hình ảnh/sản phẩm chiếm 5–6 cột, với độ lệch có chủ ý so với lưới. Các phần mô tả tính năng sử dụng bố cục 2 cột: văn bản ở bên trái, sản phẩm ở bên phải. Phần thống kê độ tin cậy được chia thành lưới 4 cột trải rộng toàn bộ chiều rộng của trang. Logo khách hàng được đặt trong một hàng căn giữa duy nhất với khoảng cách giữa các cột là 48px. Chân trang có bố cục hai cột nhỏ gọn. Thanh điều hướng là một thanh cố định, cao 62px, trong suốt nằm phía trên màn hình chính với nền mờ dần thành màu trắng khi bạn cuộn chuột. Không có thanh bên hay menu lớn – các menu thả xuống chỉ là các menu mũi tên đơn giản.
Phong cách hình ảnh tối giản và chức năng—Column hoàn toàn tránh sử dụng ảnh có sẵn. Ngôn ngữ hình ảnh được xây dựng trên ba nguồn: (1) hình minh họa dữ liệu SVG, cụ thể là bản đồ thế giới chấm halftone, được hiển thị với gradient từ màu chàm sang màu cam sang màu ngọc lam, tạo ra bầu không khí quy mô toàn cầu phía sau yếu tố chính; (2) bố cục thẻ sản phẩm—các widget nổi hiển thị số dư tài khoản, chi tiết chuyển khoản và đoạn mã JSON trên thẻ trắng với bóng đổ ấn tượng; (3) hình ảnh biểu đồ—biểu đồ nến hoặc biểu đồ cột màu ngọc lam với các đường nối mỏng được sử dụng trong phần tin cậy/thống kê. Bản đồ halftone là một yếu tố hình ảnh đặc trưng—gradient của nó chuyển từ #d65620 (cam) qua màu tím, xanh lam, xanh da trời, ngọc lam và vàng, tạo ra một quang phổ thống nhất toàn bộ bảng màu thương hiệu trên một bề mặt trang trí duy nhất. Các biểu tượng có độ dày đường viền đồng nhất từ 1,5–2px trong các biến thể #232730 hoặc #a9acb6, với màu nền cho trạng thái hoạt động. Không có ảnh chụp phong cách sống, không có hình ảnh 3D trừu tượng — sự hạn chế này là có chủ ý để tập trung sự chú ý vào sản phẩm và dữ liệu.
Bảng màu
Thương hiệu
- Indigo Navy
#111a4a— Màu sắc chủ đạo của thương hiệu được sử dụng cho các nút kêu gọi hành động đã được tô màu, trạng thái điều hướng đang hoạt động, tiêu đề và logo. Màu tím xanh đậm mang đến cho trang web một sắc đen mạnh mẽ nhưng vẫn sang trọng; khi kết hợp với chữ trắng, nó tạo ra nút bấm nổi bật nhất trên trang web. - Seafoam 600
#44b48b— Màu mã và dữ liệu là màu thương hiệu được sử dụng cho các khóa JSON, định danh và giá trị tài chính trong các đoạn mã. Nó cũng được sử dụng cho các điểm dữ liệu trong biểu đồ và hình ảnh trực quan về sự tăng trưởng. - Seafoam 700
#167e6c— Một sắc thái xanh lục đậm hơn được sử dụng cho đường viền, đường kẻ biểu đồ và các điểm nhấn biểu tượng trong ngữ cảnh dữ liệu. Điều này giúp làm nổi bật thang màu xanh lục nhạt trên nền tối hơn. - Seafoam 400
#94efb7— Đoạn mã được tô sáng chứa các giá trị chuỗi, URL và điểm cuối API trong các khối mã. Màu xanh lục nhạt nhất trông giống như một phông chữ đơn cách với sắc thái hơi xanh lục. - Deep Sea
#023247— Đường viền trang trí và màu nhấn của biểu đồ là màu xanh ngọc đậm, thường được sử dụng trong các hình minh họa SVG và trực quan hóa dữ liệu, cùng với thang màu xanh lục nhạt.
Trung lập
- Midnight Ink
#011821— Nền tối và chữ nổi bật – nền thẻ sản phẩm, chữ chính có độ tương phản cao. Gần với màu xám với sắc xanh lục nhạt; được sử dụng làm nền cho chế độ tối khi cần đảo ngược màu một phần nào đó. - Slate Ink
#3b3e47— Tiêu đề phụ và văn bản chính có tông màu ấm hơn một chút so với Midnight Ink, được sử dụng ở những nơi mà màu đen tuyền sẽ quá gắt trên nền sáng. - Steel
#7c7f88— Văn bản chính và văn bản liên kết chủ yếu sử dụng một màu trầm (được sử dụng 245 lần trong văn bản chính). Một màu xám xanh trung tính tạo cảm giác bình tĩnh, không bao giờ gây cảm giác nhạt nhòa. - Fog
#a9acb6— Các đường viền biểu tượng, đường viền phụ và văn bản giữ chỗ. Màu xám trung bình giúp phân tách văn bản mà không làm lu mờ nó. - Mist
#cbcccf— Văn bản chính—chữ ký, tuyên bố miễn trừ trách nhiệm và chữ in nhỏ—vẫn đọc được trên nền trắng, nhưng về mặt thị giác thì kém nổi bật hơn. - Silver Lining
#e3e4e8— Viền thẻ, viền trường nhập liệu, đường phân chia. Màu sắc tinh tế, mang tính cấu trúc này được sử dụng ở những nơi cần phân tách hai bề mặt mà không tạo bóng.
Kiểu chữ
Từ 10 đến 60px · 10 bước
- SuisseIntl — thay thế: Inter · phác thảo 300, 400, 500, 600 · Phông chữ chính – được sử dụng cho tất cả tiêu đề, văn bản chính, nút bấm, điều hướng, liên kết và văn bản thẻ. Phông chữ sans serif hình học độc đáo mang đến cho Column một phong cách biên tập đặc trưng, giúp công ty nổi bật so với các công ty fintech khác chỉ sử dụng phông chữ Inter-only. Độ đậm của phông chữ là 600 ở kích thước 52–60px cho tiêu đề, 500 cho tiêu đề phụ, 400 cho văn bản chính và 300 cho các liên kết có độ nhấn mạnh thấp.
- SuisseIntlMono — thay thế: JetBrains Mono · phác thảo 400 · Một phông chữ đơn cách tương tự như SuisseIntl, được sử dụng cho các nhãn kỹ thuật, mã định danh API và dữ liệu nhúng trong các phần tử giao diện người dùng. Nó duy trì tỷ lệ tương tự như SuisseIntl, do đó văn bản đơn cách và văn bản có tỷ lệ phù hợp sẽ căn chỉnh chính xác trong các ngữ cảnh kết hợp.
- SFMono — thay thế: Fira Code · phác thảo 400 · Hiển thị đoạn mã – được hiển thị trong các ví dụ JSON và các khối tài liệu API. Màu xanh lục nhạt được sử dụng để phân biệt trực quan giữa mã và văn bản giao diện người dùng.
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ẻ | 8px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 72px |
| Chiều rộng trang | 1200px |
AI sẽ xây dựng trang web của bạn theo phong cách Column 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ự
- dope.security — Nhà ga lúc nửa đêm với đèn hiệu màu tím
- Leonardo — Một phòng trưng bày biên tập đảo ngược. Một bảo tàng tường đen nơi các tiêu đề màu tím đóng vai trò như những tác phẩm sắp đặt trên tường, và các bức chân dung do AI tạo ra được treo thành một lưới dày đặc bên dưới.
- VEED — Bức tường trưng bày màu trắng với các nút đèn neon màu xanh lá cây.
- Craft Docs — Một bức tranh ghép kỹ thuật số dành cho album ảnh lưu niệm. Thiết kế này gợi nhớ đến một cuốn album ảnh lưu niệm được trau chuốt tỉ mỉ, nơi các ghi chú kỹ thuật số được sắp xếp có cấu trúc kết hợp với các kết cấu mềm mại, tự nhiên.
- Letter — Một phòng trưng bày tư nhân với những hiện vật lấp lánh được tìm thấy trong kho. Một không gian triển lãm tường đen, nơi những dòng chữ in hoa nổi bật trên những tác phẩm điêu khắc mạ crôm trên những bức tường màu của phòng trưng bày.
- Railway — Chuyến tàu tốc hành vũ trụ lúc nửa đêm. Một hành trình êm đềm, đầy hứng khởi xuyên qua không gian tối tăm, ngập tràn sao trời, được dẫn đường bằng những tín hiệu rõ ràng.
- Garden Eight — Một bài xã luận hoành tráng trên giấy màu kem. Tiêu đề chữ serif 215px nổi bật trên nền giấy da ấm áp, được bao quanh bởi các hình khối điêu khắc lơ lửng và khoảng trống gợi nhớ đến không khí biển – trang này mang cảm giác giống bìa một chuyên khảo nghệ thuật hơn là bảng điều khiển ô tô.
- Steep — Phân tích phông chữ Serif trên giấy ấm
- 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
- AI for Business — Phòng trưng bày theo phong cách kiến trúc thô mộc với tông màu xám ấm áp.