# BudgeFlow brand guidelines

Version 1.0 · August 2026

## Brand foundation

### Core idea

**Money clarity, in one message.**

BudgeFlow closes the gap between spending money and remembering to track it. The experience should feel like a calm, capable guide in a familiar text thread—not another financial system demanding attention.

### Positioning

For people who want an accurate budget but dislike the friction of traditional budgeting apps, BudgeFlow is the SMS-first budget that captures spending at the moment it happens. Unlike bank-sync-first tools or manual spreadsheets, it gives immediate feedback without requiring a bank connection or another app-opening habit.

### Promise

**Text an expense. Know what’s left.**

This is the primary tagline and product promise. Use it on homepages, social covers, launch materials, and high-level product introductions.

### Supporting lines

- The budget that keeps up with real life.
- Money clarity, in one message.
- Spend. Text. Done.
- Your budget, already in the conversation.

Use one line at a time. The primary tagline should remain the default.

### Brand pillars

1. **Immediate** — Capture happens when spending happens.
2. **Clear** — Every interaction ends with an understandable next state.
3. **Human** — Plain language, no shame, no finance theatre.
4. **In control** — Users choose what to track, share, or connect.

## Audience

### Primary

Busy, app-fatigued budgeters who understand the value of tracking but struggle with consistency. They may use cash, avoid bank linking, share household spending, or simply want a lighter daily habit.

### Secondary

- Couples and households coordinating shared spending
- Cash-envelope budgeters moving to a digital workflow
- Freelancers and small teams capturing expenses and receipts
- Privacy-conscious people who prefer manual control

### Emotional job

Move the user from “I should probably update my budget” to “I already know where I stand.”

## Logo system

### The Flow Bubble

The mark combines a message bubble with a continuous balance line. The bubble represents the familiar behavior BudgeFlow starts with; the line represents money moving through a plan and resolving into clarity. It deliberately avoids dollar signs, banks, coins, and piggy banks.

### Variants

- Use `budgeflow-logo.svg` on Cloud, white, and other light backgrounds.
- Use `budgeflow-logo-reverse.svg` on Deep Current or photography with sufficient contrast.
- Use `budgeflow-mark.svg` for avatars, app icons, and spaces narrower than 180 px.
- Use the ink or white marks when reproduction is limited to one color.
- Use the tagline lockup only when the tagline remains legible.

### Clear space

Keep clear space on every side equal to half the height of the square mark. No text, edge, image focal point, or partner logo should enter this area.

### Minimum size

- Horizontal logo: 120 px digital / 32 mm print
- Standalone mark: 24 px digital / 8 mm print
- Tagline lockup: 320 px digital / 85 mm print

Below these sizes, use the standalone mark.

### Do not

- Stretch, rotate, outline, bevel, or add a drop shadow to the artwork.
- Change the relationship between the mark and wordmark.
- Recolor individual strokes of the Flow Bubble.
- Put the primary wordmark on a dark background or the reverse wordmark on a light one.
- Place the logo over a busy image area.
- Use the mark as a speech icon inside product UI; reserve it for identity.

## Color

### Core palette

| Name              | Hex       | Role                                 |
| ----------------- | --------- | ------------------------------------ |
| Flow Indigo       | `#4F46E5` | Brand mark, primary actions, links   |
| Flow Indigo Light | `#6D64F3` | Accent on dark backgrounds           |
| Deep Current      | `#17162E` | Headlines, primary text, dark fields |
| Cloud             | `#F7F7FC` | Default page and campaign background |
| Flow Mist         | `#EEECFF` | Soft callouts and selected states    |
| Slate             | `#625F78` | Supporting copy and labels           |
| Line              | `#D9D6EA` | Borders and dividers                 |
| White             | `#FFFFFF` | Cards and reverse content            |

Flow Indigo should be recognizable, not overwhelming. Favor Cloud and White as the visual field, Deep Current for clarity, and Indigo for the action or idea that matters most.

### Semantic palette

| Name        | Hex       | Meaning                        |
| ----------- | --------- | ------------------------------ |
| Clear Mint  | `#2B8A68` | On track, funded, successful   |
| Warm Amber  | `#9A6700` | Needs attention, nearing limit |
| Alert Coral | `#C2414A` | Overspent, error, destructive  |

Semantic colors carry meaning and should not be used as decorative campaign colors. Pair color with text or an icon; never rely on color alone.

## Typography

### Display — Instrument Serif

Use Instrument Serif for brand headlines, high-level numbers, and the wordmark. It adds warmth and makes the brand feel like an intelligent guide rather than enterprise software.

- Sentence case only
- Regular weight
- Tight tracking at large sizes
- Avoid for paragraphs, buttons, or small labels

### Sans — Inter

