Signal Messenger

This design system projects an image of digital security and approachability, achieved through a bright, spacious layout with rounded elements. The intentional use of soft blue and white as primary background colors creates an open, trustworthy atmosphere, while dark typography ensures readability. The system strikes a balance between solid, clear interactive elements and subtle background variation, making complex privacy concepts feel accessible. Use Night Sky (#1b1b1b) for all primary headings and body text to ensure maximum readability against light backgrounds. Apply Signal Blue (#9dbbf8) as a primary background accent for hero sections to immediately establish brand identity. Utilize 8px border-radius for all primary buttons to maintain a soft, approachable aesthetic. Maintain a clear page structure with sections separated by at least 64px, alternating backgrounds where appropriate (Cloud Cover #ffffff, Sky Dust #f6f6f6, or Signal Blue #9dbbf8). Ensure all interactive elements, such as buttons and links, use Ocean Deep (#2c6bed) or Link Blue (#2942ff) to signify action and interaction clearly. Use Inter font family exclusively for all text elements, leveraging weights 400 for body, 600 for subheadings, and 800 for major headings and display titles. Avoid using highly saturated, non-brand colors; stick to the established palette of blues, grays, and whites. Do not deviate from the 8px and 16px border radii; squared or overly complex rounded shapes are not part of this system. Never use dark backgrounds for large text blocks except in the footer where Slate Shadow (#3c3744) is established, always prioritize high contrast with light backgrounds. Do not introduce complex gradients or texture overlays on backgrounds; maintain a flat, clean aesthetic. Avoid excessive use of shadows; reserve the specific shadow token rgba(0, 0, 0, 0.12) 0px 4px 12px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px only for elevated elements like product mocks.