# Overview
## Hello Geckos :hand\_splayed:!
Greetings and welcome to CoinGecko's brand guidelines! Our brand is ever-evolving, and so are we. Therefore, we've devised these guidelines to harmonize all of CoinGecko's communications, encompassing all our endeavours. If you can't locate what you require, please reach out to us.
{% content-ref url="/pages/KGMcnFqC1djGHY1EWL4a" %}
[Purpose](/introduction/purpose)
{% endcontent-ref %}
***
## Contents
### Visual Identity
### Verbal Identity
{% content-ref url="/pages/uupqGqJOXfsOiNGbDE6p" %}
[Brand Narrative](/verbal-identity/brand-narrative)
{% endcontent-ref %}
{% content-ref url="/pages/tr1H4zphNB61V28mYDOe" %}
[Voice](/verbal-identity/voice)
{% endcontent-ref %}
{% content-ref url="/pages/TCrY0awIiNy6m3WRCov1" %}
[Tone](/verbal-identity/tone)
{% endcontent-ref %}
{% content-ref url="/pages/QiyuWgTym1BbcDjHYsQe" %}
[Style](/verbal-identity/style)
{% endcontent-ref %}
### Touchpoints
{% content-ref url="/pages/bl3C8r7R9CP6KNF3CcCW" %}
[Digital & Social Media](/touchpoints/digital-and-social-media)
{% endcontent-ref %}
### Resources
{% content-ref url="/pages/u9AJEcfoNazrTfA2pHHZ" %}
[Brand Kit](/resources/brand-kit)
{% endcontent-ref %}
{% content-ref url="/pages/Zlgz84W4n9lkM4RrrOfF" %}
[Attribution Guide](/resources/attribution-guide)
{% endcontent-ref %}
# Purpose
### Why a brand guide matters.
> A brand identity guideline, also known as a brand style guide or brand manual, is crucial for maintaining consistency and coherence in how a brand is presented across various channels. Here are several reasons why having a brand identity guideline is important:
\
:handshake: **Consistency:**
A brand identity guideline ensures that all visual and communication elements associated with the brand are consistent. This consistency helps consumers recognise and remember the brand easily.
\
:briefcase: **Professionalism:**
A well-defined brand identity communicates professionalism. It shows that the brand takes itself seriously and has a clear vision of how it wants to be perceived in the market.
\
:lizard:**Recognition:**
Consistency in visual elements, such as logos, colors, fonts, and imagery, enhances brand recognition. When consumers consistently encounter the same visual elements, they are more likely to remember and identify the brand.
\
:blue\_heart: **Trust and Credibility:**
A consistent and cohesive brand identity builds trust and credibility with consumers. It implies reliability and stability, which are essential factors for consumers when making purchasing decisions.
\
:sparkles: **Differentiation:**
In a competitive market, a unique and well-defined brand identity helps a brand stand out from the competition. It allows consumers to distinguish the brand from others and understand its unique value proposition.
\
:speaking\_head:**Efficient Communication:**
A brand identity guideline provides a framework for communication, ensuring that all messaging aligns with the brand's values and personality. This clarity makes communication more efficient and effective.
\
:twisted\_rightwards\_arrows: **Adaptability:**
While maintaining consistency, a brand identity guideline should also allow for some flexibility to adapt to different mediums and contexts. It provides the rules and parameters for adaptations without compromising the core identity.
\
:woman\_technologist:**Ease of Implementation:**
When a brand expands its presence across various platforms, channels, or regions, having a guideline makes it easier for different teams or agencies to implement the brand consistently.
\
:heart\_decoration: **Brand Loyalty:**
A consistent and well-managed brand identity contributes to the development of brand loyalty. When consumers have positive and consistent experiences with a brand, they are more likely to become loyal customers.
\
:scroll: **Legal Protection:**
A brand identity guideline can help protect the brand legally. It establishes rules for the proper use of logos, trademarks, and other visual elements, reducing the risk of misuse or misrepresentation.
# Logo
> The representation of our name and the utilization of our symbols act as the most proximate form of a "signature" for CoinGecko. Their display, whether condensed on a digital screen or prominent on a billboard, stands as a pivotal method for our customers and partners to identify and have confidence in us.
# Logotype
### Logotype
Our typographic signature uses the Inter font for high legibility and usage at small sizes. The logotype can be used in one of two colors: moonnight or white.
### Clearspace
To ensure prominence of our logotype, refrain from placing any objects such as graphics or text within the designated clear space.
### Minimum Sizes
The logotype must always maintain legibility. Never utilize it at sizes smaller than the specified dimensions.
### General Positioning
This overarching advice is applicable to both digital and print applications, encompassing portrait and landscape orientations.
When composing your design, position the logo in any of the four corners or align it along the central vertical axis. Utilize the available space and aim to maximize the logo's size. Keep in mind: Embrace boldness, display pride, and emphasize size!
Steer clear of using the logotype at dimensions smaller than one-third of the canvas width.
### Rotation
As a standard practice, we typically position our logotype flat at a 0° angle, with a horizontal orientation being the default state. This is commonly observed in our app, on our website, and across most advertising formats.
However, there are instances where we rotate our logotype by 90° to optimize space usage in unconventional formats. By rotating the logo vertically, we can showcase it at a larger scale. Examples of such scenarios include vertical ad spaces like "skyscraper" banner ads, physical banners or flags, and creative applications such as merchandise or stationery.
### Please Don't
* Change the color of the logo.
* Squash the logo.
* Recreate the logo using a different font.
* Outline the logo. Fill the logo with images.
* Place the logo over a busy background.
* Skew the logo. Accepted rotations are 0° and 90°.
* Fill the logo with gradients.
# Symbol
### Symbol
Our symbol captures the essence of our brand: A friendly gecko wrapped within a coin that conveys our brand name.
It simultaneously communicates our positioning as the warm & helpful friend of the people in a complex crypto space.
For rare use cases in black & white (greyscale) applications the black version of the symbol may be used.
### Clearspace
To ensure prominence of our symbol, refrain from placing any objects such as graphics or text within the designated clear space when using the symbol in standalone usage.
### Minimum Sizes
The symbol must always maintain legibility. Never utilize it at sizes smaller than the specified dimensions.
### General Positioning
This overarching advice is applicable to both digital and print applications, encompassing portrait and landscape orientations.
When composing your design, position the symbol in any of the four corners or align it along the central vertical axis. Utilize the available space and aim to maximize the logo's size. Keep in mind: Embrace boldness, display pride, and emphasize size!
Steer clear of using the symbol at dimensions smaller than one-eighth of the canvas width.
### Please Don't
* Change the color of the symbol.
* Squash the symbol.
* Outline the symbol with an overlapping border.
* Place the symbol over a busy background. Especially one with similar color hues.
* Skew or rotate the symbol.
# Combination Mark
### Combination Mark
The combination mark is our go to version when inserting our logo into 99.99% of applications.
Unless it is not possible, always utilize the combination mark instead of the standalone logotype or symbol.
### Clearspace
To ensure prominence of our combination mark, refrain from placing any objects such as graphics or text within the designated clear space.
### Minimum sizes
The combination mark must always maintain legibility. Never utilize it at sizes smaller than the specified dimensions.
### General Positioning
This overarching advice is applicable to both digital and print applications, encompassing portrait and landscape orientations.
When composing your design, position the logo in any of the four corners or align it along the central vertical axis. Utilize the available space and aim to maximize the logo's size. Keep in mind: Embrace boldness, display pride, and emphasize size!
Steer clear of using the logotype at dimensions smaller than one-third of the canvas width.
### Rotation
As a standard practice, we typically position our logotype flat at a 0° angle, with a horizontal orientation being the default state. This is commonly observed in our app, on our website, and across most advertising formats.
However, there are instances where we rotate our logotype by 90° to optimize space usage in unconventional formats. By rotating the logo vertically, we can showcase it at a larger scale. Examples of such scenarios include vertical ad spaces like "skyscraper" banner ads, physical banners or flags, and creative applications such as merchandise or stationery.
### Please Don't
* Change the color of the combination mark.
* Squash the combination mark.
* Stack the symbol & logotype to recreate an unapproved combination mark
* Place the logo over a busy background.
* Skew the logo. Accepted rotations are 0° and 90°.
# Color
> The world is a diverse and marvellous place, and we aim to reflect this diversity in the people we depict and the colors we employ. This is why we've curated a vibrant and stunning palette.
{% hint style="info" %}
Do note that our Gecko mascot currently **uses an entirely different hue of ****green**** & ****yellow** in its construction. Avoid using colors hues similar to those used in our current gecko symbol.
{% endhint %}
{% hint style="info" %}
Please note that CMYK colors are a best estimate only (for printing applications). Always request for print samples and verify physically before placing large orders of items.
{% endhint %}
***
## How and why they’re used:
### :green\_circle: Gecko Green
Gecko Green is the core color of our brand, that’s associated with our Gecko mascot. We use it in many areas of all our applications. Most notably our primary buttons.
***
### :black\_circle: Moon Night
Moon Night is our base dark color for backgrounds textual elements used everywhere in our brand.
***
### :white\_circle: Moon Light
Moon Light is is our primary background color used primarily in our interface.
***
# Secondary Colors
We use a range secondary colors to add contrasts of our main green color to our UI and illustrations. Secondary colors may also be used for bold, full-bleed backgrounds.
# Accent Colors
We use a range accent colors to add splashes of color to our UI and illustrations. *Some* accent colors may also be used for bold, full-bleed backgrounds.
# Semantic Colors
Our semantic colors are **ONLY** used to defined specific UI states within the Moon Design System. **Avoid using** them in other applications.
{% hint style="info" %}
Please note that CMYK colors are a best estimate only (for printing applications). Always request for print samples and verify physically before placing large orders of items.
{% endhint %}
# Neutrals
## How they are used
Neutrals are used to provide utility and hierarchy without competing with our core and secondary colors.
At CoinGecko, we also distinguish between neutrals that should be used on light backgrounds (Light Neutrals) and those that should be used on dark backgrounds (Dark Neutrals).
This is so we can:
1. Maintain a high level of accessibility while still ensuring our color palettes are cohesive
2. Don't create compositions that clash with other elements in an unpleasant manner.
{% hint style="warning" %}
Avoid combining neutrals from both the Light & Dark palettes. Stick to one set depending on the whether you're using them on a white (Moon Light) or dark (Moon Night) background.
{% endhint %}
{% hint style="info" %}
Please note that CMYK colors are a best estimate only (for printing applications). Always request for print samples and verify physically before placing large orders of items.
{% endhint %}
## Light Neutrals
Used these hues on white (Moon Light) backgrounds to create hierarchy
# Tints & shades
Tints & shades of core, secondary, semantic & neutral hues help us expand our color palette to accomodate the needs of a variety of applications (primarily UI-related).
{% hint style="info" %}
Outside digital UI related applications, we generally avoid using tints and shades.
{% endhint %}
## Examples of tints & shades
### Moon Design System
* Gecko Green is used as a Primary color within our UI applications.
* Semantic colors (Success Green, Warning Yellow, Danger Red, Info Blue) are used for conveying status states within our UI applications.
Tints and shades are generated and used for create contrast in UI components like badges & alerts where component statuses are often required.
To avoid misuse, we refrain from sharing exact color codes of the various tints & shades of colors used in our UI. These are kept and maintained by our design team with our Moon Design System. Reach out to our design team if you required a specific tint or shade (lighter or darker version) of a color.
# Typography
# Primary Typeface
## Overview
Inter (V4) is the typeface we use as our primary brand typeface. Here’s an excerpt from the official Inter website that explains why it’s the perfect font for CoinGecko:
> “Inter is a workhorse of a typeface carefully crafted & designed for a wide range of applications, from detailed user interfaces to marketing & signage.
>
> The Inter typeface family features over 2000 glyphs covering 147 languages.”
When using Inter V4, we should ideally utilize the variable font file version within applications whenever possible. This is important for performance reasons and avoids having to load & serve many different individual font files.
Download Inter (V4) from the [official site](https://rsms.me/inter/)
***
## Usage
When using Inter V4, we should ideally utilize the variable font file version within applications whenever possible. This is important for performance reasons and avoids having to load & serve many different individual font files.
Recommended type settings
#### Line Height
Set leading (line spacing / line height) between 120–150%. The general rule of thumb is:
* Display: 120%
* Headlines: 130%
* Subtitles: 140%
* Body Copy: 150%
#### Letter Spacing
Set tracking (letter spacing) to:
* Display: -1% (-0.01em)
* Headlines: -2% (-0.02em)
* Subtitles: -1% (-0.01em)
* Body Copy: 0%
Set font-weights to:
* Display: Bold (700)
* Headlines: Bold (700)
* Subtitles: SemiBold (600)
* Body Copy: Regular (400)
{% hint style="info" %}
For **Display** & **Heading styles**, avoid long sentences. If your text is longer than 15 words, it's probably best to use another type style.
{% endhint %}
{% hint style="info" %}
Default to lowercase & sentence case. Use title case only if required and avoid all caps.
{% endhint %}
{% hint style="warning" %}
Never use fully justified. Avoid hyphenating text where possible.
{% endhint %}
## Character Variants
We turn on a few of the special characters variants within the font to help our usage of Inter stand out and fit our brand aesthetic.
Reach out to someone from the CG design team if if you’re having trouble enabling any of the specified character variants.
## Tabular Numbers
Due to the nature of our product which display lots of numerical data in tabular format, we highly recommend the use of tabular numbers (tnum) within the Inter V4 typeface for:
* Easy scanning
* Neater UI
* Uniform column widths.
If table column widths become too wide, we recommend adding a -3% (-0.03em) letter spacing property to ensure good readability while maintaining the other benefits offered by tabular numbers.
# Monospace Typeface
## Overview
JetBrains Mono is used as our monospace brand typeface. JetBrains Mono’s typeface forms are simple and free from unnecessary details. Rendered in small sizes, the text looks crisper.
The easier the forms, the faster the eye perceives them and the less effort the brain needs to process them.
Download the font on the official [JetBrains website](https://www.jetbrains.com/lp/mono/).
***
## Usage
We use our monospace typeface sparingly. The most common use case is when sharing code-snippets.
Typically, this is useful in communications related to our CoinGecko API product that is oriented towards the developer community.
Additionally, we may use JetBrains mono as part of stylistic visual components in marketing materials that fit within the realm of common monospace applications. I.e. hashtags, code snippets, etc.
# Hierarchy
To achieve a harmonious relationship between our logotype and headlines, use Inter V4 to ensure there's a contrast in weight and scale.
{% hint style="info" %}
Inter should be used in a bold weight when paired with our logotype.
{% endhint %}
When using Inter with the logo, the ideal scale is 1.5 times the x-height of the logotype. A scale of 2.0 times the x-height is the maximum allowed.
# Typesetting CoinGecko
When using Inter to typeset “CoinGecko”, follow the letter case as used in our [Logotype](/visual-identity/logo/logotype).
This should be followed regardless of the type styling used.
{% hint style="warning" %}
Always use a captialized "C" in "Coin" and a captialized "G" in "Gecko"
{% endhint %}
{% hint style="warning" %}
Always type out "CoinGecko" as a single word. No spaces.
{% endhint %}
# Substitute Typefaces
When [Inter V4 ](https://rsms.me/inter/)is unavailable, we substitute with an appropriate font from the list below:
* Inter (V3) - Available on [Google fonts](https://fonts.google.com/specimen/Inter?query=inter)
***
In applications where neither version of Inter is available, default to widely used system fonts such as
* SF Pro (Apple devices)
* Roboto (Android devices)
* Helvetica
* Arial
# Do-Nots
## Please Don't:
* Add positive letter spacing to any text styling. It almost always negatively impacts readability
* Use Title Case. It complicates things and leads to mistakes & exceptions.
* Use all lowercase.
* Use multiple coloured words to make certain parts of a sentence stand out.
* If you really need to color text, try sticking to a single color (preferably our GeckoGreen as it is the most associated with our brand).
* Avoid colouring text when possible to avoid potential accessibility issues.
* Set body text *without* appropriate line height.
* Too little (100%) or too much (200%) isn’t ideal.
* Try sticking with 150% (our recommendation) as it works well for both readability and visual appeal.
* Use ALLCAPS text as it impact readability negatively.
# Style
# Layout Grids
## Web & Mobile Grids
Our web & mobile app layout grids are defined within the Moon Design system which employs a 12-grid architecture.
Desktop Grid
{% hint style="info" %}
On Desktop: Maximum container width: 1300px
{% endhint %}
Mobile Grid
{% hint style="info" %}
On Mobile: Minimum width: 360px
{% endhint %}
***
## Baseline Grids
A baseline denotes the horizontal line upon which text is positioned, while leading refers to the vertical spacing between these baselines.
A baseline grid can be implemented within any of the previously mentioned grids. Its utilization promotes a smooth rhythm within the text and ensures that headings and subheadings maintain proportional spacing in comparison to the body text, enhancing the reader's experience.
Baseline Grid (24px)
For instance, the image above employs a 24px baseline grid in conjunction with typography set at varying sizes (16px, 18px, 24px, 64px), resulting in a harmonious typographic arrangement tailored for optimal readability.
***
## Compositional Grids
When designing a visual composition for a variety of media, consider the use of a Rule of Thirds grid to ensure the focus items are lined up in a manner thats optimal to a human’s natural scanning pattern.
### Rule of Thirds Grid
Rule of Thirds Grid
This grid is a composition tool that divides any given space into nine equal sections. Whether it's aligned vertically or horizontally, all nine sections maintain uniformity in size. Elements within the design are arranged in two manners.
Primary focal points are strategically positioned at the intersections of the lines, starting from the top left, top right, bottom left, and then bottom right. Meanwhile, other essential elements, typically the body text, occupy the spaces formed by these intersecting lines.
The Rule of Thirds is widely regarded for its ability to create visually pleasing compositions. Adhering to this grid ensures that your design maintains balance and proportionality, enhancing its overall aesthetic appeal.
#### Sample application
Review the samples below to see an example of how the Rule of Thirds grid can be used to help re-positions elements and improve the composition and visual balance of a layout.
Old design (Grid Off)
Old design (Grid On)
New design (Grid Off)
New design (Grid On)
**Notice the following:**
* Text and visual elements lineup on the grid intersection lines
* Spacing around the logo & textual elements instantly becomes more balanced and breathable
* Proper type sizing, letter spacing, and line height values have been applied in the New design.
# 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.
Rounded radii
{% hint style="info" %}
You may use border radii up to `24px` in rounded applications.
{% endhint %}
{% hint style="warning" %}
Avoid border radii > `24px` for rounded applications
{% endhint %}
***
## Round Application
We use full-round border / corner radii in some UI applications instances. E.g. Pill components.
Round radii
# Effects
## Elevation
Elevation is not a big part of the CoinGecko visual style. We like sticking to simple flat surfaces like Gecko’s in real life.
{% hint style="info" %}
**We use elevation only for specific UI components** within Moon Design System.
{% endhint %}
For other brand related applications within CoinGecko we recommend the following:
* When possible, avoid using elevation such as drop-shadows or box shadows
* Instead, opt for a suitable replacement such as a simple outline or divider stroke when trying to distinguish elements of a design.
* Elevation may be used on a case-by-case basis if absolutely necessary. Please consult the design team if you intend to use elevation in company presentations or visuals.
{% hint style="danger" %}
On the web: CSS box shadows generally have poorer performance implications on page rendering times (i.e. browsers don’t like it)
{% endhint %}
# Spacing Units
The consistent and intentional use of a spacing system creates a more harmonious experience for the end user.
A spacing system also lays a foundation for responsive design and customisable UI density in the future, which will enhance the overall quality and accessibility of our products.
***
## Base Unit - 4px system
Our spacing system is built around a base unit of 4 pixels. This base unit determines the spacing scale and ensures visual consistency across products.
{% hint style="warning" %}
**For UI applications:** Use spacing coming from Tailwind Don’t use custom or hard-coded values.
{% endhint %}
***
## Scale
Building off of the 4px base unit, the main foundation of our spacing system is the spacing scale. This scale is a limited set of space values that can be used to lay out UI elements in a consistent way.
Each spacing value is a multiple of the base unit and ranges from `0px` to `80px` to allow for flexibility while still maintaining consistency across different layouts.
***
## Margin
> Margins are the spaces between the edge of a window area and the elements within that window area.
Margin widths are defined using fixed or scaling values for each window size class. To better adapt to the window, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more open space around the perimeter of content.
***
## Padding
> Padding refers to the space between UI elements.
Padding can be measured vertically and horizontally and does not need to span the entire height or width of a layout. Padding is measured in increments of `4px`.
***
## Value Usage
### Small values
{% hint style="info" %}
Use the spacing value from tailwind (`0px` to `8px`) for small and compact pieces of UI.
{% endhint %}
* Gap between small icons and text
* Container padding of small components (ie badges, icon buttons, table cells)
* Gap between repeating elements (ie button groups)
* Padding within input components
* Vertical spacing between elements in a card (i.e. a title and description, a description and actions)
* Gap between the trigger and elevated element (i.e. between dropdown button & menu)
### Medium values
{% hint style="info" %}
Use the spacing value from tailwind (`12px` to `24px`) for larger and less dense pieces of UI.
{% endhint %}
* Container padding of larger components (ie buttons)
* Space between avatar/large icon and content (ie section messages)
* Vertical spacing between elements in cards
* Spacing between items in less densely packed or larger components
### Large values
{% hint style="info" %}
Use the spacing value from tailwind (`32px` to `80px`) for the largest pieces of UI and for layout elements.
{% endhint %}
* The space between content on the page (ie spacing between top of page and header)
* Alignment within larger pieces of content (ie alignment of content in Flag)
# Motion
## Why motion?
Let's talk about the power of thoughtful motion design. When done right, it can transform customer experiences into something smooth, engaging, and downright delightful. It's like adding a touch of magic that makes everything click. On the flip side, if we ignore motion or throw it in without a game plan, we risk creating experiences that feel jarring or confusing. In some cases, it could even cause discomfort for certain users.
Now, you'll find that our base components Moon Design & GT’s design system already come with some built-in moves. They've got their own rhythm, so to speak. But here's where it gets exciting - the motion guidance we're diving into takes a broader view. Think of it as our playbook for everything else, from go-to transition patterns to those special, custom animations. It's all about taking our in-product motion to the next level, creating a unified feel across the board. This framework is designed to scale, so whether we're working on something small or dreaming big, we've got the tools to make it move just right.
### Terminology
We often mix and throw around terms when it comes to motion in design. Let's clarify some words so we’re speaking the same language in terms of outcomes:
#### Animation
> #### What we can refer to as “motion graphics” which is quite literally moving images. Typically we refer to animation as the act of creating a graphical asset that is in motion (animated GIF, video, other format.)
#### Transitions
> A process of moving (type of movement/change) from one state to another. For example, we often apply transitions when creating an animation. Think translation, rotation, color changes, and scale/size changes.
#### Micro-interactions
> At their core, micro-interactions are like a conversation between the user and the system. They're made up of two parts: a trigger and a feedback.
>
> The trigger is what kicks things off. It could be something the user does, like tapping a button or swiping a screen. Or it might be the system itself changing state, like when a download completes.
>
> Then comes the feedback - the system's way of saying "I hear you" or "Something's happened." This response is laser-focused on that specific trigger. It's not about grand gestures, but rather small, context-specific changes in the interface. Most often, we're talking visual cues here - a subtle change that catches the eye just enough to convey the message.
>
> These little interactions might seem insignificant on their own, but they're the building blocks of a smooth, intuitive user experience. They provide those satisfying moments of "aha!" that make using an interface feel natural and responsive.
***
## Principles
### Meaningful
Every bit of motion should have a reason for being there. It's like having a conversation - you want each word to count. When we add motion, it should guide users, highlight important information, or reinforce your brand's personality. Think of it as the helpful friend who gently points you in the right direction or draws your attention to something you might have missed.
### Predictable
Predictable motion creates a sense of familiarity and comfort. It's like walking into your favorite coffee shop - you know where everything is, and it just feels right. When users interact with your interface, the motion should feel natural and expected. This doesn't mean boring, though! It's about creating a consistent language of motion that users can learn and anticipate, making their journey through your product smooth and intuitive.
### Subtle
Less is often more when it comes to motion, and that's where subtle comes in. It's about adding just enough movement to be helpful without stealing the show. Think of it as the perfect background music in a restaurant - it enhances the atmosphere without drowning out conversation. Subtle animations can improve usability and add delight without being distracting or slowing things down.
***
## Accessibility Considerations:
At CoinGecko we want to make motion accessible for everyone. It's a crucial aspect of design that we sometimes overlook, but it's so important.
Motion sensitivity is a real issue. It can be short-term or long-lasting, and it affects people in different ways. For some people, certain types of motion can trigger serious physical reactions - we're talking seizures, migraines, feeling queasy, or dizzy. It can also mess with concentration and cognitive function. That's why we've got these motion guidelines. They're here to help us dial back problematic motion and, honestly, they often end up making things better for all users. Now, let's break it down into some basic accessibility rules.
### No flashing
First up, we need to be careful with flashing. It's not just annoying - for people with photosensitivity, it can actually trigger seizures. So, we want to steer clear of flashy animations. Instead of abrupt changes, we use smooth transitions. And when stuff is loading? We use placeholders to keep things steady
### Rethink auto- movements
Next, let's talk about things that move on their own. Sure, some movement is necessary - think maps, loading bars, or transitions when you click something. But if it's not essential, we shouldn't have things moving or looping for more than five seconds without giving users a way to pause, stop, or hide it. Auto-scrolling carousels or videos that play on their own? Not a great idea. We want to put users in the driver's seat when it comes to motion.
### Reduced motion ready
Lastly, we need to think about folks who prefer less motion. Some people set their devices to reduce motion, and we need to respect that. For big movements like screen transitions, we can use a simple, quick fade instead. And those fancy animated illustrations? We should have static versions ready to go. By following these guidelines, we're not just ticking boxes - we're creating experiences that are more comfortable and enjoyable for everyone.
# Iconography
# System Icons
CoinGecko uses the Font Awesome icon library for its system icons.
Our usage of the Font Awesome icon system aims to be friendly, communicative, and intuitive and is designed to complement our font and brand guidelines. It also fits perfectly within the design system's other elements.
## Font Awesome 6
CoinGecko subscribes to the Font Awesome Pro Plan, which grants access to over 26,233 icons in 68 categories across 6 styles, and unlimited use license.
{% hint style="info" %}
To start using Font Awesome in your projects, find the access on 1Password and download the assets.
{% endhint %}
### Family & Styling
Please use the following sets (families) of system icons only:
{% hint style="success" %}
**Use:** Classic Solid & Classic Regular (Outline)
{% endhint %}
{% hint style="danger" %}
**Don't Use:** Sharp Solid, Classic Light, Classic Thin, Sharp Regular, Sharp Light
{% endhint %}
Icon Sets
***
## Icons with Text
Icons are excellent branding elements that can be used as an attention grabber or visual anchor. They are glanceable, making it easy for users to differentiate different elements quickly.
Often, we choose to combine text & icons, as it helps our brand and product look more unified.
In some cases, standalone icons might not clearly convey what they mean, which is why we should always consider combining icons with text to ensure users understand our product. Please adhere by the following rules when combining icons with text:
Icon with text usage
{% hint style="success" %}
Use the same size & weight for icons & text
{% endhint %}
{% hint style="success" %}
Align the icon to the center of text
{% endhint %}
{% hint style="danger" %}
Don't combine icons & text of different sizes & weights
{% endhint %}
{% hint style="danger" %}
Don't use the same baseline for icons & text
{% endhint %}
***
## Accessibility for icons
### Different States
When icons are used to represent different states, for example “Add to watchlist” and “Added to Watchlist” -- use a different style and colour for the other state. This makes it instantly clear and obvious that the icon is different.
Icon States
### Icons with labels
Label text provides short, meaningful descriptions when symbols are more abstract. This can prove helpful in the case of navigation. Icon meaning should always be unambiguous and accessible for all users. Text labels can be omitted in specific circumstances where reduced visual impact is necessary.
Icon labels
### Icon Sizing
By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them.
Icon sizing
# Product Icons
{% hint style="info" %}
We're working on it. Hang tight.
{% endhint %}
# Brand Narrative
# Vision & Mission
## Vision
Empower the decentralized future
## Mission
Be the front page of crypto, by democratizing access to crypto data and empowering users with actionable insights.
***
### Boilerplate Copy
{% hint style="info" %}
The following are blurbs about CoinGecko & GeckoTerminal to help you describe who we are and what we do.
{% endhint %}
> **About CoinGecko**
>
> Since 2014, CoinGecko has been the world’s largest independent cryptocurrency data aggregator, trusted by millions of users globally. Offering a comprehensive 360-degree view of the market, it provides reliable data for over 17,000 cryptocurrencies across more than 1,200 exchanges. CoinGecko empowers users with the insights they need to navigate the crypto landscape – whether tracking prices, analyzing market trends, or building applications. Learn more about CoinGecko and its API at [www.coingecko.com](http://www.coingecko.com/) and [www.coingecko.com/api](http://www.coingecko.com/api).
> **About GeckoTerminal**
>
> GeckoTerminal is a decentralized exchange (DEX) aggregator and an advanced charting platform for on-chain traders, built by the CoinGecko team. It provides real-time data across over 200 blockchain networks, tracking more than 6 million tokens across 1,500 DEXs. GeckoTerminal combines on-chain market data with powerful features to help traders explore, analyze, and act on the latest market activity. Learn more at [www.geckoterminal.com](http://www.geckoterminal.com/).
# Brand Pillars
Brand values are the fundamental beliefs and principles that guide our brand and product decisions and reflect our core identity. We can see these values as addressing the following:
* Who are we?
* What is our purpose?
* What do we want to be known for in 3 years?
***
## Trustworthiness
> We strive to always be worthy of our users’ trust, by consistently providing reliable data, being transparent and authentic.
#### How we practice trustworthiness:
* We uphold the integrity of our data by ensuring it is accurate, comprehensive and timely.
* We thoroughly verify data sources and information, before aggregating them on our platform.
* We are transparent about our listing processes, Trust Score and research methodologies.
* We’re committed to being an independent entity—consolidating and curating information without biases.
* We show up authentically and genuinely in the way we act and interact.
***
## Easy To Use
> We strive to provide a seamless experience and organize extensive data in a way that’s easy to find and understand, regardless of crypto experience.
#### How we practice ease of use:
* We embrace simplicity and avoid being unnecessarily complicated.
* We provide useful tools and features that allow our users to navigate with ease.
* We continually improve and iterate on our user interface for intuitiveness.
* We offer accessible guides, resources and research that support users in various stages of their crypto journey.
***
## Empowering
> We strive to equip our users with the right tools, data and knowledge, so they can succeed on their terms, in the world of cryptocurrency.
#### How we practice empowering:
* We provide a comprehensive overview of the crypto markets and trends.
* We educate and inform our users so they can confidently carry out their research and make informed decisions before investing.
* We empower our users to stay on top of their investments through actionable insights.
* We encourage crypto projects and partners to leverage our data, innovate and build.
# Personality
Brand personality is the set of human characteristics and traits attributed to a brand, shaping how we are perceived by users and how we establish an emotional connection with our audience. We can see these personality statements as addressing the following:
* What’s our brand’s personality?
* How do we express ourselves?
* What is our tone of voice?
***
## Reputable
> Reputable OG in the crypto space with a pulse on innovation
We’re honored yet humbled to be pioneers in the space. We bring decades of experience to the table, while embracing innovation to remain at the forefront of the evolving crypto landscape.
## Serious, yet fun-loving
> Serious when it comes to data, fun-loving when it’s about community
We are professionals when it comes to all things crypto data – we are precise, relentless and recognised as an authority in the space. We never take things at surface value, we verify. But when we’re engaging our users and community, we know how to have fun, to surprise and delight. We leave easter eggs for users to find. We’re occasionally tongue-in-cheek and playful with our copywriting, because we don’t take ourselves too seriously.
## Reliable
> A reliable friend (and pocket companion) you can count on 24/7
Trusted, dependable and always within reach. We’re here on both green and red days, through market swings and cycles. We’re the constant in your crypto journey, a friend you can always count on.
## Confident, yet borderline geeky
> We are confident in our expertise and borderline geeky in our approach.
We are always crypto curious because the space never stops innovating. We geek out about the latest developments like new token standards, Layer 4 protocols and the latest *memecoins* in our bags.
## Authentic
> We’re true to ourselves, our values, our users and community.
We show up authentically, simply because we’re a group of real people behind the brand, and we believe in being authentic to really connect with our users. We’ll even give you a glimpse of what it’s like behind-the-scenes at Gecko HQ.
# Audiences
## Global Writing
CoinGecko is a global brand and product. We aim to serve millions of people in their locales all over the world.
**Localization (L10n)** is the process of adapting a product to meet the linguistic, cultural, and legal requirements of international markets (locales). Writing for an international audience requires that we compose text using methods that make it easier for the CoinGecko team to localize our content.
* US English text can expand by 40% in translation, so keep it short
* Avoid idioms, jokes, wordplay, jargon, and colloquialisms
* Avoid using variables, as these can expand content
* Avoid using directional words like **right**, **left**, and **below** to refer to UI elements
* Think beyond translation to adapting experiences to different places and cultures
* Avoid abbreviations, acronyms, and initialisms
**The localization process also accounts for differences in:**
* time formats
* date formats
* measurements
* temperature
* currency
* emoji usage
{% hint style="info" %}
For example, the US uses MM/DD/YY dates, the imperial system, and Fahrenheit, while a country like Germany uses DD/MM/YY dates, the metric system, and Celsius.
{% endhint %}
# Sample Messaging
> CoinGecko writing is short, clear and concise. We aim to use words that everyone understands. We try to explain our own industry jargon. We avoid industry jargon when it is unnecessary, especially when communicating with a general audience. It's how we help make the crypto industry more accessible to everyone.
## Taglines
Learn cryptocurrency with CoinGecko
Stay up-to-date with crypto
***
## Short CTA's
Go ad-free
Get the app
Get CoinGecko Premium
As low as $10 a month. Subscribe today.
***
## 1-sentence CTA
Get the latest crypto news, updates, and reports by subscribing to our free newsletter.
Level up your crypto journey - Go Ad-Free with CoinGecko Premium
***
## Long descriptions
Monitor the crypto markets distraction-free and stay ahead of the curve. Support independent data for the crypto space
***
## Paragraph descriptions
CoinGecko provides a fundamental analysis of the crypto market. In addition to tracking price, volume and market capitalisation, CoinGecko tracks community growth, open-source code development, major events and on-chain metrics.
***
## Essay descriptions
In a future teeming with billions of tokenized assets, we envision CoinGecko standing at the forefront, organizing the vast amount of crypto data into an easily accessible and understandable format. With a commitment to providing essential tools and insights, we enable users to successfully navigate and prosper in the new, tokenized Internet landscape.
# Voice
CoinGecko's voice is personified by our mascot, Gekko
Meet, Gekko!
Gekko's has four (4) voice qualities defined by his personality traits
1. Playful
2. Geeky
3. Friendly
4. Chaotic Good
***
### Playful
Gekko allows himself to have fun when communicating with our users.
### Geeky
Gekko is very enthusiatic about crypto and the blockchain chain. He's not afraid to dig into the technicals and share his expertise.
### Friendly
Gekko is always friendly and tries his best to get along with everyone in the crypto space.
### Chaotic Good
Gekko wears his emotions on his sleeve and expresses himself honestly and freely. He wants to help people understand the crypto space despite how complex and crazy it be at times.
# Tone
## Voice vs. Tone
Voice is the personality behind our words. Our voice stays consistent, reflecting who we are no matter what we're talking about.
Tone is how we say things. It's the mood or feeling our words create. Tone can change depending on the situation, like being serious in one message and playful in another.
> In short, tone is the vibe, and voice is the personality.
***
## Dimensions of tone
CoinGecko’s primary tone ranges include:
* **Casual ↔ Formal:** The level of formality in our language
* **Fun ↔ Serious:** How lighthearted our message should be
* **Enthusiastic ↔ Matter-of-fact:** Levels of excitement or neutrality
* **Approachable ↔ Authoritative:** When to speak like a friend or a teacher
***
## Samples of tone
Tone isn’t necessarily binary. For example, the right tone for an experience could be either casual or formal, or it could exist somewhere between those points.
### Casual **↔ Formal**
| Tone | Description | Situation | Example |
| -------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Casual | Relaxed, everyday, informal language. | When introducing new, non-critical features | We’ve just rolled out categories for NFTs. It’s now easier than ever to find the next hidden gem! |
| Balanced | Combines relaxed and friendly language while maintaining a degree of professionalism. | Informing users about resolved issues (Maintenance) and requesting their non-critical actions (Feedback, update app) | A new version of our app is available. Update now to enjoy the latest features and improvements! |
| Formal | Professional, structured, and polished. Full sentences with precise and clear language. | Official announcements, policy updates, professional communications. | We will be performing a database upgrade on Mon, Aug 12, from 2AM to 4AM UTC. While we expect services to remain operational, there may be some performance degradation and some downtime for crypto price and market data. We apologize for the inconvenience caused. |
### Fun ↔ Serious
| Tone | Description | Situation | Example |
| -------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Fun | Use of humor, emojis, exclamation marks, informal language. Can include well-known crypto terms. | Success states, completion of tutorial. | Sweet! You've collected 100 candies 🍬 |
| Balanced | Uses light humor or friendly tones without undermining the user's experience. | Error pages | Uh oh - Gecko couldn’t connect to the internet. Try refreshing the page or come back in a few minutes! |
| Serious | Emphasizes the importance or urgency of the information. You can bold to highlight the critical message. | Critical information, system performance updates, security alerts. |
There is no listing fee for coins/tokens listings on CoinGecko.
We also do not offer express listing nor guaranteed listing to expedite and guarantee a successful listing application.
|
### Enthusiastic ↔ Matter-of-fact
| Tone | Description | Situation | Example |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enthusiastic | Extra letters, emojis, exclamation points can be used for emphasis. | Milestone achievements, hitting target prices. | To the mooooon! Bitcoin has just hit an all-time high, now at $100k 🎉 |
| Balanced | Clear language with a touch of enthusiasm. Avoid overselling or hard selling, focusing on the benefits without exaggerated claims | Feature announcements, event invitations, performance updates | Monitor the crypto markets distraction-free. Support independent data for the crypto space! 😎 |
| Matter-of-fact | Neutral, straightforward, factual, no embellishments. | Providing information on a project or exchange | Tether announced the ending of the support on EOS, Algorand, in addition to OmniLayer, BCH-SLP and Kusama. For more details, please visit this page. |
### Approachable ↔ Authoritative
| Tone | Description | Situation | Example |
| ------------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Approachable | Friendly, welcoming, simplifying complex concepts. | Onboarding new users, explaining basic concepts, offering support | New to crypto? We’ve handpicked some beginner-friendly articles to help you understand the basics, so you can learn at your own pace! |
| Balanced | Avoid assumptions about the user's prior knowledge, explain and provide information without talking down to the user. | Tooltips, explaining a feature | Set up price alerts to stay informed about market changes. This feature lets you create custom alerts for your favorite coins, so you never miss an important price movement. |
| Authoritative | Knowledgeable, confident, precise language | Providing detailed insights for experienced users | The current iteration of CoinGecko’s “Trust Score” places a strong emphasis on liquidity metrics. This is Step 1 in our multi-step approach to improving transparency in exchange data. As the first data aggregator to implement exchange data analysis, CoinGecko is setting the tone that any cheating or falsified exchange data will no longer be tolerated. |
# Style
# Numerals
* Write all numbers numerically, even those under 10.
* However, if a number begins a sentence, spell it out.
* For large numbers like 4,576, rewrite the sentence to avoid starting with the number.
## Examples
{% hint style="success" %}
You have 3 unread notifications
{% endhint %}
{% hint style="danger" %}
You have three unread notifications
{% endhint %}
{% hint style="success" %}
Seven team members attended the most recent Blockchain Africa Conference this year
{% endhint %}
{% hint style="danger" %}
7 team members attended the most recent Blockchain Africa Conference this year
{% endhint %}
{% hint style="success" %}
CoinGecko tracks over 14,000 different cryptocurrencies
{% endhint %}
{% hint style="danger" %}
14,000 different cryptocurrencies are tracked on CoinGecko
{% endhint %}
# Capitalization
There are many ways to capitalize words and phrases, including all caps, sentence case, and title case. We primarily use sentence case, with few exceptions. It's easy to read and takes up less space than other styles.
## Default to sentence case for everything
Capitalize only the first word of strings and sentences, and lowercase all others. This guidance applies to headers, subheads, button labels, and everything else.
{% hint style="success" %}
Add to portfolio
{% endhint %}
{% hint style="danger" %}
Add To Portfolio
{% endhint %}
***
## Exceptions
Retain capitalization for proper nouns and words that are capitalized for stylistic reasons:
* Cities, names of people, days of the week, and months
* Names of some legal documents, like **Terms & Conditions**
* CoinGecko products, features, and programs that are formally named.
{% hint style="success" %}
CoinGecko Premium, CoinGecko API
{% endhint %}
{% hint style="danger" %}
CoinGecko premium, CoinGecko api
{% endhint %}
***
## Examples
### Button Copy
Put button copy in sentence case.
{% hint style="success" %}
Subscribe
{% endhint %}
{% hint style="danger" %}
SUBSCRIBE
{% endhint %}
{% hint style="success" %}
Go ad-free
{% endhint %}
{% hint style="danger" %}
Go Ad-Free
{% endhint %}
### Video Titles
Use title case for video titles. (This is the norm on YouTube.).
{% hint style="success" %}
How Do Crypto Games Actually Work?
{% endhint %}
{% hint style="danger" %}
How do crypto games actually work?
{% endhint %}
Avoid all caps text & exclamation points (!) when trying to emphasize text in a video title. Only use all caps where necessary. For example, coin tickers and abbreviations of well understood terms.
{% hint style="success" %}
Crypto's Latest: ETH ETF Excitement, Pro Crypto Regulations, New Project Developments
{% endhint %}
{% hint style="danger" %}
Crypto's LATEST: ETH ETF Excitement, Pro Crypto Regulations, NEW Project Developments!!
{% endhint %}
# Punctuation
## Periods
### Skip periods
To help readers scan text, avoid using periods and other unnecessary punctuation.
* Avoid using periods to end single sentences, particularly in:
* Labels
* Tooltip text
* Bulleted lists
* Dialog body text
### Use periods
* Multiple sentences
* Long or complex sentences, if it suits the context
* Any sentence followed by a link.
* Links themselves should not be full sentences.
***
## Colon
### Skip colons
* After labels in headings
* For headings on lists of items, do not use colons
### Use colons
* For lists within body text
***
## Comma
Use the oxford comma, except before an ampersand (&)
{% hint style="success" %}
Your emails, chats, and drafts aren’t available
{% endhint %}
{% hint style="danger" %}
Your emails, chats and drafts aren’t available
{% endhint %}
***
## Contractions
Contractions can make a sentence easier to understand and scan.
However, sometimes "do not" or "cannot" can give more emphasis than "don't” or "can't" when caution is needed.
{% hint style="success" %}
You're so close to claiming your first candy reward
{% endhint %}
{% hint style="danger" %}
You are so close to claiming your first candy reward
{% endhint %}
{% hint style="success" %}
You can't undo this action
{% endhint %}
{% hint style="success" %}
You cannot undo this action
{% endhint %}
***
## Abbreviations
### Use abbreviations sparingly
Spell out words whenever possible. Shortened forms of words can be difficult for people to understand and screen readers to read. Avoid Latin abbreviations in UI text such as e.g. or etc. Instead, use full phrases like "for example," or "and more."
{% hint style="danger" %}
Collect candy to redeem NFTs, books, etc.!
{% endhint %}
{% hint style="success" %}
Collect candy to redeem NFTs, books, and more!
{% endhint %}
***
## Exclamations
### Use exclamation points sparingly
Exclamation points can come across as shouting or overly friendly. Some exceptions include greetings or congratulatory messages.
* Exclamation marks can be used to emphasize celebratory moments
* Avoid using exclamation marks for empty states and common tasks. Save it for bigger accomplishments.
{% hint style="success" %}
**Congratulations!** You added your first coin
{% endhint %}
{% hint style="danger" %}
**No coins found!** Add a coin to your portfolio
{% endhint %}
***
## Ellipses
### Use ellipses sparingly
Use ellipses to indicate an action in progress or incomplete text. Truncated text may appear with ellipses, but check with your engineering partners before implementing, as this often happens automatically.
* Omit ellipses from menu items or buttons that open a dialog or start a process
* Don’t use ellipses in buttons or menu items
* Don’t add a space before ellipses
{% hint style="success" %}
Loading...
{% endhint %}
{% hint style="danger" %}
Loading ...
{% endhint %}
***
## Parentheses
### Use parentheses to define terms
Parentheses can be used to define acronyms or jargon or when referencing a source. They shouldn’t be used when adding a side note or an afterthought of a sentence.
* Don’t use parentheses to add extra thoughts. If information is needed, include it in the sentence without parentheses for easier scanning and improved comprehension.
* Use parentheses to define terms and jargon
{% hint style="success" %}
Clickthrough rate (CTR) measures how often people click your ad after it’s shown to them
{% endhint %}
{% hint style="danger" %}
At work and at home (and even on the go), your data is private and secure
{% endhint %}
***
## Ampersands
### Skip ampersands in body text
The “&” symbol can be used instead of “and” in headlines, column headers, table headers, navigation labels, and buttons. However, when there’s room, spelling out “and” can improve readability and make scanning easier. “And” should be spelled out in sentences and paragraphs, before the final item in a 3+ item list, and in email subject lines.
{% hint style="success" %}
**Coins & NFTs**
Find data on the crypto projects that interest you
{% endhint %}
{% hint style="danger" %}
**Create a price alert**
You can create custom price alerts for coins & NFTs
{% endhint %}
***
## Dashes
Use dashes with caution
There are three kinds of dashes:
1. Em dash: —
2. En dash: –
3. Hyphen: -
Em dashes are best avoided in UX writing, as they indicate a break in the flow of a sentence that could be simplified using a comma, period, or new sentence. Use an en dash without spaces to indicate a range, such as 9 AM–Noon.
***
## Hyphens
### Use hyphens with care
Hyphens can help readers better understand how words relate to each other by binding closely related words. They can also be used to represent negative numbers, such as -100. Spaces should never be used surrounding hyphens.
Refer to the [Associated Press (AP)](http://www.apstylebook.com/) style guidelines if you are unsure whether an adjective or noun phrase needs a hyphen.
***
# Formatting
## Lists
All list items should be formatted the same way.
{% hint style="success" %}
The top 3 trending meme coins of the month are:
* PEPE
* DOGE
* SHIB
{% endhint %}
{% hint style="danger" %}
The top 3 trending meme coins of the month are:
* PEPE
* Dogecoin
* Shiba Inu (SHIB)
{% endhint %}
***
## Bold
Bold text only to emphasize specific words or phrases or links as UI elements. Focus on bolding the core action, item or destination instead of the whole phrase.
{% hint style="success" %}
Ready to learn more? Check out [**CoinGecko's YouTube channel**](https://www.youtube.com/@CoinGecko/videos).
{% endhint %}
{% hint style="danger" %}
**Ready to learn more?** [**Check out CoinGecko's YouTube channel**](https://www.youtube.com/@CoinGecko/videos)**.**
{% endhint %}
{% hint style="success" %}
In today's article, we will explore **how to build a crypto portfolio** dashboard using [**Observable Framework**](https://observablehq.com/framework) and Python
{% endhint %}
{% hint style="danger" %}
**In today's article, we will explore how to build a crypto portfolio dashboard using** [**Observable Framework**](https://observablehq.com/framework) **and Python.**
{% endhint %}
***
## Italics
In general, avoid using italics for emphasis. Instead, rewrite your sentence to provide emphasis. For example, place important words or phrases at the beginning or end of a sentence instead of in the middle, or break long sentences into several shorter sentences.
{% hint style="info" %}
It's a fairly well known accessibility issue that *italic* fonts should be *avoided* as they reduce readability for those with sight issues and dyslexia.
{% endhint %}
***
## URLs and email addresses
Leave off the "http\://", "https\://" and "[www](http://www).", and put the rest of the URL in lowercase. Put email addresses in all lowercase.
{% hint style="success" %}
coingecko.com
geckoterminal.com
{% endhint %}
{% hint style="danger" %}
[www.geckoterminal.com](http://www.geckoterminal.com)
{% endhint %}
***
## Phone numbers
* Use hyphens (-) to separate phone numbers.
* Don't use brackets or parentheses.
* Don't add the "+" symbol before country codes
{% hint style="success" %}
65-7203-8988
{% endhint %}
{% hint style="danger" %}
(800) 2005-5809
{% endhint %}
{% hint style="danger" %}
+65-7203-8988
{% endhint %}
***
## Percentages
Use the % symbol instead of writing out the word percent or percentage
{% hint style="success" %}
86%
{% endhint %}
{% hint style="danger" %}
86 percent
{% endhint %}
***
## Time
* Use uppercase **AM** and **PM** with a space after the number.
* Don’t punctuate.
* To separate the times in a range, use an en dash ( – ) with no spaces before and after.
* If the range is contained fully in the AM or PM, include AM or PM at the end of the range only.
* The style of times in the range don’t need to match**.** Don’t use a colon for times that are on the hour even if the other time in the range requires a colon.
{% hint style="success" %}
5 PM
6:15 AM
2–3:30 PM
{% endhint %}
{% hint style="danger" %}
5pm
5P.M.
6:40 PM – 8:00PM
{% endhint %}
***
## Contractions
We like contractions. They help us stay succinct and sound more natural when communicating with our community.
{% hint style="success" %}
**Let's** add more coins to your portfolio
**You're** almost there. Just one more step to go.
**We'd** highly recommend storing your secret phrase somewhere safe.
{% endhint %}
{% hint style="danger" %}
Let us add more coins to your portfolio
You are almost there. Just one more step to go.
We would highly recommend storing your wallet secret phrase somewhere safe.
{% endhint %}
***
# Emoji
## Considerations
Keep in mind that emojis can have implications across different cultural and diversity communities, and that different age groups use emojis differently.
😎 🚀 🌕 ❤️ 🦎 ⭐️ 🔥 📈 📉 🤑 🤓 🖼️ 💪
## Usage
* **Utilize emojis in push notifications, text messages, inbox messages, and chatbot content**. **Avoid using them in core product content.**
* Not all push notifications require an emoji. Exclude emojis about half the time to maintain their effectiveness.
* Limit usage to one emoji unless using two or more makes the message clearer.
* Place emojis in either the header or the body text, but not both within the same message. Keep it straightforward and avoid overdoing it.
* Use emojis to convey support only. Do not include them in corrective communications, such as error messages.
* Ensure the messages make sense without the inclusion of emojis. If the sentiment is unclear from the text alone, revise the wording.
* Never replace a word with an emoji.
* Do not start or insert emojis in the middle of a message, as it can make the sentence appear disjointed.
* Avoid using emoticons. Unlike emojis, emoticons such as =) or :-0 are created using keyboard characters to represent facial expressions. We do not use emoticons because screen readers vocalize each symbol.
* Minimize the use of gender-specific emojis or those with particular skin tones.
* Refrain from using emojis that might be sensitive or cause negative emotions.
{% hint style="info" %}
We can be more flexible with the rules on Twitter, Instagram, YouTube, TikTok, and Facebook. Use emojis that best fit the message, regardless of type or quantity.
{% endhint %}
# Currency
Formatting for the same currency can be different for users who have different language settings on their devices. One person’s app may say *EUR 10* while another’s may say *€10*. It’s important to know our guidelines for communicating currency and to apply them correctly, but some aspects are beyond our control.
The examples here are given in US currency, but the guidelines apply to all currencies everywhere.
{% hint style="info" %}
Note: The following are guidelines primarily for currency formatting in content such as in article body copy.
{% endhint %}
{% hint style="info" %}
Product or platform specific requirements in applications such as lists, tabular data, or certain UI elements may adopt a different approach if more suitable.
{% endhint %}
***
## Expressing Values
Always use currency symbols and numerals to express amounts, including in headers and body text, even at the beginning of a sentence. It’s preferable to writing longer text, and it’s more scannable.
{% hint style="success" %}
$58
{% endhint %}
{% hint style="danger" %}
Fifty eight dollars
{% endhint %}
***
## Whole Values
* Use the dollar sign ($) before the amount
* In body text, for whole amounts (with no cents), don’t include a decimal or trailing zeros
{% hint style="success" %}
$25
{% endhint %}
{% hint style="danger" %}
$25.00
{% endhint %}
***
## Values lower than $1
* Use a zero (0), a decimal point, and the cent value to 2 decimal places.
* For the zero (0) value, use the 0, instead of spelling out *zero*.
* When a fee is waived for some reason, like a special promotion, don’t refer to it as being **free**. Instead, say it’s **$0**
* For other incentives where there’s no specific value attached, it’s OK to use **free**
{% hint style="success" %}
$0.15
$0
{% endhint %}
{% hint style="danger" %}
15¢
15 cents
zero
{% endhint %}
***
## Negative Values
Use a minus sign (hyphen) to indicate a negative number.
{% hint style="success" %}
-$30
-$0.29
{% endhint %}
***
## Currency Ranges
Use the currency symbol before each value in the range, and separate the values with an en dash (–), with no spaces before and after
Feel free to mix whole and partial values. Don’t add trailing zeros to a whole number just to match the decimal spaces of another value in the range
{% hint style="success" %}
$25–$70
$50–$68.50
$30.50–$40
{% endhint %}
***
## Lists or tabular data
Any place where dollar amounts appear in a list, use trailing zeros to keep the decimals aligned properly, for scannability and comprehension.
It’s rare for things like prices to be whole values. Adding the trailing zeros makes it clear that the values shown are exact.
| Coin Name | Price |
| --------- | ---------- |
| Bitcoin | $62,010.54 |
| Ethereum | $3,402.86 |
| Solana | $138.93 |
***
# Spelling
## Standards
As a standard practice in internal and external communications we use **US English**.
Our business is global, and our aim is to translate our content (most of which is written in US English first). Many of our users engage with our apps in a language other than English.
Localization is a time-consuming and expensive process. We aim to ensure that our content is localized effectively to help us meet the needs of our users.
# Digital & Social Media
# App Icon
## App Icon
Given CoinGecko's predominant online presence, maintaining the consistent appearance of our app icon is paramount to ensuring brand recognition across diverse platforms. Often, this symbol serves as the initial introduction to CoinGecko for many individuals.
# Avatars
## Avatars
Our symbol serves as our identity on social media accounts. It's versatile, suitable for use at a wide range of sizes, including as small as 16px, such as for our favicon.
In cases where the avatar is displayed within a square frame, with or without rounded corners, our symbol is placed on a background of the same color as the gecko and should extend to touch both the left and right edges of the frame.
However, when the framing shape approximates a circle, we should use the standard circular symbol without any additional background.
# Brand Kit
Download the official brand files kits for CoinGecko:
{% file src="/files/LqM7ma8JEmjIhiNeHJ75" %}
{% file src="/files/TfhJWxvZ6njmH0imE4Ij" %}
# Attribution Guide
## Crypto Price & Market Data – via CoinGecko
When displaying crypto price and market data powered by CoinGecko, please attribute it as follows:
### **Text attribution**
1. "Data provided by [CoinGecko](https://www.coingecko.com)"
2. “Price data by [CoinGecko](https://www.coingecko.com)”
3. “Source: [CoinGecko](https://www.coingecko.com)”
4. “Powered by [CoinGecko API](https://www.coingecko.com/en/api/)"
### Logo Attribution
Include the CoinGecko logo with a hyperlink to or .
{% hint style="warning" %}
**The attribution sample images below are just for reference. Do NOT download them to use directly on your website or application.**\
\
Please download the actual SVG/PNG logos on our [**Brand Kit**](/resources/brand-kit),
Remember to add the hyperlink to the logo in your code as mentioned above.
{% endhint %}
{% hint style="info" %}
Add the text **"Data powered by"** OR **"Price data provided by"** next to the logo manually. \
\
You may use your website's/brand's default font for this text. We recommend a simple sans serif like [Inter](/resources/brand-kit), to keep things professional.
{% endhint %}
CG Logo Attribution Sample 1
CG Logo Attribution Sample 2
***
## On-chain Data – via GeckoTerminal
When displaying on-chain data from GeckoTerminal or CoinGecko API, please attribute it as follows:
### Text Attribution:
1. "On-chain data provided by [GeckoTerminal](https://www.geckoterminal.com)"
2. “Powered by [GeckoTerminal](https://www.geckoterminal.com)”
3. “Source: [GeckoTerminal](https://www.geckoterminal.com)”
4. “Powered by [CoinGecko API](https://www.coingecko.com/en/api/)”
### Logo Attribution
Include the GeckoTerminal logo with a hyperlink to[ https://www.geckoterminal.com](https://www.geckoterminal.com) or , depending on the data source.
{% hint style="warning" %}
**The attribution sample images below are just for reference. Do NOT download them to use directly on your website or application.**\
\
Please download the actual SVG/PNG logos on our [**Brand Kit**](/resources/brand-kit),
Remember to add the hyperlink to the logo in your code as mentioned above.
{% endhint %}
{% hint style="info" %}
Add the text **"On-chain data powered by"** OR **"On-chain data provided by"** next to the logo manually. \
\
You may use your website's/brand's default font for this text. We recommend a simple sans serif like [Inter](/resources/brand-kit), to keep things professional.
{% endhint %}
GT Logo Attribution Sample 1
GT (CG API) Logo Attribution Sample 2
### Do's
{% hint style="success" %}
Ensure that the attribution is placed in a visible location, close to where the data is displayed, i.e. above or below the data set.
{% endhint %}
{% hint style="success" %}
Use our official logo and follow our [logo usage guidelines](https://brand.coingecko.com/visual-identity/logo).
{% endhint %}
{% hint style="success" %}
If you're unsure about how to attribute or plan to use our logos for marketing purposes, please reach out to us by [filing a support request](https://support.coingecko.com/hc/en-us).
{% endhint %}
Optionally, you may append the following UTM to the hyperlink: \
`?utm_source=[projectname]&utm_medium=referral`
#### Example:
* ?utm\_source=cryptobubbles\&utm\_medium=referral
* ?utm\_source=bubblemaps\&utm\_medium=referral
### Dont's
{% hint style="danger" %}
Do not modify or alter our logos. Always use them in accordance with guidelines.
{% endhint %}
{% hint style="danger" %}
Do not remove or obscure the attribution.
{% endhint %}
{% hint style="danger" %}
Do not attribute us to the wrong data source. If the data is from another provider, do not incorrectly attribute it to us.
{% endhint %}
{% hint style="warning" %}
Avoid using our data in ways that could mislead users or suggest endorsement by us, unless explicitly authorized. More specifically, refrain from claims like:
* “We partner with CoinGecko”
* “Our app is in collaboration with CoinGecko to provide…”
* “CoinGecko is our official data partner”
* “CoinGecko recommends our app”
* “Together with CoinGecko, we…”
* “Endorsed by CoinGecko”
{% endhint %}
{% hint style="warning" %}
Avoid using our data without proper attribution. A link credit allows us to keep supplying you with useful data for free.
{% endhint %}
{% hint style="warning" %}
While attribution is important, avoid overloading a single page or section with excessive attributions. Ensure they are minimal yet clear and concise.
{% endhint %}
