I would love to help you master that aesthetic. Linear and Raycast have absolutely set the standard for modern, high-performance software design.

Before we dive into the pixels, gradients, and command menus, I'd love to know a bit about your background so I can tailor this session perfectly for you.

Are you a complete beginner to UI design, or do you already have some experience using design tools like Figma?

It's awesome that you already have some Figma experience. That means we can skip the absolute basics and focus on the precise, high-fidelity techniques that make this look so special.

What is the Linear Aesthetic?

• The Deepest Grays: Instead of pure, harsh black, the interface uses extremely subtle variations of near-black grays to create layers.
• Inter Font: The typography almost exclusively relies on Inter, a clean, highly legible sans-serif designed specifically for computer screens.
• Tactile Borders: Borders are kept razor-thin (usually $1\text{px}$) with semi-transparent, subtle glowing gradients that mimic a physical metallic edge catching the light.
• Saturated Accent Gradients: Against the dark canvas, small pops of vibrant, blurred radial gradients or neon purples and blues guide the user's eye.

I have set up the diagram generation for you! This diagram breaks down exactly how the legendary Linear "layer stack" works under the hood.

• The Void (Background): The lowest canvas layer is almost always pitch-black ($\#000000$) or a near-black gray. This acts as the shadow of the physical machine's frame, pushing the actual interactive parts of the software forward.
• The Foundation (Panels & Sidebar): Large functional sections, like sidebars or content panels, float one step above the canvas. They use a slightly lighter gray (like ($\#121212$)) to block out general workspaces without stealing attention.
• The Interactive Layer (Cards & Menus): Modals, cards, dropdowns, and active buttons sit on the highest plane of elevation. They are colored the lightest gray (like ($\#1c1c1c$)) and feature distinct drop shadows to cleanly separate them from the rest of the application.

Let's open up Figma and build a signature dark-mode card step-by-step using these exact elevation principles. This hands-on walkthrough will show you how to turn flat shapes into tactile, physical-feeling components.

The Figma Layer Blueprint

To replicate the exact pixel-perfect fidelity of a high-end SaaS product, we must construct our card using a strict hierarchy of shapes, borders, and shadows.

Here is how to set up your layer values from the canvas on up:

• Canvas Background: Set your main Figma frame fill to a pure black: #000000.
• The Card Base: Draw a rectangle inside the frame. Set its fill to a deep, dark gray like #121212 or #161616. Add a subtle corner radius of $8\text{px}$ to $12\text{px}$ to keep the edges looking modern but sharp.
• The Linear Stroke Border: Instead of a flat, solid border, add a $1\text{px}$ Inside stroke. Set the stroke fill to Linear Gradient running diagonally from the top-left to the bottom-right.
• The Gradient Colors: Make the top-left start of the gradient a semi-transparent white (such as rgba(255, 255, 255, 0.15)) to mimic a light source catching the top edge. Set the bottom-right end to completely transparent (rgba(0, 0, 0, 0)). This ensures the bottom of the card blends naturally into the dark background.
• The Dual-Shadow Stack: In the Effects panel, add two separate Drop Shadow layers to give the card a floating appearance.

By stacking these two distinct shadow layers, you avoid the heavy, amateurish look of a single dark smudge. The tight first shadow keeps the bottom border of your card looking extremely sharp and crisp, while the wider second shadow simulates organic light diffusion.

Now, let's look at how to construct a beautiful interactive visual to make these structural layers crystal clear.

I've started generating an interactive simulator for you! You'll be able to drag a light source around to watch exactly how the diagonal border gradient mimics physical lighting as light angles shift.