CoinGecko Brand Guidelines
  • Introduction
    • πŸ“—Overview
    • πŸ’šPurpose
  • Visual Identity
    • 🦎Logo
      • Logotype
      • Symbol
      • Combination Mark
    • πŸ³οΈβ€πŸŒˆColor
      • Core Brand Colors
      • Secondary Colors
      • Accent Colors
      • Semantic Colors
      • Neutrals
      • Tints & shades
    • πŸ”€Typography
      • Primary Typeface
      • Monospace Typeface
      • Hierarchy
      • Typesetting CoinGecko
      • Substitute Typefaces
      • Do-Nots
    • πŸ–ŒοΈStyle
      • Layout Grids
      • Corner Radii
      • Effects
      • Spacing Units
    • πŸ’ƒMotion
    • ➑️Iconography
      • System Icons
      • Product Icons
  • Verbal Identity
    • πŸ“–Brand Narrative
      • Vision & Mission
      • Brand Pillars
      • Personality
      • Audiences
      • Sample Messaging
    • πŸ§‘β€πŸŽ€Voice
    • 🎡Tone
    • πŸ”£Style
      • Numerals
      • Capitalization
      • Punctuation
      • Formatting
      • Emoji
      • Currency
      • Spelling
  • Touchpoints
    • πŸ“±Digital & Social Media
      • App Icon
      • Avatars
  • Resources
    • βš’οΈBrand Kit
    • ✍️Attribution Guide
Powered by GitBook
On this page
  • Rounded Applications
  • Round Application
  1. Visual Identity
  2. πŸ–ŒοΈStyle

Corner Radii

PreviousLayout GridsNextEffects

Last updated 1 year ago

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.

Rounded radii
Round radii