Apple

Bảng màu

Thương hiệu

• Apple Blue #0071e3 — Các nút hành động được tô đầy, các trạng thái được chọn - màu sắc tương tác duy nhất được sử dụng một cách tiết kiệm để làm cho mỗi lần xuất hiện đều có ý nghĩa.
• Link Blue #0066cc — Viền hành động được làm nổi bật, các liên kết được nhúng - màu sắc bão hòa hơn màu Xanh Apple được sử dụng ở những nơi mà việc tô kín toàn bộ máy tính bảng sẽ quá lòe loẹt.
• Signal Blue #2997ff — Khung trang trí, đường viền hình ảnh, viền biểu tượng - màu xanh nhạt nhất trong hệ thống, được sử dụng để tạo không gian hơn là để tương tác với người dùng.

Trung lập

• Carbon #1d1d1f — Văn bản chính, viền tiêu đề, đường kẻ điều hướng, viền thẻ - màu mực chủ đạo gần như đen với một chút sắc ấm.
• Frost #f5f5f7 — Màu nền trang, nền văn bản chính và bề mặt chân trang đều là màu xám nhạt đặc trưng của Apple, hơi lạnh hơn so với màu trắng tinh.
• Ice #f4f8fb — Các mảng màu nổi bật, sắc thái tinh tế, chữ nút trên nền tối—một sắc xanh nhạt nhẹ nhàng làm sống động phần này mà không làm nó trở nên quá nổi bật.
• Smoke #333333 — Văn bản phụ, nền điều hướng, viền nút - Một màu trung tính đa năng cho viền và biểu tượng cần nổi bật hơn so với màu xám trung bình.
• Graphite #474747 — Văn bản điều hướng, đường viền điều hướng, đường viền liên kết - chiếm vị trí trung gian giữa Carbon và Smoke trong hệ thống phân cấp các phần tử.
• Ash #707070 — Văn bản chân trang, viền danh sách, viền thanh điều hướng, văn bản nội dung mờ - Màu xám trung bình dành cho nội dung cần hiển thị nhưng không quá nổi bật.

Kiểu chữ

Từ 12 đến 56px · 8 bước

• SF Pro Display — thay thế: Inter · phác thảo 400, 600, 700 · Tiêu đề và văn bản cỡ lớn—kích thước 40px trở lên sử dụng định dạng hiển thị với khẩu độ hẹp hơn và khoảng cách giữa các ký tự âm mạnh hơn; kích thước 700 dành cho bố cục quảng cáo, và 400 dành cho tên sản phẩm trong nội dung biên tập.
• SF Pro Text — thay thế: Inter · phác thảo 300, 400, 600 · Văn bản chính, điều hướng, nút bấm, tiêu đề phụ — phông chữ làm việc; 400 cho văn bản chính, 300 cho tiêu đề phụ và nhãn đủ điều kiện, 600 cho các phần tử điều hướng và văn bản nút bấm; khoảng cách chữ âm giảm tỷ lệ thuận với kích thước (từ -0.022em đến 12px thành -0.01em đến 44px).

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

Phong cách tương tự

• Studio — Một bức tường trưng bày chuyển động. Mỗi màn hình đại diện cho một bề mặt triển lãm tĩnh lặng, màu xám, nơi các chất liệu in ấn và các tác phẩm sáng tạo chồng chéo nhau tranh giành sự chú ý.
• Mollie — Quầy cashmere, sổ sách kế toán màu tối. Để lại khoảng trắng rộng rãi cho thiết kế biên tập xung quanh văn bản màu đen, sau đó nhấn mạnh các điểm liên quan đến sản phẩm bằng các gam màu kem ấm áp, nâu cà phê espresso và hình ảnh thực tế về các phương thức thanh toán.
• Basis Theory — Các thiết bị thanh toán trong studio thiết kế. Giấy kỹ thuật màu trắng, các lớp giao dịch trong suốt chồng lên nhau và một yếu tố điều khiển màu xanh ngọc duy nhất định hình hướng thiết kế trực quan.
• CleanShot X — Một studio với bàn làm việc được chiếu sáng màu xanh dương. Tạo một không gian trắng tĩnh lặng xung quanh dòng chữ đen nhỏ gọn, sau đó để các nút điều khiển màu xanh dương nổi bật và hình ảnh sản phẩm Mac được sắp xếp theo lớp chiếm vị trí trung tâm.
• Modern Treasury — Sổ cái kho bạc trên giấy kẻ ô. Hãy tạo các trang giống như một bảng tính hoạt động đơn giản, trắng tinh, nơi dòng tiền được hiển thị bằng các đường kẻ mảnh, các nút được dán nhãn và các điều khiển ẩn chính xác.
• Basha-Franklin — Một hệ thống khung tranh dạng lưới bên dưới thanh ngang màu trắng. Sử dụng tông màu ấm #f4ede6, cấu trúc màu đen tinh tế và các cột không đối xứng dựa trên những bức ảnh trông giống như một tập hồ sơ kiến trúc được in ấn.
• Bajgart Office — Bức tường trưng bày hình ảnh biên tập. Sử dụng không gian trắng rộng lớn, nơi các phông chữ serif tinh tế và các đoạn trích từ portfolio có sức hút thị giác mạnh mẽ hơn so với các yếu tố giao diện hào nhoáng.
• Heptabase — Một chiếc bàn ngập tràn ánh nắng. Bề mặt ấm áp, mềm mại như giấy, các nút điều khiển màu than chì và cửa sổ nổi tạo cảm giác về một không gian làm việc ngăn nắp hơn là một bảng điều khiển phần mềm.
• Bejamas — Bộ đồ ngủ—màu xanh chanh tươi mát xuyên qua lớp kính đen. Tạo nên những trang biên tập màu xám nhạt, tĩnh lặng, điểm xuyết bởi những mảng màu đen cuốn hút, nơi những vệt sáng xanh mờ ảo giao nhau trên bề mặt.
• Baba — Ghi chú chăm sóc dưới ánh nắng đỏ. Tạo những dải màu đỏ rộng bao quanh các bề mặt thông tin màu trắng, hồng và kem, sử dụng hình ảnh con người làm trung tâm cảm xúc.
• Grafana Labs — Phòng điều khiển của Trạm tín hiệu Sunrise. Một không gian làm việc yên tĩnh với tông màu xám và trắng kết hợp với dải màu chuyển sắc bốn màu rộng lớn và các tín hiệu giao diện màu xanh lam chính xác.
• Kagi — Một phòng đọc riêng biệt. Tạo một không gian trắng thoáng đãng xung quanh những dòng chữ in đậm bằng than chì, sử dụng những điểm nhấn màu tím nhẹ nhàng và các bề mặt màu pastel ấm áp để phá vỡ sự tĩnh lặng.

Danh mục các kiểu dáng theo từng loại