3 Things I Learned Recreating Stripe's Pricing Page

Check out the project:

My Recreation of Stripe's Pricing Page

Compare it to the original:

Stripe's Pricing Page

SVG offers animation and design advantages beyond performance

Most people know using SVG is a great way to save on performance for the loading time of your website.

One thing you may not know however is that SVG icons can easily be styled and animated in ways other image formats may not.

You can fill the color of SVG image icons using CSS' background clip property.

You can also animate SVG images by morphing the SVG image's path on hover state.

It's easier to use absolute and relative positioning to create background element layouts than adjusting z-index values

Stripe's pricing page, like many webpages, uses background layouts to add visual flair without distracting users from important customer messaging.

These background elements can be easy to create when they're composed of simple background color transitions, full-page cover images, and hero patterns, but when the background is itself composed of grid elements developers need a slightly more detailed understanding of how to use and implement absolute and relative positioning.

<!-- background color grid -->
<div class="relative min-h-screen">
  <div class="absolute inset-0 transform -skew-y-12 origin-top-left">
    <div class="bg-green-100 grid grid-cols-10 grid-rows-6 min-h-screen bg-gradient-to-r from-green-400 to-green-200 transform">
    <div class="bg-green-200 opacity-50 row-start-3 col-span-2"></div>
    <div class="bg-green-100 opacity-50 row-start-5 col-start-9 col-span-2"></div>
   </div>
</div>

Deeper appreciation for purposeful simplicity in design and engineering

While I was doing research on Stripe's design and engineering I came across great content on their blog.

Connect: behind the front-end experience offered many insights.

Some of my key takeaways:

Stripe's team uses CSS instead of image files to render how Stripe's platform looks on devices to reduce file sizes and increase performance beyond even what efficient image file formats like SVG offer.

"We can add hardware-acceleration, animate any part, make it responsive without losing image quality, and precisely position DOM elements (e.g. other images) within the laptop’s display. This flexibility doesn’t mean giving up on clean code—the markup stays clear, concise and descriptive"

<div class="laptop">
  <span class="shadow"></span>
  <span class="lid"></span>
  <span class="camera"></span>
  <span class="screen"></span>
  <span class="chassis">
    <span class="keyboard"></span>
    <span class="trackpad"></span>
  </span>
</div>

Descriptions of tradeoffs between different types of web animation:

"CSS transitions. This is the fastest, easiest, and most efficient way to animate. For simple things like hover effects, this is the way to go."

"Web Animations API...This should be your default choice for any animation where you need interactivity, random effects, chainable sequences, and anything richer than a purely declarative animation."

A few other Stripe articles I enjoyed reading:

To design and develop an interactive globe

"The most straightforward way to animate individual dots is to generate them in a three-dimensional space. To do this, we reused the code from our SVG to generate rows of dots as geometry in Three.js. Each row includes a different number of dots, from zero at the poles to five hundred at the equator. We used a sine function to choose the number of dots for each row, plotted each dot, and applied the lookAt method to rotate each dot to face the center of the sphere. However, the number of dots jumped inconsistently along a few latitudes, creating harsh lines and an unnatural effect in the longitudinal columns."

"we turned off the antialias parameter of the WebGL renderer. This one change not only fixed the issue on high-res monitors, but also improved performance of the animation and smoothness of scrolling on all devices, even those already running at 60fps. One might assume that removing antialiasing would make everything look pixelated. Since it only applies to the edges of the geometry, our image textures were still smooth and gradients and lighting were unaffected."

Designing accessible color systems

"the way HSL calculates lightness is flawed. What most color spaces don’t take into account is that different hues are inherently perceived as different levels of lightness by the human eye—at the same level of mathematical lightness, yellow appears lighter than blue."

"When we take a sample of colors with the same lightness and saturation in a perceptually uniform color space, we can observe a significant difference. These colors appear to blend together, and each color appears to be just as light and as saturated as the rest."

How Stripe teaches employees to code

"It’s easy for familiarity with code to become a barrier between different groups within a technology company: lots of companies have an upper tier of code-wrangling wizards that are supported by the rest of the company, sometimes known as the non-engineers. From the beginning, we’ve tried hard to avoid this at Stripe. In seating, we mix engineering teams with non-engineering teams. When we hire, we seek out engineers who are excited about problems beyond code itself."