Skip to documentation content
|

Effects

Use Honest UI's shadow, focus, pressed-state, motion, and blur tokens without compromising feedback or accessibility.

Effects explain depth, focus, and change. Honest UI gives these decisions named tokens so a popover, button, and dialog can use the same visual language without copying long shadow or transition values.

Use effects to reinforce behavior. They should not be the only way a person can identify a state or understand what changed.

Shadows

Shadows resolve to different values in light and dark themes. The role stays the same, while the shadow color and intensity adapt to the active surface.

Honest UI shadow tokens
PreviewTokenValueUse
--hui-shadow-featherTheme-awareSubtle elevation for cards and resting controls
--hui-shadow-softTheme-awareInteractive controls, menus, and small floating surfaces
--hui-shadow-liftedTheme-awarePopovers, dropdowns, and notification toasts
--hui-shadow-floatingTheme-awareDialogs and prominent floating surfaces
--hui-shadow-insetTheme-aware insetPressed or recessed states

Elevation is relational. A floating surface only needs enough separation to remain understandable against the surfaces beneath it.

Focus and pressed feedback

Focus tokens keep keyboard indicators consistent. Use the outline form for most controls and the shadow form for a borderless text-entry surface where an outline would not fit the component structure.

Honest UI focus and pressed-state tokens
TokenValueUse
--hui-focus-ring1px solid accent emphasisDefault visible keyboard-focus outline
--hui-focus-ring-shadow0 0 0 1px accent emphasisFocus indicator for borderless input surfaces
--hui-focus-ring-offset-accent2pxMoves a ring outside an accent-filled control
--hui-focus-ring-offset-inset-2pxPulls a ring inside a clipped control
--hui-focus-ring-offset-inset-border-1pxPulls a ring just inside a bordered control
--hui-scale-pressed0.98Pressed feedback for buttons, tabs, and larger controls
--hui-scale-pressed-strong0.94Pressed feedback for compact controls such as checks and chips

Never remove the visible focus indicator without replacing it. Confirm that the complete control remains visible at 200% and 400% zoom and that the ring is not hidden by clipping, sticky content, or an overlay.

Motion

The duration and easing tokens cover the interaction speeds used by Honest UI components.

Honest UI duration tokens
TokenValueUse
--hui-duration-press100msImmediate pointer-down feedback
--hui-duration-fast150msTooltips, menus, and small popups
--hui-duration-normal200msPopovers, dialogs, switches, and common state changes
--hui-duration-moderate250msIndicators, previews, and stepped changes
--hui-duration-slow400msToast movement and larger transitions
--hui-duration-drawer450msDrawer and sheet movement
Honest UI easing and transition tokens
TokenValueUse
--hui-ease-outcubic-bezier(0.22, 1, 0.36, 1)Entrances, exits, and value changes
--hui-ease-in-outcubic-bezier(0.77, 0, 0.175, 1)Elements moving between positions
--hui-ease-drawercubic-bezier(0.32, 0.72, 0, 1)Drawer and sheet movement
--hui-transition-interactive200ms interactive propertiesDefault color, border, shadow, and opacity feedback
--hui-transition-pressed100ms interactive properties and transformFast active-state response

Wrap nonessential motion in a reduced-motion query. The state change must remain understandable when the transition is removed.

<button
  className="
    motion-safe:[transition:var(--hui-transition-interactive)]
    motion-safe:active:scale-[var(--hui-scale-pressed)]
    motion-safe:active:[transition:var(--hui-transition-pressed)]
  "
>
  Apply filters
</button>

Blur

Blur tokens are filters, not distances. Apply them to filter or backdrop-filter and provide an opaque-enough surface or fallback so content remains legible when backdrop filtering is unavailable.

Each preview keeps the left half sharp and applies the listed backdrop blur to the right half.

Honest UI blur tokens
PreviewTokenValueUse
--hui-blur-smblur(0.5px)Very subtle separation
--hui-blur-mdblur(1px)Soft translucent surface treatment
--hui-blur-lgblur(2px)Noticeable backdrop separation
--hui-blur-xlblur(4px)Strong backdrop treatment for overlays
<div
  className="
    border border-[var(--hui-color-border-base-primary)]
    bg-[var(--hui-color-background-base-primary)]
    shadow-[var(--hui-shadow-floating)]
    [backdrop-filter:var(--hui-blur-xl)]
    supports-[backdrop-filter:blur(1px)]:bg-[var(--hui-color-overlay-white-a8)]
  "
/>

Practical guidance
  • Use the lowest elevation that communicates the layer relationship.
  • Keep focus feedback immediate and visible; do not animate it into view.
  • Do not place moving blur behind text if it reduces readability or increases distraction.
  • Pause or remove looping decorative animation, and honor prefers-reduced-motion.
  • Verify dark theme, forced colors, keyboard focus, and fallbacks with blur and animation disabled.