{"id":"c181d124-242e-469b-a91a-4e44aad49a86","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Mario Carrillo","summary":"Vibrant gradient canvas","description":"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.","industry":"design","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, left-hand navigation pane background","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"Primary text, navigation links, borders, logo fill","group":"neutral"},{"name":"Scarlet Flash","hex":"#de3333","role":"Animated navigation background segment within the gradient","group":"brand"},{"name":"Ocean Dream","hex":"#70b2ff","role":"Animated navigation background segment within the gradient","group":"brand"},{"name":"Emerald Glaze","hex":"#7bdcb5","role":"Animated navigation background segment within the gradient","group":"brand"},{"name":"Golden Burst","hex":"#f9bf03","role":"Animated navigation background segment within the gradient","group":"brand"}],"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."]},"components":[{"name":"Navigation Link","role":"Interactive text link"},{"name":"Footer Copyright","role":"Small, unobtrusive legal text"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #000000\nbackground: #ffffff\nborder: #000000\naccent: no distinct accent color\nprimary action: no distinct CTA color\n\nExample Component Prompts:\n1. Create a navigational link for 'Works': Use StudioFeixenSans (Montserrat) weight 400, size 16px, color #000000. Add a 10px bottom margin. On hover, set background color to #de3333.\n2. Create the site's logo text: 'Mario Carrillo' in StudioFeixenSans (Montserrat) weight 400, color #000000, size around 24px, line height 1. Be positioned in the top-left corner.\n3. Create the footer copyright text: '©2026. Mario Carrillo' in StudioFeixenSans (Montserrat) weight 400, size 14px, color #000000. Ensure 12px padding below the text."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777512768230-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777512768230-thumb.jpg"},"similarStyleIds":["08b780cc-0fe3-4c53-8e93-27369bd7b032","0e8db8d0-4d8f-48ac-a8e7-aaea9601e3ce","ff8f39ee-a10e-4a9d-a94d-6993c6084060","2b46dc00-9517-4ad0-9bf3-a07d3c0bf385","c14bfde7-6f08-4b54-bd9b-39989d10cfef","19d4103a-9f4a-49f0-ad7d-af6588bab904","e6a3facd-791c-4cc6-868d-2c6382d3cb0a","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","1287abc9-da90-410d-a997-96b8b11ad646","15f0809b-b7e0-4824-844f-286c39f4accf","fdc0f631-442c-466d-ab79-e1fff2bfdb7d","0c77bb2a-c7cd-499b-b5cd-90268eefe906","14f10100-a102-427a-88d1-7cc80cbb332d","733f32ca-efc3-40fb-bc58-327bd2b45828","701c8312-5e98-49a8-b2c4-25f1cb66de15","f93ac72e-73b2-4b2c-80eb-351ddfa56f4d","e80c5b4a-fd03-460e-a577-49928a4ab5db","da332394-784c-4df2-9e66-c3f7b1d28f28","1b44386e-31a8-40b0-a577-27c088b51264","fece962d-a580-4365-8afd-c9905a2502b1"],"exports":{"designMdUrl":"/references/refero/c181d124-242e-469b-a91a-4e44aad49a86/design.md","tokensJsonUrl":"/references/refero/c181d124-242e-469b-a91a-4e44aad49a86/tokens.json","tailwindV4Url":"/references/refero/c181d124-242e-469b-a91a-4e44aad49a86/tailwind-v4.css","cssVariablesUrl":"/references/refero/c181d124-242e-469b-a91a-4e44aad49a86/tailwind-v4.css"}}