Peggy

Peggy is a design system built on a monochrome palette with sharp contrasts and minimal embellishment. It employs a modern, sans-serif primary typeface for body text and a distinctive serif for headlines, creating a duality of contemporary clarity and artistic gravitas. Components are lightweight with strong outlines and often stark backgrounds, emphasizing content through a lack of decorative elements. The overall aesthetic is one of understated authority, reflecting a serious approach to the art market. Prioritize Inter for all body text, UI elements, and supplementary information for clear readability, using weights 400 and 500. Utilize Reckless for all headings, subheadings, and display text, explicitly using weights 300 and 400 to convey a distinctive artistic voice. Maintain a strict monochrome palette (#f4f4f4, #000000, #ffffff, #141414, #e2e8f0, #666666) for all UI elements, reserving color only for embedded imagery. Apply 0px border-radius to all structural components like buttons, cards, and sections, unless the element is an image with 9999px radius. Implement a 1px solid #f4f4f4 border for visual separation of UI elements, such as in navigation or list items. Use 16px for elementGap to ensure consistent spacing between small interactive elements and text blocks. Employ a base sectionGap of 32px to create distinct visual breaks between major content blocks. Avoid introducing any additional chromatic colors into the UI; strictly adhere to the defined monochrome palette. Do not use box shadows or elevation effects on cards or panels, maintaining a flat, two-dimensional aesthetic. Do not deviate from the 0px border-radius unless specifically applied to images where 9999px (a full circle/pill shape) is required. Never use generic sans-serif fonts for headlines; the distinct character of Reckless is essential for brand identity. Do not vary line heights outside of the specified values for each typeface; maintain the established vertical rhythm. Avoid dense placement of elements; ensure ample use of whitespace, guided by the defined spacing tokens. Do not use outline styles on primary action buttons; use distinct background and text colors to convey hierarchy.