Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

PreviousConfiguration
NextWorkflows

Last updated