robot.com

robot.com employs a stark, high-contrast visual system that balances industrial-grade clarity with surprising moments of digital vibrancy. A predominantly achromatic palette of deep grays, crisp whites, and a single vivid yellow accent creates a no-nonsense, functional aesthetic. Typography is confident and compact, establishing an authoritative voice, while components feature generous rounded corners for approachability. Use Midnight Graphite (#262626) for primary text and major background sections to maintain seriousness. Introduce Robot Yellow (#fff65d) solely for primary calls to action or key highlight elements to maximize impact and distinctiveness. Apply a 24px border-radius generously to cards and most interactive elements for a consistent, approachable softness. Implement the Yellix font with its custom negative letter-spacing for larger headlines to produce a compact, modern text block. Ensure generous use of Pure Canvas (#ffffff) as a page background and for text on dark surfaces to preserve high contrast and readability. Utilize 4px as the foundational unit for all internal element spacing, ensuring a dense but consistent layout. Employ the Pill Button radius (9999px) exclusively for small, distinct interactive elements like media controls or tags. Do not use Robot Yellow (#fff65d) for decorative purposes or text that is not a primary action, to avoid diluting its impact. Avoid arbitrary border-radius values; stick to 24px for cards/buttons, 30px for primary buttons, 4px for fine details, and 9999px for pills. Do not introduce additional chromatic colors; the visual system relies on the interplay of neutrals and the single Robot Yellow accent. Never use generic system fonts; Yellix font is critical for branding, ensure 'ss01' and 'salt' features are enabled. Refrain from heavy drop shadows; the design system favors flat, high-contrast surfaces and minimal elevation. Do not use letter-spacing values other than those specified for Yellix, as tracking is a key aspect of its compact look. Avoid cluttering the layout; maintain a clear hierarchy with distinct backgrounds and spacing, reflecting the 'compact' density.