If you work with ideas, focus is everything. Great onboarding not only instructs but keeps you focused. While other products are extending the onboarding process with mandatory waitlists, surveys, and concierge calls all before you can even try a new tool, we set out to try a more open approach… all with the help of a little magic.
Paste is the only presentation tool that handles the design of your decks so that you can focus on what matters. Once you start building your deck, Paste gets to work doing all sorts of magical things behind-the-scenes—things like automatically formatting your slide layout to best fit whatever assets you throw at it or detecting common colors in your images to auto-generate a matching color palette for your slide background and text or automatically wrapping your rough screenshots in device mockups to bring them to life. All of this means less time fussing with the tools and more time shaping your pitch or telling the story behind your latest iteration. For us, it’s been a game-changer in how we work and collaborate as a team.
Yet, before people experienced this magic in Paste, the biggest obstacle they often ran into was the setup. Our setup process was killing their flow. In particular, setting up your presentation so that it reflected your brand with your logo, colors, and fonts was a major flow stopper. For Paste, as with every tool out there, this meant you had to hunt down your company brand folder (or your design team) to dig up the final approved logo (hopefully🤞), copy over hex color values one at a time (don’t fuck it up), and font files… never mind, not supported.
Not good enough.
What if you could sign in for the first time and your brand was already there applied to your decks?
From a broader perspective, what if onboarding was about more than sucking in people’s information tempered with “delightful” animations but could actually give something meaningful back—something useful?
At some point, you stop asking and start building.
So, meet the…
Magic Brander
The Magic Brander makes it possible for a new person signing up to Paste to automatically import their brand, apply it to their account, and be ready to start building their first slide immediately after signing up without a single additional click.
How do we wield such dark arts?
As with everything that looks obvious, there’s a lot more going on behind the curtain than you might suspect.
1. Extract the Domain
The first step in the process is to pull a domain from which we can fetch the brand assets we’ll need.
When you first signs up for a Paste account by entering your email address (person@company.com), we extract the domain (company.com) and run a filter to exclude common domains such as gmail.com or hotmail.com to ensure we only run the Magic Brander for unique domains.
2. Fetch the Logo
The next step is pulling a logo to generate a watermark that will appear on your slides.
Most companies host their logo on their website. We hit the domain (company.com) and pull all of the public images for favicons and app icons. These can come in a range of possible sizes, so we prioritize the best logo at the highest quality.
If we were to go ahead and drop this logo on top of every slide in your presentation, it might work on some, but would absolutely fail on others. We need to do more. Next up, processing the logo.
3. Build a Watermark
We’re lucky to work on a team where our designers aren’t afraid to dig in and write some code, and our engineers get their hands dirty in design. Our lead designer on Paste, KJ Chun, set out to explore how we could get one logo to work on any background color.
We wanted to go from any colored logo of any aspect ratio, to a transparent grayscale logo which could be inverted in CSS to look sharp on both dark and light backgrounds. Using ImageMagick on the command line, we played with various processing commands to ultimately land on something which generated a great looking watermark for any logo:
convert source.png -colorspace Gray -normalize -alpha copy -channel alpha -negate +channel -fx ‘#000000’ result.png
Our lead backend engineer on the feature, Matt Cullerton, took this one-line image processing prototype and implemented it in our node backend service using sharp, while also making it robust to images of different file types to ultimately end up with that same transparent png result which we could reliably invert on dark or light backgrounds.
To test it, we pulled a large collection of logos from Fortune 500 companies and ran them through our service. Once the backend was ready for production, we went ahead and backfilled watermarks for all existing Paste users so both current and new users alike could experience branded slides without any additional steps to unlock the feature first.
4. Size the Watermark
The next step was to actually display them. We had previously supported square logos only, so our move to support watermarks of variable aspect ratios presented new layout challenges. Paste slides are responsive by default to scale and fill your screen best. This meant we needed the watermark to scale reliably to look great on both giant conference displays and our small embedded player. KJ and front-end engineer Liam Roth-Thomas developed a system for placing and sizing watermarks using flexboxwhile constraining height for portrait watermarks where needed:
Now that we had beautifully generated and placed watermark generation, the next step was to do the inversion on the client depending on the background color. We use tinycolor2 as our color utility in Paste for calculating slide color palettes and determining perceived brightness (light vs dark). We were able to quickly take advantage of the same properties to determine when to invert our logo, which we apply via CSS filters:
filter: ‘invert(1)’.
5. Fetch Colors
After the logo, the next step was to fetch your brand colors from a domain.
We start by scraping a domain to gather all of the computed CSS colors in use. These are all the colors in use on buttons, backgrounds, text, and SVGs. What you get back is typically a lot of colors.
6. Build a Color Palette
This scraped list of colors can be hundreds long. And so, like a logo, it needs to be processed and prioritized to get to a usable palette that best reflects a brand.
This effort started with building a simple microservice to analyze and sort the long list of colors by the most used colors. However, in many cases you’ll see a lot of similar colors cluster at the top of the list from things like button hover states or subtle background color changes. Nobody wants a palette full of light grays. What we needed was a range of colors.
We refined our color analyzer to look for colors that are common but different from existing colors. Better.
We now had a range of colors but still didn’t give us a value range that was useful. When making a deck, it’s common to use strong contrasting colors and a strong primary brand color. So we refined further to look for a range of color values and include at least one dark color, one light color, and a vibrant color.
What you end up, we think, is with a well-balanced, usable branded palette of your brand colors ready to go. Not bad for not having to do anything. We don’t expect to get every color just right, so we also made it as simple as we could for you to drop into your Brand settings to set whatever colors you want.
7. Fonts…?
The last step in the process is fetching your fonts. But…
Fonts are a bigger challenge technically (and legally), but we hope to tackle it someday soon. In the meantime, Paste has some of the best font customization options of any web tools. You can upload your own font file to exactly match your brand typography—unlike other web-based tools out there. And, if you’re a type nerd like us, you’ll appreciate the level of customization in being able to specify custom faces for true bold and italic styles (no more ugly browser-rendered italics).
Bring it All Together
For new signups, all of this effort behind-the-scenes comes together in 2–3 seconds after you hit the signup button, so that by the time you jump into your first slide, you’re already on-brand .
That’s magic.
Sign up and give the Magic Brander a try ›
If you’re a product maker interested in crafting this sort of magic in Paste, we’re hiring.
Co-authored by: Andrew S Allen @asallen Tara Jane Feener @tfeener