Skip to main content

RxDB Brand Guidelines

The RxDB brand guidelines explain how you can use the RxDB logo, colors, and name, and where you can download the official logo files. You are welcome to use the logo to refer to RxDB in articles, talks, videos, documentation, and on websites that show that a project is built with RxDB. You do not have to ask for permission for these use cases as long as you follow the rules below.

Download the RxDB Logo

Prefer the SVG files because they scale to any size without losing quality. Use the PNG files (512px high, transparent background) only when a tool does not accept SVG.

RxDB Logo with Wordmark

Logo with Wordmark

The default logo. Use it on dark backgrounds, for example in headers, slides, and footers.

RxDB Logo with Wordmark (Outlined)

Logo with Wordmark (Outlined)

Use it on light or colored backgrounds where the white wordmark would not be readable.

RxDB Icon

Icon

Use it where space is limited, for example as an avatar, favicon, app icon, or in a list of technologies.

RxDB Logo with Claim

Logo with Claim

Use it when your readers do not know RxDB yet, for example in articles, talks, and comparison tables.

How You Can Use the Logo

You can use the RxDB logo without asking to:

  • Show that your project, product, or company uses RxDB, for example in a "Built with RxDB" section or a list of technologies.
  • Illustrate articles, blog posts, tutorials, books, videos, and conference talks about RxDB.
  • Add RxDB to comparison tables and overviews of databases and sync engines.
  • Link the logo to https://rxdb.info/ when you use it on a website.

What You Should Not Do

To keep the logo recognizable and to avoid confusion about who makes RxDB, do not:

  • Change the colors, proportions, or shapes of the logo, or add effects like shadows, outlines, or gradients.
  • Rotate, stretch, or crop the logo, or place it on a background where it is hard to read.
  • Use the logo or the name "RxDB" as part of your own product name, logo, domain, or app icon.
  • Use the logo in a way that suggests RxDB sponsors, endorses, or partners with you, unless there is a written agreement.
  • Sell merchandise with the logo without asking first.

Spacing and Minimum Size

  • Clear space: keep a free space around the logo that is at least half the height of the icon.
  • Minimum size: render the icon at least 24px high and the logo with wordmark at least 32px high, so the letters stay readable.
  • Background: use the white wordmark on dark backgrounds and the outlined wordmark on light backgrounds.

Brand Colors

RxDB Pink
#ED168F
RxDB Magenta
#B2218B
RxDB Purple
#752A8A
Background Dark
#0D0F18
White
#FFFFFF

Writing the Name

Write the name as RxDB, with a capital R, a lowercase x, and a capital DB. Do not write "RXDB", "RxDb", or "Rx DB". When you introduce RxDB to new readers you can describe it as "RxDB, a local-first, NoSQL database for JavaScript applications" and link it to https://rxdb.info/.

Questions and Other Use Cases

For any use that is not covered on this page, like merchandise, co-marketing, or partner badges, ask in the RxDB Discord or via the contact form before you publish it. If you wrote an article, paper, or talk that mentions RxDB, add it to the RxDB in the Press list.

Logo Animations

These animated versions of the RxDB logo are built from the shapes of the original mark and each one shows something the database does. They are React components in docs-src/src/components/animations/, respect prefers-reduced-motion, and can be used in talks, videos, and articles about RxDB. In the RxDB docs, wrap an animation in the DocsAnimation frame which centers it, limits its size, and shows a one-line subtitle below it:

import {DocsAnimation} from '@site/src/components/docs-animation';
import {ReplicationPushPull} from '@site/src/components/animations/replication-push-pull';

<DocsAnimation subtitle="Pushing and pulling documents between client and server">
<ReplicationPushPull />
</DocsAnimation>

Logo and Wordmark

Hero

The three layers extend into the feature list and the runtime name cycles below.

<HeroMark />

Wordmark Reveal

The letters of the wordmark build up next to the logo, followed by the claim.

<WordmarkReveal />

Typewriter

The wordmark is typed and deleted letter by letter.

<WordmarkTypewriter />

Reactive x

A wave runs through the letters of the wordmark and into the layers of the icon.

<WordmarkReactiveX />

Color Sweep

The three layer colors sweep through the letters of the wordmark.

<WordmarkColorSweep />

Glitch

An RGB split glitch that plays every few seconds.

<GlitchLogo />

Document Swarm

The logo built from small documents that scatter on pointer movement and spring back.

<DocumentSwarm />

Motion That Explains the Database

Build-in

The outline is drawn, then the layers slide in like documents written to storage.

<LogoBuildIn />

Reactive Stream

Query results stream to the UI on every write.

<ReactiveStream />

Replication

An RxDB client pushes and pulls documents with any server.

<ReplicationPushPull />

Offline-First

Writes are queued while offline and flushed when the connection returns.

<OfflineQueue />

Storage Swap

The bottom layer swaps between different RxStorage implementations.

<StorageSwap />

Loader

The logo as a loading indicator while the first sync runs.

<LogoLoader />

Isometric Stack

The logo tilts and its layers lift off like a stack of storage layers.

<IsometricStack />

Conflict Handling

Two offline edits of the same document are resolved into one revision.

<ConflictHandling />

Encryption

The corner locks, the layers fill with ciphertext and decrypt back.

<EncryptionLogo />

Key Compression

Long JSON keys shrink into short tokens.

<KeyCompressionLogo />

Leader Election

One browser tab is elected as the leader.

<LeaderElectionTabs />

One Animation per Core Feature

Schema Validation

An invalid document is rejected by the schema.

<SchemaValidationLogo />

Schema Migration

Stored documents are migrated to a new schema version.

<SchemaMigrationLogo />

RxQuery

MongoDB-style queries highlight the matching parts of the logo.

<RxQueryLogo />

Revisions

Every write to a layer increments its revision.

<RevisionsLogo />

Attachments

Binary files are attached to a document.

<AttachmentsMail />

CRDT

Concurrent increments merge without a conflict.

<CrdtMerge />

Fulltext Search

A magnifying lens scans the layers and stops on the match.

<FulltextSearchLens />

Vector Database

Similarity search by cosine distance between vectors.

<VectorDatabase />

Sharding

One collection is split across multiple shards.

<ShardingSplit />

P2P Replication

Peers replicate directly with each other over WebRTC.

<P2pReplicationMesh />

Cleanup

Deleted documents are removed by the cleanup.

<CleanupSweep />

Backup

Documents are copied into backup files.

<BackupCopy />

Middleware

A preInsert hook changes a document before it is stored.

<MiddlewareHook />

Partial Sync

A voxel game only syncs the chunks near the player.

<PartialSyncChunks />

Worker Storage

The storage runs in a worker, off the main thread.

<WorkerStorage />

Population

Referenced documents are populated from another collection.

<Population />

RxState

Reactive state values are updated with set().

<RxStateBars />

Local Documents

Local documents stay on the device and are not replicated.

<LocalDocuments />

RxServer

Clients replicate and query through RxServer endpoints.

<RxServerRack />

RxPipeline

Documents are processed from a source into a destination collection.

<RxPipelineFlow />

Query Cache

The first query scans the storage, the second one is served from the cache.

<QueryCacheScan />