Ditto

Ditto uses an 'architectural blueprint on white marble' visual language, combining a refined, nearly monochromatic canvas with precise geometric typography and a vibrant, playful accent color for highlights and interactive elements. Surfaces are clean and untextured, serving as a bright foundation for highly legible black text. Strategic splashes of saturated color are used for emphasis, badges, or outlined elements, creating an energetic yet organized feel. Components are lightweight and often feature large border-radii, giving a soft, approachable edge to the otherwise crisp design. Use Midnight Ink (#000000) for all primary text and important headings to ensure high legibility against the light canvas. Apply Canvas White (#f7f5f3) as the default background for all page sections and elevated surfaces. Utilize 1000px border-radius for all primary buttons and large decorative elements to create a soft, pill-shaped aesthetic. Employ Harvest Gold (#ffdd33) and Power Red (#ff6137) strategically and sparingly for emphasis, such as badges, outlined boxes, or text highlights, never as primary UI colors. Maintain a clear visual hierarchy using ABC Social for body text (16-18px), ABC Social Extended for major headlines (43-86px), and ABC Social Condensed for specific emphasized text like badges. Structure content with a consistent 20px element gap and 60px section gap for a comfortable, organized layout. Use ABC Social weights 300 and 400 for most text, reserving 700 for strong emphasis within body copy or bold components. Avoid using multiple accent colors in close proximity; stick to one or two per view to maintain visual clarity. Do not introduce heavy shadows or gradients on surfaces; components should remain flat and minimal. Never use the accent colors for full background sections, as they are intended for highlights, not foundational colors. Avoid using default system fonts. Always use ABC Social variants or their specified substitutes. Do not deviate from the established border radii; maintain 1000px for pills, 100px for secondary buttons, and 28px for inputs. Resist adding additional padding or margins that break the 4px grid and established spacing tokens. Do not use dark backgrounds for large content areas; the system is designed for a light theme with dark text.