Navigate

Navigate employs a 'modern dark' aesthetic characterized by a dominant black canvas that grounds vivid, playful accent colors for interactive elements and decorative graphics. Typography is bold and confident, combining a precise sans-serif for body text with a dense, impactful sans-serif for headlines. Surfaces are either pure black or a light off-white, with a focus on rounded rectangular shapes for content containers, juxtaposed with abstract, often rounded, graphic elements that add an organic touch. Use Midnight Abyss (#141414) as the default background for sections, and Ghost White (#fdf9f0) for contrasting content areas. Apply Aeonik for all body text, navigation elements, and button labels, prioritizing weights 400 and 500 for readability. Reserve OldschoolGrotesk, weights 800 and 900, exclusively for display headlines and prominent section titles. Ensure all primary interactive elements are highlighted with Lime Squeeze (#c7ff69) for backgrounds or vibrant borders. Utilize highly rounded corners for cards (43.2px) and a pill shape for buttons (25.146px), contributing to the playful aesthetic. Implement consistent internal padding on cards (e.g., 55.8px top, 65.7px horizontal for large cards), creating ample breathing room. Maintain negative letter spacing for display typography (-0.020em to -0.040em) to enhance its compact, impactful presence. Avoid using saturated accent colors (Amethyst Glow, Sunset Orange, Emerald Sprint, Skybound Blue, Golden Rod) for text or primary UI functions; reserve them for decorative graphics and distinct card backgrounds. Do not use generic square corners; adhere to the specified radii for buttons (25.146px) and cards (43.2px to 64.8px). Do not create new button styles; stick to the defined Primary Action Button (filled Lime Squeeze) or Ghost Border Button (outlined Midnight Abyss). Avoid breaking up the visual density of OldschoolGrotesk headlines with excessive word spacing or positive letter spacing. Do not introduce new color variants that are not Midnight Abyss, Ghost White, Lime Squeeze, or the defined accent colors. Do not use any shadows on cards or elements; the design relies on bold color blocks and borders for depth. Do not vary the border width of ghost elements; maintain a consistent 1.5px solid border.