# Almighty™ Brand Guidelines

**Version:** 1.0
**Last Updated:** 2026-04-03
**Owner:** UrbanPX
**Status:** ACTIVE

---

## 1. Brand Overview

### Who We Are

Almighty is a personal finance ecosystem by UrbanPX. Two apps — Almighty Budget and Almighty Split — work together to give people complete control over their money. Budget every dollar, split with friends, build wealth that lasts.

### Brand Personality

| Trait            | What It Means                                                                         |
| ---------------- | ------------------------------------------------------------------------------------- |
| **Premium**      | We look, feel, and perform like a luxury product. Every pixel is intentional.         |
| **Bold**         | We don't whisper. ALMIGHTY is BIG energy. Confident, not arrogant.                    |
| **Aspirational** | We make people feel rich. The experience of wealth management done right.             |
| **Honest**       | We're upfront about what we offer, what we collect, and how we make money.            |

### Brand Promise

**"Your money, fully understood."**

This is the house-brand promise and belongs to almighty.money. Each product carries its own slogan (see §5); do not put this line on a product hero.

---

## 2. The ALMIGHTY Wordmark

### Construction

The ALMIGHTY wordmark is Montserrat Black (900) Italic with a continuous gradient and a gold "G" interruption.

```
Font: Montserrat
Weight: 900 (Black)
Style: Italic
Case: ALL CAPS
```

### Gradient Specification

The wordmark uses a single continuous gradient from left to right with hard color stops for the gold G:

```
Direction: 105deg (CSS) / diagonal (SVG)
Angle matches the italic slant of the letterforms.

Color Stops:
  0%       → #00aa95  (dark green, left edge)
  37.9%    → #00cc7a  (mid green, approaching G)
  37.9%    → #ff9100  (dark orange — G starts, HARD transition)
  48.15%   → #fabe2c  (light gold — G ends, HARD transition)
  48.15%   → #00c878  (mid green, after G resumes)
  100%     → #00dd80  (light green, right edge)
```

