Effects

Transitions

The global transition token controls the default animation speed used for hover states and interactive elements.

--kf-transition: all 0.3s ease-out;

Updating this value automatically affects buttons, links, cards, and other interactive components that use the global transition variable.

Box shadows

KitFront provides multiple shadow levels that can be used throughout the project.

--kf-box-shadow: 0 8px 10px -6px rgba(0, 0, 0, 0.08);

--kf-box-shadow-sm: 0 2px 6px -3px rgba(0, 0, 0, 0.08);

--kf-box-shadow-lg:
  0 20px 25px -5px rgba(0, 0, 0, 0.05),
  0 8px 10px -6px rgba(0, 0, 0, 0.05);

When to use each shadow

• Small shadow is ideal for buttons, badges, and subtle UI elements.
• Default shadow works well for cards, pricing tables, and content blocks.
• Large shadow is useful for modals, featured cards, and highlighted sections.

Example

To create a softer visual style, reduce the shadow opacity or blur values.

--kf-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

Best practices

• Keep transitions subtle and consistent.
• Avoid using heavy shadows on every component.
• Use larger shadows only for important elements.
• Test hover interactions on both desktop and touch devices.