Brand Guidelines

The Blowfish brand.

Guidelines for using the Blowfish name, logos, colors, and typography. Download official assets below.

Icon mark

The Aura Puff icon is the primary brand mark. Use the color version on light backgrounds and the white version on dark backgrounds.

Icon - Color

Icon - Color (dark bg)

Icon - White

Logo lockups

The full lockup pairs the icon with the wordmark. Use this as the primary logo wherever space allows.

Lockup - Color + Black

Lockup - Color + White

Wordmark

The standalone wordmark can be used when the icon is already established nearby or space is constrained horizontally.

Wordmark - Black

Wordmark - White

Usage guidelines

Keep the brand consistent by following these rules.

Do

Use official SVG assets from this page
Maintain clear space around the logo equal to the icon height
Use the color lockup on light backgrounds, white lockup on dark
Use the icon alone when space is limited (favicons, app icons)
Spell "Blowfish" with a capital B in text

Don't

Alter the logo colors, proportions, or orientation
Add effects like drop shadows, glows, or outlines
Place the color logo on busy or low-contrast backgrounds
Recreate the wordmark in a different typeface
Use the brand mark as part of your own product logo

Color palette

The primary brand color is Orange 500 (#FF6B2C). It pairs with a zinc-based neutral scale and semantic colors for UI states.

Primary - Brand Orange

Orange 500#FF6B2CPrimary accent, CTAs, links

Orange 600#E85520Hover (light mode)

Orange 700#CC4400Hover (dark mode), gradient end

Orange 800#9A3300Deep pressed states

Light Tints

Orange 400#FF8F4CLighter highlights

Orange 300#FFBA6BWarm emphasis

Orange 200#FFD9A0Subtle warm fills

Orange 100#FFF3E0Badge backgrounds

Neutral - Dark

Gray 950#09090BPage background (dark)

Gray 900#18181BPrimary text (light)

Gray 800#27272ASecondary surfaces

Gray 700#3F3F46Tertiary elements

Neutral - Light

Gray 500#71717AMuted text

Gray 400#A1A1AADescriptions

Gray 300#D4D4D8Light borders

Gray 100#F4F4F5Card backgrounds (light)

Semantic

Success#10B981Confirmations

Error#EF4444Errors, destructive

Info#3B82F6Informational states

Amber#F59E0BWarnings, warm highlights

Typography

DM Sans is the sole typeface for both the website and the logo wordmark. Geist Mono is used for code blocks.

Wordmark - DM Sans

700 Bold + 200 Thin · -0.5 letter-spacing

DM Sans - Weight System

200The quick brown fox jumpsWordmark "fish"

300The quick brown fox jumpsLarge display alternate

400The quick brown fox jumpsBody text

500The quick brown fox jumpsLabels, navigation

700The quick brown fox jumpsWordmark "blow", headings

Type Scale

Element	Size	Weight	Tracking
Display	48-64px	400	-0.05em
H1	32-40px	400	-0.05em
H2	24-28px	400	-0.05em
H3	18-20px	500	-0.025em
Body	14-16px	400	0
Small	12-13px	400	0
Overline	10-11px	500	0.1em