> For the complete documentation index, see [llms.txt](https://onchainlabs-tech-documentation.gitbook.io/wallettwo-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onchainlabs-tech-documentation.gitbook.io/wallettwo-documentation/engage/design.md). # Design ## Page Design The **Design** page is where you shape the visual identity of the wallet your end users see. Every change you make here is saved against the active company and immediately reflected in the live wallet. You'll find it in the sidebar under **Dashboard → Design** . ### Background Settings Opens the **Background** editor. It has two tabs — **Image** and **Color** — plus separate controls for the wallet view and the embedded iframe view. #### Image tab * **Drag-and-drop upload** (or click to browse). Accepts any `image/*` file. * **Background Opacity slider** — range `0` to `1` in steps of `0.1`, displayed as `0%`–`100%`. Defaults to `100%`. * An uploaded image can be replaced (pencil icon) or removed (trash icon). #### Color tab Two independent color controls: * **Wallet Background** — default `#3B82F6`. * **Iframe Background** — default `#FFFFFF`. This is the color behind embedded wallet flows (e.g., signature or action screens). Each control offers: * A **color picker** for visual selection. * A **hex input** that must match the `#RRGGBB` format. * A **12-swatch preset grid** (blue, red, green, amber, purple, pink, cyan, lime, orange, two grays, black) for quick choices. **Reset to Default** inside the modal clears the image, resets opacity to 100%, and restores both colors. ### Logo Settings Opens the **Logo** editor. This is the logo shown on the wallet's login screen and branded surfaces. * **Drag-and-drop zone** labelled *"Drag and drop logo file"*, or click **Upload file**. * Accepts any `image/*` file; images are converted to a data URL client-side and uploaded to storage on save. * **Edit** (pencil) replaces the current logo; **Remove** (trash) clears it. * **Reset to Default** removes any custom logo. A transparent PNG or SVG with a wide aspect ratio works best — the wallet UI scales the logo to fit without cropping. ### Wallet Color Settings Opens the **Colors** editor — the most detailed of the four modals. It exposes **8 color tokens**, each with a color picker and a hex input (`#RRGGBB` only). | Token | What it controls | Default | | --------------------------- | -------------------------------------- | --------- | | Primary Color | Main brand color (buttons, highlights) | `#2B36D9` | | Secondary Color | Secondary surfaces and subdued UI | `#E3E3E3` | | Accent Color | Accents and emphasis | `#2B36D9` | | Primary Text Color | Text on primary backgrounds | `#000000` | | Secondary Text Color | Text on secondary backgrounds | `#000000` | | Primary Button Text Color | Text on primary buttons | `#FFFFFF` | | Secondary Button Text Color | Text on secondary buttons | `#000000` | | Link Color | Hyperlinks | `#0000FF` | Invalid hex values are ignored, so the picker stays the source of truth. **Reset to Default** restores all eight tokens at once. ### Font Settings Opens the **Fonts** editor. * **Primary font** — dropdown; used for headings and prominent text. * **Secondary font** — dropdown; used for body copy and supporting text. Both dropdowns pick from the same **14 curated fonts**, pre-loaded and verified to render consistently in the wallet: * **System fonts:** Arial, Helvetica, Times New Roman, Georgia, Courier New, Verdana, Trebuchet MS * **Web fonts:** Inter, Roboto, Open Sans, Lato, Poppins, Montserrat, Source Sans Pro Leaving a field empty falls back to the wallet's built-in typography. **Reset to Default** clears both selections. ### Preview your changes Two preview surfaces are always one click away from the Customize page. #### Desktop preview Click the **laptop icon** in the header to open a large modal (up to 1280 px wide, 90% viewport height) that loads the real wallet flow in an iframe. The preview renders the **signature action** screen so you can see headings, buttons, and links together — the richest surface for spotting color and typography problems. #### Mobile preview drawer Click the **phone icon** in the header to open a side drawer (right edge) with a mobile-shaped frame (9:19 aspect ratio) that loads the wallet **dashboard** in mobile mode. The rest of the Customize page shifts to make room so you can edit and preview side by side. The drawer also includes a **Web View** shortcut that opens the full wallet in a new tab ### Saving and resetting * Each modal has its own **Save Changes** button. Saves are **field-diffed** — only values that actually changed are sent to the server, which keeps updates fast and auditable. * If you open a modal and click Save without making changes, you'll see a *"No changes to save"* notice instead of a request. * Uploaded images (logo, background) are converted to data URLs in the editor and **uploaded to storage only on save**, at which point the data URL is replaced with a permanent URL. * The **Reset to Default** button at the bottom of the Customize page wipes *every* design setting at once — logo, background, colors, opacity, and fonts. A confirmation dialog protects against accidental resets. ### Recommended workflow 1. **Upload your logo** first — it anchors the rest of the palette. 2. **Set the background** (color or image + opacity). Keep contrast high so the logo and text remain legible. 3. **Tune the 8 color tokens** with the mobile preview drawer open; watch the dashboard update as you save. 4. **Pick your fonts** last. Stick to one sans-serif pairing unless you have a strong brand reason to mix. 5. **Open the desktop preview** to verify the signature/action screen — this is where users approve transactions, so it needs to feel trustworthy. If anything looks off after several changes, **Reset to Default** is always there as an undo of last resort.