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.
![](https://brand.coingecko.com/~gitbook/image?url=https%3A%2F%2F3936590801-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FuBDUa2ODcAkHHV15nEGc%252Fuploads%252Fzihgvz5EMP9pVRAbSc9t%252FRounded%2520Radii.png%3Falt%3Dmedia%26token%3D06bc6c19-2a8e-4e87-a302-6ca25f7b9978&width=768&dpr=4&quality=100&sign=414c39a7&sv=1)
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.
![](https://brand.coingecko.com/~gitbook/image?url=https%3A%2F%2F3936590801-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FuBDUa2ODcAkHHV15nEGc%252Fuploads%252FgW4gww0Gjfy0CoRy4XoT%252FRound%2520Radii.png%3Falt%3Dmedia%26token%3D4fe55001-b405-46d7-ab9c-7604777503a0&width=768&dpr=4&quality=100&sign=895c1806&sv=1)
Last updated