Metamask

MetaMask uses a playful, vibrant aesthetic that blends bold, chunky typography with a soft, almost pastel base. The design system is characterized by its liberal use of rounded corners and borders, creating a soft and approachable feel. Despite the occasional highly saturated accents and primary purple, the overall presentation remains light due to a dominant pale pink canvas. Gradients on interactive elements contribute to a friendly, dynamic visual system. Use 'Pale Canvas' (#fff1eb) as the primary page background for a soft, inviting base. Employ the 'MMPolyVariable' font for all large headlines (75px, 127px, 158px) with a tight letter-spacing of -0.0060em to emphasize its chunky, unique character. Apply 'Electric Violet' (#3d065f) as the dominant brand color for primary actions, critical headings, and any element requiring strong accent on light backgrounds. Implement consistent border-radius values: 98.9583px for pill-shaped buttons, 7.91667px for cards, and 3.95833px for ghost buttons to maintain a soft, approachable feel. Use 1px 'Slate Gray' (#e9edf6) borders for subtle separation and definition of elements like cards or inputs, contrasting with wider, darker borders for emphasis. Maintain a compact density for UI elements, using 6px as the standard 'elementGap' and 12px for 'cardPadding', to keep information accessible without feeling sparse. Avoid using harsh, saturated primary colors for large background areas; reserve them for accents and specific interactive elements. Do not deviate from the specified tight letter-spacing for 'MMPolyVariable' headlines; its distinctiveness relies on this characteristic. Do not use sharp corners; all interactive elements and content containers should adhere to the defined border-radius values. Avoid heavy shadows or gradients on neutral elements; focus on flat, clean surfaces with color accents. Do not introduce new font families for UI; stick to MMEuclidCircularB, MMSansVariable, and MMPolyVariable to maintain typographic consistency. Do not create dense, text-heavy blocks without visual breaks; use the varied card backgrounds and spacing to organize content visually.