glyph-ai 0.1.0

package/bundled/server/data/design-systems/linear-design-system.md

@@ -0,0 +1,607 @@
+# Linear.app Design System
+
+> Source: [https://linear.app](https://linear.app)
+> Date scraped: 2026-03-23
+
+---
+
+## Design System
+
+### Colors
+
+| Role | Value | Description |
+|------|-------|-------------|
+| **Background (Primary)** | `rgb(8, 9, 10)` / `#08090A` | Near-black page background |
+| **Background (Elevated)** | `rgb(40, 40, 44)` / `#28282C` | Cards, secondary buttons, dropdown panels |
+| **Background (Surface)** | `rgba(255, 255, 255, 0.05)` | Subtle surface overlays |
+| **Border (Default)** | `rgb(35, 37, 42)` / `#23252A` | Section dividers, footer border-top |
+| **Border (Elevated)** | `rgb(62, 62, 68)` / `#3E3E44` | Secondary button borders |
+| **Text (Primary)** | `rgb(247, 248, 248)` / `#F7F8F8` | Headings, primary body text |
+| **Text (Secondary)** | `rgb(138, 143, 152)` / `#8A8F98` | Subtitles, descriptions, nav links |
+| **Text (Feature Heading)** | `rgb(208, 214, 224)` / `#D0D6E0` | Sub-headings within feature cards |
+| **Primary CTA** | `rgb(230, 230, 230)` / `#E6E6E6` | Primary button background (light on dark) |
+| **Primary CTA Text** | `rgb(8, 9, 10)` / `#08090A` | Dark text on light buttons |
+| **Accent** | `rgb(94, 106, 210)` / `#5E6AD2` | Skip-to-content link, brand purple (subtle) |
+
+### Typography
+
+| Role | Font Family | Size | Weight | Line Height | Letter Spacing |
+|------|-------------|------|--------|-------------|----------------|
+| **Font Stack** | `"Inter Variable", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif` | | | | |
+| **H1 (Hero)** | Inter Variable | `64px` | `510` | `64px` (1.0) | `-1.408px` (-2.2%) |
+| **H1 (Page)** | Inter Variable | `48px` | `510` | `48px` (1.0) | `-1.056px` (-2.2%) |
+| **H2 (Section)** | Inter Variable | `40px` | `510` | `44px` (1.1) | `-0.88px` (-2.2%) |
+| **H3 (Card Title)** | Inter Variable | `24px` | `590` | — | — |
+| **H3 (Feature Title)** | Inter Variable | `20px` | `590` | `26.6px` (1.33) | `-0.24px` |
+| **H3 (Footer Column)** | Inter Variable | `13px` | `510` | `19.5px` (1.5) | `-0.13px` |
+| **Body (Large)** | Inter Variable | `15px` | `400` | `24px` (1.6) | — |
+| **Body (Default)** | Inter Variable | `14px` | `400` | `21px` (1.5) | — |
+| **Label / Nav** | Inter Variable | `13px` | `400` | `19.5px` (1.5) | — |
+| **Label (Emphasized)** | Inter Variable | `13px` | `510` | — | — |
+
+**Notes:**
+- Linear uses `Inter Variable` exclusively with variable font weights (510 = medium, 590 = semi-bold)
+- Letter spacing is consistently negative on headings (~-2.2%) for tight, modern feel
+- Line height on hero/page headings is 1.0 (equal to font size) for extremely tight leading
+
+### Button Styling
+
+#### Primary Button (Invert)
+```
+Background:    rgb(230, 230, 230) / #E6E6E6
+Text:          rgb(8, 9, 10) / #08090A
+Border:        1px solid rgb(230, 230, 230)
+Border Radius: 4px
+Font Size:     13px (nav) / 15px (CTA)
+Font Weight:   510
+Height:        32px (nav) / 40px (CTA)
+Padding:       0 12px (nav) / 0 16px (CTA)
+```
+
+#### Secondary Button
+```
+Background:    rgb(40, 40, 44) / #28282C
+Text:          rgb(247, 248, 248) / #F7F8F8
+Border:        0.5px solid rgb(62, 62, 68) / #3E3E44
+Border Radius: 4px
+Font Size:     15px
+Font Weight:   510
+Height:        40px
+Padding:       0 16px
+```
+
+#### Ghost / Text Button
+```
+Background:    transparent
+Text:          rgb(138, 143, 152) / #8A8F98
+Border:        none
+Border Radius: 4px
+Padding:       0 12px
+Font Size:     13px
+```
+
+### Input Fields
+
+Linear's marketing site uses minimal form inputs. Toggle switches appear on the pricing page:
+```
+Toggle (Checked): Blue/purple fill
+Toggle Label:     13px, weight 400, secondary text color
+```
+
+### Spacing System
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| **Container Max Width** | `1364px` | Primary content container |
+| **Container Padding** | `0 32px` | Horizontal page gutters |
+| **Section Padding** | `96px 0 128px` | Vertical rhythm between feature sections |
+| **CTA Section Margin** | `224px 0` | Extra breathing room around final CTA |
+| **Main Top Padding** | `72px` | Space below fixed nav |
+| **Footer Column Gap** | `32px` padding per column | Footer section horizontal spacing |
+| **Footer Title Margin** | `0 0 24px` | Space below footer column headings |
+| **Button Gap (CTA)** | `12px` | Gap between side-by-side CTA buttons |
+
+---
+
+## Section Boilerplate
+
+### Navigation
+
+**Structure:**
+```
+<header> (banner)
+  <nav aria-label="Main">
+    <ul aria-label="Site navigation">
+      <!-- Logo (left) -->
+      <li>
+        <a href="/homepage">
+          <img alt="Linear" /> <!-- SVG logo mark + wordmark -->
+        </a>
+      </li>
+
+      <!-- Center links -->
+      <div>
+        <div> <!-- left group -->
+          <li><a>Product</a></li>    <!-- has dropdown -->
+          <li><a>Resources</a></li>  <!-- has dropdown -->
+          <li><a>Customers</a></li>
+          <li><a>Pricing</a></li>
+          <li><a>Now</a></li>
+          <li><a>Contact</a></li>
+        </div>
+        <div> <!-- right group -->
+          <li><a>Log in</a></li>
+          <li><a>Sign up</a></li> <!-- primary button style -->
+        </div>
+      </div>
+    </ul>
+  </nav>
+</header>
+```
+
+**Styling:**
+- Full-width, transparent background (`rgba(0,0,0,0)`)
+- Inner wrapper: `max-width: 1364px`, centered
+- Nav height: ~72px (implied from main top padding)
+- Logo: left-aligned, SVG mark + wordmark
+- Links: `13px`, weight `400`, color `rgb(138, 143, 152)` (secondary)
+- Active nav link text becomes `rgb(247, 248, 248)` (primary white)
+- Sign up button: primary invert style (light bg, dark text, `border-radius: 4px`)
+- Vertical divider `|` separates nav links from auth links
+- Nav is sticky/fixed on scroll
+
+**Interactions - Product Dropdown:**
+- Trigger: hover on "Product" link
+- Panel appears below with 3-column grid of links
+- Each item: title (white, weight 510) + description (secondary gray, 2 lines)
+- Items: Intake, Build, Monitor, Plan, Diffs, Integrations
+- Bottom bar: "New: UI refresh" link (left) + "Changelog" link (right)
+- Panel has dark elevated background, subtle border, rounded corners
+- Smooth fade-in/slide-down animation
+
+**Interactions - Resources Dropdown:**
+- Same trigger/animation pattern as Product
+- Contains: About, Blog, Docs, Changelog, etc.
+
+**Interactions - General:**
+- Links have subtle opacity/color transition on hover (secondary -> primary white)
+- No underlines on hover
+- Sign up button has subtle hover brightness increase
+
+---
+
+### Hero
+
+**Structure:**
+```
+<section>
+  <div class="container" style="max-width: 1364px; padding: 0 32px;">
+    <!-- Title -->
+    <h1>The product development system for teams and agents</h1>
+
+    <!-- Description row -->
+    <div style="display: flex; justify-content: space-between; align-items: end;">
+      <p>Purpose-built for planning and building products.<br/>Designed for the AI era.</p>
+      <a>New  Linear Diffs (Beta) -></a> <!-- announcement badge, right-aligned -->
+    </div>
+
+    <!-- Product screenshot / interactive demo -->
+    <div> <!-- full-width app screenshot with 3-pane layout --> </div>
+  </div>
+</section>
+```
+
+**Styling:**
+- H1: `64px`, weight `510`, line-height `64px`, letter-spacing `-1.408px`, white
+- Subtitle: `15px`, weight `400`, line-height `24px`, color `rgb(138, 143, 152)`
+- Announcement link: right-aligned, secondary color with arrow, "New" badge
+- Product screenshot: full container width, rounded corners, dark UI with subtle borders
+- No traditional hero CTA buttons (the app screenshot IS the hero visual)
+- Generous vertical spacing between title, subtitle, and screenshot
+
+---
+
+### Features (Repeating Section Pattern)
+
+Linear's homepage uses 5 feature sections with a consistent pattern:
+
+**Structure:**
+```
+<section style="padding: 96px 0 128px;">
+  <div class="container" style="max-width: 1364px; padding: 0 32px;">
+    <!-- Header row: 2-column -->
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: ~40px;">
+      <h2>Make product<br/>operations self-driving</h2>
+      <div>
+        <p>Description text explaining the feature in 2-3 lines.</p>
+        <a>1.0  Intake  -></a> <!-- numbered link with arrow -->
+      </div>
+    </div>
+
+    <!-- Visual: full-width product screenshot or interactive demo -->
+    <div> <!-- app UI screenshot --> </div>
+  </div>
+</section>
+```
+
+**Sections on homepage:**
+1. "Make product operations self-driving" (Intake)
+2. "Define the product direction" (Plan)
+3. "Move work forward across teams and agents" (Build)
+4. "Review PRs and agent output" (Diffs)
+5. "Understand progress at scale" (Monitor)
+
+**Styling:**
+- H2: `40px`, weight `510`, line-height `44px`, letter-spacing `-0.88px`, white
+- Description: `15px`, weight `400`, line-height `24px`, secondary gray
+- Section link: numbered prefix (e.g., "1.0"), product name, right arrow `->`, secondary color
+- 2-column header layout: heading left, description + link right
+- Full-width visuals below the header
+- Sections separated by `96px` top + `128px` bottom padding
+
+---
+
+### Social Proof (Logo Bar)
+
+**Structure (Homepage):**
+```
+<div class="container">
+  <p>Linear powers over <strong>25,000</strong> product teams. From ambitious startups to major enterprises.</p>
+  <a href="/customers">Customer stories -></a>
+</div>
+<!-- Horizontal scrolling logo bar -->
+<div> <!-- row of grayscale company logos --> </div>
+```
+
+**Structure (Customers Page):**
+```
+<section>
+  <!-- Stats -->
+  <div style="display: grid; grid-template-columns: 1fr 1fr;">
+    <div>
+      <p class="stat">2x</p>
+      <p>Increase in filed issues</p>
+    </div>
+    <div>
+      <p class="stat">1.6x</p>
+      <p>Faster issue resolution</p>
+    </div>
+  </div>
+  <p>Teams that switch to Linear create more issues and close them faster</p>
+</section>
+```
+
+**Styling:**
+- Stats: large bold numbers, secondary description text
+- Logos: grayscale, evenly spaced, horizontal scroll on mobile
+- Company count bolded: `<strong>25,000</strong>`
+- "Customer stories" link with right arrow
+
+---
+
+### Showcase (Customer Stories Grid)
+
+**Structure (Customers Page):**
+```
+<section>
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: ~24px;">
+    <!-- Featured story card -->
+    <a href="/customers/openai">
+      <div class="card" style="border-radius: 8px; overflow: hidden;">
+        <img alt="OpenAI" /> <!-- company logo -->
+        <div>
+          <p class="title">Why OpenAI chose Linear and scaled to 3,000 users</p>
+          <span>Read story <img alt="arrow" /></span>
+        </div>
+      </div>
+    </a>
+    <!-- Repeat for each story -->
+  </div>
+</section>
+```
+
+**Customer Logo Grid:**
+```
+<section>
+  <h2>Powering 25,000+ ambitious product teams of all shapes and sizes</h2>
+  <!-- Tab filters -->
+  <div role="tablist">
+    <button role="tab" aria-selected="true">Featured</button>
+    <button role="tab">SaaS</button>
+    <button role="tab">AI</button>
+    <button role="tab">Fintech</button>
+    <button role="tab">Consumer</button>
+    <button role="tab">Hardware</button>
+    <button role="tab">Health</button>
+    <button role="tab">Enterprise</button>
+  </div>
+  <!-- Logo list -->
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, ~200px);">
+    <a href="/customers/openai">
+      <img alt="OpenAI logo" />
+      <span>OpenAI</span>
+      <span class="tags">AI, Enterprise</span>
+      <span>Read story -></span>
+    </a>
+    <!-- Repeat -->
+  </div>
+</section>
+```
+
+**Styling:**
+- Story cards: dark background with subtle geometric pattern overlay, rounded corners (`8px`)
+- Card padding: ~28px
+- Company logo: top-left of card
+- Title: white, ~20px, weight 510
+- "Read story" link: secondary gray with arrow icon
+- 2-column grid for featured stories
+- Logo grid: multi-column with company logo, name, category tags, and action link
+- Tab filters: horizontal row, selected tab has active state
+
+---
+
+### Stats
+
+**Structure:**
+```
+<div style="display: grid; grid-template-columns: 1fr 1fr;">
+  <div>
+    <p style="font-size: ~40px; font-weight: 510;">2x</p>
+    <p style="font-size: 15px; color: rgb(138,143,152);">Increase in filed issues</p>
+  </div>
+  <div>
+    <p style="font-size: ~40px; font-weight: 510;">1.6x</p>
+    <p style="font-size: 15px; color: rgb(138,143,152);">Faster issue resolution</p>
+  </div>
+</div>
+<p>Teams that switch to Linear create more issues and close them faster</p>
+```
+
+**Styling:**
+- Stat number: large (~40px), weight 510, white
+- Stat label: `15px`, secondary gray
+- 2-column grid layout
+- Supporting caption below stats in secondary gray
+
+---
+
+### Pricing
+
+**Structure:**
+```
+<section>
+  <div class="container">
+    <h1>Pricing</h1>
+
+    <!-- 4-column pricing grid -->
+    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: ~24px;">
+      <!-- Tier card (repeated 4x) -->
+      <div>
+        <h3>Free</h3>
+        <div class="price">$0</div>
+        <p class="billing-note">Free for everyone</p>
+
+        <ul>
+          <li><img alt="check" /> Unlimited members</li>
+          <li><img alt="check" /> 2 teams</li>
+          <li><img alt="check" /> 250 issues</li>
+          <!-- ... -->
+        </ul>
+
+        <a class="btn-primary" href="/signup">Get started</a>
+      </div>
+
+      <!-- Basic -->
+      <div>
+        <h3>Basic</h3>
+        <div class="price">$10 <span>per user/month</span></div>
+        <label><input type="checkbox" checked /> Billed yearly</label>
+        <ul><!-- features --></ul>
+        <a href="/signup">Get started</a>
+      </div>
+
+      <!-- Business -->
+      <div>
+        <h3>Business</h3>
+        <div class="price">$16 <span>per user/month</span></div>
+        <label><input type="checkbox" checked /> Billed yearly</label>
+        <ul><!-- features --></ul>
+        <div>
+          <a href="/signup">Get started</a>
+          <a href="/contact/sales">Contact sales</a>
+        </div>
+      </div>
+
+      <!-- Enterprise -->
+      <div>
+        <h3>Enterprise</h3>
+        <div class="price">Custom</div>
+        <p>Annual billing only</p>
+        <ul><!-- features --></ul>
+        <a href="/contact/sales">Contact sales</a>
+      </div>
+    </div>
+
+    <!-- Social proof -->
+    <p>Trusted by more than <strong>25,000</strong> companies</p>
+    <!-- Logo row -->
+
+    <!-- Feature comparison table -->
+    <a>Customer stories -></a>
+    <table>
+      <thead>
+        <tr>
+          <th>Features</th>
+          <th>Free</th>
+          <th>Basic</th>
+          <th>Business</th>
+          <th>Enterprise</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Category headers as row groups: Core, AI and agent workflows, Integrations, etc. -->
+        <tr><td colspan="5" class="category">Core</td></tr>
+        <tr>
+          <td>Issues, projects, cycles, initiatives</td>
+          <td><img alt="check" /></td>
+          <td><img alt="check" /></td>
+          <td><img alt="check" /></td>
+          <td><img alt="check" /></td>
+        </tr>
+        <!-- ... rows ... -->
+      </tbody>
+    </table>
+  </div>
+</section>
+```
+
+**Styling:**
+- H1 (page title): `48px`, weight `510`, letter-spacing `-1.056px`
+- Tier name (H3): `24px`, weight `590`, white
+- Price: large number, "per user/month" in smaller secondary text
+- Feature list: checkmark icons (SVG, green/teal tint), `16px` text, white
+- Billing toggle: checkbox-style toggle with label
+- 4-column grid, equal width
+- No visible card borders or backgrounds (cards are implied by column spacing)
+- Comparison table: full-width, alternating category headers, checkmark/dash icons
+- Category headers in table are non-row dividers (styled differently)
+
+---
+
+### CTA (Pre-footer)
+
+**Structure:**
+```
+<section style="margin: 224px 0; text-align: center;">
+  <h2 style="max-width: 16ch;">Built for the future. Available today.</h2>
+  <div style="display: flex; gap: 12px; justify-content: center;">
+    <a class="btn-primary" href="/signup">Get started</a>
+    <a class="btn-secondary" href="/contact/sales">Contact sales</a>
+  </div>
+</section>
+```
+
+**Styling:**
+- H2: `40px`, weight `510`, centered, constrained to `max-width: 16ch`
+- Two buttons side by side with `12px` gap
+- Primary: light bg (`#E6E6E6`), dark text, `15px`, `40px` height, `border-radius: 4px`
+- Secondary: dark bg (`#28282C`), light text, `0.5px` border `#3E3E44`, same size
+- Massive vertical margin (`224px`) for breathing room
+- No background color or decorative elements — pure typography + buttons
+
+---
+
+### Footer
+
+**Structure:**
+```
+<footer style="border-top: 1px solid rgb(35, 37, 42);">
+  <div style="max-width: 1364px; margin: 0 auto;">
+    <!-- Logo -->
+    <a href="/"><img alt="Linear Logo" /></a>
+
+    <!-- 6-column link grid -->
+    <div style="display: grid; grid-template-columns: repeat(6, 1fr);">
+      <!-- Column -->
+      <div style="padding: 0 32px;">
+        <h3>Product</h3>
+        <ul>
+          <li><a href="/intake">Intake</a></li>
+          <li><a href="/plan">Plan</a></li>
+          <li><a href="/build">Build</a></li>
+          <li><a href="/diffs">Diffs</a></li>
+          <li><a href="/monitor">Monitor</a></li>
+          <li><a href="/pricing">Pricing</a></li>
+          <li><a href="/security">Security</a></li>
+        </ul>
+      </div>
+
+      <div style="padding: 0 32px;">
+        <h3>Features</h3>
+        <ul>
+          <li><a>Asks</a></li>
+          <li><a>Agents</a></li>
+          <li><a>Customer Requests</a></li>
+          <li><a>Insights</a></li>
+          <li><a>Mobile</a></li>
+          <li><a>Integrations</a></li>
+          <li><a>Changelog</a></li>
+        </ul>
+      </div>
+
+      <div style="padding: 0 32px;">
+        <h3>Company</h3>
+        <ul>
+          <li><a>About</a></li>
+          <li><a>Customers</a></li>
+          <li><a>Careers</a></li>
+          <li><a>Blog</a></li>
+          <li><a>Method</a></li>
+          <li><a>Quality</a></li>
+          <li><a>Brand</a></li>
+        </ul>
+      </div>
+
+      <div style="padding: 0 32px;">
+        <h3>Resources</h3>
+        <ul>
+          <li><a>Switch</a></li>
+          <li><a>Download</a></li>
+          <li><a>Documentation</a></li>
+          <li><a>Developers</a></li>
+          <li><a>Status</a></li>
+          <li><a>Enterprise</a></li>
+          <li><a>Startups</a></li>
+        </ul>
+      </div>
+
+      <div style="padding: 0 32px;">
+        <h3>Connect</h3>
+        <ul>
+          <li><a>Contact us</a></li>
+          <li><a>Community</a></li>
+          <li><a>X (Twitter)</a></li>
+          <li><a>GitHub</a></li>
+          <li><a>YouTube</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Legal links -->
+    <div>
+      <a href="/privacy">Privacy</a>
+      <a href="/terms">Terms</a>
+      <a href="/dpa">DPA</a>
+    </div>
+  </div>
+</footer>
+```
+
+**Styling:**
+- Background: same as page (`#08090A`)
+- Top border: `1px solid rgb(35, 37, 42)` (subtle separator)
+- Inner container: `max-width: 1364px`, centered
+- Column headers (H3): `13px`, weight `510`, white, `margin-bottom: 24px`
+- Links: `13px`, secondary gray color, no underline
+- Links hover: transition to white
+- Column padding: `0 32px`
+- Legal links: bottom row, same secondary styling
+- Logo: Linear mark only (no wordmark), top-left
+
+---
+
+### Sections NOT present on linear.app:
+
+The following sections from the requested list are **not present** on Linear's marketing site:
+
+| Section | Status |
+|---------|--------|
+| **About** | Exists at `/about` but follows the same feature section pattern (H1 + body text + visuals) |
+| **Blog** | Exists at `/blog` — standard blog listing with card grid |
+| **Comparison** | Not present as a dedicated section |
+| **Contact** | Exists at `/contact` — minimal form page |
+| **Downloads** | Exists at `/download` — simple app download links |
+| **FAQ** | Not present on marketing pages |
+| **How It Works** | Handled by the feature sections pattern above |
+| **Newsletter** | Not present |
+| **Store** | Not present |