By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
Product Update

Tutorial: How to Use the OneSchema Branding Suite

Your branding is your company’s identity, and customers expect consistency throughout every flow. That’s why OneSchema’s Branding Suite feature includes over 20 customizations, enabling your CSV importer to seamlessly fit in with the rest of your design.

Bobby Zhang

Bobby is a designer at OneSchema.

July 31, 2024

What brand comes to mind when you see the following image? 

What company do you associate these official brand colors with? -- blue, red, yellow and green

Your unique brand (e.g. colors, fonts, illustrations) is an indication to customers that they are interacting with your company. Over time, your users become familiar with the look of your application and it becomes second nature. For some, the brand colors are so ingrained into their minds that when they appear in different contexts, images of your product flood their memory. It’s likely that you immediately recognized Google’s colors above without so much as a second thought.

Your brand image is your company’s identity to customers, and users expect consistency throughout every flow. That’s why OneSchema’s Branding Suite feature includes over 20 customizations, enabling your CSV importer to seamlessly fit in with the rest of your design. 

A step-by-step guide to customizing your importer

OneSchema's importer using the default customization options

You can access our Branding Suite via the “Customizations” tab in your dashboard, which gives you the ability to set:

  • Primary, secondary, and background colors
  • Buttons
  • Success, Warning, and Error states
  • Custom illustrations 
  • Font family and font colors

Using LinkedIn as an example, let’s walk through how to use each customization option. You can follow along with the video here or the steps below to see that with just a few key updates, OneSchema’s Embedded Importer quickly transforms to match the design of LinkedIn. 

We’ll start in OneSchema’s Customizations suite with default values. 

Step 1: Primary color + primary button style

The first option under General is the primary color, which takes in HEX color codes. We’ll start by replacing the default value with LinkedIn’s primary blue color, #0A66C2. Next, in the Buttons section we’ll use the same primary color and adjust the button radius to 0, which will make the buttons square. 

An updated view of the importer after using color and button customizations

Step 2: Error and warnings + secondary and tertiary buttons

Since LinkedIn’s red and yellow vary slightly from OneSchema’s default colors, we’ll replace the error and warning state colors respectively. We’ll also use LinkedIn’s light grey to style the secondary and tertiary buttons. 

What the importer looks like after customizing the error and warning colors, along with secondary and tertiary buttons

Step 3: Font and font colors

Our third and final step is to switch to LinkedIn’s font, which is called “Source Sans Pro”. While we’re sticking with the default font colors here, the Customizations options allow for changing each color which may show up. Even the placeholder font color, which is only visible when specific errors exist in the data, can be specified. We’ll set the font URL and family and have our final product.

A view of the importer after font and font colors have been updated

Step 4: Illustrations and more

Default first pane image which can be customized in the Branding Suite

OneSchema allows every color to be changed, and the image on the first pane can be replaced, and even the border lines can be customized. With just a few minutes of simple adjustments, your users won’t be able to notice a difference between your core product and your importer.

{{blog-content-cta}}

Continue reading

Human with plants and dashboards

Make data imports effortless and efficient

Ready to get started?

Product Update
August 8, 2022

Tutorial: How to Use the OneSchema Branding Suite

Bobby Zhang
Bobby is a designer at OneSchema.
Stop manually fixing your customer’s CSVs
Companies like Ramp, Toast, Scale AI, and Vanta trust OneSchema to provide a delightfully guided spreadsheet import experience for their customers.

What brand comes to mind when you see the following image? 

What company do you associate these official brand colors with? -- blue, red, yellow and green

Your unique brand (e.g. colors, fonts, illustrations) is an indication to customers that they are interacting with your company. Over time, your users become familiar with the look of your application and it becomes second nature. For some, the brand colors are so ingrained into their minds that when they appear in different contexts, images of your product flood their memory. It’s likely that you immediately recognized Google’s colors above without so much as a second thought.

Your brand image is your company’s identity to customers, and users expect consistency throughout every flow. That’s why OneSchema’s Branding Suite feature includes over 20 customizations, enabling your CSV importer to seamlessly fit in with the rest of your design. 

A step-by-step guide to customizing your importer

OneSchema's importer using the default customization options

You can access our Branding Suite via the “Customizations” tab in your dashboard, which gives you the ability to set:

  • Primary, secondary, and background colors
  • Buttons
  • Success, Warning, and Error states
  • Custom illustrations 
  • Font family and font colors

