BackSpin Press & Brand Assets

Brand Guidelines & Kit

Our brand assets represent our open attention exchange for builders. Use these resources to represent BackSpin in integrations, articles, and marketing campaigns.

Download Complete Brand Kit (.ZIP)

Official Logos

Light Bg

Dark Bg

Brand Logo Mark

The standalone green spiral mark. Use for profile pictures, avatars, favicons, and minimal spaces.

Light / Transparent

SVG PNG

Neutral transparent asset works on all backdrops.

Light Bg

Dark Bg

Horizontal Wordmark

The primary logotype combination with the spiral mark followed by the BackSpin text. Ideal for headers.

Light / Transparent

SVG PNG

Dark Mode

SVG PNG

Light Bg

Dark Bg

Vertical Wordmark

Stacked alignment featuring the logo mark on top and BackSpin text centered below. Best for large banners.

Light / Transparent

SVG PNG

Dark Mode

SVG PNG

Color Palette

Emerald Green

Hex: #06B978

RGB: rgb(6, 185, 120)

CSS: --accent-primary

Primary brand logo color, accents, and success states.

Charcoal Ink

Hex: #0B0F0C

RGB: rgb(11, 15, 12)

CSS: --text-primary

Body text, display headlines, and light-theme structure.

Terminal Black

Hex: #0C100D

RGB: rgb(12, 16, 13)

CSS: --term-bg

Dark mode background, IDE cards, and terminal sections.

Mint Tint

Hex: #EEF6F0

RGB: rgb(238, 246, 240)

CSS: --dash-canvas

Soft backdrop panels, dashboards, and table headers.

Pure White

Hex: #FFFFFF

RGB: rgb(255, 255, 255)

CSS: --bg-primary

Default page background, light cards, and content container fill.

Deep Violet

Hex: #6D49F0

RGB: rgb(109, 73, 240)

CSS: --violet

Primary action highlights, buttons, and callout sections.

Typography System

Display Font

Plus Jakarta Sans

Used for display titles, marketing headlines, and wordmarks. A clean geometric grotesque that gives BackSpin its open, premium feel.

Light: Wait states are new developer revenue.

Medium: Wait states are new developer revenue.

Bold: Wait states are new developer revenue.

Body Font

Hanken Grotesk

Our primary sans font, used for all interface body copy, descriptions, forms, and secondary elements. Highly readable at smaller scale.

Light (300): The open attention exchange for builders.

Regular (400): The open attention exchange for builders.

Semibold (600): The open attention exchange for builders.

Web & Mobile Launcher Icons

Includes specific sizes for standard desktop favicons (`16x16`, `32x32`, `48x48`), Apple Touch Icons (`180x180`), and Android/Chrome launcher sizes (`192x192`, `512x512`).

Apple Touch Icon (PNG)Android Icon (512px)