Motion (prev Framer Motion) is a fast, production-grade web animation library for React, JavaScript and Vue. Build smooth UI animations with examples, tutorials, and a tiny footprint.
Design Analysis
Carbon Motion Lab is a dark developer-facing system that feels focused, fast, and technically confident. The shell should read as carbon-black with a concentrated light field behind the main statement, then unfold into u...
Carbon Motion Lab is a dark developer-facing system that feels focused, fast, and technically confident. The shell should read as carbon-black with a concentrated light field behind the main statement, then unfold into utility-rich documentation and examples without losing the same premium precision.
The palette is dark and signal-driven. Mint can appear as a second signal for premium or elevated utility states, but it should stay secondary to the yellow statement accent.
Use one dense modern grotesk for the main language and reserve mono for technical support.
Center the hero inside a focused light field, then move into examples, docs, and utility proof quickly. The page should feel like a coherent product universe rather than a marketing shell bolted onto a separate documentation site.
Core identity and authoring metadata from the refto.one design model.
A dark developer-oriented design system with spotlighted carbon texture, dense white grotesk typography, yellow statement accents, mint premium highlights, and compact rectangular controls.
Focused, kinetic, technical, and premium without bloat.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Fields outside the primary renderer remain visible here as structured fallback content.
Motion tokens rendered as resolved values for timing and personality.
Resolved motion token values.
| Property | Value |
|---|---|
duration | 140ms-220ms |
easing | cubic-bezier(.22, 1, .36, 1) |
spring | snappy but not playful |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.