ElevenLabs

Bảng màu

Thương hiệu

• Violet Spark #0447ff — Nhấn mạnh hình ảnh sản phẩm - Chỉ xuất hiện trong các hình minh họa về không gian âm thanh và các biểu tượng sản phẩm trang trí; không bao giờ được sử dụng cho các yếu tố giao diện.

Trung lập

• Eggshell #fdfcfc — Bề mặt trang, các nút bấm và bề mặt thẻ có màu ấm, hơi kem, thay vì màu trắng tinh, để tránh hiện tượng chói lóa trên màn hình kỹ thuật số và mang lại cho trang web cảm giác tĩnh lặng như trên giấy.
• Warm Taupe #f5f3f1 — Các dải phân cách, thẻ trang trí và một lớp bề mặt bổ sung – sâu hơn một bậc so với bề mặt mờ – tạo ra sự phân tách liền mạch, tinh tế.
• Stone #ebe8e4 — Các đường viền mỏng, đường phân cách và nền biểu tượng có màu xám ấm áp, nằm giữa màu nâu nhạt và xám trung bình mà không tạo cảm giác lạnh lẽo.
• Ink #000000 — Dù là văn bản chính, nút bấm có viền, thanh điều hướng hay liên kết, màu đen tuyền đóng vai trò là nền tảng cho bảng màu ấm áp và tạo ra sự tương phản sắc nét duy nhất trong hệ thống.
• Graphite #44403b — Văn bản chính, tiêu đề phần - một màu xám đậm ấm áp tinh tế dành cho những đoạn văn cần nổi bật mà không quá chói mắt như màu đen.
• Smoke #777169 — Văn bản chính, các mô tả ngắn gọn và chú thích đều có màu xám trung bình ấm; tạo nên phong cách chủ đạo, dễ đọc nhưng vẫn trang nhã cho các tấm thẻ và văn bản theo chủ đề.

Kiểu chữ

Từ 10 đến 48px · 8 bước

• Waldenburg — thay thế: Inter (300) or Söhne Light · phác thảo 300 · Chỉ dùng cho tiêu đề và các yếu tố thiết kế. Được sử dụng ở định dạng 48/36/32px với độ đậm phông chữ 300 — một phông chữ siêu nhẹ là không phổ biến; hầu hết các trang web sử dụng độ đậm 600-700; phông chữ tinh tế này truyền tải sự uy quyền thông qua sự tiết chế. Khoảng cách chữ hẹp -0.02em tạo ra sự khít sát hơn giữa các chữ cái ở kích thước lớn hơn. Các lựa chọn thay thế: "Inter" với độ đậm 300 hoặc "Söhne" với độ đậm nhẹ hơn như một lựa chọn cao cấp.
• Inter — thay thế: Inter or system-ui · phác thảo 400, 500 · Mọi thứ nằm ngoài màn hình: văn bản chính, điều hướng, nút, liên kết, nhãn, trường nhập liệu, thẻ. Độ dày mặc định là 400; 500 được dành riêng cho các nút và liên kết nổi bật. Kích thước nằm trong khoảng từ 10 đến 10, với khoảng cách dòng giảm (1,47–1,6), tạo không gian thoáng cho các đoạn văn. Khoảng cách chữ nhỏ +1 (2) ở kích thước từ 14 đến 3 cải thiện khả năng đọc ở kích thước nhỏ.
• Geist Mono — thay thế: JetBrains Mono or IBM Plex Mono · phác thảo 400 · Chữ siêu nhỏ nằm cạnh mã hoặc văn bản kỹ thuật, được định vị ở khoảng cách 13px — hiếm khi được sử dụng (tần suất = 28) cho các nhãn kỹ thuật hoặc siêu dữ liệu. Một lớp duy nhất, chiều cao dòng lớn 1,69.

Khoảng cách và hình thức

Phong cách tương tự

• 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.
• 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.
• 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.