913.ai animated color palette spec

Summary

A brand color palette presented as a five-band accordion that animates top to bottom, each band swelling open in turn to show its name at display size next to its RGB, CMYK and HEX values.

Visual description

The frame is filled edge to edge by five horizontal bands with no margin: a near-black plum (Deep Midnight), a deep desaturated teal (Ocean Depth), a saturated green (Forest Teal), a bright aqua mint (Aqua Mint) and an off-white (Soft Snow). In the collapsed state every band is a thin strip carrying its name in small sans-serif at the far left and its hex code in tiny type at the far right. The animation walks down the stack: one band at a time grows to take roughly half the height, its name scaling up to a large lowercase-height sans-serif setting, and a right-aligned three-line spec block fades in listing RGB, CMYK and HEX. The other four bands compress to accommodate it. When the sequence reaches Soft Snow at the bottom it loops back to Deep Midnight. Text color always flips for legibility, white on the two dark bands, near-black on the green, mint and off-white ones.

Key takeaway

Turning a static palette page into a single self-advancing stack is a compact way to give each color a moment without a grid of swatch cards. The collapsed state already carries name plus hex, so the expansion is additive detail rather than the only place the information lives.

Reuse notes

Good pattern for a brand guidelines site, a design system color page, or a palette slide that needs to hold attention for a few seconds. It depends on having a palette that reads as an ordered ramp from dark to light. With more than about six colors the individual reveal cycle becomes too long to watch, and static export needs a fallback layout since only one band is legible at a time.