Theme Customization
The Hubble SDK offers a high degree of visual customization to ensure it seamlessly matches your application's branding and user interface.
Design System
We have prepared a comprehensive Figma design system that details all the components used in the SDK and the scope of customizations available for each. You can use this file to see what's possible and to design your ideal theme.
View the SDK Design System on Figma
How to Use the Figma File
- Create a Copy: Make a copy of the Figma file to your own workspace.
- Customize: Make the desired changes to the screens and components.
- Share with Us: Once you are happy with the changes, share the file with the Hubble team, and we will work with you to implement your custom theme.
Customization Scope
The Hubble SDK supports flexible visual customization while preserving functional consistency across flows. All supported customizations are token and component driven.
Themes
- Switch between Light and Dark themes
- Theme switch applies globally across all screens
Setting Theme via URL
You can set the theme dynamically using a URL query parameter:
theme=light— Light Themetheme=dark— Dark Theme
Example:
https://{baseUrl}/?clientId=[..]&clientSecret=[..]&token=[..]&theme=dark
Base URLs:
- Development:
https://sdk.dev.myhubble.money - Production:
https://sdk.myhubble.money
Buttons
Customizable properties:
- Fill colour
- Button text colour
- Corner radius
- Shadows (optional)
Button states (default, pressed, disabled) remain consistent and auto-update.
Header
Configurable options:
- Title type: Savings amount / Logo / Empty
- Header style: Curved or Straight
- Header fill colour
- Show or hide coin balance
- Enable or disable stroke
- Brand logo placement
Search Bar
Customizable properties:
- Background colour
- Corner radius
Typography
- Modify Primary, Secondary, and Tertiary text colours
- The file has predefined text styles (Titles, Paragraphs, Labels, Captions)
- Replace font family using Uwarp font replacer plugin
Image Dimensions
Below are the standard dimensions and aspect ratios for key visual elements used within the Hubble SDK:
Coin Image
| Property | Value |
|---|---|
| Width | 20 px |
| Height | 20 px |
| Aspect Ratio | 1 : 1 |
| Format | PNG (transparent background) |
Header Logo
| Property | Value |
|---|---|
| Width | 96 px |
| Height | 40 px |
| Aspect Ratio | 12 : 5 |
| Format | PNG or SVG |
Banner
| Property | Value |
|---|---|
| Width | 353 px |
| Height | 199 px |
| Aspect Ratio | 16 : 9 |
| Border Radius | 1 rem |
| Format | PNG or JPG |
Ensure your theme customization is complete and tested in staging before going live. While theme changes can be made at any time, a mismatched or incomplete theme creates a poor first impression for users.
Theme updates apply to all new SDK sessions within minutes of saving in the integration portal. No code changes or deployments are required on your side.