This design system is built on a “Neo-Literary Minimalism” aesthetic, optimized for a crisp, light-mode editorial environment. It targets a sophisticated audience that appreciates the clarity of modern digital interfaces but seeks the tactile, intellectual comfort of premium print—reimagined as “ink on paper.” The emotional response is one of focus, intellectual rigor, and high-quality curation.
The style moves away from the “obsidian” foundations of dark mode in favor of a bright, open “gallery-wall” foundation. This creates a high-end space where content is presented with absolute clarity. The vibrant pink accent provides a sharp, energetic contrast, while the teal tertiary tone adds a layer of modern, intellectual depth, ensuring the system feels contemporary and fresh rather than archival.
The palette is strictly curated to maintain a high-contrast, professional atmosphere in a light environment, mimicking the starkness of a physical broadsheet.
Note: Under no circumstances should warm tones (yellow-based grays, oranges, or browns) be introduced into the palette. Maintain a cool, neutral, or “true gray” scale.
This system utilizes Comfortaa as the primary typeface for headlines. Its unique, geometric rounded character provides a modern, soft-yet-structured editorial feel that distinguishes the brand with a friendly yet sophisticated voice. To balance this expressive typographic tone with modern readability, Hanken Grotesk is used for all body text. This sans-serif addition provides a clean, geometric counterpoint to the softer headings, ensuring long-form content is highly legible and feels contemporary.
To maintain functional clarity, Inter is used as a utility font for labels, buttons, and micro-copy. This “Comfortaa for Impact / Hanken for Reading / Inter for Action” hierarchy ensures that users can clearly distinguish between different types of information. All labels use increased letter spacing to enhance the crisp, modern feel.
This design system utilizes an upright-only typographic rule. Italics are strictly prohibited across all UI elements to maintain a structural, architectural appearance. Emphasis must be achieved through weight, scale, or color rather than slant.
The design system employs a fixed-center grid for desktop to mimic the layout of a physical book or broadsheet, ensuring line lengths for Hanken Grotesk remain optimal for reading (60-75 characters).
In light mode, depth is communicated through subtle tonal layering and low-contrast borders to maintain a sense of precision and focus.
Avoid all heavy background blurs to keep the interface feeling solid and grounded like high-quality archival paper.
The shape language is Rounded (0.5rem). This rounding complements the geometric curves of the Comfortaa headlines, providing a friendly, approachable quality that softens the high-contrast palette.
rounded (8px).rounded-lg (16px) for a softer appearance in larger blocks.