{"id":"c181d124-242e-469b-a91a-4e44aad49a86","name":"Mario Carrillo","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/c181d124-242e-469b-a91a-4e44aad49a86","originalSiteUrl":"https://marioecg.com","capturedAt":"2026-04-30T01:33:21.378Z","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, left-hand navigation pane background","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Ink Black","hex":"#000000","role":"Primary text, navigation links, borders, logo fill","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Scarlet Flash","hex":"#de3333","role":"Animated navigation background segment within the gradient","group":"brand","cssVariable":"--color-scarlet-flash"},{"name":"Ocean Dream","hex":"#70b2ff","role":"Animated navigation background segment within the gradient","group":"brand","cssVariable":"--color-ocean-dream"},{"name":"Emerald Glaze","hex":"#7bdcb5","role":"Animated navigation background segment within the gradient","group":"brand","cssVariable":"--color-emerald-glaze"},{"name":"Golden Burst","hex":"#f9bf03","role":"Animated navigation background segment within the gradient","group":"brand","cssVariable":"--color-golden-burst"}],"typography":[{"role":"All text elements: logo, navigation links, body copy, and footer copyright","sizes":"14px, 16px","family":"StudioFeixenSans","weight":"400","weights":[400],"lineHeight":"1.00","substitute":"Montserrat","letterSpacing":"normal"}],"spacing":{"radius":{"none":"0px"},"elementGap":"5px","sectionGap":"","cardPadding":"0px"},"radius":{"none":"0px"},"guidelines":{"do":["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."],"dont":["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."]}}