BRAND 
32px 
favicon MOTION 
mark-dark-animated.svg 
mark-light-animated.svg mark-dark-animated.webm mark-light-animated.webm 
app-icon-animated.svg LOCKUPS 
lockup-dark-animated.svg 
lockup-light-animated.svg 
lockup-dark@2x.png 
lockup-light@2x.png COLOURS DOWNLOADS USAGE
The RealtimeAPI mark
Three concentric circles: a sky outer ring, a blue ring and a live green core that pings outward and breathes. Every version below is free to use when you write about or integrate RealtimeAPI.ai.
Primary lockup
RealtimeAPI EVERY MARKET FEED · ONE ENDPOINT
RealtimeAPI
app icon
32px favicon Animated versions
The core pings outward once every 2.2 seconds and breathes between 100% and 114%. Both stop automatically for visitors who ask for reduced motion. The animated SVGs carry their own keyframes, so they work in an image tag, and the WebM loops are for video and slides.
<img src="https://realtimeapi.ai/brand/mark-dark-animated.svg" width="40" height="40" alt="RealtimeAPI">Standalone files
The same lockup as image files: SVG for the web, PNG for documents and email, and animated SVG where the core should stay live.
Palette
Blue #1877F2 Ring, buttons, API in the wordmark on light
Sky #5AA2FF Outer ring at 35%, API in the wordmark on dark, links
Live green #34D399 The core, the live dot
Navy #081226 Page background
Every version
Mark
- Mark, dark SVG, for navy or dark backgrounds mark-dark.svg
- Mark, light SVG, for white or light backgrounds mark-light.svg
- Mark, dark, animated SVG with the ping and breathe loop mark-dark-animated.svg
- Mark, light, animated SVG with the ping and breathe loop mark-light-animated.svg
- Mark, 32px Heavier strokes for small sizes mark-32.svg
- Mark, dark PNG 400x400, transparent mark-dark@2x.png
- Mark, light PNG 400x400, transparent mark-light@2x.png
Lockup
- Lockup, dark SVG, wordmark set in Geist lockup-dark.svg
- Lockup, light SVG, wordmark set in Geist lockup-light.svg
- Lockup, dark, animated SVG with the animated core lockup-dark-animated.svg
- Lockup, light, animated SVG with the animated core lockup-light-animated.svg
- Lockup, dark PNG 1280x320 on navy lockup-dark@2x.png
- Lockup, dark PNG 1280x320, transparent lockup-dark-transparent@2x.png
- Lockup, light PNG 1280x320 on white lockup-light@2x.png
Icons
- App icon SVG, rounded navy tile app-icon.svg
- App icon, animated SVG, rounded navy tile app-icon-animated.svg
- App icon 512 PNG, PWA and stores app-icon-512.png
- App icon 192 PNG, PWA app-icon-192.png
- Apple touch icon PNG 180x180 apple-touch-icon-180.png
- Favicon SVG, simplified two-circle mark favicon.svg
- Favicon 32 PNG favicon-32.png
- Favicon 16 PNG favicon-16.png
Motion and social
- Mark loop, dark WebM 400x400, one 4.4s cycle mark-dark-animated.webm
- Mark loop, light WebM 400x400, one 4.4s cycle mark-light-animated.webm
- Social card PNG 1200x630, used as the default og:image og-image.png
Rules
- Keep clear space around the mark equal to the width of its core on every side.
- Use the 32px mark below 40px and the favicon version below 20px. Do not scale the primary mark that small.
- Use the light version on white and pale backgrounds. Never recolour the core: green means live.
- The wordmark is "RealtimeAPI" set in Geist 600 with tight tracking. "API" takes the sky colour on dark and the blue on light.
- Animated versions are for product surfaces and video. In documents and print use a static version.
- Do not rotate, outline, add shadows or place the mark inside other shapes except the supplied app icon tile.