Miranda

Miranda

Preview image. Unlock full-res

Vintage newsprint, bold headlines.

Industrydesign
Palette
#1d1d1b
#cdc6be
#000000
#e2dedb

Miranda's visual system evokes a vintage newspaper aesthetic with a modern, high-contrast twist. It combines deeply saturated, almost black backgrounds with warm, desaturated off-white surfaces, creating a dramatic stage for its expressive typography. The layout is structured yet dynamic, featuring oversized type and editorial-inspired content blocks with subtle elevation. This system prioritizes visual impact and textural richness over minimalist austerity. Prioritize high contrast between Midnight Ink (#1d1d1b) and Aged Paper (#cdc6be) for readability and visual punch. Use Editorial New weight 300 for all body text and secondary headings, leveraging its refined character. Implement the square, zero-radius design for all action buttons using Midnight Ink (#1d1d1b) as background and text. Apply 11.52px border-radius consistently to all card-like containers and content blocks. Utilize extreme letter-spacing (-0.089em for Canopee at 17px, reducing for larger sizes) for display typography to reinforce the editorial aesthetic. Employ the subtle offset shadow rgba(29, 29, 27, 0.2) -4px 4px 6px 0px for elevated content cards, rather than hard borders. Maintain a comfortable rhythm with element gaps primarily around 14px and card padding at 43.2px. Avoid generic system fonts; always use the specified custom fonts (Editorial New, Canopee, Domaine Display, Germgoth) to maintain brand identity. Do not introduce sharp, angular shadows; stick to the soft, tinted shadows derived from Midnight Ink for all elevations. Refrain from using highly saturated colors for interface elements; the palette is primarily monochromatic with warm neutrals. Do not deviate from the specified padding for cards (43.2px horizontal, 36px top, 43.2px bottom); consistency is key for content blocks. Avoid large border-radii on interactive elements like buttons, adhering to the 0px radius for this component. Do not apply excessive visual decorations or gradients; the system relies on strong typography, high contrast, and subtle textures. Never use automatic letter-spacing for headings; manually apply the specified negative letter-spacing values to achieve the desired tight appearance.

More like this