Typewolf

This design system evokes the tactile quality of a letterpress studio, balancing classic elegance with a distinct, almost academic feel. A highly restrained palette of mauves and desaturated grays, anchored by a creamy off-white background, defines its sophisticated, understated mood. The interplay of custom serif and sans-serif fonts, particularly a heavy sans-serif with subtle negative letter-spacing for accents, establishes an intellectual yet approachable tone, akin to a well-curated typographic journal. Use Cream Canvas (#f8f5f5) as the default page background to establish the site's light, subtle aesthetic. Apply Charcoal Text (#2e2c2c) for primary headlines and Inkwell Gray (#443235) for body text, maintaining contrast and readability. Emphasize interactive elements and calls to action with Rosewood CTA (#916a70) as the background color for primary buttons. Utilize Dia 900 font with -0.03em letter-spacing for all navigation items and concise, impactful labels. Maintain a default border radius of 0px for most elements to reinforce the crisp, structured aesthetic, only deviating to 4px for specific components where a subtle break is required. Apply the shadow rgba(145, 106, 112, 0.15) 0px 6px 24px 0px for elevated content cards, ensuring subtle depth without harshness. Employ DomaineText at 14-18px for body and descriptive text to maintain the editorial and inviting tone. Avoid using highly saturated, vibrant colors; stick to the muted, near-gray, and earthy tones defined in the palette. Do not introduce rounded corners arbitrarily; reserve the 4px radius only where explicitly defined for small, functional elements. Refrain from using excessively bold weights for body text; DomaineText 400 is sufficient for paragraphs. Do not deviate from the specified letter-spacing for Dia font; the -0.03em is integral to its distinctive appearance. Do not use dark backgrounds for main content areas; the design is firmly built on a light theme with Cream Canvas and Cloud White surfaces. Avoid generic, system fonts; prioritize DomaineText, Dia, and DomaineDisplayNarrow to preserve the site's unique typographic identity. Do not use box-shadows on individual text elements; reserve them for content containers like cards for subtle elevation.