Readymag

Readymag, vivid-color, high-contrast

Preview image. Unlock full-res

Vibrant digital gallery. Each content block is a self-contained, high-contrast visual statement.

Industrydesign, dev-tools
Palette
#ffffff
#000000
#282828
#f4f4f4
#e7e7e7
#808080
#8800ff
#2c0fb1
#ec520b
#ff5000
#ffcc00
#b2cc00

This design system is a dynamic canvas, blending stark, high-contrast typography with an unpredictable, vibrant color palette. It feels like a digital art gallery, designed for maximal visual impact where each content block is an independent exhibit. The deliberate clash of intense, vivid colors with a predominantly achromatic base creates a playful yet assertive atmosphere, eschewing traditional corporate polish for expressive, almost rebellious, visual communication. Always use 200px border-radius for primary and secondary action buttons to maintain the pill shape. Utilize custom_37866 with its distinctive tight letter spacing (e.g., -0.050em at 80px) for all major headlines to create an impactful typographic statement. Employ the vivid brand and accent colors (e.g., Accent Grape #8800ff, Vivid Yellow #ffcc00, Deep Teal #00362b) as full-bleed section backgrounds to delineate content blocks. Prioritize Sunset Orange (#ec520b) for all high-priority call-to-action buttons. Maintain high contrast text on backgrounds: Type Black (#000000) on Canvas White (#ffffff) and Canvas White (#ffffff) on any vivid background color. Use 0px padding on card components, allowing internal content to define its own layout and spacing. Never use soft, muted accent colors; the palette is defined by high-chroma, vivid hues. Avoid generic box-shadows for elevation; rely on stark shifts in background color between sections for visual depth. Do not use subtle letter-spacing for headlines; the aggressive negative letter spacing of custom_37866 is a signature of this system. Do not constrain content to a fixed page width globally; sections should alternate between full-bleed and contained elements. Avoid excessive use of -apple-system for headlines; reserve it for body text where neutrality is desired. Do not use subtle border-radius values below 10px for UI components; the system favors either sharp 0px corners or distinctly rounded forms like 10px, 16px, 20px or 200px.

More like this