aave.com

Aave employs a pragmatic, enterprise-grade aesthetic, balancing clear data presentation with subtle branding. The system uses a predominantly dark theme for content sections, contrasting with an initial bright hero. Typography is compact and precise, favoring confident, small text groups. Surfaces are flat or softly rounded, with elevation sparingly used to draw attention, and a singular luminous violet provides an interactive accent against the deep neutrals. Use Aave Repro with negative letter spacing for larger headings (e.g., -0.0500em at 72px) to maintain a condensed, authoritative presence. Apply Cosmic Violet (#998eff) exclusively for primary calls to action, active states, and brand-critical highlights; avoid using it decoratively. Maintain a clear visual hierarchy by limiting card shadows to navigation elements only, favoring flat or subtle background color shifts for content grouping. Implement the 1584px 'pill' radius for primary buttons to create a softer, more inviting interactive target. Use Light Alabaster (#f6f7f4) or Slate Dust (#858387) for card backgrounds to generate depth without relying on shadows. Ensure all interactive elements have a focus state derived from Cosmic Violet or a subtle glow from the token --focus. Utilize the asymmetric 20px 6px 6px 20px border-radius for input fields to create a distinct, modern form element. Do not introduce additional saturated colors; Cosmic Violet (#998eff) is the sole accent color for branding. Avoid using drop shadows on cards or regular content blocks; rely on background color changes for surface differentiation. Do not deviate from the specified negative letter-spacing values for display and heading typography; it's critical to the brand's compact style. Do not use generic border radii; adhere to the specific values like 20px for buttons and 24px for cards. Do not use default browser link styles; all links should adopt the body text color with subtle hover states, or be explicitly styled as buttons. Do not introduce heavy iconography or overly decorative illustrations; align with the UI-focused, almost monochrome visual language. Avoid large hero imagery; product screens and minimal visuals paired with bold typography define the hero aesthetic.