Color
The base color palette that visually expresses Serendie. Using this palette strengthens consistency across products. The palette is defined as reference tokens.
Last updated 7/28/2025
Color palette
The Serendie brand uses a wide variety of colors based on traditional Japanese hues across touchpoints such as office spaces and communication tools. Serendie Design System defines that diversity as five color themes and also provides a data visualization color palette that inherits them. This palette is the foundation for both.
We mainly design a 10-step lightness scale for each hue, with exceptions for White, Black, and Transparency, which are needed in UI. For how to use Transparency, see Color role.
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Gray | #F0F0F0 | #E4E4E3 | #D1D0CD | #B1B0AE | #8C8B87 | #6F6F6F | #575757 | #424242 | #31312F | #232322 |
| Blue | #EFF2FC | #DDE3FF | #C0CFFD | #8FAEFE | #3B86F9 | #056AD8 | #0353AA | #043F81 | #073165 | #081E3F |
| SkyBlue | #D9F6FC | #C2EAEF | #8DDDE3 | #4ACBD4 | #00A0AC | #007882 | #006066 | #004A4F | #02373C | #04272A |
| Green | #DBF5EA | #BCEEDD | #90E4C7 | #46D2A2 | #2EAB80 | #2C7C60 | #146348 | #174A38 | #12372B | #0D271E |
| Purple | #F4ECF6 | #EEDEF2 | #E1C7E7 | #CC9FD9 | #B36CCD | #9751B0 | #7C3694 | #5F2B70 | #462352 | #32183A |
| Pink | #FFF4F8 | #F9DCE5 | #F3C4D3 | #F691B6 | #E2568F | #B9346C | #9B2657 | #761A42 | #591734 | #3E0F24 |
| Red | #FCEBEA | #FFDCDA | #FFC0BB | #FF8F8F | #F64157 | #D00138 | #A4002A | #81001F | #600114 | #400109 |
| Chestnut | #FAECE6 | #FDDDCE | #FCC4AB | #F49972 | #DC6733 | #B54E1B | #8F3D15 | #702D0D | #50230D | #371B0B |
| Beige | #FDF5EC | #F6E0C6 | #F0CC9E | #DEB074 | #AE8144 | #8D6735 | #70522A | #573F1D | #3E2D17 | #2B2013 |
| Yellow | #FAF4E3 | #FCE998 | #EDD857 | #DEC400 | #A78E00 | #816E00 | #645600 | #514400 | #3A3000 | #292200 |
| White | #FFFFFF | |||||||||
| Black | #000000 | |||||||||
| bl2 | bl5 | bl20 | wh60 | |||||||
|
Trans- parency | #00000005 | #0000000D | #00000033 | #FFFFFF99 |
Accessibility
Considering the Serendie brand’s characteristics and its role as the base for theming, data visualization, and diverse use cases, we adopt APCA (Advanced Perceptual Contrast Algorithm) as the contrast standard for the color palette. APCA is under consideration for WCAG 3.0 and is expected to be closer to human perception.
Based on APCA’s contrast standard (Lc value), we adjust lightness to align across hues while accounting for perceptual differences per hue. We also intentionally bias the lightness jumps to make the tokens easier to use. For text where readability matters, use color tokens 600 or higher (Lc value 75 or more).
The five color themes we currently provide are designed so foreground (text) colors and background colors meet APCA contrast standards. When designing additional UI components, use color roles appropriately. For example, pair primary with onPrimary; avoid combining primary with onPrimaryContainer.