Leapfrog Brand SystemLeapfrog logo

Border Radii

Curved edges stand as a key facet of the Leapfrog identity, symbolizing dynamic progress and forward momentum. The border radii, crafting these graceful curves, provide a versatile means to elevate the Leapfrog brand within content.

Derived directly from the forward-leaping curve in our logo, this design element has been expanded to serve diverse purposes, bringing a unique touch to our brand aesthetic.

Radii Integration

The forward leaping curve, affectionately known as the "Swoosh", is a direct adaptation of our logo, is seamlessly integrated into various design contexts through border radii. This flexible implementation allows for the enhancement of the Leapfrog brand across different visual elements.

We use it in a host of applications such as social media collaterals, videos, slide decks, print and environment branding of the company.

The border radius composition

Directional Radii

Use the radius on any side of a rectangle. But remember to apply to only one side. You may use the directional radius in conjuction with the sized radii.

Top left

Appears on the top left side of the rectangle

-lf-border-radius-top-left

Top right

Appears on the top right side of the rectangle

-lf-border-radius-top-right

Bottom left

Appears on the bottom left side of the rectangle

-lf-border-radius-bottom-left

Bottom right

Appears on the bottom right side of the rectangle

-lf-border-radius-bottom-right

Radii Sizing

There are three radius sizes available. Please use them in relation to the size of the content.

Regular

16px or 1rem radius

-lf-border-radius

Small

12px or 0.75rem radius

-lf-border-radius-sm

Large

32px or 2rem radius

-lf-border-radius-lg

Extra Large

64px or 4rem radius

-lf-border-radius-xl

Application Guideline

  1. The leaping curve can be applied to any edge of a rectangle.
  2. Only one radius can be applied to a rectangle at a time, maintaining a clean and purposeful design.