Rebranding
name, logo, accent, domain.
With the operator server, the name, logo, accent colour and footer links change live from the console. Icons, the web-app manifest, default texts and design tokens are in the source and need a new build.
01Live settings vs. build settings
| Change live (Console → Brand, Legal, Access) | Needs a code change and a new build |
|---|---|
|
|
A static-only site has no console, so everything on the right-hand side is the only way to rebrand it.
02Brand from the console
- Console → BrandSet Product name, Logo (an
https://image, or upload PNG, JPEG, WebP or GIF), Accent colour (#rrggbb), Support email and Website. - Console → LegalYour terms URL, privacy URL and footer disclaimer.
- Reload the dAppOpen tabs pick the change up within about 5 minutes.
The footer then reads <your name> · built on PARACHUTE by MIKODES (src/app/OperatorNotices.tsx). The accent colour is used as the dApp's signal colour only in a theme where it passes WCAG AA 4.5:1 on all three backgrounds, gives a readable label on the Eject button and stays clearly apart from the "down" rose; otherwise that theme keeps the default orange (src/lib/operator/branding.ts).
03Name in the source
| Where | File | What |
|---|---|---|
| Browser tab (before the config loads) and description | index.html | <title> and <meta name="description"> |
| Installable web app | public/manifest.webmanifest | name, short_name, description, colours |
| Header default and document title | src/app/Shell.tsx, src/app/OperatorNotices.tsx | The fallback 'PARACHUTE' |
| Texts in the app | for example src/app/WalletButton.tsx, src/app/RouteError.tsx, src/pages/TokenPage.tsx, src/features/swap/, src/features/parachute/, src/features/share/ | Sentences that mention PARACHUTE. Search the src/ folder for PARACHUTE to find them all. |
| WalletConnect metadata | src/lib/wagmi.ts | name, description |
| Operator console | src/admin/manifest.ts | product.name, accent, and docsUrl (your own hosted docs; empty hides the console's Docs link) |
The footer credit "built on PARACHUTE by MIKODES" appears only when you set a product name. Changing product code is allowed under your item licence; see the licence terms on the item page.
04Logo and icons
Replace the files in public/, keeping the names and sizes, then build again:
| File | Size | Used as |
|---|---|---|
favicon-64.png | 64 × 64 | Browser tab icon |
apple-touch-icon.png | 180 × 180 | iOS home screen |
icon-192.png, icon-512.png | 192 × 192, 512 × 512 | Installed web app |
icon-maskable-512.png | 512 × 512 | Android adaptive icon (keep the mark inside the safe zone) |
logo.png | 320 × 320 | Header logo when the console has none |
parachute.svg | vector | Manifest icon |
05Colours and fonts
- Design tokens: CSS variables in
src/index.css, one block for the dark theme and one for the light theme (for example--signal, the exit colour).DESIGN.mdexplains the "Altimeter" system and which colour means what. - Contrast: after changing colours run
npm run check:contrast. It is part ofnpm run gate. - Fonts: Geist and Geist Mono, bundled through
@fontsource-variablepackages (SIL OFL 1.1). No font CDN.
06Your domain
- Operator server: point your domain at the reverse proxy in front of
npm run server(Deployment). The dApp,/adminand/apishare that one origin. - Static host: add your domain in the host's settings.
- Referral links use your domain:
https://<your-domain>/?ref=<code>. - RPC key: if your provider lets you restrict a key by origin, restrict it to your domain (RPC).
07Other people's brands
PARACHUTE uses no Robinhood logo, colours or brand marks; "Robinhood Chain" appears only as plain text, and "pons" is written in lowercase with no implied partnership. Keep it that way in your version, and do not imply affiliation with Robinhood, pons or Uniswap.
08Rebrand checklist
- Console → Brand and Legal filled in.
index.htmltitle and description, andpublic/manifest.webmanifestupdated.- Icons in
public/replaced. src/searched forPARACHUTE; texts updated where you want your name.- Console name, accent and docs link updated in
src/admin/manifest.ts. npm run gatepasses; then deploy the new build.