Moxie

Moxie embraces a dark, atmospheric interface where rich blacks and deep grays provide a dramatic backdrop for subtle typography and a singular, vivid blue accent. Content appears on soft, low-contrast surfaces, outlined by fine borders, creating a quiet depth rather than sharp separation. Typography is a deliberate interplay of classic serifs for impact and clean sans-serifs for detail, all rendered in a warm, near-white hue that feels inviting against the dark theme. The overall aesthetic is one of understated authority, with controlled bursts of color for key interactive elements. Prioritize 'Background Ink' (#000000) for all page backgrounds to maintain the deep, dark aesthetic. Use 'Parchment White' (#f4efd4) for primary text and icon elements across the interface. Apply IBM Plex Serif with a weight of 300 for headlines to achieve an understated, elegant authority. Employ the 'Authority Blue' (#84acfb) exclusively for primary interactive elements, such as button backgrounds and key accents, to create high-impact punctuation. Utilize a 1000px border-radius for all interactive buttons and tags to ensure a consistent pill-shaped appearance. Maintain comfortable density by using 19px for card padding and 21px for element gaps. Outline content cards and sections with subtle borders in 'Twilight Gray' (#626055) or 'Parchment White' (#f4efd4) rather than using strong background fills. Avoid using bright or overly saturated colors beyond 'Authority Blue' to prevent distracting from the dark, sophisticated palette. Do not use heavy box shadows; the system relies on subtle borders and transparent fills for depth. Refrain from using bold or heavy weights for IBM Plex Serif headlines; the system's impact comes from lightness and restraint. Do not introduce additional sans-serif fonts; stick to IBM Plex Sans for all functional text. Avoid large blocks of filled background colors for cards or content sections; prefer transparent or subtly bordered containers. Do not deviate from the defined border radii; maintain 1000px for buttons and tags, and 13.84px/8.65px for cards. Do not use generic system greys; ensure all achromatic elements align with 'Parchment White','Twilight Gray', or 'Deep Shadow'.