# SMASH Brand Spec

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

## 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

- Instagram: [@smashtheapp](https://instagram.com/smashtheapp)
- Web: smash-app.de _(domain TBD)_

## 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.