Thiết kế logo
Irodori nghĩa là 彩り — sắc màu. Biểu tượng là một đám mây vẽ bằng năm màu nhấn, với 彩り đặt bên trong bằng đỏ và chàm truyền thống. Dải trắng chạy ngang chính là trang màn hình: mọi công cụ chạy trên nền trung tính, còn màu do bạn mang đến.
- Năm cung, năm màu nhấnMỗi vòng của đám mây là một màu nhấn thương hiệu theo đúng thứ tự, nên biểu tượng cũng là bản xem trước của bảng màu.
- 彩り bên trongHai chữ dùng đỏ 彩 và chàm り — hai màu bão hoà nhất trong bảng truyền thống.
- Dải trắngDải ngang chính là mặt làm việc: trắng ở chế độ sáng, gần đen ở chế độ tối, cùng một nền.
- Một hình, nhiều kích thướcCùng bức vẽ trở thành biểu tượng tab 32 px, biểu tượng ứng dụng 192/512 px, biểu tượng maskable và trang này.
16px24px32px48px96px
Sáng và tối, cạnh nhau
Sánglight
Aa
The quick brown fox jumps over the lazy dog.
ButtonChip
Tốidark
Aa
The quick brown fox jumps over the lazy dog.
ButtonChip
Design token
Nền
--bg
#ffffff
#12101a
--bg-elev
#ffffff
#1a1822
--bg-sunken
#f5f5f6
#17151f
--bg-muted
#fafafa
#16141d
--header-bg
rgba(255,255,255,.82)
rgba(18,16,26,.82)
Chữ
--ink
#111113
#f5f5f7
--ink-2
#52525b
#a1a1aa
--ink-3
#8a8a93
#71717a
Đường viền
--line
#e7e7ea
rgba(255,255,255,.10)
--line-strong
#d4d4d8
rgba(255,255,255,.20)
Thương hiệu
--brand
#5b4be0
—
--accent-2
#22b8e6
—
--accent-3
#3fbf6a
—
--accent-4
#f5b22e
—
--accent-5
#ec6f9e
—
Hình dạng
--r-sm
8px
—
--r-md
12px
—
--r-lg
16px
—
--r-xl
22px
—
--r-full
999px
—
--header-h
64px
—
--container
1152px
—
Bảng màu thương hiệu
--brand
#5B4BE0
--accent-2
#22B8E6
--accent-3
#3FBF6A
--accent-4
#F5B22E
--accent-5
#EC6F9E
Kiểu chữ
Giao diện dùng bộ phông hệ thống nên hiển thị tức thì và không bao giờ phải đợi tải phông. Số và mã luôn rơi về phông đẳng khoảng — một giá trị màu chỉ có ích khi đọc chính xác.
Display40px / 700Color, in its true space
Title30px / 700WCAG contrast
Heading20px / 650Palette generator
Body15px / 400Convert #FF5733 to OKLCH and check the ratio
Caption12.5px / 500ΔE76 · oklch(0.421 0.118 252.7)
Khoảng cách và hình dạng
Khoảng cách lấy 4 px làm gốc, lề trong 20 px; bo góc panel 22 px, thẻ 16 px, điều khiển bo trọn. Thứ bậc được thể hiện bằng bóng đổ thay vì đường viền, nên giao diện vẫn phẳng ở chế độ tối.
--r-sm--r-md--r-lg--r-xl--r-full