Sequel

This design system evokes a sense of understated luxury and serious intent, reflecting a 'dark mode meets gallery space' aesthetic. A dramatic pure black background (#000000) provides a stark canvas for crisp white typography (#ffffff) and subtle, almost invisible components. The system primarily relies on meticulous typography with a custom serif for headlines and a custom sans-serif for body text, creating a strong sense of intellectual weight without visual overwhelm. Rounded lozenges (9999px radius) offer the only soft edges, contrasting sharply with the otherwise linear, rigid structure, suggesting pockets of approachable interaction within a rigorous framework. Prioritize #000000 for backgrounds and #ffffff for primary text to maintain high contrast and dramatic impact. Use Bradford font exclusively for large headings (32px and above) with its distinct weight 500 and negative letter spacing (-0.0500em or -0.0250em). Apply 9999px border-radius to all interactive elements like buttons and badges for distinctive pill shapes. Utilize rgba(200, 200, 200, 0.1) for subtle, transparent badge backgrounds, ensuring text remains #ffffff. Maintain a clear visual hierarchy using VisueltPro's varied weights and sizes for body copy, navigation, and secondary UI elements, without relying on color for differentiation. Employ the negative letter-spacing values from the typography specification for precise text rendering at various sizes. Use 10px border-radius only for specific featured cards to provide a subtle visual differentiator against the predominant 0px radius. Avoid using highly saturated or chromatic colors; stick to the achromatic palette with #ffffff, #000000, and the various grays. Do not introduce sharp corners on buttons or badges; the 9999px radius is a signature visual element. Refrain from using Bradford font for body text or small UI elements; its use is reserved for large, impactful headlines. Do not add additional box-shadows beyond rgba(0, 0, 0, 0.35) 0px 10px 30px 0px for elevated elements and rgba(0, 0, 0, 0.15) 0px 4px 20px 0px for interactive button states. Avoid using multiple border styles or weights; maintain simple, thin borders for ghost elements or an absence of borders. Do not use generic system fonts in place of VisueltPro or Bradford; their unique characteristics are integral to the brand. Avoid excessive spacing that diminishes the dense, deliberate feel; element gaps should adhere to the provided '3-28px' range.