Corner Radii

Corder / border radii help us express our warm, friendly and approachable brand persona.

Determining the appropriate corner radii value is an important step when expressing our brand. Note the following:

  • Too small a value can make an object seem harsh to the eye. 

  • Sharp or square edges are generally NOT a part of the CoinGecko brand.

  • Excessively rounded objects on the other hand, don’t feel cohesive with the larger layout and composition.

To ensure that any component or visual object is expressed in a consistent manner, we recommend using the following values for rounded/round objects depending on their relative size on the canvas.

Rounded Applications

For rounded applications, take note of the scale & size of the object. Use the guide below to help determine the appropriate values for the container/object you are creating.

You may use border radii up to 24px in rounded applications.

Avoid border radii > 24px for rounded applications

Round Application

We use full-round border / corner radii in some UI applications instances. E.g. Pill components.

Last updated