foundations
Motion & spacing
Transitions should feel intentional, not incidental. Spacing follows Tailwind's 4px-base ramp — stick to the ramp so rhythms match across the app.
rhythm
Spacing scale
4px base. Prefer space-y-4 / gap-4 for content, gap-6 for card grids, gap-2 for tight clusters (badge rows, button groups).
.0.5
0.125rem
2px
.1
0.25rem
4px
.2
0.5rem
8px
.3
0.75rem
12px
.4
1rem
16px
.6
1.5rem
24px
.8
2rem
32px
.12
3rem
48px
.16
4rem
64px
timing
Duration & easing
Three durations cover 95% of UI transitions:
150ms · fast
hover, focus rings, color swaps
Hover the strip.
250ms · default
card hover, translate, transform
Hover to slide.
350ms · slow
shadow grows, modals, content swaps
Hover for shadow.
signature
Card corner-drop
The card-linked hover is the tux signature motion: translate (+6px right, -6px up) + box-shadow drops a maroon slab into the gap it leaves behind. Hover the card to see it. TuxCard uses this automatically when to is set.
entering content
Vue transition wrapper
For content that enters / leaves (toasts, inline alerts, revealed form fields), Vue's <Transition> gives a 4-phase lifecycle. Below: 250ms slide-down + fade on enter, fade on leave.