# Voltro brand mark

The company + framework logo: a faceted lightning bolt ("volt") that
also reads as the **V** of Voltro. On-brand violet
(`oklch(0.55 0.25 290)` ≈ `#7C3AED` — the same hue as the text-gradient
and mesh backdrop). One source, every app.

## React (the usual path)

```tsx
import { VoltroMark, VoltroIcon, VoltroWordmark } from '@voltro/ui-shadcn'

// Header lock-up — text uses the app's font + currentColor (light/dark safe)
<VoltroWordmark size={28} />

// The bolt alone
<VoltroMark size={32} />                       // gradient (default)
<VoltroMark size={20} variant="mono" />        // currentColor — inherits text colour
<VoltroMark size={20} variant="white" />       // on a coloured surface

// App / advertising icon (bolt on a rounded squircle, own background)
<VoltroIcon size={40} />                        // brand: violet squircle + white bolt
<VoltroIcon size={40} tone="dark" />            // near-black squircle + glowing bolt
```

`variant="mono"` paints in `currentColor`, so it's automatically correct
in light **and** dark mode — no theme branching. The `gradient` and
`icon` variants carry their own colour and sit on any background.

## Static assets (favicons, OG images, app-store / ad icons)

Plain `.svg` in [`./assets`](./assets) for non-React use:

| File | Use |
|---|---|
| `voltro-favicon.svg` | **Favicon** — light/dark **adaptive** (`prefers-color-scheme`): the two-tone violet bolt on a squircle that's light in light mode, dark in dark mode |
| `voltro-mark.svg` | Gradient bolt, transparent — inline / marketing |
| `voltro-mark-mono.svg` | `currentColor` bolt — set `color`/`fill` to theme it |
| `voltro-icon.svg` | **App-store / ad icon** — two-tone bolt on the solid violet squircle (fixed brand colour, not adaptive) |
| `voltro-icon-dark.svg` | Dark squircle + glowing bolt — dark-only OG / placements |

```html
<!-- Adaptive favicon — follows the browser/OS theme (the framework's web
     head auto-links /favicon.svg, so just drop voltro-favicon.svg there). -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
```

Use the **adaptive `voltro-favicon.svg`** as the favicon (it stays readable
in both light and dark browser chrome). Use the **fixed `voltro-icon.svg`**
where the icon needs one consistent colour regardless of theme — app-store
listings, ads, OG images. For PNG app-store sizes (1024², 512², 192², 180², …)
rasterise `voltro-icon.svg` at the target resolution — it's
resolution-independent, so one source covers every size.

## Colour

Primary violet `#7C3AED` (`VOLTRO_VIOLET`). The faceted variants run a
hue-292 family: lit facet `#A874FF → #7C3AED`, shaded facet
`#6D28D9 → #4C1D95`. Need the raw geometry? `VOLTRO_BOLT_PATH`
(`{ full, front, back }`) exposes the path data to compose your own SVG.