# Finanly Brand System V2

Last updated: 2026-09-23
Plan: `plans/UI_REDESIGN_AND_MARKETING_WOW_BINARY_GATE_PLAN_V1.md` (WS1)
Build script: `scripts/brand/build_brand.py` (deterministic; regenerates everything except the two hand-drawn SVGs)

## 1. Mark

The mark is the **florin ƒ + spark** (approved by Luca 2026-09-23): a single monoline script "f" — the florin sign, the original currency symbol — whose crossbar rises to the right and ends in a four-point spark: *money flow becoming intelligence*. It came out of the fal explorations Luca picked (spark tile, flowing f, glass cube: `temp/ui_redesign/brand_explore2/`, refined in `brand_explore3/`), then hand-vectorised.

Geometry (viewBox `0 0 64 64`, stroke 7.5, round caps and joins):
- Stem + hook: `M13 47 C11 58 24 60 27 49 L35 19 C37.5 8.5 49 6 50.5 13.5`
- Crossbar: `M24 32 L43 29`
- Spark (filled): `M55 16.8 Q56.4 20.6 60.2 22 Q56.4 23.4 55 27.2 Q53.6 23.4 49.8 22 Q53.6 20.6 55 16.8 Z`
- Sources: `ui/finanly-ui/public/branding/v2/mark.svg` (gradient), `mark-mono.svg` (`currentColor`); generator geometry in `scripts/brand/build_brand.py` (`MARK_PATHS`, `MARK_FILL_PATHS`) and vector variants in `scripts/brand/flowf.py` (stroke, gradient tile, navy tile).

Gradient (bottom-left → top-right, `userSpaceOnUse` 12,58 → 56,10):
`#0dd1b0` (teal) → 50% `#22d3ee` (cyan) → `#7a5cff` (violet)

Hero objects: the 3D interpretations (`brand_explore3/r3-04-flowf-glass-3d.jpg` glass tube, `r3-05-cube-flowf-3d.jpg` glass cube, `r3-06-spark-tile-glass-3d.jpg` frosted tile) are the reference look for marketing imagery; regenerate via `scripts/brand/fal_gen.py` with `refs`.

Rules: the gradient lives only on the mark; never across the wordmark. Minimum size 16px (favicon); below 20px prefer the gradient tile (`florin-tile`) which stays legible. Never recolour, outline, skew or add a drop shadow. Clear space = one stroke width (7.5/64 of the mark height) on all sides.

## 2. Wordmark

"Finanly" — Sora Bold (700), tracking −0.03em, converted to paths (`wordmark.svg`, `fill="currentColor"`). In HTML the wordmark is live text in `--fn-font-display` (Space Grotesk 600 in the app shell; Sora on marketing). No ".ai" in the lockup; the domain appears in copy and URLs only.

## 3. Lockups

- `lockup-h-light.svg` / `lockup-h-dark.svg` — mark (64) + 16 gap + wordmark (cap height 36, optically centred). Default for headers, footers, documents.
- `lockup-v-light.svg` / `lockup-v-dark.svg` — mark centred over wordmark. For square contexts (social avatars, slides).
- `tile.svg` — mark at 60% on navy `#0b0f19` rounded square (radius 14/64). Source for app icons.

## 4. Colour

Primitives:
| Token | Value | Use |
|---|---|---|
| Ink / Navy | `#0b0f19` | dark surfaces, text on paper |
| Night 2 | `#141b2e` | dark elevated surfaces |
| Paper | `#fbfbfd` | light page background |
| Tint | `#f3f4f8` | light alternate band / muted surface |
| Teal | `#0dd1b0` | brand accent (primary CTA fill in gradient) |
| Cyan | `#22d3ee` | brand accent mid |
| Violet | `#7a5cff` | brand accent end; **AI surfaces** keep this as their solo accent |
| Signal green | `#3dd598` | semantic success only (legacy `--primary`, kept for status) |
| Amber | `#f59e0b` | warning |
| Red | `#ef4444` | danger |
| Blue | `#3b82f6` | info |

Brand gradient (CSS): `linear-gradient(120deg, #0dd1b0 0%, #22d3ee 55%, #7a5cff 100%)`
Headline accent text: same gradient with `background-clip: text`.

## 5. Typography

- Display: **Space Grotesk** 600/700 — marketing headlines, app page titles.
- Body/UI: **Inter** 400/500/600 — everything else.
- Numeric/mono: **JetBrains Mono** 500 — amounts in tables, eyebrows, code. Use `font-variant-numeric: tabular-nums` on all amount columns.
- Scale (marketing): h1 `clamp(2.5rem, 6vw, 4.5rem)` lh 1.04 ls −0.03em; h2 `clamp(1.9rem, 4vw, 3rem)` ls −0.02em; lede `clamp(1.05rem, 1.5vw, 1.25rem)` lh 1.6; body 16-18px lh 1.7; eyebrow 12px 600 uppercase ls 0.08em.
- Scale (app): base 14px; page title 22px/600 display; section 16px/600; table 13px; captions 12px.

All three families are OFL and loaded through `next/font/google` (self-hosted at build time).

## 6. Icon & social set (generated)

| File | Size | Purpose |
|---|---|---|
| `ui/finanly-ui/app/icon.svg` | vector | favicon (transparent, gradient — works on light and dark tabs) |
| `ui/finanly-ui/app/icon.png` | 32 | favicon fallback |
| `ui/finanly-ui/app/apple-icon.png` | 180 | iOS home screen (navy tile) |
| `ui/finanly-ui/public/icon-192.png`, `icon-512.png` | 192/512 | PWA icons (navy tile) |
| `ui/finanly-ui/public/icon-mask.png` | 512 | maskable, mark inside 80% safe zone |
| `ui/finanly-ui/public/manifest.webmanifest` | — | name, theme `#0b0f19`, icons |
| `ui/finanly-ui/app/opengraph-image.png` | 1200×630 | default OG/Twitter card (navy, gradient glow, lockup, tagline) |

`app/layout.tsx` sets `metadataBase` (`NEXT_PUBLIC_SITE_URL`, default `https://app.finanly.ai`), title template, `theme-color` for both schemes and the manifest link. Per-route OG images are added with the marketing pages (WS3/WS5).

## 7. Regenerating

```bash
# fonts are fetched once into temp/ui_redesign/fonts (gitignored)
python3 scripts/brand/build_brand.py --weight SemiBold
```
Requires `fontTools` and `cairosvg` (both present on the host). Edit `mark.svg` first if the geometry changes, then mirror the path data in `MARK_PATHS` inside the script.

## 8. Legacy assets

`ui/finanly-ui/public/branding/{icon_dark,icon_white,logo_dark,logo_white}.png` and the Illustrator PDF are retained for history and diligence packets only. They must not be used in new UI. They are removed from code paths in WS2 (app header/footer) and WS4 (marketing header/footer).