Using LinkedIn as an example, let’s walk through how to use each customization option. You can follow along with the video here or the steps below to see that with just a few key updates, OneSchema’s Embedded Importer quickly transforms to match the design of LinkedIn. 

We’ll start in OneSchema’s Customizations suite with default values. 

Step 1: Primary color + primary button style

The first option under General is the primary color, which takes in HEX color codes. We’ll start by replacing the default value with LinkedIn’s primary blue color, #0A66C2. Next, in the Buttons section we’ll use the same primary color and adjust the button radius to 0, which will make the buttons square. 

An updated view of the importer after using color and button customizations

Step 2: Error and warnings + secondary and tertiary buttons

Since LinkedIn’s red and yellow vary slightly from OneSchema’s default colors, we’ll replace the error and warning state colors respectively. We’ll also use LinkedIn’s light grey to style the secondary and tertiary buttons. 

What the importer looks like after customizing the error and warning colors, along with secondary and tertiary buttons

Step 3: Font and font colors

Our third and final step is to switch to LinkedIn’s font, which is called “Source Sans Pro”. While we’re sticking with the default font colors here, the Customizations options allow for changing each color which may show up. Even the placeholder font color, which is only visible when specific errors exist in the data, can be specified. We’ll set the font URL and family and have our final product.

A view of the importer after font and font colors have been updated

Step 4: Illustrations and more

Default first pane image which can be customized in the Branding Suite

OneSchema allows every color to be changed, and the image on the first pane can be replaced, and even the border lines can be customized. With just a few minutes of simple adjustments, your users won’t be able to notice a difference between your core product and your importer.

{{blog-content-cta}}

What brand comes to mind when you see the following image? 

What company do you associate these official brand colors with? -- blue, red, yellow and green

Your unique brand (e.g. colors, fonts, illustrations) is an indication to customers that they are interacting with your company. Over time, your users become familiar with the look of your application and it becomes second nature. For some, the brand colors are so ingrained into their minds that when they appear in different contexts, images of your product flood their memory. It’s likely that you immediately recognized Google’s colors above without so much as a second thought.

Your brand image is your company’s identity to customers, and users expect consistency throughout every flow. That’s why OneSchema’s Branding Suite feature includes over 20 customizations, enabling your CSV importer to seamlessly fit in with the rest of your design. 

A step-by-step guide to customizing your importer

OneSchema's importer using the default customization options

You can access our Branding Suite via the “Customizations” tab in your dashboard, which gives you the ability to set:

  • Primary, secondary, and background colors
  • Buttons
  • Success, Warning, and Error states
  • Custom illustrations 
  • Font family and font colors

Using LinkedIn as an example, let’s walk through how to use each customization option. You can follow along with the video here or the steps below to see that with just a few key updates, OneSchema’s Embedded Importer quickly transforms to match the design of LinkedIn. 

We’ll start in OneSchema’s Customizations suite with default values. 

Step 1: Primary color + primary button style

The first option under General is the primary color, which takes in HEX color codes. We’ll start by replacing the default value with LinkedIn’s primary blue color, #0A66C2. Next, in the Buttons section we’ll use the same primary color and adjust the button radius to 0, which will make the buttons square. 

An updated view of the importer after using color and button customizations

Step 2: Error and warnings + secondary and tertiary buttons

Since LinkedIn’s red and yellow vary slightly from OneSchema’s default colors, we’ll replace the error and warning state colors respectively. We’ll also use LinkedIn’s light grey to style the secondary and tertiary buttons. 

What the importer looks like after customizing the error and warning colors, along with secondary and tertiary buttons

Step 3: Font and font colors

Our third and final step is to switch to LinkedIn’s font, which is called “Source Sans Pro”. While we’re sticking with the default font colors here, the Customizations options allow for changing each color which may show up. Even the placeholder font color, which is only visible when specific errors exist in the data, can be specified. We’ll set the font URL and family and have our final product.

A view of the importer after font and font colors have been updated

Step 4: Illustrations and more

Default first pane image which can be customized in the Branding Suite

OneSchema allows every color to be changed, and the image on the first pane can be replaced, and even the border lines can be customized. With just a few minutes of simple adjustments, your users won’t be able to notice a difference between your core product and your importer.

{{blog-content-cta}}