# SMASH Brand Spec

The single source of truth for SMASH visual identity, voice, and strategic positioning. If something's not here, it's not the brand.

## Vision

> Eine Welt, in der jeder Mensch — egal ob 16 oder 86, Berlin oder Brasilien — täglich auf sein bestes Selbst hinarbeitet. **SMASH Universe macht Disziplin zum täglichen Ritual, nicht zur Ausnahme.**
>
> *EN: A world where every human — 16 or 86, Berlin or Brazil — works toward their best self every day. SMASH Universe turns discipline into a daily ritual, not an exception.*

Vollständige Vision/Mission/Werte/Manifest: `project_smash_universe_manifest.md` (Claude Memory).

## Mission

Ehrliche, kraftvolle Habit-Rituale für jeden Lebensabschnitt. Kein Tracker-Bullshit. Kein Productivity-Theater. Tägliche Rituale, die Identität formen — und Menschen wieder auf den guten Weg bringen.

## 6 Werte

1. **Ritual > Tracking** — Tools setzen Häkchen, wir bauen Rituale.
2. **Identität > Goals** — „Wer wirst du dadurch?" ist die einzige Frage, die zählt.
3. **Honest > Hype** — Build-in-Public, echte Stats, keine Vanity-Metrics.
4. **Polish > Bloat** — 5 Features perfekt > 50 halbherzig.
5. **Hulk > Corporate** — Direkt, kraftvoll, ohne Smileys-Spam.
6. **Tugend > Trend** — Ewige Werte schlagen jeden Productivity-Trend.

## 6 Brand Pillars

| # | Pillar | Wo sichtbar |
|---|---|---|
| 1 | Hulk-Voice (DE + EN) | Copy, Push, Mail, Splash |
| 2 | Ritual-First (Morning + Evening Pflicht) | Onboarding, Daily Loop |
| 3 | Science-Backed (Atomic Habits, Tiny Habits, Wood, Eyal) | Pillar-3-IG, In-App |
| 4 | Solo-Built, Family-Owned (Vegetarianhulk-Persona) | Build-in-Public, Sebi-PS |
| 5 | Universe-Ready (jeder Lebensabschnitt sein SMASH) | „Part of the SMASH Universe" |
| 6 | Werte-fundiert (App: subtil — Universe-Hub: explizit Christ-grounded) | smashuniverse.info / Pillar-3 |

## Tagline

**Date your best self.**

Always with the period. Capitalized only at sentence start. In all-caps contexts (badges, footers): `DATE YOUR BEST SELF.` with letter-spacing.

## Colors

| Token        | Hex       | Usage |
|--------------|-----------|-------|
| Hulk Green   | `#00ff6a` | Primary mark, CTAs, success state |
| Hulk Green 2 | `#00cc55` | Wordmark gradient end, hover states |
| Black        | `#050505` | Backgrounds, mark on light surfaces |
| Surface      | `#111111` | Card backgrounds in dark UI |
| Border       | `#222222` | Hairlines, dividers |
| Text         | `#f0f0f0` | Primary text on dark |
| Text Muted   | `#888888` | Tagline, secondary text |

**Never** use any other green. The Hulk Green is the trademark — drift kills recognition.

## Typography

- **Wordmark / display:** Inter, weight 900, letter-spacing +20px (at 200pt size — scale proportionally)
- **Body / UI:** Inter, weights 400/600/700/800
- **System fallback:** `'Inter', -apple-system, system-ui, sans-serif`
- **Tagline in caps:** Inter 600, letter-spacing +6px

For print or external assets: convert text to outlines so missing fonts can't break the mark.

## Mark variants (in this folder)

| File                  | Use for                                    |
|-----------------------|--------------------------------------------|
| `logo-square.svg`     | App icon (iOS/Android), square posts       |
| `logo-circle.svg`     | Instagram profile picture, round avatars   |
| `logo-mark-only.svg`  | Overlays on photos / colored backgrounds   |
| `logo-wordmark.svg`   | Email signatures, headers, footers         |
| `social-card.svg`     | OG/Twitter card (1200×630)                 |

The "S" mark renders with the Inter font — for print/avatar use, convert to outlines in your editor (Figma, Illustrator: Type → Create Outlines) before exporting PNG/JPG.

## Clear space

Always leave at least one S-height of empty space around the mark. Don't crop, don't tilt, don't add drop shadows, don't put the mark on a busy background without the dark backplate.

## Voice

Direct. German UI by default. No corporate fluff. "Mach hin." not "Wir empfehlen Ihnen, sich Zeit zu nehmen, um …".

When promoting in English: "Date your best self." is the only translation of the brand premise — don't paraphrase.

## App copy constants

These should be identical wherever they appear:

- App name: `SMASH`
- Long name: `SMASH — Life Tracker`
- Tagline: `Date your best self.`
- Description (≤150 chars for app stores / OG): `Track Gewohnheiten, baue Streaks, werde dein bester Self. Hulk-Green-Disziplin im Dark Mode.`

## Social & Web

- App: [smashtheapp.de](https://smashtheapp.de)
- Universe-Hub: [smashuniverse.info](https://smashuniverse.info) _(in Setup — Corporate-Hub für Investoren/Press)_
- Instagram: [@smashtheapp](https://instagram.com/smashtheapp)
- Mail: info@smashtheapp.de

## Icon sources in code

The inline `data:image/svg+xml,...` icons in `index.html`, `firebase-messaging-sw.js` and `manifest.json` are functionally equivalent to `logo-square.svg`. If you change the look, change all three together.

## TODO: PNG export for social cards

`og:image` and `twitter:image` currently point to `social-card.svg`. iMessage, Telegram and Discord render SVG fine. **Twitter, Facebook, LinkedIn and WhatsApp need PNG/JPG** — they will silently drop the preview.

To fix: export `social-card.svg` → `social-card.png` at exactly **1200×630**, then change both meta tags in `index.html` from `.svg` to `.png`. Easy options:

- macOS: open SVG in Preview → File → Export → Format PNG → Resolution 1200×630
- Online: cloudconvert.com (no signup), upload SVG, set width 1200 height 630, download PNG
- Figma: paste SVG, set frame to 1200×630, Export 1×

Same for Instagram posts: export `logo-square.svg` → `logo-square.png` (1024×1024) and `logo-circle.svg` → `logo-circle.png` (1024×1024) for the profile picture.