LinearCardHover [example] v1.0.0

Linear's issue cards in the backlog/board view lift ~1.5px on hover with a subtle border-color shift from #2C2D33 to #3A3B42 and a soft new bottom shadow. Total motion budget: ~150ms ease-out for the lift, no scale, no color background change. The restraint is the signature — the card stays clearly itself, just visibly 'liftable'.

Label

Linear — Issue Card Hover State

Url

https://linear.app

Observed

2026-Q1

Brand

linear

Pattern Applied

@community/pattern-hover-lift

Aesthetic Notes

• Lift: transform: translateY(-1.5px) — sub-2px, almost imperceptible until you A/B it against a static card.
• Duration: 150ms with cubic-bezier(0.16, 1, 0.3, 1) — confident ease-out, not bouncy spring.
• Border: 1px solid oklch(28% 0.01 250) → oklch(35% 0.01 250) on hover. Same hue, +7L lightness.
• Shadow: rest = none. Hover = 0 4px 12px rgba(0, 0, 0, 0.25). Shadow appears only on hover, not deepens.
• Background: stays #1C1D21 — NO background color shift on hover. This is the discipline.
• Cursor: pointer obviously, but combined with the lift it reads as 'card-as-button' not 'card-with-link-inside'.

What To Copy

• translateY(-1.5px) is the magic number for dense interfaces — dashboards, tables, kanban. Reserve 2-3px lifts for marketing cards.
• Shadow appearing from nothing (rest:none → hover:soft-shadow) feels lighter than shadow deepening from rest.
• Skip the background color change on hover — it competes with the lift and makes the card feel 'busy'.
• Pair lift with a very subtle border-color shift (same hue, +5-10 lightness) for a second feedback channel.
• 150ms ease-out is the budget. Anything slower on a list of 30+ items feels laggy as the user moves their mouse.

What To Skip

• Don't add scale(1.02) on top of translateY — Linear specifically doesn't, because cards in a grid amplify scale into uneven gaps. Translate keeps the grid intact.
• Avoid the 'shadow gets bigger on hover' pattern from older Material — feels heavy in dark UIs.

Screenshot Hint

scout query: linear app issue card hover dark dashboard subtle lift border

Demonstrates

• Sub-2px translation reads as 'liftable' even when the user can't articulate what changed — perception works below the threshold of attention.
• Restraint as a signature: the absence of background color shift is the design choice.
• 150ms is the maximum hover duration before list-scanning feels sticky.

LinearCardHover [example] v1.0.0

Linear's issue cards in the backlog/board view lift ~1.5px on hover with a subtle border-color shift from #2C2D33 to #3A3B42 and a soft new bottom shadow. Total motion budget: ~150ms ease-out for the lift, no scale, no color background change. The restraint is the signature — the card stays clearly itself, just visibly 'liftable'.

Label

Linear — Issue Card Hover State

Url

https://linear.app

Observed

2026-Q1

Brand

linear

Pattern Applied

@community/pattern-hover-lift

Aesthetic Notes

• Lift: transform: translateY(-1.5px) — sub-2px, almost imperceptible until you A/B it against a static card.
• Duration: 150ms with cubic-bezier(0.16, 1, 0.3, 1) — confident ease-out, not bouncy spring.
• Border: 1px solid oklch(28% 0.01 250) → oklch(35% 0.01 250) on hover. Same hue, +7L lightness.
• Shadow: rest = none. Hover = 0 4px 12px rgba(0, 0, 0, 0.25). Shadow appears only on hover, not deepens.
• Background: stays #1C1D21 — NO background color shift on hover. This is the discipline.
• Cursor: pointer obviously, but combined with the lift it reads as 'card-as-button' not 'card-with-link-inside'.

What To Copy

• translateY(-1.5px) is the magic number for dense interfaces — dashboards, tables, kanban. Reserve 2-3px lifts for marketing cards.
• Shadow appearing from nothing (rest:none → hover:soft-shadow) feels lighter than shadow deepening from rest.
• Skip the background color change on hover — it competes with the lift and makes the card feel 'busy'.
• Pair lift with a very subtle border-color shift (same hue, +5-10 lightness) for a second feedback channel.
• 150ms ease-out is the budget. Anything slower on a list of 30+ items feels laggy as the user moves their mouse.

What To Skip

• Don't add scale(1.02) on top of translateY — Linear specifically doesn't, because cards in a grid amplify scale into uneven gaps. Translate keeps the grid intact.
• Avoid the 'shadow gets bigger on hover' pattern from older Material — feels heavy in dark UIs.

Screenshot Hint

scout query: linear app issue card hover dark dashboard subtle lift border

Demonstrates

• Sub-2px translation reads as 'liftable' even when the user can't articulate what changed — perception works below the threshold of attention.
• Restraint as a signature: the absence of background color shift is the design choice.
• 150ms is the maximum hover duration before list-scanning feels sticky.

Label

Linear — Issue Card Hover State

Url

https://linear.app

Observed

2026-Q1

Brand

linear

Pattern Applied

@community/pattern-hover-lift

Aesthetic Notes

• Lift: transform: translateY(-1.5px) — sub-2px, almost imperceptible until you A/B it against a static card.
• Duration: 150ms with cubic-bezier(0.16, 1, 0.3, 1) — confident ease-out, not bouncy spring.
• Border: 1px solid oklch(28% 0.01 250) → oklch(35% 0.01 250) on hover. Same hue, +7L lightness.
• Shadow: rest = none. Hover = 0 4px 12px rgba(0, 0, 0, 0.25). Shadow appears only on hover, not deepens.
• Background: stays #1C1D21 — NO background color shift on hover. This is the discipline.
• Cursor: pointer obviously, but combined with the lift it reads as 'card-as-button' not 'card-with-link-inside'.

What To Copy

• translateY(-1.5px) is the magic number for dense interfaces — dashboards, tables, kanban. Reserve 2-3px lifts for marketing cards.
• Shadow appearing from nothing (rest:none → hover:soft-shadow) feels lighter than shadow deepening from rest.
• Skip the background color change on hover — it competes with the lift and makes the card feel 'busy'.
• Pair lift with a very subtle border-color shift (same hue, +5-10 lightness) for a second feedback channel.
• 150ms ease-out is the budget. Anything slower on a list of 30+ items feels laggy as the user moves their mouse.

What To Skip

• Don't add scale(1.02) on top of translateY — Linear specifically doesn't, because cards in a grid amplify scale into uneven gaps. Translate keeps the grid intact.
• Avoid the 'shadow gets bigger on hover' pattern from older Material — feels heavy in dark UIs.

Screenshot Hint

scout query: linear app issue card hover dark dashboard subtle lift border

Demonstrates

• Sub-2px translation reads as 'liftable' even when the user can't articulate what changed — perception works below the threshold of attention.
• Restraint as a signature: the absence of background color shift is the design choice.
• 150ms is the maximum hover duration before list-scanning feels sticky.