---
id: "aw-el-62db0359-59cd-4cbe-b259-5479dda0c49e"
source: https://www.awwwards.com/inspiration/iconography-slot-machine-dropbox-brand-guidelines
author: "Daybreak Studio (DaybreakStudio)"
media: "video, 1600x1200, 9.6s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Icon and Letter Slot Machine Row

## Summary
A brand guidelines section that proves icons and type share one system: a row of six tall cells shows a short word and number in bright blue, and hovering spins each cell like a slot machine reel so the letters roll into matching line icons (a bird, a bug, an hourglass, a clock, a smiley, a paperclip, a bell) before landing back on the characters. Worth studying as a playful, memorable way to demonstrate a design system rule.

## Style
- Theme: light (white page, thin blue grid)
- Mood: playful, clever, crisp, systematic, friendly
- Tags: slot-machine, icon-system, hover-shuffle, brand-guidelines, grid-lines, reel-animation, type-specimen
- Category: Components, Branding

## Palette
| Role | Hex |
|---|---|
| Page white | #FEFEFE |
| Presentation gray | #F3F2F0 |
| Grid line | #DDDFE3 |
| Deep blue | #1D4189 |
| Icon blue | #0D5EF4 |
| Ink | #111111 |

## Typography
- Section headline: grotesk sans, medium (500), sentence case, tight tracking (-0.02em), black, three lines at about 4% of window height each. Closest free font: Inter Tight 500 or Space Grotesk 500.
- Reel characters: the same grotesk at display size (about 12% of window height), regular, bright blue; mixes digits, a capital and lowercase letters.
- Body paragraph: tiny regular sans, three lines, about 0.9% of height. Inter 400.
- Labels: tiny vertical text in the left rail, a small eyebrow label left of the headline and a small hint under the reel. Inter 400 at 9 to 10px.

## Layout
- 4:3 frame (1600x1200) of a browser window on a warm gray presentation ground.
- Page grid: a narrow left rail (about 3% wide) with rotated labels and a blue square menu button, then a content area ruled by 1px #DDDFE3 horizontal and vertical lines.
- Headline block starts about 15% from the left; the reel row sits below a horizontal rule with six equal cells (about 11% of the width each) separated by 1px lines.
- Each glyph is centred in its cell with tiny registration ticks at the corners, like construction marks.
- No radii, no shadows; everything is flat and hairline.

## Elements
- Six reel cells, each a clipped window that shows one glyph at a time.
- Glyph set: letters and digits plus about a dozen line icons drawn at the same stroke weight (about 2px at that size) and the same rounded terminals as the type.
- Tiny corner tick marks and dimension lines around glyphs.
- Blue square menu button with three white lines on the left rail.
- Hint label under the row.

## Motion
- 0.4s: resting state shows the characters.
- 0.4 to 2.1s: on hover, each cell spins vertically (glyphs scrolling upward fast, with motion blur implied) and stops on an icon; cells stop left to right with about 80ms stagger.
- 2.1 to 5.6s: further hovers reshuffle individual cells; some cells catch mid-spin, showing half of two glyphs.
- 5.6 to 9.0s: icons roll back into characters one by one; final settle uses a short overshoot (about 6px) like a reel snapping into place.
- Each spin lasts about 600 to 900ms with ease-out cubic; loops on every hover.

## Rebuild it
1. Data: an array of glyphs (characters and SVG icons) and for each cell a current index.
2. Cell: `relative h-[18vh] overflow-hidden border-r border-[#DDDFE3]`; inside, a `motion.div` column containing the glyph strip stacked vertically, each item exactly one cell tall.
3. Spin: on pointer enter, pick a random target index plus a few full cycles; animate `y` to `-(target * cellHeight)` with `{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }`, staggering cells by 80ms.
4. Settle: append a spring at the end (stiffness 500, damping 22) for the slight snap.
5. Glyph styling: text `text-[#0D5EF4] font-medium text-[12vh] leading-none`, icons as SVG `stroke="#0D5EF4" stroke-width="2" stroke-linecap="round"` at the same visual size.
6. Page grid: CSS grid with `divide-x divide-y divide-[#DDDFE3]` and small absolutely positioned tick marks.

## Generation prompt
A crisp white brand guidelines web page with thin light gray grid lines, a black grotesk headline about icons and type sharing one language, and below it a row of six tall cells showing large bright blue characters that spin like slot machine reels into matching bright blue line icons such as a bird, a bug, an hourglass, a clock, a smiley face, a paperclip and a bell; clean, playful, systematic, no real brand names.