WalletConnect

WalletConnect's design system evokes a digital ledger on a crisp white backdrop, emphasizing clarity and efficient data display. A vibrant spectrum of blues serves as the brand accent, signaling interactive elements and critical information without visual clutter. Typography is precise and utilitarian, supporting the feeling of a clean, functional interface where content takes precedence. Components are lightweight with subtle radii, avoiding heavy shadows or ornate flourishes to maintain an uncluttered visual plane. Prioritize 'Canvas White' (#ffffff) and 'Paper White' (#f9f9f9) for primary backgrounds to maintain a bright, open aesthetic. Use 'Action Blue' (#4672ff) exclusively for primary call-to-action button backgrounds and active states to ensure high impact and clarity. Employ 'KHTeka' font for all primary text elements, adjusting weight and size to establish hierarchy as defined in the type scale. Apply a 16px border-radius for all interactive elements like buttons and input fields to maintain visual consistency. Maintain a comfortable information density using an 8px 'elementGap' for most horizontal and vertical spacing between UI elements. Use 'Midnight Ink' (#1b2045) for secondary text and subtle borders to create distinction without over-saturating the interface with dark tones. Utilize a page max-width of 1600px, centering content within this constraint to provide ample breathing room and consistent layout. Do not introduce new saturated colors outside the defined blue palette in primary UI elements; reserve them for specific content or imagery. Avoid using heavy drop shadows for elevation; instead, rely on subtle background color shifts and the single 'Focus Shadow' for distinction. Do not deviate from the specified border-radii; the 3px default, 16px for interactive elements, and 40px for large rounded elements are critical to the brand's shape language. Refrain from using Roboto or KHTekaMono for headings or extensive body copy; their roles are specific and should not be expanded. Do not use generic gray tones for borders or accents where a 'Sky Blue' (#cce2ff) or 'Azure Blue' (#006cff) could reinforce brand identity. Avoid tight, constrained layouts; aim for a comfortable density with ample whitespace, especially around content blocks and sections. Do not use text decoration (underline) on standard body links; reserve it for specific interactive states or functional UI elements.