Providing your customers with a seamless transition from your own applications' look and feel, to Hydrogen's no-codes, is very important. This is why we give you the ability to customize dozens of aspects of our no-code Web Components, Mobile WebViews, and White Label Apps.
The following section applies to all no-code applications you configure on Hydrogen (Web Components, Mobile WebVews, and White Label Apps).
Primary Font Type
The primary font is the font type that will be used throughout all Hydrogen no-code applications you use. The default type font for all applications is Inter. This is is a sans-serif typeface designed for computer screens.
Hydrogen's Experiment plan includes the following eight fonts:
- Inter (Default)
- Gothic A1
- Work Sans
If you upgrade to the Expand or Transform plans, you will have access to the full Google Font library, which includes over 1,000 additional fonts!
Custom Primary Colors
Just like the primary font type, your primary color is vitally important when presenting a uniform experience to your customer.
You can update your primary color by changing the Hex Code under the Primary Color section in the Design Config popup menus. For example, Blue has a Hex code of #0000FF. If you are unsure of the Hex code you are using, please check your design software, or this website.
The Hex codes will automatically be converted to an HSL (Hue, Saturation, Lightness). Light and dark shades of your primary Hue will be programmatically applied to all elements on the applications. For example buttons will take the primary hue, while web navigations will take a dark shade, and backgrounds will take light primary shades.
Please note: your primary color will also impact the visualization color palette and illustrations throughout the components, web-views, and white label apps. For example, if your primary color is Blue, the visualizations and illustrations will also have blue hues and shades.
Most no-code components contain illustrations. These illustrations have been drawn by the Hydrogen design team. You have the ability to change the style of the default illustrations provided by Hydrogen. We provide three styles in our Experiment plan:
- Outline (Default)
If you are in the Expand or Transform plans, you can also upload your own custom illustrations!
Most no-code components contain icons. These icons have been drawn by the Hydrogen design team. You have the ability to change the style of the default icons provided by Hydrogen. We provide two styles in all of our plans:
- Outline (default)
Based on the hue chosen, we will update the color palette on all visualizations throughout the no-code applications, including charts and graphs.
The two options available in all plans are:
- "Cool" Color Palette
- "Warm" Color Palette
If your brand's primary hue is from 0 to 69, or from 266 to 360, this will be set to "Warm". If your brand's primary hue is from 70 to 265, it will be set to "Cool."
Button Style and Text Color
There are three button styles for you to choose from in all plans:
- Rounded Buttons
- Square Buttons
- Pill Buttons
You may also set the CTA (call to action) color of the text within the button style chosen, to one of the following colors:
White Label Apps Only
The following section applies to only the White Label Applications that you configure on Hydrogen.
White label applications require you to provide five different variations of your logo, to be used in different places on the white labels:
- Logo - Full (color logo)
- This is your full main logo, with its original colors. It will be placed on light design backgrounds. If your main logo uses very light colors, we recommend that you upload a dark version, to be easily readable.
- Logo - Full (white logo)
- This is the white version of your full main logo. Please upload a white, or very light version of your logo, to be easily readable on dark backgrounds.
- Logo - Brand Mark (color brand mark)
- This is the standalone icon used by your company, with its original colors. It will be placed on light design backgrounds. If your main brand mark uses very light colors, we recommend that you upload a dark version, to be easily readable.
- Logo - Brand Mark (white brand mark)
- This is the white version of the standalone icon used by your company. Upload a white, or very light version of your brand mark, to be easily readable on dark backgrounds.
- Logo - Favicon (browser)
- The favicon is a very small version of the Brand Mark icon that will be placed in front of your URL in any browser. The optimal size for a favicon is 16x16 pixels, which is how they are most commonly displayed. However, they can sometimes appear in larger dimensions (such as 32x32 pixels).
Header Logo (Web Apps Only)
Once you have your five logos uploaded, you will be given the chance to select which one is displayed on the header of any Web Apps you deploy. Below, we show examples of selecting the Full White Logo, or the Full White Brand Mark in this configuration setting.
We strongly recommend uploading all of your logos in SVG format. SVG image files are vector graphics. They can be scaled to any resolution while retaining their quality and crispness.
PNG files are also accepted, however, please make sure all PNG files have transparent backgrounds.
The size of your image does not matter if you are using the SVG format, as the logo will adapt automatically.
For PNG image files, the size of your logo must be at least 150px tall, and no more than 300px wide.
If you are uploading rectangular logos, please make sure they are wider than a 1:1 aspect ratio, but not wider than 2:1.
For best results, we highly recommend uploading images 500KB and smaller. Please note, our upload buttons on the portal will reject all images over 2MB.