The rise of Linear style design: origins, trends, and techniques
Explore the Linear style trends inspired by SAAS product Linear
Linear style design has become increasingly popular in recent years, and you may have seen it on various websites. It features a dark background with linear gradient colors, blurs, dynamic streamers, and micro-motion effects in the interface.
The term “Linear” comes from the SAAS product Linear, which has a brilliant design that influenced this style and made it a trend. Linear style is an elegant and user-friendly dark mode design style.
According to the founder of Linear, Karri Saarinen, Linear is designed to look “professional” to engineers, with a dark gray sans-serif font called Inter on a black background and a gradient purple sphere for a logo. It is based on the black coding environments many engineers prefer, minimizing battery drain and eye strain.
Many websites have adopted the Linear style, and here are five examples:
Linear’s gradient color, small elegant motion, and dark theme background give it a professional and severe working software vibe.
2. Raycast
Raycast uses shining colors against a dark theme background, with linear light effects on the page.
3. Reflect
Reflect features excellent motion, making the whole page look like a piece of art.
4. Twingate
Twingate has great attention to detail, with small professional-looking motions.
5. SAASUI
SAASUI has a standard landing page layout but incorporates the Linear style, giving it a professional and modern look.
In addition to the five examples we discussed earlier, numerous other websites showcase the Linear style design. In fact, the popularity of this style has led some jokes to suggest renaming “dark mode” as “linear style.”
Now, let’s quickly learn how to create a linear gradient effect in Figma.
Step 1
Add an ellipse or any shape you prefer and select “Angular” in the fill color.
Step 2
Set the angular colors using the Hex codes below.
Hex: 08AEEA(100%)-2AF598(50%)-B5FFFC(30%)-FF5ACD(80%)-FFFFFF(100%)
Step 3
Add a layer blur effect to the shape.
Step 4
Duplicate the ellipse
Step 5
Create a mask
Step 6
Adjust the angular of the duplicated ellipse to achieve the wanted effect.
Voila!
In conclusion, the Linear style represents the ingenuity of designers and developers in building great software for users. This style is all about professionalism and perfection, and as Karri Saarinen, the founder of Linear said, “When I look at things, I could see, ‘This could be better.’”
Reference:
