---
id: "aw-el-7826d235-841c-45f6-b1f6-dfbae9c5a1f3"
source: https://www.awwwards.com/inspiration/color-system-showcase-dropbox-brand-guidelines
author: "Daybreak Studio (DaybreakStudio)"
media: "video, 1600x1200, 10.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Hover Rising Color Swatch Chips

## Summary
A brand guidelines colour section that shows three rows of swatches (core, accent and greys) as slim chips standing on a baseline; hovering a chip makes it rise into a tall card with its name and hex code while its neighbours lift in a smaller wave. A crisp, tactile way to present a colour system that rewards exploration.

## Style
- Theme: light (white page with a faint grid)
- Mood: crisp, systematic, playful, tactile
- Tags: color-system, swatches, hover-interaction, dock-effect, brand-guidelines, chips, spring
- Category: Components, Branding

## Palette
| Role | Hex |
|---|---|
| Page white | #FFFFFF |
| Off-white swatch | #F6F5F1 |
| Ink swatch and text | #222423 |
| Core blue | #0571EE |
| Crimson card | #9B0032 |
| Rust accent | #A15240 |
| Grid line | #E6E8EC |
| Rose grey | #C6B4B3 |

## Typography
- Heading: geometric grotesque medium (about 500), sentence case, two lines, ink, about 3% of the frame height. Closest free: Manrope 500 or Inter 500.
- Row labels: 7px regular grey (core, accent, greys).
- Raised chip labels: colour name 10px medium in white or ink at the top-left, hex code 8px at the top-right.

## Layout
- 4:3 browser capture (1600x1200). A white page divided by faint 1px #E6E8EC grid lines into wide columns and rows.
- Heading at the top-left of the content area, then three swatch rows each about 26px tall with 80px between rows.
- Core row: three blocks (blue about 16% of the row, off-white about 16%, black the rest).
- Accent row: about 16 slim chips (pink, salmon, crimson, orange-red, rust, orange, ochre, yellow, forest, lime, teal, cyan, navy, light blue, plum) and a wide lavender chip at the end.
- Greys row: about 15 chips from near-black to off-white, the last one wide.
- Chips have about 8px top radii and sit on a shared baseline. A blue square menu button floats on the left edge.

## Elements
- Swatch rows with a baseline alignment.
- Raised state: the hovered chip grows to about 3x its width and 2.5x its height and shows name and hex.
- Neighbour lift: chips next to it rise less with distance, overlapping like a fanned deck.
- Floating blue menu button (about 40px square) with three white lines.
- Browser chrome at the top of the capture.

## Motion
- 0.4s: hovering in the accent row lifts a cluster of crimson, orange and rust chips.
- 2.3s: zoomed view of the raised crimson card with its name and hex, neighbours stepping down on both sides.
- 4.1s: the core blue block rises with its label; the accent row rests.
- 5.9s: hover moves to the light blue chip in the accent row; the wave travels with the cursor.
- 7.8s: zoomed view of the greys row raised in a smooth staircase.
- 9.6s: everything settles back to the baseline.
- Chips respond with a spring of about 300ms (slight overshoot); height falls off by distance (neighbour 60%, next 30%, then 10%).

## Rebuild it
1. Section: `bg-white` with a CSS grid of 1px lines (`bg-[linear-gradient(#E6E8EC_1px,transparent_1px)]`) and a `max-w-5xl` content column.
2. Each row: `flex items-end h-28 gap-0`, chips as `motion.button` elements with base `h-[26px] rounded-t-lg` and a flex basis from the data.
3. Track `hoverIndex` per row on pointer move; compute each chip's lift from distance `d` as `[1, 0.6, 0.3, 0.1][d] ?? 0`.
4. Animate `height: 26 + lift * 44` and `flexGrow: 1 + lift * 2` with `transition={{ type: "spring", stiffness: 400, damping: 28 }}`; add `layout` so widths reflow smoothly.
5. Show the name and hex in the raised chip with `AnimatePresence` (opacity 0 to 1, 0.15s) when lift is 1; choose white or ink text by contrast.
6. Copy the hex to the clipboard on click and show a small toast.

## Generation prompt
A clean brand guidelines web page about colour: a white page with faint grid lines, a short medium-weight heading, and three rows of slim colour swatch chips standing on a baseline (core blue, off-white and black; a rainbow of pink, crimson, orange, ochre, yellow, green, teal, navy and plum; a ramp of greys), with one crimson chip raised into a tall card showing its name and hex code while neighbouring chips lift in a wave; crisp, systematic, tactile.