**Green direction:** Dark (#00aa95) on left → Light (#00dd80) on right. Continuous flow — does NOT restart after the G.

**Gold direction:** Dark orange (#ff9100) on left → Light gold (#fabe2c) on right. Matches the green's left-to-right flow.

### SVG Gradient (for the SVG file)

The SVG uses `userSpaceOnUse` coordinates. Gold stops are at 47.475% and 59.575% due to SVG coordinate mapping differences from CSS.

### Padding

- **Left:** 0.05em — prevents italic A bottom-left clipping
- **Right:** 0.25em — prevents italic Y right-side clipping

### Variants

| Variant   | File                       | Usage                                      |
| --------- | -------------------------- | ------------------------------------------ |
| Clean     | `almighty-wordmark.svg`    | Headings, hero sections, decorative        |
| Trademark | `almighty-wordmark-tm.svg` | Marketing materials, first usage on a page |

### Product Lockups

Each product adds its name after the wordmark with a separator:

| Product         | Separator   | Format               | Example                |
| --------------- | ----------- | -------------------- | ---------------------- |
| Almighty Budget | `\|` (pipe) | [WORDMARK] \| Budget | Nav bars, footers      |
| Almighty Split  | `\|` (pipe) | [WORDMARK] \| Split  | Nav bars, footers      |
| Almighty Money  | `.` (dot)   | [WORDMARK] . Money   | Nav bar, ecosystem hub |

- **Separator:** white at 20% opacity, font-weight light
- **Product name:** white, font-weight 700 (bold), not italic
- Product name is always smaller than the wordmark

### What NOT to Do

- Never change the gradient colors
- Never change the gradient direction
- Never use the wordmark without italic
- Never abbreviate to "AB" or "AS"
- Never put the wordmark on a green or gold background (contrast)
- Never stretch or distort the wordmark
- Never add effects (drop shadow, outline, etc.)
- Never use a different font for the wordmark

---

## 3. Color System

### Primary Brand Colors

| Name                       | Hex       | Usage                                 |
| -------------------------- | --------- | ------------------------------------- |
| **Almighty Green (Light)** | `#00dd80` | Primary accent, CTAs, positive states |
| **Almighty Green (Dark)**  | `#00aa95` | Gradient start, depth, dark accents   |
| **Almighty Gold (Dark)**   | `#ff9100` | The G, premium accents, Pro features  |
| **Almighty Gold (Light)**  | `#fabe2c` | Gold gradient end, warm accents       |

### Surface Colors (Dark Theme)

| Name                 | Hex                               | Usage                             |
| -------------------- | --------------------------------- | --------------------------------- |
| **Background**       | `#0D1117` / `#10131c` / `#0a0e14` | Page backgrounds (varies by site) |
| **Surface**          | `#161B22` / `#1c1f29` / `#151a21` | Cards, containers                 |
| **Surface Elevated** | `#272a33` / `#1b2028`             | Elevated cards, hover states      |
| **Border**           | `#21262D`                         | Subtle borders, dividers          |

### Text Colors (Dark Theme)

| Name           | Hex                               | Usage                      |
| -------------- | --------------------------------- | -------------------------- |
| **Primary**    | `#FFFFFF`                         | Headings, emphasis         |
| **Body**       | `#C9D1D9` / `#bacbbd` / `#a8abb3` | Paragraph text             |
| **Muted**      | `#8B949E`                         | Secondary text, labels     |
| **Warm Muted** | `#d3c5ad`                         | Used on Almighty Money hub |

### Per-Site Background

Each Almighty site uses a slightly different dark background for distinct personality while maintaining ecosystem cohesion:

| Site            | Background | Card Surface | Accent                               |
| --------------- | ---------- | ------------ | ------------------------------------ |
| Almighty Budget | `#10131c`  | `#1c1f29`    | `#00D084`                            |
| Almighty Split  | `#0a0e14`  | `#151a21`    | `#00D084` (wordmark), `#52f9a8` (UI) |
| Almighty Money  | `#10141a`  | `#1c2026`    | Gold + Green                         |

### Light Mode

Both Budget and Split support light mode. Colors stay the same for the wordmark — the gradient does NOT change between modes. Only surface/text colors invert.

---

## 4. Typography

### Font Family

**Montserrat** — used across all Almighty products and websites.

```
Google Fonts: Montserrat
Weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold), 900 (Black)
Styles: Normal + Italic
```

### Type Scale

| Element         | Weight        | Style  | Size (Desktop)  | Size (Mobile) |
| --------------- | ------------- | ------ | --------------- | ------------- |
| Hero Headline   | 900 Black     | Italic | text-8xl (6rem) | text-3xl-5xl  |
| Section Heading | 800 ExtraBold | Normal | text-4xl-5xl    | text-3xl      |
| Card Title      | 700 Bold      | Normal | text-xl-2xl     | text-lg-xl    |
| Body            | 400-500       | Normal | text-base-lg    | text-base     |
| Label           | 700 Bold      | Normal | text-xs         | text-[10px]   |
| Nav Links       | 500 Medium    | Normal | text-base       | text-sm       |

### Special Typography

- **Wordmark:** Always 900 Black Italic
- **CTA Buttons:** 900 Black Italic Uppercase (on Almighty Money hub)
- **Section Labels:** Bold, Uppercase, tracking-widest, small size

---

## 5. Slogans & Taglines

> **Exactly three slogans exist ecosystem-wide** — one per brand, listed
> below. Everything else on this page is a supporting line, never a hero.
> Retired 2026-04-19 and not to be reused anywhere: "Your money. Your
> control.", "Your Money. Your Rules.", "Split Expenses. Stay Friends.", and
> the feature name "Milestone Achievements" (now Milestone Achievements).

### Ecosystem (almighty.money)

| Slogan                              | Usage                        |
| ----------------------------------- | ---------------------------- |
| **Your money, fully understood.**   | House-brand slogan — hero    |
| **Almighty Moves. Almighty Money.** | Campaign headline            |
| **Two apps. One ecosystem.**        | Subheadline, marketing copy  |
| **Build wealth that lasts.**        | Closing tagline              |

### Almighty Budget

| Slogan                                        | Usage                          |
| --------------------------------------------- | ------------------------------ |
| **Budgeting that actually gets your money.**  | Primary slogan, hero headline  |
| **Premium budgeting meets gamified savings.** | Subheadline                    |
| **Every dollar has a job.**                   | Zero-based budgeting messaging |

### Almighty Split

| Slogan                                            | Usage                          |
| ------------------------------------------------- | ------------------------------ |
| **Money between friends, sorted.**                | Primary slogan, hero headline  |
| **No more awkward "who owes who" conversations.** | Subheadline                    |
| **Three steps to peace.**                         | How-it-works section           |

### Trust / Security

| Slogan                       | Usage             |
| ---------------------------- | ----------------- |
| **Your data stays yours.**   | Trust messaging   |
| **AES-256 at rest, TLS 1.2+ in transit.** | Security badge |
| **We never sell your data.** | Privacy messaging |

---

## 6. Iconography

### Material Symbols Outlined

All Almighty websites use Google Material Symbols Outlined as the icon system.

```html
<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"
  rel="stylesheet"
/>
```

### Key Icons by Feature

| Feature        | Icon                        | Code                                                                    |
| -------------- | --------------------------- | ----------------------------------------------------------------------- |
| Budget/Finance | account_balance_wallet      | `<span class="material-symbols-outlined">account_balance_wallet</span>` |
| Security       | lock, shield, verified_user |                                                                         |
| Milestone Achievements  | eco                         |                                                                         |
| Splitting      | call_split                  |                                                                         |
| Groups         | group                       |                                                                         |
| Settlements    | bolt                        |                                                                         |
| Insights       | insights                    |                                                                         |
| Recurring      | event_repeat                |                                                                         |

### Emoji Usage

Emoji are used sparingly for personality in feature cards:

- 💰 Budget
- 🤝 Split
- 🌱 Milestone Achievements
- 🔒 Security
- 🎨 Design
- 🔗 Ecosystem

---

## 7. Design Elements

### Glass Cards

Used for floating preview elements and premium UI accents:

```css
.glass-card {
  background: rgba(28, 32, 41, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
```

### Gold Glow

Used on Almighty Money hub for premium accents:

```css
.gold-glow {
  box-shadow: 0px 20px 40px rgba(250, 190, 44, 0.08);
}
```

### Growth Gradient

The Almighty green gradient used for buttons and accents:

```css
.growth-gradient {
  background: linear-gradient(135deg, #00aa95 0%, #00d084 100%);
}
```

### Gold Gradient

Used for premium/Pro features and the Money brand:

```css
.gold-gradient {
  background: linear-gradient(to right, #ff9100, #fabe2c);
}
```

### Ambient Blur

Decorative background blurs for atmosphere:

```css
/* Green ambient */
background: rgba(0, 221, 128, 0.05);
blur: 120px;

/* Gold ambient (Almighty Money) */
background: rgba(250, 190, 44, 0.1);
blur: 120px;
```

---

## 8. Entity Naming

### Always Use

| Entity          | Full Name                                               |
| --------------- | ------------------------------------------------------- |
| Company         | **UrbanPX** (marketing) / **UrbanPX, LLC** (legal only) |
| Budget app      | **Almighty Budget**                                     |
| Split app       | **Almighty Split**                                      |
| Hub site        | **Almighty Money**                                      |
| Ecosystem       | **the Almighty ecosystem**                              |
| Savings feature | **Milestone Achievements**                                       |

### Never Use

- AB, AS, AM (abbreviations)
- "the budget app", "the split app"
- "UrbanPX's Almighty" (redundant)
- "Almighty Finance" (not a product)

---

## 9. Domain Architecture

| Domain             | Brand           | Purpose                               |
| ------------------ | --------------- | ------------------------------------- |
| almighty.money     | Almighty Money  | Ecosystem hub                         |
| almightybudget.com | Almighty Budget | Budget product site                   |
| almightysplit.com  | Almighty Split  | Split product site                    |
| urbanpx.com        | UrbanPX         | Company site (trust, security, about) |

---

## 10. Legal

- **Almighty™** — trademark of UrbanPX, LLC
- The ™ symbol should appear on first mention in formal materials
- Use the `almighty-wordmark-tm.svg` for formal contexts
- Copyright: **© 2026 UrbanPX. All rights reserved.**
- In legal documents only, use "UrbanPX, LLC"

---

## 11. Media Kit Assets

### Available Files

| File                      | Format  | Location                                       |
| ------------------------- | ------- | ---------------------------------------------- |
| ALMIGHTY wordmark (clean) | SVG     | `assets/brand/almighty-wordmark.svg`           |
| ALMIGHTY wordmark (™)     | SVG     | `assets/brand/almighty-wordmark-tm.svg`        |
| Wordmark specification    | MD      | `assets/brand/ALMIGHTY_WORDMARK_SPEC.md`       |
| Brand guidelines          | MD      | `assets/brand/BRAND_GUIDELINES.md` (this file) |
| Original logo with icon   | SVG/PNG | `assets/logo/logo.svg`, `assets/logo/logo.png` |

### Requesting Additional Assets

Contact: christian@urbanpx.com

---

## Changelog

| Date       | Version | Change                           |
| ---------- | ------- | -------------------------------- |
| 2026-04-03 | 1.0     | Initial brand guidelines created |