Overview
- Build the experience as a long teaching corridor on a black field.
- Let one concept dominate one chapter plate at a time.
- Treat motion as the teaching method, not as garnish.
Motion Graphic Design
Motion is a website that showcases the power of UI/UX animation in conveying the mood and character of a brand.
InteractiveScrolling Animation3dLarge TypeFunHorizontal ScrollingParallaxDesignEducationBlack WhiteAnimationDarkSingle Page
5.0
13
Visits
Styles
Sections
Available Pages
Version History
Workflow Collections
Design Analysis
Motion Graphic Design Home design analysis
Build the experience as a long teaching corridor on a black field. Let one concept dominate one chapter plate at a time. Treat motion as the teaching method, not as garnish. Use wireframe diagrams, tiny embedded screensh...
Key Takeaways
- Build the experience as a long teaching corridor on a black field.
- Let one concept dominate one chapter plate at a time.
- Treat motion as the teaching method, not as garnish.
- Use wireframe diagrams, tiny embedded screenshots, and flat pastel slabs instead of photography.
- Keep every visual element didactic and graphic.
- Use black and chalk as the base pair.
Image Direction
- Use wireframe diagrams, tiny embedded screenshots, and flat pastel slabs instead of photography.
- Keep every visual element didactic and graphic.
Colors
- Use black and chalk as the base pair.
- Rotate pastel slabs in large chapter-sized blocks rather than small interface accents.
- Keep contrast hard and immediate.
Typography
- Use a mechanical grotesk for every main teaching beat.
- Reserve mono or technical labeling for annotations, coordinates, and small tags.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Midnight Motion Primer
A long-form motion teaching language built from blackout fields, thin chalk guides, machine grotesk type, and pastel lesson slabs that arrive one chapter at a time.
Didactic, cinematic, and diagram-led.
Primary mode: darkmotion education micrositeeditorial-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Didactic, cinematic, and diagram-led.
Density
6
Variance
8
Motion
9
Signals
black scroll corridor · pastel lesson slabs · chalk line diagrams
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Carbon Void
#0C0B0B
Chalk White
#F7F4EF
Dust Lilac
#C5B7F2
Powder Blue
#C9D4F4
Butter Mist
#E9E9B7
Mint Paper
#D7E4C9
Usage rules
Keep the overall shell black and sparse.
Use pastel slabs as chapter punctuation, not as small accents.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.5rem
sm
0.875rem
md
1.25rem
lg
2rem
xl
3rem
section_gap
clamp(5rem, 10vw, 9rem)
panel_padding
1.75rem
Token Radii
Corner radii tokens with a live surface sample.
sm
12px
md
18px
lg
24px
xl
32px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
PP Neue Machina
mechanical teaching voice
Body
PP Neue Machina
direct instructional copy
Accent
IBM Plex Mono
technical annotation voice
Mono
IBM Plex Mono
utility labels and coordinates
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3rem, 6vw, 5.2rem)/—
Display
H2
clamp(2rem, 3.8vw, 3rem)/—
H2
H3
1.05rem/—
H3
Body
1.15rem/—
Body
Label
0.9rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Keep display copy short and forceful. · Let utility labels feel technical and compact.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
300ms-900ms
Easing
cubic-bezier(.2, .85, .15, 1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 300ms-900ms |
easing | cubic-bezier(.2, .85, .15, 1) |
Layout Principles
Build the page as a vertical lesson corridor.
Give every chapter a distinct color plate or black pause.
Let diagrams and copy stay centered and obvious instead of decorative.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Actions outline pill
Base Attributes
Background
transparent
Text
#F7F4EF
Border
1px solid rgba(247,244,239,0.9)
Radius
999px
Padding
0.7rem 1.1rem
Cards lesson plate
Feature Card
Component preview content
Base Attributes
Background
#C5B7F2
Text
#111111
Border
none
Radius
18px
Padding
1.5rem
Shadow
none
Cards example card
Feature Card
Component preview content
Base Attributes
Background
transparent
Text
#F7F4EF
Border
1px solid rgba(247,244,239,0.24)
Radius
18px
Padding
1.5rem
Shadow
none
Scroll motion
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
load-bearing
Scroll driver
hijacked/pinned
Cadence
long chapter holds with hard transitions
Patterns
- -pinned progression
- -chapter slab swap
- -diagram reveal
Page logic
- -Use a long narrative column.
- -Let each chapter settle before the next appears.
Constraints
- -Never collapse the chapter sequence into one dense grid.
- -Keep reduced motion readable through direct chapter jumps.
Reduced motion
- -Remove scrub but preserve chapter order.
- -Hold the diagrams in static end states when motion is reduced.
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -diagram
- -flat screenshot
- -chapter plate
Subject patterns
- -thin lines
- -simple circles
- -tiny interface captures
Composition logic
- -Center diagrams inside wide black pauses.
- -Keep screenshots small and embedded inside the lesson plate.
Treatment rules
- -Prefer flat color and line work.
- -Avoid atmospheric photography.
Generation cues
- -Ask for a dark motion lesson page with chalk lines and pastel slabs.
- -Mention black negative space and thin technical circles.
Avoid
- -No floating glassmorphism.
- -No rainbow gradients.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not replace the black corridor with a generic white SaaS shell.
- -Do not add soft shadows or glossy gradients to the lesson plates.
- -Do not let motion become optional if the sequence is still chapter-based.