Public

Public's design system evokes a confident, editorial demeanor, balancing sharp, sophisticated typography with subtle, functional use of color. The primary palette is a clean, high-contrast monochrome, serving as a neutral canvas for data and product interfaces. Visual accents are delivered through a singular, vivid violet for interactive elements and an electric blue for subtle highlights, creating focal points without visual clutter. Surfaces are predominantly light and spacious, grounded by slim borders and minimal shadow, suggesting precision and clarity in financial tooling. Prioritize Ink (#000000) for all primary text and critical headlines to maintain high contrast and legibility. Use Ultramarine (#0027b3) exclusively for interactive elements like links and button borders, ensuring functional color remains a distinct accent. Apply Denton at Weight 300 for all large headings (48px and above) to convey a sense of understated authority. Maintain a default border-radius of 4px for most UI elements, reserving 100px for buttons and 16px for prominent cards. Employ Smoke (#e9edf3) for hairline borders and subtle dividers to structure content without heavy visual lines. Ensure generous spacing with an 8px element gap and 16px card padding to maintain a spacious, uncluttered layout. Use Invest Pro for secondary titles and emphasized text, ensuring it complements Denton without competing for attention. Leverage the dual-tinted shadow (rgba(255, 196, 250, 0.25) 8px -8px 20px 0px, rgba(56, 205, 255, 0.25) -8px 8px 30px 0px) for highly interactive ghost buttons to add distinct visual depth. Avoid using highly saturated colors outside of the defined Ultramarine (#0027b3) and Azure Glow (#95d0ff) accents. Do not introduce heavy drop shadows or decorative gradients on surfaces, as the design maintains minimal elevation. Refrain from mixing font families randomly; adhere strictly to Inter for body text, Invest Pro for structured text, and Denton for display headings. Do not use border-radius values other than 1px, 4px, 8px, 12px, 16px, 100px, or 999px. Do not use #0000ee (browser default link blue) for any link states; use Ultramarine (#0027b3) instead. Do not use an element gap smaller than 8px for vertical or horizontal spacing between related items. Avoid excessive use of uppercase text; reserve it only for specific, highly constrained labels or navigation items where it's explicitly observed.