Canva

Canva's design language feels like a playful yet precise creative toolkit, balancing vibrant gradients with a clean, functional interface. The primary visual tension arises from the geometric purity of most elements against the expressive, colorful gradients used for marketing sections and hero backgrounds. A crisp achromatic base palette allows the vivid, multi-hued gradients to act as focal points, signaling creative potential. This is reinforced by the consistent use of a custom sans-serif typeface, Canva Sans, which maintains readability even across diverse backgrounds. Use Canva Sans for all typographic elements, prioritizing weight 400 for body text, 500 for subheadings, and 600 for main headings. Apply a default border-radius of 8px to cards and most interactive elements to maintain visual consistency. Utilize '#8b3dff' (Canva Violet) exclusively for primary calls to action, ensuring prominence and brand recognition. Pair text on '#0f1015' (Midnight Graphite) backgrounds with '#ffffff' (Canvas White) for optimal contrast and readability. Employ the Hero Aqua-Violet Gradient (linear-gradient(135deg, rgb(0, 196, 204), rgb(125, 42, 232))) for impactful hero sections or large graphical backgrounds. Use 4px as the base unit for all spacing, ensuring consistent gaps between small elements and padding within components. Apply the letterSpacing from Canva Sans where specified, such as -0.018em for larger headlines, to fine-tune visual flow. Avoid using Times or Arial as primary display fonts; they are for system fallback only and do not match the brand's expressive aesthetic. Do not deviate from the specified vibrant accent colors (#ff6105, #ff3d4d, #e950f7) for small icons or highlighted elements, to prevent visual dissonance. Do not introduce new shadow patterns; adhere to the established box-shadow values like rgba(64, 79, 109, 0.06) 0px 0px 0px 0.5px, rgba(24, 44, 89, 0.137) 0px 2px 4px 0px, rgba(24, 44, 89, 0.07) 0px 6px 12px 0px for subtle elevation. Do not use '#0f1015' (Midnight Graphite) for primary calls to action; reserve it for card backgrounds and secondary interactive states. Do not use generic pill shapes; reserve 9999px radius specifically for filter chips and distinct interactive elements labeled as pill buttons. Do not introduce arbitrary color choices; all colors for interactive elements, backgrounds, and text must derive from the defined palette. Avoid excessive use of vivid chromatic colors outside of designated gradients or small accent elements, to maintain a balanced and clean interface.