Brand kit · visual identity

The Baywire look and voice.

Colors, typography, logo marks, and tone for anyone building with or alongside Baywire — partners, press, and internal teams.

4color families
2typefaces
2gradients
SVGlogo file

Overview

Tampa Bay, your way. Baywire is a guided lens on events, places, and editorial picks across the Bay. The brand balances warm Gulf Coast hospitality with clear, trustworthy information design.

This kit documents the visual and verbal identity used across baywire.app: logo marks, color tokens, typography, gradients, and tone. Use it when building partner materials, press assets, or internal surfaces that should feel unmistakably Baywire.

Logo

The Baywire mark pairs a gradient B tile with a typographic wordmark. Use both together when space allows; the mark alone is fine for favicons and compact UI.

Baywire mark

Baywire

Wordmark lockup

Do

Use the gradient B mark with adequate clear space (at least the height of the B on all sides).
Pair the mark with the wordmark: “Bay” in ink, “wire” in Gulf 500 (or Gulf 200 on dark backgrounds).
Keep the mark at readable sizes — minimum 24px for digital, 12mm for print.

Don't

Do not stretch, rotate, or skew the logo mark.
Do not change the gradient stops or substitute flat colors for the B tile.
Do not place the mark on busy photography without a solid or blurred backdrop.
Do not imply Baywire is an open-source or unaffiliated product.

Colors

Four token families power the Baywire palette. Values are defined in globals.css and consumed via Tailwind utilities.

Gulf

Primary brand teal — links, accents, and the “wire” in the wordmark.

Gulf 50

#ecf8fb

Tinted surfaces

gulf-50

Gulf 200

#8fd2e2

Dark-mode accents

gulf-200

Gulf 400

#2c97b0

Logo gradient end

gulf-400

Gulf 500

#1c7c93

Primary accent

gulf-500

Gulf 700

#0f4351

Deep teal

gulf-700

Sunset

Warm orange accent — energy, highlights, and gradient pairings with Gulf.

Sunset 50

#fff4ec

Tinted surfaces

sunset-50

Sunset 300

#ff9a59

Soft highlights

sunset-300

Sunset 400

#ff7a2b

Logo gradient start

sunset-400

Sunset 500

#ec5b0a

Gradient text

sunset-500

Sunset 600

#b94406

Deep orange

sunset-600

Sand

Warm neutral backgrounds — the default canvas in light mode.

Sand 50

#fdf9f3

Page background

sand-50

Sand 100

#f7eedf

Raised surfaces

sand-100

Sand 300

#ddbf8a

Borders, dividers

sand-300

Sand 500

#a87c3d

Muted warmth

sand-500

Ink

Neutral text and dark surfaces — body copy, headings, and dark mode base.

Ink 50

#f7f5f1

Dark-mode foreground tint

ink-50

Ink 300

#aaa69a

Muted borders

ink-300

Ink 400

#827e74

Secondary text

ink-400

Ink 800

#201f1a

Dark surfaces

ink-800

Ink 900

#14130f

Primary text / dark bg

ink-900

Corner radius

Default corner radius for cards, dialogs, and interactive surfaces.

1.25rem · rounded-card

Typography

Two type families: Fraunces for display warmth, InterVariable for readable UI and prose.

font-display · Fraunces

Tampa Bay tonight

Display headings, hero titles, and the Baywire wordmark.

Semibold (600) for headings; regular for occasional display copy.

font-sans · InterVariable

Live music, festivals, coffee shops, and waterfront hangs — gathered and curated daily.

Body text, UI labels, metadata, and navigation.

Regular (400) for prose; medium (500) for emphasis; semibold (600) for buttons.

Gradients

Brand gradients pair Sunset orange with Gulf teal. Use for hero accents and emphasis — not for large background fills.

Sunset → Gulf

Default hero accent and gradient text. Used in display headings and the logo tile.

#ff7a2b → #2c97b0

Baywire

Gulf → Sunset

Alternate gradient for variety in marketing surfaces. Same token stops, reversed direction.

#2c97b0 → #ff7a2b

Baywire

Gradient heading

The GradientHeading component applies the same treatment to display-level accents.

Voice and tone

Baywire sounds like a knowledgeable local friend — specific, honest, and easy to scan on a phone.

Tagline

Tampa Bay, your way.

Show your work

Listings are Baywire's. Ticket and organizer links are for verification. Metrics are public. We earn trust through transparency, not opacity.

Guide, don't hype

Editorial scores and summaries are grounded in source facts and our taxonomy — never invented enthusiasm.

Mobile-first clarity

Write for someone scanning on a phone between plans. Short sentences, scannable structure, text that works without color alone.

Local and specific

Say Tampa Bay, St. Pete, Clearwater — not “the area.” Name neighborhoods, venues, and vibes people actually use.

Downloadable assets

Logo file for press, partner, or internal use. The site favicon uses the same artwork.

Baywire mark
Gradient B tile with rounded corners — used in the header, favicon, and compact UI.
SVG · /brand/baywire-mark-rounded.svg
Download