---
id: "aw-el-cc4dd589-aebb-4b46-b573-5a8d3a1758de"
source: https://www.awwwards.com/inspiration/logo-design-breakdown-dropbox-brand-guidelines
author: "Daybreak Studio (DaybreakStudio)"
media: "video, 1600x1200, 12.5s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Logo Construction Guidelines Scroll

## Summary
A brand guidelines site walking through a logo system with scroll-snapped panels: a near-black "Logo" chapter opener with the glyph built from flat planes and blue construction points, then white grid pages introducing the full logo and the square tab version with spec brackets, and a diagram of tabs anchoring a layout plane. It is a crisp example of making brand documentation feel like an animated technical drawing.

## Style
- Theme: mixed (white grid pages with near-black chapter openers)
- Mood: precise, clean, technical, confident, systematic
- Tags: brand-guidelines, logo-construction, scroll-snap, grid-lines, spec-annotations, chapter-opener, wireframe
- Category: Branding, Motion

## Palette
| Role | Hex |
|---|---|
| Page white | #FFFFFF |
| Presentation frame | #F6F5F4 |
| Chapter black | #1E1A19 |
| Grid grey | #E9EAEC |
| Panel grey | #F7F8F9 |
| Spec blue | #396AB5 |
| Accent blue | #0061FE |

## Typography
- Chapter title ("Logo"): grotesk sans, medium 500, sentence case, tight tracking (-0.03em), about 8% of frame height, white on black. Inter Tight (500) or Schibsted Grotesk (500).
- Section headings ("The full logo", "The tab", the two-expressions intro): same grotesk, semibold, 16 to 18px equivalent, near black, tight leading.
- Body: sans regular 8 to 9px, grey, 1.5 line height, narrow column of about 18 words per line. Inter (400).
- Tags ("Version A", "Version B"), spec labels and rotated rail labels: 6 to 7px sans; tags white on blue pills, labels blue. Inter (500).

## Layout
- 4:3 recording (1600x1200) of a browser window with light chrome (traffic lights, centred address pill) on a #F6F5F4 frame.
- Site: a 20px left rail with rotated labels and a 22px blue square menu button with a hamburger on its edge at mid height.
- Pages are drawn on a visible 1px #E9EAEC grid: a left text column about 22% wide and a large grey #F7F8F9 stage panel to the right.
- Chapter openers: full black panel with the title in the upper left and the glyph construction on the right, crossed by thin horizontal and vertical guide lines.
- Spec annotations: thin blue brackets and leader lines with tiny labels under or beside the artwork.

## Elements
- Glyph construction: a placeholder geometric glyph built from five grey rhombus planes with blue anchor points at the vertices and guide lines running out to the edges.
- Full logo lockup placeholder (glyph plus wordmark) in accent blue, framed by bracket lines and a centred label.
- Tab version: a blue square with a white glyph, a "Glyph" label at its left and a "Tab" bracket below.
- Plane diagram: a large light rectangle with small blue tabs at its four corners and centre, connected by thin lines, one tab arrowed to a "Plane" label.
- Final wireframe: the rhombi redrawn as thin outlines on black with blue nodes.

## Motion
- Each scroll snaps to the next panel (about 600ms ease-in-out).
- 0 to 2s: on the black opener the planes assemble, anchor points pop in with a 40ms stagger and guide lines extend from them (400ms).
- 2 to 5s: heading lines type or fade in; the glyph slides from the side panel to the centre and grows into the full lockup while the brackets draw on (300ms).
- 6 to 8s: the lockup collapses into the blue tab, which scales up from the centre with a spring.
- 9 to 10s: the tab shrinks and duplicates to the corners of the plane, leader lines drawing between them.
- 11 to 12.5s: return to the black opener with the glyph now as a wire outline.

## Rebuild it
1. Container: `h-screen overflow-y-scroll snap-y snap-mandatory`; each panel `h-screen snap-start grid grid-cols-[22%_1fr]` over a 120px background grid of 1px #E9EAEC lines (two linear gradients).
2. Opener: `bg-[#1E1A19] text-white` with the title `text-8xl font-medium tracking-tight` and an SVG construction on the right.
3. Construction: rhombus `path`s scaled from 0 with Motion `whileInView`, vertex `circle`s staggered 0.04s, and guide `line`s animated with `pathLength`.
4. Lockup morph: a shared `layoutId` on the glyph between panels so it travels and resizes as panels snap.
5. Spec brackets: small SVG paths drawn with `pathLength` 0 to 1 over 0.3s after the artwork lands.
6. Menu button: `fixed left-0 top-1/2 w-[22px] h-[22px] bg-[#0061FE]` with a 3-line icon.

## Generation prompt
A clean brand guidelines website recorded in a light browser window: a near-black chapter opener with a large white sans title and a geometric glyph built from flat grey diamond planes with blue construction points and guide lines, then white pages on a faint grid with small headings, blue version pills, a blue logo lockup framed by thin spec brackets, a blue square tab icon and a layout diagram of small tabs at a plane's corners; precise, technical, scroll-snapping, placeholder brand only.