BudgetKit Brand Guide

Visual identity, logo usage, colors, typography, and UI standards.

Logo Variations

BudgetKit

Lockup — dark

BudgetKit

Lockup — light

BudgetKit

Lockup — on brand

Icon — dark

Icon — light

BudgetKit

Wordmark

Color Palette

Aa

Brand 500

Primary

#8b5cf6

Aa

Brand 600

Primary Dark

#7c3aed

Aa

Brand 400

Primary Light

#a78bfa

Aa

Icon Purple

Logo Accent

#8870FF

Aa

App Background

Dark BG

#080810

Aa

Icon Background

Icon BG

#1C1630

Aa

Success

Positive

#10b981

Aa

Danger

Negative

#ef4444

Typography

Display

Display Heading

Heading

Section Heading

Subheading

Subheading

Body

Inter is used throughout the BudgetKit interface for clarity, legibility, and neutrality in financial contexts. Body text uses text-slate-400 on dark backgrounds.

Font weights

400 Regular 500 Medium 600 Semibold 700 Bold 800 Extrabold

Usage Guidelines

Do

  • ✓ Use the logo on dark (#1C1630 or darker) or white backgrounds only
  • ✓ Maintain at least 16px of clear space around the logo on all sides
  • ✓ Use the brand violet (#8b5cf6) as the primary accent color in UI
  • ✓ Pair the lockup (icon + wordmark) together, or use the icon or wordmark independently
  • ✓ Use Inter at the correct weights: 600–800 for headings, 400–500 for body

Don't

  • ✗ Recolor, rotate, skew, or apply effects (shadows, outlines, gradients) to the logo
  • ✗ Place the logo on busy backgrounds, photography, or colors that reduce contrast
  • ✗ Introduce new accent colors or substitute the violet for other brand colors
  • ✗ Stretch or distort the icon's proportions — always scale uniformly
  • ✗ Use low-contrast text (below WCAG AA 4.5:1 ratio) in financial or critical UI

Minimum Sizes

32px

Icon minimum (digital)

BudgetKit

24px icon

Lockup minimum (digital)

BudgetKit

16px

Wordmark minimum