Monocle

Monocle's design evokes a classic, authoritative editorial feel, grounded in high-contrast typography on a clean white canvas. The system prioritizes crisp lines, clear hierarchy, and restraint over flourish, creating an environment where content takes center stage. Signature elements include the tight letter-spacing on headlines, the use of a custom serif font for primary content, and a sparse accent palette that highlights interactivity and key features without visual noise. Prioritize Plantin for all article bodies and headlines to maintain editorial voice. Use Printer's Black (#000000) on Canvas White (#ffffff) for all primary text and background combinations. Apply 8px border-radius for all content cards and UI blocks where a soft edge is needed. Reserve Editorial Yellow (#ffc500) exclusively for calls to action and critical interactive states. Maintain tight letter-spacing for headlines (e.g., -0.64px for 32px Plantin headings) to enhance visual density. Utilize Helvetica Neue for navigation and utility text, setting it at 13px weight 400 for consistency. Implement 16px internal padding for all card components to provide sufficient breathing room for content. Do not introduce additional color accents beyond Editorial Yellow (#ffc500) and Sky Blue (#64d5ff). Avoid box shadows or elevations; establish depth through background color changes (Canvas White, Cloud Gray, Sky Blue). Do not use rounded corners on primary buttons or navigation elements; maintain sharp, defined edges. Never use less than 4px spacing between elements unless for iconography or nested micro-interactions. Do not deviate from the specified font families; avoid system defaults for major text blocks. Avoid large, impactful hero images; focus on contained, editorial photography or illustrations. Do not use highly decorative UI elements; stick to functional and minimal design patterns.