Linear-style Dark SaaS

Also called: Linear style, Dark precision UI, Dev-tool dark

Precise near-black product UI: hairline borders, a faint indigo spotlight, gradient-edged highlights and tight medium-weight Inter.

“Linear look”Futuristic & TechEra: 2020s (Linear, Vercel, Raycast era)TechySeriousCalmLuxuryNew

Open full screen ↗

linear-dark-saas / landingEN

linear-dark-saas / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md8pxRadius lg12pxRadius xl16pxDensity×0.95Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

near-black #08090Ahairline bordersindigo spotlight glowgradient-border highlighttight Inter mediumgradient-faded headlinetilted product screenshot⌘K shortcut hintsstatus dots

Linear-style dark SaaS is the look of modern developer and productivity tools. Everything sits on #08090A with 1px rgba(255,255,255,.08) hairlines instead of shadows; a soft indigo radial glow lights the top of the page like a spotlight, and only the most important surfaces get a gradient border that catches the light. Type is Inter at medium weight with tight negative tracking and gradient-faded headlines, density is high, statuses are tiny coloured dots, and keyboard shortcuts (⌘K) appear right in the UI. Calm, exact, engineered.

Best for

Developer tools and B2B SaaS
Issue trackers, CI/CD and infra products
AI products aimed at professionals
Product launch and changelog pages

Avoid for

Consumer brands that need warmth or colour
Older or low-vision audiences (low contrast greys)
Content sites with lots of imagery

✓ Do

Use 1px rgba(255,255,255,0.08) hairlines everywhere and no drop shadows on resting cards
Keep one faint indigo (#5E6AD2) radial glow per view and a gradient border only on the hero element
Set Inter at 500 with −0.03em tracking for headings, 13–14px for dense UI text

✕ Don't

Don’t add colourful gradients or blobs — the colour is a whisper
Don’t use big radii (>16px) or pill-shaped cards
Don’t use bold 700+ headlines or wide letter-spacing

Not to be confused with

Dark Mode (OLED) →OLED dark mode is a generic true-black theme; Linear style adds hairline grids, an indigo spotlight and gradient-edged highlights with tight Inter.Enterprise SaaS →Enterprise SaaS is light, neutral and component-library-driven; Linear style is dark, dense and crafted with glow and gradient borders.Glassmorphism →Glassmorphism relies on blur over colourful blobs; Linear style is opaque near-black with hairlines and only a faint glow.

On mobile

Keep the hairline grouped lists and 13–15px type; the tab bar is a blurred near-black bar with a hairline top, and only the featured card gets the gradient border and indigo glow.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinInter · 500/600

The quick brown fox

Heading · ThaiNoto Sans Thai · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinInter · 400/500

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Noto Sans Thai is the loopless, neutral Thai companion designed to sit beside Inter-like grotesques, with matching x-height and calm, even strokes.

Colour palette

Design tokens

Radius	`sm 6px · md 8px · lg 12px · xl 16px · pill 999px`
Border	`1px`
Shadow	`0 4px 24px rgba(0,0,0,0.45)`
Display	`clamp(2.75rem, 6vw, 4.75rem)`
Motion	`160ms cubic-bezier(.25,.1,.25,1)`
Density	`×0.95`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Linear-style Dark SaaS (linear-dark-saas) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap
 */
:root {
  --radius: 12px;
  --background: #08090A;
  --foreground: #F7F8F8;
  --card: #0F1011;
  --card-foreground: #F7F8F8;
  --popover: #0F1011;
  --popover-foreground: #F7F8F8;
  --primary: #5E6AD2;
  --primary-foreground: #FFFFFF;
  --secondary: #E6E8EB;
  --secondary-foreground: #08090A;
  --muted: #141516;
  --muted-foreground: #8A8F98;
  --accent: #141516;
  --accent-foreground: #F7F8F8;
  --destructive: #EB5757;
  --border: rgba(255,255,255,0.08);
  --input: rgba(255,255,255,0.08);
  --ring: #5E6AD2;
  --chart-1: #5E6AD2;
  --chart-2: #4CB782;
  --chart-3: #F2994A;
  --chart-4: #8A8F98;
  --chart-5: #E6E8EB;
  --sidebar: #0F1011;
  --sidebar-foreground: #F7F8F8;
  --sidebar-primary: #5E6AD2;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #141516;
  --sidebar-accent-foreground: #F7F8F8;
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-ring: #5E6AD2;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Linear-style Dark SaaS (linear-dark-saas) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #08090A;
  --color-surface: #0F1011;
  --color-surface-2: #141516;
  --color-text: #F7F8F8;
  --color-text-muted: #8A8F98;
  --color-primary: #5E6AD2;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E6E8EB;
  --color-on-secondary: #08090A;
  --color-accent: #8C94F2;
  --color-border: rgba(255,255,255,0.08);
  --color-success: #4CB782;
  --color-warning: #F2C94C;
  --color-danger: #EB5757;
  --color-chart-1: #5E6AD2;
  --color-chart-2: #4CB782;
  --color-chart-3: #F2994A;
  --color-chart-4: #8A8F98;
  --color-chart-5: #E6E8EB;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 80px rgba(0,0,0,0.6);
  --font-heading: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Linear-style Dark SaaS (linear-dark-saas). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+Thai:wght@400;500;600&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0353,
            0.0392
          ],
          "hex": "#08090a"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0627,
            0.0667
          ],
          "hex": "#0f1011"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0824,
            0.0863
          ],
          "hex": "#141516"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9725,
            0.9725
          ],
          "hex": "#f7f8f8"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.5608,
            0.5961
          ],
          "hex": "#8a8f98"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.4157,
            0.8235
          ],
          "hex": "#5e6ad2"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.9098,
            0.9216
          ],
          "hex": "#e6e8eb"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0353,
            0.0392
          ],
          "hex": "#08090a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5804,
            0.949
          ],
          "hex": "#8c94f2"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.08
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.7176,
            0.5098
          ],
          "hex": "#4cb782"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7882,
            0.298
          ],
          "hex": "#f2c94c"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9216,
            0.3412,
            0.3412
          ],
          "hex": "#eb5757"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.4157,
            0.8235
          ],
          "hex": "#5e6ad2"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.7176,
            0.5098
          ],
          "hex": "#4cb782"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.6,
            0.2902
          ],
          "hex": "#f2994a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.5608,
            0.5961
          ],
          "hex": "#8a8f98"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.9098,
            0.9216
          ],
          "hex": "#e6e8eb"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.4
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Geist Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.1,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!