Raw Materials

Raw Materials' design evokes a playful yet assertive mood, like a meticulously organized artisan's workshop using high-contrast, bold blocks of color. The visual identity is defined by its vibrant, almost fluorescent brand colors that pop against a soft, near-white background, creating an immediate, high-energy impact. This is reinforced by chunky custom typography with highly controlled letter-spacing, giving the text a graphic, almost sculptural presence rather than a purely communicative one. The consistent use of generous border-radii on interactive elements adds a touch of friendliness to the otherwise stark and deliberate composition. Prioritize brand colors like 'Coral Flame' (#ff3d00), 'Electric Yellow' (#ffff00), 'Neon Green' (#05ff00), 'Deep Violet' (#5900cc), and 'Royal Blue' (#2835f8) for all interactive elements to reinforce brand identity. Use 'StabilGrotesk' as the primary font for all body text and UI elements at weights 100, 400, and 500, with letter spacing optimized for readability and visual density. Apply a consistent 16px border radius to all cards, standard buttons, and many general UI elements for a cohesive, softened aesthetic. Employ the 44px border radius specifically for prominent CTA pill buttons (e.g., 'Pill Button - Action' and 'Accent Pill Button') to visually differentiate them. Utilize a tight letter-spacing approach for all display headings (e.g., Optimistic Text, KlarheitKurrent, HTQ-Waldenburg-FettSchmal) to create a graphic, solid block of text, rather than overly spaced headlines. Ensure 'Ink Black' (#0e0e0e) text is always set against 'Canvas White' (#f4e9e1) backgrounds, or inverse, for maximum contrast and brand recognition. Maintain an element gap of 8px for vertical and horizontal spacing between small UI elements. Do not use generic system fonts for any primary content or headings; stick to the custom font families for brand consistency. Avoid applying excessive shadows or complex elevation to elements; the design emphasizes flat color blocking and subtle background shifts. Do not use a default 0px border radius for interactive elements, as the rounded aesthetic is a core visual characteristic. Do not introduce new vibrant colors outside the established brand and accent palettes, as the limited, high-contrast palette is signature. Avoid using wide letter-spacing for body copy or small text, as it conflicts with the tight, graphic text treatment of the display fonts. Do not assume padding; for buttons and cards, padding is often minimal or entirely absent, allowing text size and element dimensions to define layout.