Skip to content
Browse
Library

Tailscale. Engineer's whiteboard on cream paper.

  • Developer tools
  • Light theme
  • 10 colors
  • 2 typefaces

Tailscale's visual system is a warm, paper-grounded infrastructure UI that treats network security as approachable rather than intimidating. A cream canvas (#eeebea) replaces the typical stark white SaaS background, and a single Signal Red (#d04841) acts as rare punctuation against a near-black (#181717) text and border system. Typography stays conversational — Inter at light weights (300-400) for headlines rather than the usual bold-shout, and a custom geometric (MDIO) reserved for small technical labels with wide tracking. Components are soft and rounded (16px is the dominant radius for cards, nav, images, and buttons), shadows are barely perceptible (2% black at 4px blur), and the overall feel is a confident engineer's notebook rather than a corporate dashboard.

Visit tailscale.com
Screenshot of Tailscale
Captured from tailscale.com on October 11, 2026

Tailscale design system

Tailscale

Brand1

  • Brand accent for highlighted feature cards, active nav indicators, and emphasis strokes — used in 5% of the interface to make the other 95% feel intentional

Accent1

  • Decorative product-screenshot gradient — warm red against matte black creates urgency without aggression; blue is reserved for inside-the-product imagery, never for UI controls

Neutrals8

  • Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color

  • Secondary borders, body text dividers, nav rules — one step lighter than Ink for layered information

  • Muted body text, helper labels, subtle borders — the middle gray for de-emphasized content

  • Tertiary borders, caption text — the quietest gray, used where structure must recede

  • Shadow color base, very light dividers — the tonal anchor for the 2% opacity shadow system

  • Page canvas and section backgrounds — the warm off-white ground that sets the whole system apart from stark-white SaaS

  • Elevated surface tint, nav background variant — sits between Bone and Paper for subtle layering

  • Card surfaces, product UI panels, testimonial tiles, integration logos — lifted off the Bone canvas to create depth

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

#fafafa on Signal Red

4.29 : 1 contrast

Background
Text
  • Body textFails AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.