Everything you need to use the CoinListing name and logo correctly: logo files, colors, typography and a few simple rules. Download the full kit below — free.
The CoinListing mark combines two simple shapes with a custom wordmark.
The coin. A solid circle — the universal shape of a coin, and the foundation of everything CoinListing tracks.
The opening. A square cut-out exactly one third of the circle’s diameter. It recalls a classic coin and acts as a window: the place where a listing sits.
The wordmark. Custom, wide lettering set on two lines — COIN above LISTING — aligned to the height of the coin. It is drawn artwork, not a font: always use the supplied files and never retype it.
The meaning · Yin & Yang
Two shapes, one balance
CoinListing’s mark is built from only a circle and a square. Behind them sits an old idea from Eastern philosophy: everything is made of two complementary forces, and balance between them — not victory of one — is what keeps a system alive.
1 · Yin ○2 · Yang □3 · Balance
Yin — the circle. Round, whole and receptive. The circle holds, gathers and flows: like liquidity, like the coin itself, like water and the moon. It is the field where everything happens.
Yang — the square. Sharp, defined and active. The square has edges, corners and a decision: this is listed, that is not. It is structure and order — the point where energy takes form.
Balance. As in the classic taijitu, where a seed of one force lives inside the other, the yang is carved inside the yin. Neither is complete alone: a circle without the opening is a blank token, and a square without the circle is a box without a market. Together they make a coin with an open slot — and the slot is exactly one third of the diameter: large enough to be seen, small enough to stay held.
Five Elements
Five phases of change
Yin and yang move through five phases. Each one gives rise to the next, and each keeps another in check. CoinListing reads a market the same way: nothing is ever only up or only down — it is always becoming something else. Tap an element, or switch between the two cycles.
The elements are shown in neutral tones — the logo itself stays white or black.
Four Seasons
The year breathes
A year is yin and yang breathing. Yang rises through spring and peaks in summer; yin rises through autumn and peaks in winter. The square has four sides, one for each season; the circle is the year that carries them round and returns to the start.
Every cycle ends where the next one begins. The mark never finishes — it only turns.The story gives the mark its meaning; the artwork itself never changes. Always use the supplied files.
Animated version
The logo in motion
The circle (yin) appears first, the square (yang) turns into place, then the wordmark follows. Use it for intros, loading screens, video openers and social. The final frame is always the standard logo — and static use remains the default.
Self-contained animated SVG (about 3 seconds, plays once, no scripts). Works in browsers, Figma, Notion and most web builders.
TimingCircle 0–1.0 s · Square 0.9–2.1 s · Wordmark 1.7–2.6 s. Easing: cubic-bezier(.2, .8, .2, 1).
Motion rulesOnly scale, rotate and fade. No bounce, glow, color change or distortion of the final logo.
Reduced motionRespect prefers-reduced-motion: show the static logo instead of the animation.
02 · Versions
Primary logo and icon
Two layouts, each in white and black. Choose the version with the strongest contrast against your background.
Primary logo · white. Default for the website, apps and any dark or black background.
Primary logo · black. For white or light surfaces — documents, print, light-mode pages.
Icon · white. For avatars, favicons, app icons and places too small for the full logo.
Icon · black. Icon on light backgrounds.
03 · Clear space & minimum size
Give the logo room to breathe
Keep a clear zone of x on every side, where x is the width of the square opening (one third of the icon height). Nothing — text, edges, other logos — may enter this zone.
Logo · minimum 120 pxDigital · print 30 mm wide
Icon · minimum 16 pxDigital · print 6 mm wide
Below these sizes, use the icon or leave the logo out.
When it gets too smallNever shrink the full logo past its minimum.
04 · Color
Black and white, softened with beige
The logo itself is only ever white or black. The interface palette below supports the brand across the website, charts and social images. Click a swatch to copy its hex code.
Primary · black & white
Supporting · beige
Interface · Apple system grays
Balance
Black 60%
White 25%
Beige 15%
Data only
The logo is only ever white or black. Beige supports it — champagne is for highlights and actions, never for the logo. Neutrals follow Apple’s system grays. Green and red appear only in market data, for direction and sentiment (greed / fear).
05 · Typography
SF Pro
The native system font of Apple devices — clean, highly legible and always crisp. Inter is the fallback on other platforms. Numbers use tabular figures so prices and scores line up.
Aa
Regular — body textAa Bb Cc 123
Medium — labels & menuAa Bb Cc 123
Semibold — buttonsAa Bb Cc 123
Bold — numbersAa Bb Cc 123
Heading · Bold
Bitcoin Fear and Greed Index today
Body · Regular
Live sentiment and price zones for Bitcoin, updated every few seconds from public market data.
Numbers · Bold, tabular
81,578.2 +2.41%23/100
The logo lettering is custom artwork and is not part of this type system. Don’t use SF Pro to imitate it.
06 · Usage
Do and don’t
Keep the logo consistent everywhere it appears. When in doubt, use the supplied files on a plain background.
✓ Do
Use the white logo on black or dark backgrounds.
✓ Do
Use the black logo on white or light backgrounds.
✓ Do
Use the icon alone when space is tight — avatars, favicons, app icons.
✕ Don’t
Don’t stretch, squash or change the proportions.
✕ Don’t
Don’t rotate or tilt the logo.
✕ Don’t
Don’t recolor. The logo is only white or black.
✕ Don’t
Don’t add shadows, glows, gradients or other effects.
✕ Don’t
Don’t outline the logo or turn it into a line drawing.
✕ Don’t
Don’t place it on a background with low contrast.
✕ Don’t
Don’t place it on busy photos, patterns or gradients.
✕ Don’t
CoinListing
Don’t retype the name or rebuild the lockup with another font.
Use the logo only to refer to CoinListing. Don’t use it in a way that suggests a partnership, sponsorship or endorsement unless that has been agreed in writing.
07 · Downloads
Brand kit
Vector logos, transparent PNGs, favicons, app icons and a social preview image — everything is ready to use.
Complete brand kit · 15 files. SVG and PNG logos in white and black, icon variants, favicons, app icons, social image, and a short README. Or download single files below.
08 · How to use
Using the logo, step by step
A quick guide for designers, partners, press and developers.
1
Pick the right file
Dark or black background → white logo. White or light background → black logo. Very small space → icon only. Use SVG for web and print, PNG for slides and documents.
2
Add clear space
Leave a margin of x around the logo (the width of the square opening) and keep it at least 120 px wide (icon: 16 px).
3
Place it on a calm background
Use flat black, white or light gray. Avoid photos, gradients and busy patterns, and never alter the logo itself.
Write the name as CoinListing in text — one word, capital C and L.
In the logo it appears as COIN / LISTING on two lines. Never retype it.
Never stretch, rotate, recolor, outline or add effects.
Don’t crop the logo or use it as a pattern.
Don’t place other logos inside its clear space.
Need something not in the kit? Ask before creating your own version.