Surfshark

Surfshark's design system projects a dynamic, secure, and user-friendly online presence. It balances informative content with clear calls to action, leveraging high-contrast typography against clean achromatic surfaces. A vibrant red accent color signifies primary interactions, while a teal tone highlights key data points. Asymmetric large radii on cards and a distinct, rounded button style add a modern, approachable edge to the otherwise structured layout, creating an engaging yet trustworthy feel. Use Shark Red (#fa3556) exclusively for primary calls to action to ensure visual hierarchy and prompt decisive interaction. Apply Inter font family with weights 400, 600, or 700. Do not use other weights. Utilize a 12px border-radius for all filled buttons to maintain a consistent friendly yet modern interaction style. Ensure headings use a generous line-height from the type scale values to improve readability and visual breathing room. Maintain high contrast (AAA minimum) for all text on background pairings, especially for critical information. Employ the 48px asymmetric radius (48px 0px 0px) for cards on the left edge of the screen, mirroring the brand's design language. Use Ocean Teal (#1ebfbf) specifically for highlighting key figures like prices or data points, not for interactive elements. Do not use Harvest Gold (#ffc200) for primary action buttons; reserve it for distinct promotional banners or secondary accents. Avoid arbitrary border-radius values; always refer to the defined spacing.radius tokens (e.g., 48px for cards, 12px for buttons). Do not introduce new typefaces or weights outside of the specified Inter family and its defined weights. Refrain from using color for purely decorative purposes if it doesn't align with brand, accent, or semantic roles. Do not use the transparent Ghost Navigation Button style as a primary call to action, as it lacks sufficient visual weight. Do not stretch or distort imagery; maintain original aspect ratios and ensure crisp presentation. Avoid using a pageMaxWidth; the page content stretches fluidly, but sections may be contained internally.