Metalab

This design system conjures a mood of restrained sophistication and intellectual calm. Large, dramatic serif typography acts as art against a stark black and white canvas, establishing an immediate sense of gravity and refined taste. The composition prioritizes ample negative space, allowing elements to breathe and create an atmosphere of quiet authority, where every visual decision feels deliberate and impactful. Prioritize PP Eiko (240 weight, 88px, -1.76px letter-spacing) for all main headings to maintain dramatic visual impact. Use Basis Grotesque Pro (350/400 weight, 12px/16px) for all functional text with -0.16px letter-spacing for consistent readability. Apply Canvas White (#ffffff) as the dominant background color for most sections to create a bright, expansive canvas. Use Void Black (#000000) for primary text on Canvas White backgrounds, ensuring AAA contrast. Employ 50px border-radius for all interactive elements and contained content blocks to maintain a soft yet defined shape. Maintain generous padding; apply 0px top/bottom, 16px left/right for client tag buttons and other container specific components. Utilize rgba(186, 186, 186, 0.2) background for subtly interactive elements on dark backgrounds, providing visual feedback without strong color. Avoid using highly saturated or chromatic colors; adhere strictly to the monochrome palette with subtle gray variations. Do not deviate from the specified font families; PP Eiko and Basis Grotesque Pro are core to the brand's typographic identity. Avoid box shadows or strong elevation effects, as the system relies on color contrast and negative space for hierarchy. Do not use letter-spacing values other than -1.76px for display text and -0.16px for body text. Avoid tightly packed sections; ensure sectionGap of 900px vertical spacing between major content blocks. Do not introduce square or sharp-cornered elements; 50px is the minimum radius for rounded forms including buttons.