cthdrl

Cthdrl presents a stark, high-contrast dark mode aesthetic, leveraging deep black backgrounds for dramatic visual impact. Typography is central, utilizing two bespoke sans-serif fonts in varied sizes to establish a strong hierarchical rhythm and distinctive brand voice. Interactive elements are minimalist, appearing as ghost controls or text links with a subtle off-white highlight, maintaining the overall severe and sophisticated atmosphere. The visual system emphasizes spaciousness, relying on precise typographic arrangement and discreet dividing lines rather than heavy components or decorative flourishes. Prioritize Midnight Void (#000000) for all background surfaces to maintain high contrast and the dark theme. Use Ghost Sand (#e7ded1) as the primary color for all text, links, and interactive element outlines. Employ NB Akademie for large, impactful headlines, ensuring letter-spacing values (-0.0160em to -0.0100em) are applied for proper visual density. Reserve NB Akademie Mono for body text, navigation, and detailed information, using its distinctive negative letter-spacing (-0.0450em) to create a compact, structured feel. Maintain a spacious density in layouts, utilizing 26px for section gaps and 10px for element gaps to provide ample breathing room between content blocks. Implement Ghost Primary Buttons using Ghost Sand (#e7ded1) text and a 1px solid Ghost Sand border on a Midnight Void background, with no padding or radius. Utilize 1px Ghost Sand (#e7ded1) lines for subtle visual dividers, such as those seen in the header and alongside body text blocks. Avoid using saturated or vivid colors for primary UI elements; color is reserved for decorative gradients or specific content within page sections. Do not introduce heavy shadows or elevation; the design relies on flat surfaces and high contrast for visual hierarchy. Refrain from using rounded corners on any UI elements; all corners should be sharp and angular (0px radius). Do not use generic system fonts; NB Akademie and NB Akademie Mono are essential to the brand's typographic identity. Avoid dense, information-heavy blocks of text without sufficient line breaks or spacing; maintain the spacious and minimalist aesthetic. Do not use filled buttons for primary calls to action; ghost buttons with a border are characteristic of this design system. Minimize the use of multiple font weights; the system primarily uses weight 400 for both typefaces.