The visual approach
Linear builds on a dark foundation—#09090B for the primary background, #18181B for secondary surfaces—and layers a restrained palette on top. The accent color #5E6AD2 (a mid-saturation indigo) appears sparingly, mostly on interactive elements and status indicators. Text hierarchy comes from three shades of gray: #FFFFFF for primary content, #A1A1AA for supporting labels, and #71717A for tertiary metadata. Borders use #27272A, just bright enough to define edges without competing for attention.
Typography mixes Inter for UI and body copy with ABC Favorit, a serif face reserved for large display headings. The scale runs from 12px (XS) to 96px (8XL), but the interface leans on the smaller end—14px and 16px do most of the work. The combination of a neutral sans-serif and an editorial serif gives Linear's marketing pages a dual personality: utilitarian in the product shots, editorial in the hero sections.
Motion is present but never performative. Page transitions use subtle cross-fades over 150–200ms with cubic-bezier(0.4, 0, 0.2, 1). Scroll-triggered reveals translate content up 24–32px while fading in over 400ms using cubic-bezier(0.16, 1, 0.3, 1), a curve that eases out sharply. Card grids stagger their entrance with a 60–80ms delay per item, each card translating up 16px. The icon grid introduces parallax depth: background icons scroll at half speed and apply backdrop-filter: blur(12px), while the center icon stays sharp. Hover states are economical—pricing cards lift 4px and expand their shadow, buttons scale to 1.02 and brighten 8–10%, link arrows translate 4px to the right.
What works
The motion system does two things well: it guides attention without demanding it, and it reinforces hierarchy through depth cues rather than color or size alone. The fade-up reveal on section titles—24–32px of vertical travel—is just enough to suggest the content is arriving rather than simply appearing. The 400ms duration and ease-out curve make the motion readable but not slow. The staggered card grids create a sense of sequence without making the user wait; 60–80ms per card is fast enough to feel responsive but spaced enough to register as deliberate.
The parallax treatment on the icon grid is the most assertive motion choice, and it works because it maps directly to spatial depth. Background elements scrolling at 0.5× speed and blurring out simulate a camera's depth of field. It's a visual metaphor that doesn't need explanation—your eye reads it as distance. That kind of spatial reasoning is harder to achieve with flat transforms, and Linear uses it sparingly enough that it registers as a signature detail rather than a ubiquitous effect.
The color palette's restraint also pays off. With only one accent color (#5E6AD2) and three text shades, the interface avoids the chromatic clutter that comes from assigning every state or category its own hue. Success, warning, and error states get their own colors (#10B981, #F59E0B, #EF4444), but those only appear when needed. The result is a UI that feels calibrated rather than decorated.
What a builder can borrow
The scroll-triggered fade-up reveal is a low-risk, high-yield pattern. Translate up 24–32px, fade from opacity: 0 to 1, and use cubic-bezier(0.16, 1, 0.3, 1) over 400ms. It works on headings, paragraphs, and card containers without needing per-component tuning. Pair it with an Intersection Observer trigger set to fire when 20–30% of the element is visible, and you have a reusable module that works across sections.
The staggered card grid is similarly portable. Use a 60–80ms delay per item and a shared 16px upward translate. In React, map over your data array and multiply the index by 70ms to set each item's transition-delay. In CSS, use nth-child selectors or CSS custom properties to distribute the delay. The stagger adds rhythm without requiring complex choreography.
The hover states—4px card lift, 1.02 button scale, 4px arrow translate—are conservative enough to avoid distracting but present enough to confirm interactivity. Each uses sub-200ms timing (180ms for cards, 160ms for buttons), which keeps the feedback loop tight. Those durations are short enough that the user's cursor doesn't outrun the animation.
The parallax depth effect is more specialized, but the principle scales: layer your elements, scroll the background at a reduced speed (typically 0.4×–0.6×), and apply a subtle blur to background layers. It works best when you have a clear foreground subject and supporting graphics that can recede. Overuse flattens the effect, so treat it as an accent rather than a default.
Linear's approach is less about novelty and more about precision—small, well-timed motions that reinforce structure without announcing themselves. That discipline is what makes the system feel fast rather than animated.