PARACHUTE docs
v1.0.0
Live demo Get help
● Set up · White label

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
  • Product name in the header, tab title and footer
  • Header logo
  • Accent colour (where it passes the contrast checks)
  • Support email and website links
  • Terms, privacy and disclaimer
  • Announcement and maintenance banners
  • Favicon, app icons and the web-app manifest
  • The default name before the public config loads, and texts that say PARACHUTE
  • The <title> and description in index.html
  • Full colour palette and fonts
  • The console's own name and accent (src/admin/manifest.ts)

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

  1. Console → BrandSet Product name, Logo (an https:// image, or upload PNG, JPEG, WebP or GIF), Accent colour (#rrggbb), Support email and Website.
  2. Console → LegalYour terms URL, privacy URL and footer disclaimer.
  3. 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

WhereFileWhat
Browser tab (before the config loads) and descriptionindex.html<title> and <meta name="description">
Installable web apppublic/manifest.webmanifestname, short_name, description, colours
Header default and document titlesrc/app/Shell.tsx, src/app/OperatorNotices.tsxThe fallback 'PARACHUTE'
Texts in the appfor 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 metadatasrc/lib/wagmi.tsname, description
Operator consolesrc/admin/manifest.tsproduct.name, accent, and docsUrl (your own hosted docs; empty hides the console's Docs link)
Footer credit

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:

FileSizeUsed as
favicon-64.png64 × 64Browser tab icon
apple-touch-icon.png180 × 180iOS home screen
icon-192.png, icon-512.png192 × 192, 512 × 512Installed web app
icon-maskable-512.png512 × 512Android adaptive icon (keep the mark inside the safe zone)
logo.png320 × 320Header logo when the console has none
parachute.svgvectorManifest 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.md explains the "Altimeter" system and which colour means what.
  • Contrast: after changing colours run npm run check:contrast. It is part of npm run gate.
  • Fonts: Geist and Geist Mono, bundled through @fontsource-variable packages (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, /admin and /api share 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.html title and description, and public/manifest.webmanifest updated.
  • Icons in public/ replaced.
  • src/ searched for PARACHUTE; texts updated where you want your name.
  • Console name, accent and docs link updated in src/admin/manifest.ts.
  • npm run gate passes; then deploy the new build.