Use Inter for body copy, navigation, controls, labels, tables, and product UI. Use semibold sparingly for hierarchy.

### Mono — JetBrains Mono

Use JetBrains Mono for example text commands, balances in SMS demonstrations, API-like values, and small bits of financial data where alignment helps. It is an accent, not a default body face.

### Suggested scale

| Role             | Size / line height | Face                  |
| ---------------- | ------------------ | --------------------- |
| Campaign display | 72 / 74            | Instrument Serif      |
| Page title       | 52 / 56            | Instrument Serif      |
| Section title    | 38 / 43            | Instrument Serif      |
| UI title         | 24 / 30            | Inter semibold        |
| Body large       | 18 / 29            | Inter regular         |
| Body             | 16 / 25            | Inter regular         |
| Label            | 13 / 18            | Inter semibold        |
| Command          | 14 / 21            | JetBrains Mono medium |

## Graphic language

### Flowlines

The line inside the mark can extend into a quiet background pattern or a simple connector between states. Flowlines are always smooth, rounded, and continuous. Keep them low contrast so they support information rather than compete with it.

### Message cards

Use paired message cards to show the product loop: a short, dark user command followed by a helpful Indigo response. Keep examples plausible and concise.

Example:

> `coffee 5.80`
>
> Logged $5.80 to Dining. $84.20 left this month.

### Shape

Use rounded rectangles with 10–24 px radii. Corners should feel comfortable, not toy-like. Default cards are white with a subtle Line border; reserve heavy shadows for hero compositions.

### Photography

Choose candid, grounded moments around everyday spending: a coffee counter, grocery basket, shared meal, train platform, or receipt in hand. Favor natural light, real environments, and negative space for copy. Avoid staged piles of cash, luxury aspiration, exaggerated distress, and generic people staring at banking dashboards.

## Voice

### Personality

BudgeFlow is **clear, calm, quick, and quietly encouraging**.

We sound like a capable friend who remembers the numbers. We do not sound like a bank, a motivational speaker, or a scolding parent.

### Writing principles

1. **Lead with the answer.** “$84.20 left in Dining” beats “Your request has been processed.”
2. **Use everyday words.** Say “money left,” not “remaining allocable funds.”
3. **Be exact without being cold.** Include the amount and category that changed.
4. **Never shame spending.** Describe the state and offer the next useful action.
5. **Keep the rhythm short.** SMS copy should usually fit in two compact sentences.

### Voice examples

| Avoid                                        | Use                                                  |
| -------------------------------------------- | ---------------------------------------------------- |
| Transaction successfully categorized.        | Logged $5.80 to Dining.                              |
| Warning! You have exceeded your budget.      | Dining is $12 over. Move money or leave it for now.  |
| You should save more this month.             | You’re $40 from your monthly savings goal.           |
| Insufficient funds allocated.                | Groceries needs $24 more to cover this purchase.     |
| Leverage our AI-powered financial ecosystem. | Text an expense. BudgeFlow keeps the budget current. |

### Mechanics

- Write the name as **BudgeFlow**—one word, capital B and F.
- Use sentence case for headings and buttons.
- Use contractions when they sound natural.
- Use an em dash sparingly; prefer a period in SMS.
- Format USD as `$1,250.00` when cents matter and `$1,250` when they do not.
- Avoid exclamation points in warnings and financial states.
- Avoid “effortless,” “magical,” “revolutionary,” and “financial freedom.”

## Messaging by surface

### Homepage hero

**Text an expense. Know what’s left.**

BudgeFlow keeps your budget current from the same text thread you already use. Log spending, check envelopes, and stay in sync—without linking a bank account.

Primary CTA: **Start free**

### App store or directory

**BudgeFlow is the SMS-first budget that keeps up with real life.** Log an expense in plain language and get an immediate update on what is left—no bank connection required.

### Social bio

Budget by text. Log spending, check what’s left, and keep shared money in sync. No bank link required.

### Product response

**Logged $5.80 to Dining. $84.20 left this month.**

Structure product replies as: confirmation → new state → optional next action.

## Accessibility and production

- Maintain WCAG AA contrast for all body text and controls.
- Provide descriptive alt text for product screenshots; use empty alt text for decorative Flowlines.
- Do not bake critical copy into raster images when live text is possible.
- Preserve the SVG `title` and `desc` elements when embedding assets.
- Prefer SVG for web and print; use PNG for avatars, app listings, and platforms that do not accept SVG.
- Test the mark at 24 px before approving any new treatment.

## Asset approval checklist

- Correct logo variant for the background
- Required clear space preserved
- Name styled as BudgeFlow
- Primary Indigo used as an accent, not a wall of color
- Copy is specific, plainspoken, and nonjudgmental
- SMS example ends with a useful state
- Semantic colors used only for meaning
- Contrast and alt text checked