# CashSDK — Brand

The mark is `{$}` — curly braces (code) wrapping a dollar sign (money):
*money, for developers*. Flat, two colors, on a dark squircle.

## Typefaces

| Role         | Font     | Weight         | License    | Notes                               |
|--------------|----------|----------------|------------|-------------------------------------|
| `{` `}` braces | Geist    | SemiBold (600) | OFL (free) | Angular, code-editor character      |
| `$` dollar   | Manrope  | Medium (500)   | OFL (free) | Rounded dollar; balances Geist's weight |
| Wordmark     | Sora     | Medium (500)   | OFL (free) | "CashSDK" — "Cash" ink, "SDK" green |
| Body / UI / paragraphs / docs | Inter | 400–600 | OFL (free) | All running text, interface, and documentation |

**All three are SIL Open Font License — free for commercial use, no licensing
risk.** Glyphs are outlined to vector paths in the SVGs, so no font install is
needed to render. To regenerate: Geist variable font at `wght=600` (braces),
Manrope variable font at `wght=500` (dollar), Sora at `wght=500` (wordmark).

Note on weights: Geist's braces read lighter than Manrope at equal nominal
weights, so Geist runs one step heavier (600 vs 500) to match stroke weight.

The `{$}` is composed with an ink-edge gap of 75 units and the `$` nudged down
40 units (normalized em = 1000) so it sits optically centered between the braces.
The two source fonts have different ems (Geist 1000, Manrope 2000); both are
normalized to a 1000 em at compose time.

## Colors

| Token         | Hex        | Use                                            |
|---------------|------------|------------------------------------------------|
| `--brand`     | `#28CC59`  | The glyph, links, primary buttons, accents     |
| `--ink`       | `#22272B`  | Icon tile, dark UI, wordmark "Cash" on light   |
| `--brand-600` | `#1FA847`  | Hover/pressed state for brand green            |
| `--paper`     | `#FFFFFF`  | Glyph color when placed on a dark/brand ground |

Sampled from the approved icon. Treat `#28CC59` and `#22272B` as the source of truth —
match everything (docs, site, buttons) to these exact values.

## Assets

| File                  | Purpose                                   |
|-----------------------|-------------------------------------------|
| `icon.svg`            | Vector master — edit this, regenerate rest|
| `favicon.svg`         | Browser tab (modern)                      |
| `favicon-16/32.png`   | Legacy favicon fallbacks                  |
| `apple-touch-icon.png`| 180px — iOS home screen                   |
| `icon-192/512.png`    | PWA / Android manifest                    |
| `icon-1024.png` / `icon.png` | App stores, social cards           |
| `wordmark.svg` / `.png` | Horizontal lockup — dark "Cash" for light backgrounds |
| `wordmark-dark.svg`   | Horizontal lockup — white "Cash" for dark backgrounds |

## Hosting — assets.cashsdk.com

These files are served from **`assets.cashsdk.com`** by the `@cashsdk/assets`
app (`apps/assets`), the single source of truth. Every surface — landing,
dashboard, auth, docs — references the **remote URLs**, never a bundled copy:

```
https://assets.cashsdk.com/brand/icon.svg
https://assets.cashsdk.com/brand/wordmark.svg
https://assets.cashsdk.com/brand/wordmark-dark.svg
https://assets.cashsdk.com/brand/favicon.svg
https://assets.cashsdk.com/brand/apple-touch-icon.png
```

To change the brand everywhere, edit `docs/branding/`, copy into
`apps/assets/public/brand/`, and deploy the assets app — no other app changes.

## Rules

- **The glyph is one unit.** Don't restyle, recolor half, or space out `{ $ }`.
- **Flat only.** No bevels, gradients, drop shadows, or the old gold coin.
- **One border.** Solid dark tile, no green rim around it.
- **Clear space** ≥ 25% of the tile's width on all sides.
- **On dark grounds**, swap the tile for none and render the glyph in `--paper` or `--brand`.

## Regenerate PNGs from the SVG (macOS)

```sh
cd docs/branding
for s in 16 32 180 192 512 1024; do
  qlmanage -t -s "$s" -o . icon.svg && mv icon.svg.png "icon-$s.png"
done
```

For production, render with a real rasterizer (`rsvg-convert`, `resvg`, or `sharp`)
rather than QuickLook to guarantee anti-aliasing and exact sizing.