Tailscale

Tailscale's design system uses a technical and understated aesthetic, built on a foundation of neutral grays and whites. Typography is compact and precise, maintaining clarity in dense information displays. Components are lightweight, favoring subtle borders and soft shadows over heavy fills or strong visual ornaments, contributing to an overall sense of efficiency and focus, punctuated by a single vibrant red accent color for critical actions. Use Inkwell (#181717) for all primary body text and main headings to ensure strong contrast. Apply Ghost Gray (#eeebea) for subtle visual separation, such as thin borders or as a background for secondary surfaces. Reserve Impact Red (#d04841) exclusively for primary call-to-action buttons and essential brand accents. Prioritize Inter at compact sizes (12-16px) with normal letter-spacing for denser information, such as body text or navigation items. Maintain a default border-radius of 8px for most interactive elements and 16px for cards and larger containers. Employ the subtle shadow rgba(24, 23, 23, 0.02) 0px 4px 8px 0px for cards and elevated components to provide minimal depth. Utilize 12px for consistent internal spacing within components and between closely related elements. Do not introduce new vibrant colors outside of the defined Impact Red (#d04841) to maintain the restrained aesthetic. Avoid heavy drop shadows or strong gradients on common UI elements; elevation should be subtle. Refrain from using Arial for new components or primary text. Inter is the canonical typeface. Do not deviate from the established radius values; a consistent 8px for buttons and 16px for cards is key. Do not use highly saturated primary colors for text or backgrounds unless it’s the Impact Red (#d04841) for a CTA. Avoid large letter-spacing for body text; only use MDIO with increased letter-spacing for specific stylized elements. Do not use dark backgrounds for full sections; the primary theme is light with occasional dark cards.