Font

There are 7 fonts with 124(!) variations.

Sohne-var is the primary font. This was probably a ">= 5" figure decision for them to license this font. Here is some more detail about the font and similar types.

Colors

73 colors were used on that page. This is probably high because they make almost everything on the page an html element. This is highlighted by the fact that there are only 26 assets on the whole page.

Layout

Their previous design was 2 columns with a balance on the center line of the screen. This new design is 4 columns with a left aligned balance.

Notable

The animations are smooth and intricate as they were with the previous site. The animated text editor is pretty amazing.

The outlines I added to illustrate that it's not a gif but actual html elements. Looking at the source code it supports multiple languages, autocompletions, line numbers, a terminal area and more. I can only imagine this feature took considerable amount of time to make. Hopefully they open source it at some point.

Conclusion

There is a depth of knowledge with each new design that stripe uses. My previous post talked about the animation of the drop down from their previous version:

Making Web Animations

Kyle Parisi ・ Oct 17 '18 ・ 2 min read

#animations #css #frontend