Intra

Intra's design system evokes a stark, utilitarian aesthetic, heavily reliant on bold monochromatic contrasts and raw typographic statements. The visual language is defined by a primary background of industrial gray, offset by sharp white and black elements. Cards and key visuals use a reversed dark theme that feels integrated rather than an overlay, maintaining a consistent high-contrast, blocky presence. Typography is the primary decorative element, with large, unembellished sans-serifs commanding attention. Prioritize high contrast between text and background, especially for #212529 on #e4e4e4 and #ffffff on #212529. Use Whyte font at 95px for primary headlines to create a bold, blocky statement. Apply 0px border-radius to all buttons and cards, enforcing a sharp, geometric aesthetic. Maintain a clear visual hierarchy by limiting color primarily to the neutral palette and using accent colors only for product features or decorative card backgrounds. Employ consistent 10px element gaps for inline items and 40px section gaps for vertical rhythm. Utilize ghost buttons with #000000 text and 0px border for all interactive elements to preserve the monochromatic, utility-focused style. Do not introduce rounded corners on primary UI elements such as cards or buttons. Avoid gradients or soft shadows that would dilute the stark, high-contrast visual identity. Do not use subtle color variations for backgrounds; stick to the defined #e4e4e4 and #212529 surfaces. Refrain from using lightweight fonts for anything other than body text to preserve the brand's bold typographic presence. Do not use imagery in a way that breaks out of the rigid grid or introduces irregular shapes. Avoid decorative icons; keep visual elements strictly photographic or abstract geometric shapes.