Save 30% on your first month. Redeem
Bytown logo

Bytown

Brand Guide

Brand Identity

Mission

Help business owners launch ad campaigns in 5 minutes with human-supervised AI. No marketing expertise required.

Tagline

"Your AI Marketing Team"

Used in hero sections, social media bios, and email signatures.

Logo

Bytown logo on light background Bytown
Bytown logo on dark background Bytown

Always maintain clear space around the logo equal to the height of the mountain icon.

Color Palette

Deep Charcoal
#1A1A1A
Vibrant Blue
#4A90E2
Accent Blue
#4686FE
Soft White
#F9F9F9
Light Grey
#F0F0F0
Subtle Grey
#E0E0E0
ColorHexUsage
Deep Charcoal#1A1A1AHeadlines, dark backgrounds, primary text
Vibrant Blue#4A90E2Charts, badges, progress bars — decorative accents
Accent Blue#4686FECTA buttons and primary actions ONLY — never decorative
Soft White#F9F9F9Main page backgrounds
Light Grey#F0F0F0Cards, secondary backgrounds
Subtle Grey#E0E0E0Borders, dividers

Text Colors

#1A1A1A — Primary / Headlines
#4A4A4A — Body text
#808080 — Muted / Secondary
Bytown — Brand Guide Page 1 of 3

Typography

Primary Font: Inter

Used for all UI text — headlines, body, navigation, CTAs. Available via Google Fonts in weights 400, 500, 600, 700.

Alternatives: Manrope, DM Sans, Plus Jakarta Sans. Never use: Roboto, Arial, Open Sans, system fonts.

ElementSizeWeightLine HeightColor
Headlines (H1) 36–64px 700 (Bold) 1.1 #1A1A1A
Subheadings (H2–H3) 20–30px 700 (Bold) 1.2 #1A1A1A
Body 16–18px 400 (Regular) 1.7 #4A4A4A
Small / Labels 14px minimum 500 (Medium) 1.4 #808080

Launch campaigns in 5 minutes

Human-supervised AI handles everything

Describe your business in plain English. The AI generates keywords, ad copy, targeting, and budget recommendations — all reviewed by human experts before going live.

Rules: Max 65–75 characters per line. Use fluid typography with clamp(). Strong weight contrast between headlines (700) and body (400).

Spacing — 8pt Grid

All spacing values derive from an 8-point base grid. Use only these values for margin, padding, and gaps.

4px
8px
16px
24px
32px
48px
64px
96px

Section spacing: 80–120px desktop, 48–64px mobile (30–40% reduction). Generous whitespace is a core brand principle.

Components

Buttons

Generate free campaign Learn more

Primary: bg #4A90E2, white text, 14px 28px padding, 8px radius, 600 weight.
Secondary: transparent bg, 2px #E0E0E0 border. Hover: translateY(-1px).

Badge

AI Ad Platform

bg #F9F9F9, 1px #E0E0E0 border, 999px radius, 6px 16px padding.

Card

AI-powered audits

Detailed account health scoring across all connected ad platforms.

White bg, 1px #E0E0E0 border, 16px radius, 2rem padding.
Hover: translateY(-4px), shadow 0 12px 24px rgba(26,26,26,0.08).

Input

12px 16px padding, 2px #E0E0E0 border, 8px radius.
Focus: border #4A90E2, shadow 0 0 0 3px rgba(74,144,226,0.1).

Sidebar — Floating Panel (Inset Sidebar)

Desktop navigation uses a floating panel pattern (similar to macOS Ventura Finder). The sidebar floats over the dotted background with rounded corners and a card shadow, rather than sitting flush against the viewport edge.
White bg, 1px #E0E0E0 border, 16px radius, shadow 0 2px 8px rgba(0,0,0,0.08), 12px margin from viewport edges.
Expanded: 240px wide. Collapsed: 72px wide — same floating style.
Height: viewport minus 24px (12px top + 12px bottom margin). Sticky positioning.

Bytown — Brand Guide Page 2 of 3

Content Voice

Tone

Clear. Direct. Results-focused.

Stealth speaks like a sharp marketing expert, not a SaaS brochure. Short sentences. Lead with outcomes. Use numbers.

Key Rules

  • Short sentences: 8–15 words
  • Lead with benefits, not features
  • Use "you/your" — speak to the reader
  • Use numbers: "5 minutes", "24/7", "3 ad variations"
  • Contractions OK ("we'll", "don't", "you're")
  • No jargon or buzzwords

Headlines & CTAs

Do
  • "Launch Google Ad campaigns in 5 minutes"
  • "Your AI marketing team, always on"
  • "Generate free campaign"
  • "Create free campaign"
  • "See it in action"
Don't
  • "Revolutionary AI-Powered Marketing Solution"
  • "Unlock Unprecedented Growth"
  • "Get Started"
  • "Learn More"
  • "Submit"

Visual Design

Do
  • Blue (#4A90E2) for CTAs and accents only
  • Generous whitespace (80–120px sections)
  • Subtle shadows (opacity ≤ 0.08)
  • 8–16px border radius
  • Sections alternate: light → white → dark
Don't
  • Purple, bright gradients, or off-palette colors
  • Overuse blue in decorative elements
  • Excessive shadows or cluttered layouts
  • Fully rounded cards or 0px corners
  • Stock photography as hero images

Animation

Fast (hovers)200ms
Base (transitions)300ms
Slow (page load)500ms
Easingcubic-bezier(0, 0, 0.2, 1)

Only animate transform and opacity. Never width, height, margin, or padding. No parallax, no bouncing logos, no auto-playing carousels.

Accessibility (WCAG AA)

  • #1A1A1A on #F9F9F9 — 17.1:1 contrast ratio
  • #4A4A4A on #F9F9F9 — 9.9:1 contrast ratio
  • Focus states: 2px solid #4A90E2 outline
  • Touch targets: 44px minimum
  • Semantic HTML (nav, main, section, footer)
  • Alt text on all images
  • Keyboard navigable throughout

Iconography

Use Lucide icons exclusively. Stroke-based, 2px stroke width. Sizes: 16px (inline), 24px (standard), 32–40px (features). Accent color: #4A90E2.

Bytown — Brand Guide Page 3 of 3