Proton

Proton's design system evokes a digital sanctuary: a crisp, bright base accented by deep, protective purples. The layout emphasizes clear information hierarchy with ample whitespace, using soft gradients for depth without heavy shadows. Typography is precise and confident, balancing a strong sans-serif for UI with a traditional serif for prominent headlines. Interactive elements are clearly defined by vibrant violet cues rather than subtle hover states. Use 'Privacy Violet' (#372580) for all primary headline text, leveraging its authoritative depth. Apply a 9999px (pill) border-radius to all buttons for a consistent soft, approachable shape. Define interactive elements clearly with 'Action Violet' (#6d4aff) for filled backgrounds or text, and use Stone Gray (#e5e7eb) for subtle ghost button borders. Structure large negative spaces with 'Canvas White' (#ffffff) and 'Cloud Gray' (#f6f7f9) to create clear content separation and visual breathing room. Employ ProtonSerif for all major headings to establish a distinct, traditional brand voice. Implement consistent internal padding of 20px for cards and 64px for section side-padding to maintain visual alignment and density. Utilize the Lavender Glow (#e2dbff) and Cloud Gray (#f6f7f9) gradients to provide subtle background depth without resorting to heavy drop shadows. Avoid using harsh or dark shadows; instead, rely on subtle background gradients and color shifts for layering and depth. Do not introduce new saturated hues outside of the defined violet brand colors unless for specific semantic purposes (e.g., success, error). Avoid arbitrary border-radius values; adhere strictly to 9999px for buttons, 24px for cards, and 6px for navigation items. Do not deviate from the ProtonSerif and ProtonSans font families; maintain the established typographic hierarchy. Refrain from tight, compressed layouts; ensure generous 'sectionGap' (64px) and 'elementGap' (4px) values are maintained. Do not use generic blue for links; all interactive text links should default to 'Action Violet' (#6d4aff) for consistency. Avoid unnecessary decoration or heavy visual elements; the system prioritizes clarity and a lightweight feel.