Mario Carrillo

Mario Carrillo

Preview image. Unlock full-res

Vibrant gradient canvas

Industrydesign
Palette
#ffffff
#000000
#de3333
#70b2ff
#7bdcb5
#f9bf03

The Mario Carrillo site presents a bold, high-contrast aesthetic, pairing stark white canvases with black typography for a graphic, almost stark feel. The visual dynamism is introduced through a vibrant, full-bleed gradient background that serves as the site's primary visual element, contrasting sharply with the minimalist UI. Typography is concise and direct, maintaining a clean presentation. The design leverages visual simplicity to foreground the impactful background imagery. Prioritize a stark white background (#ffffff) for all UI content on the left pane and use Ink Black (#000000) for all text and UI outlines. Use StudioFeixenSans (or Montserrat) at weight 400 for all textual content, adhering to minimal letter spacing. Introduce dynamic color via full-bleed gradient sections that contrast sharply with static UI elements. These gradients should feature vivid brand colors like Scarlet Flash (#de3333), Ocean Dream (#70b2ff), Emerald Glaze (#7bdcb5), and Golden Burst (#f9bf03). Maintain a compact density for UI elements, utilizing a base spacing unit of 6px and minimal gaps like 5px between navigation items. Ensure the logo is prominent black text (#000000) against the white canvas, consistent with the typographic style. Implement interactive states for navigation items by applying one of the distinct brand colors as a solid background fill on hover, ensuring high contrast with the black text. Avoid using multiple font families or weights beyond 400 (StudioFeixenSans) to maintain typographic consistency. Do not introduce shadows or complex elevation schemes, as the design relies on flat surfaces and high contrast. Refrain from using muted or desaturated colors for UI elements; chromatic colors should be vivid and high-impact when used. Do not use iconography or other decorative elements that could detract from the strong contrast and gradient visual. Avoid excessive padding or large empty spaces within the UI content area; maintain a concentrated, information-dense display for text. Do not break the full-bleed nature of the gradient sections with contained content or overlays that obscure their vibrancy.

More like this