1  # Linear Features Page
  2  
  3  ## Overview
  4  - **Type:** Product page (Feature showcase)
  5  - **Style:** Modern + Professional
  6  - **Primary color:** Purple-blue (`oklch(0.55 0.18 270)`)
  7  - **Typography:** Primary: Inter, Secondary: SF Mono (for code)
  8  
  9  ## Why It Works
 10  
 11  1. **Extreme clarity** — Every feature is explained in one sentence. No marketing fluff, no buzzwords. Just "what it does" in plain English.
 12  
 13  2. **Visual rhythm** — The page alternates between text-left/image-right and text-right/image-left. This creates a natural flow that keeps you scrolling.
 14  
 15  3. **Real UI, not mockups** — Linear shows actual product screenshots, not idealized mockups. This builds trust and sets accurate expectations.
 16  
 17  4. **Dark mode first** — The design embraces dark UI, which feels modern and developer-friendly. This is intentional positioning.
 18  
 19  ## Design Techniques
 20  
 21  ### Visual Hierarchy
 22  - **Feature headlines:** 32-40px, bold, high contrast
 23  - **Feature descriptions:** 16-18px, regular weight, slightly muted
 24  - **Section labels:** 12-14px, uppercase, tracked out, accent color
 25  - **Code snippets:** 14px monospace, syntax highlighted
 26  
 27  **Key insight:** The section labels (small, uppercase, colored) act as visual anchors. They break up the page and make it scannable.
 28  
 29  ### Color Usage
 30  - **Background:** Dark (`oklch(0.12 0.02 270)`) with subtle purple tint
 31  - **Surface:** Slightly lighter dark (`oklch(0.15 0.02 270)`)
 32  - **Text:** High contrast white (`oklch(0.95 0 0)`) for primary, muted gray for secondary
 33  - **Accent:** Purple-blue gradient used for highlights and interactive elements
 34  - **Syntax highlighting:** Carefully chosen colors that work on dark background
 35  
 36  **Key insight:** The dark background makes the product screenshots (which are also dark) feel native to the page. No jarring light/dark transitions.
 37  
 38  ### Typography
 39  - **Font pairing:** Inter (UI) + SF Mono (code) — both are neutral, modern, highly legible
 40  - **Weight variation:** 400 (body), 500 (labels), 600 (subheadings), 700 (headlines)
 41  - **Letter spacing:** Tight on headlines (-0.02em), wide on labels (+0.08em)
 42  - **Line height:** 1.2 on headlines, 1.6 on body text
 43  
 44  **Key insight:** Using a monospace font for code snippets (not just inline code) reinforces the developer-tool positioning.
 45  
 46  ### Whitespace
 47  - **Between features:** 120-160px vertical spacing
 48  - **Within feature blocks:** 40-60px between headline and description
 49  - **Around screenshots:** 80-100px breathing room
 50  - **Section breaks:** 200px+ for major transitions
 51  
 52  **Key insight:** The massive spacing makes each feature feel important. Nothing is rushed.
 53  
 54  ## Reusable Patterns
 55  
 56  ### Pattern 1: Alternating Feature Blocks
 57  
 58  **Structure:**
 59  ```
 60  [Section label]
 61  [Feature headline]
 62  [Feature description]
 63  [Screenshot]
 64  
 65  [Screenshot]
 66  [Section label]
 67  [Feature headline]
 68  [Feature description]
 69  
 70  (Repeat, alternating sides)
 71  ```
 72  
 73  **Code:**
 74  ```css
 75  .feature-block {
 76    display: grid;
 77    grid-template-columns: 1fr 1fr;
 78    gap: 80px;
 79    align-items: center;
 80    padding: 120px 48px;
 81    max-width: 1400px;
 82    margin: 0 auto;
 83  }
 84  
 85  /* Alternate: even blocks reverse the order */
 86  .feature-block:nth-child(even) {
 87    direction: rtl;
 88  }
 89  
 90  .feature-block:nth-child(even) > * {
 91    direction: ltr;
 92  }
 93  
 94  .feature-content {
 95    max-width: 520px;
 96  }
 97  
 98  .feature-label {
 99    font-size: 13px;
100    font-weight: 600;
101    text-transform: uppercase;
102    letter-spacing: 0.08em;
103    color: oklch(0.65 0.18 270);
104    margin-bottom: 16px;
105  }
106  
107  .feature-content h2 {
108    font-size: 40px;
109    font-weight: 700;
110    line-height: 1.15;
111    letter-spacing: -0.02em;
112    color: oklch(0.95 0 0);
113    margin-bottom: 20px;
114  }
115  
116  .feature-content p {
117    font-size: 18px;
118    line-height: 1.6;
119    color: oklch(0.70 0 0);
120  }
121  
122  .feature-visual {
123    border-radius: 12px;
124    overflow: hidden;
125    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
126  }
127  
128  @media (max-width: 768px) {
129    .feature-block {
130      grid-template-columns: 1fr;
131      gap: 48px;
132    }
133    .feature-block:nth-child(even) {
134      direction: ltr;
135    }
136  }
137  ```
138  
139  **When to use:** Feature pages, product tours, any content that benefits from visual proof alongside explanation.
140  
141  ### Pattern 2: Dark Mode Color System
142  
143  **Technique:** Linear's dark mode isn't just inverted colors. It's a carefully crafted palette.
144  
145  **Code:**
146  ```css
147  :root {
148    /* Backgrounds */
149    --bg-base: oklch(0.12 0.02 270);      /* Page background */
150    --bg-surface: oklch(0.15 0.02 270);   /* Card background */
151    --bg-elevated: oklch(0.18 0.02 270);  /* Hover states */
152    
153    /* Text */
154    --text-primary: oklch(0.95 0 0);      /* Headlines, important text */
155    --text-secondary: oklch(0.70 0 0);    /* Body text */
156    --text-tertiary: oklch(0.50 0 0);     /* Muted text */
157    
158    /* Accent */
159    --accent-primary: oklch(0.65 0.18 270);
160    --accent-light: oklch(0.75 0.15 270);
161    
162    /* Borders */
163    --border-subtle: oklch(0.20 0.02 270);
164    --border-strong: oklch(0.30 0.02 270);
165  }
166  ```
167  
168  **Key insight:** The backgrounds have a subtle purple tint (chroma 0.02), not pure gray. This creates a cohesive color story.
169  
170  ### Pattern 3: Screenshot Presentation
171  
172  **Technique:** Linear's screenshots have depth and context.
173  
174  **Code:**
175  ```css
176  .screenshot-container {
177    position: relative;
178    border-radius: 12px;
179    overflow: hidden;
180    box-shadow: 
181      0 0 0 1px oklch(0.20 0.02 270),
182      0 20px 60px rgba(0,0,0,0.4),
183      0 40px 100px rgba(0,0,0,0.3);
184  }
185  
186  .screenshot-container img {
187    width: 100%;
188    height: auto;
189    display: block;
190  }
191  
192  /* Optional: Add a subtle glow */
193  .screenshot-container::before {
194    content: '';
195    position: absolute;
196    inset: -1px;
197    border-radius: 12px;
198    padding: 1px;
199    background: linear-gradient(
200      135deg,
201      oklch(0.65 0.18 270) 0%,
202      oklch(0.55 0.20 300) 100%
203    );
204    -webkit-mask: 
205      linear-gradient(#fff 0 0) content-box, 
206      linear-gradient(#fff 0 0);
207    -webkit-mask-composite: xor;
208    mask-composite: exclude;
209    opacity: 0.3;
210  }
211  ```
212  
213  **When to use:** Product screenshots, UI demos, any visual that needs to feel premium.
214  
215  ## Key Code Snippets
216  
217  ### Linear-Style Button
218  
219  ```css
220  .btn-linear {
221    display: inline-flex;
222    align-items: center;
223    gap: 8px;
224    padding: 12px 20px;
225    font-size: 15px;
226    font-weight: 500;
227    color: oklch(0.95 0 0);
228    background: oklch(0.18 0.02 270);
229    border: 1px solid oklch(0.25 0.02 270);
230    border-radius: 8px;
231    cursor: pointer;
232    transition: all 0.15s ease;
233  }
234  
235  .btn-linear:hover {
236    background: oklch(0.20 0.02 270);
237    border-color: oklch(0.35 0.02 270);
238  }
239  
240  .btn-linear.primary {
241    background: linear-gradient(
242      135deg,
243      oklch(0.60 0.20 270) 0%,
244      oklch(0.55 0.22 300) 100%
245    );
246    border: none;
247  }
248  
249  .btn-linear.primary:hover {
250    filter: brightness(1.1);
251  }
252  ```
253  
254  ### Linear-Style Card
255  
256  ```css
257  .card-linear {
258    padding: 32px;
259    border-radius: 12px;
260    background: oklch(0.15 0.02 270);
261    border: 1px solid oklch(0.20 0.02 270);
262    transition: all 0.2s ease;
263  }
264  
265  .card-linear:hover {
266    background: oklch(0.16 0.02 270);
267    border-color: oklch(0.25 0.02 270);
268    transform: translateY(-2px);
269  }
270  ```
271  
272  ### Linear-Style Code Block
273  
274  ```css
275  .code-block {
276    padding: 24px;
277    border-radius: 8px;
278    background: oklch(0.10 0.02 270);
279    border: 1px solid oklch(0.18 0.02 270);
280    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
281    font-size: 14px;
282    line-height: 1.6;
283    overflow-x: auto;
284  }
285  
286  .code-block .keyword { color: oklch(0.75 0.15 330); }  /* Pink */
287  .code-block .string { color: oklch(0.75 0.15 150); }   /* Green */
288  .code-block .function { color: oklch(0.75 0.15 270); } /* Purple */
289  .code-block .comment { color: oklch(0.50 0 0); }       /* Gray */
290  ```
291  
292  ## When to Use This Approach
293  
294  **Perfect for:**
295  - Developer tools and APIs
296  - Project management and productivity software
297  - Technical products with complex features
298  - Products targeting designers and engineers
299  - Any product where "modern" and "professional" are key brand attributes
300  
301  **Not ideal for:**
302  - Consumer products (too technical)
303  - Products targeting non-technical users (dark mode can feel intimidating)
304  - Playful or casual brands (too serious)
305  - Products that need to feel warm and approachable (dark mode can feel cold)
306  
307  ## Key Takeaways
308  
309  1. **Dark mode is a positioning choice** — Linear uses dark UI to signal "this is for professionals." It's not just aesthetic.
310  
311  2. **Alternating layout creates rhythm** — The left-right-left-right pattern keeps the page dynamic without being chaotic.
312  
313  3. **Real screenshots > mockups** — Showing the actual product builds trust and sets accurate expectations.
314  
315  4. **Subtle color tints matter** — The purple tint in the grays creates a cohesive color story. Pure gray would feel lifeless.
316  
317  5. **Whitespace = confidence** — The generous spacing says "we don't need to cram everything above the fold."
318  
319  ## Further Analysis
320  
321  Compare Linear's approach to competitors:
322  - **Asana:** Lighter, more colorful, more consumer-friendly
323  - **Jira:** More traditional, less modern
324  - **Notion:** Lighter UI, more playful
325  
326  Linear's dark-first approach is distinctive and memorable. It's a bold choice that pays off.
327  
328  ## Implementation Notes
329  
330  **Dark mode considerations:**
331  - Ensure sufficient contrast (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
332  - Test on different displays (OLED vs LCD shows colors differently)
333  - Provide a light mode toggle for accessibility
334  - Use slightly desaturated colors (high saturation on dark backgrounds can cause eye strain)
335  
336  **Performance:**
337  - Large screenshots can slow page load. Use WebP format with fallbacks
338  - Lazy-load images below the fold
339  - Consider using CSS gradients instead of gradient images where possible