TypeList

TypeList

Preview image. Unlock full-res

Chromatic interactive blocks

Industrydesign
Palette
#ffffff
#15181e
#000000
#e3e3d5
#dcdcdc
#b9d4cd
#8d7fc8
#fff731
#9dc4f2
#2772ff
#dffe5a
#f9423b

TypeList adopts a vibrant, playful design language built on an entirely white canvas punctuated by large, brightly colored interactive blocks. Typography is classic and understated, serving as an anchor to the dynamic color palette. The entire system feels like an interactive art exhibit, where color reveals content through large, expressive swatches rather than subtle accents. Prioritize Canvas White (#ffffff) as the primary page background. Use Ink Black (#15181e) for all primary text and headings. Employ the vibrant brand colors (e.g., Regal Violet #8d7fc8, Sunshine Yellow #fff731) exclusively for large interactive block backgrounds. Maintain a consistent 0px border-radius across all interactive elements and sections. Use Untitled Sans for all general UI text at 16px, 22px, or 24px, with normal letterSpacing. Ensure interactive color blocks have at least 20px vertical padding (padding-top and padding-bottom) for comfortable interaction. Do not introduce shadows or elevation; the system relies on flat planes of color. Avoid using the vibrant brand colors for small accents or text; reserve them for interactive block backgrounds. Do not use rounded corners on any elements; all shapes should be clean and rectilinear. Do not use gradients; the color palette is intentionally flat and solid. Avoid using more than one font family in very close proximity; Untitled Sans and Untitled Serif have distinct functional roles. Do not clutter the layout; maintain generous whitespace around header elements and between main content blocks.

More like this