{"id":"35ff063b-1fcc-48a2-83b3-56da01e23880","name":"Minimalissimo","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/35ff063b-1fcc-48a2-83b3-56da01e23880","originalSiteUrl":"https://minimalissimo.com","capturedAt":"2026-04-30T01:54:34.931Z","colors":[{"name":"Inkwell","hex":"#000000","role":"Primary text, core UI elements, strong borders, icon fills. Provides high contrast","group":"neutral","cssVariable":"--color-inkwell"},{"name":"Canvas","hex":"#f5f5f5","role":"Dominant page and section backgrounds, giving a clean, expansive base","group":"neutral","cssVariable":"--color-canvas"},{"name":"Sterling","hex":"#999999","role":"Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color","group":"neutral","cssVariable":"--color-sterling"},{"name":"Porcelain","hex":"#ffffff","role":"Component backgrounds within sections, elevated surfaces. Provides internal contrast against Canvas","group":"neutral","cssVariable":"--color-porcelain"},{"name":"Pale Ash","hex":"#e0e0e0","role":"Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color","group":"neutral","cssVariable":"--color-pale-ash"},{"name":"Storm Gray","hex":"#a1a1a1","role":"Tertiary body text, informational text, less prominent details","group":"neutral","cssVariable":"--color-storm-gray"},{"name":"Whisper White","hex":"#efefef","role":"Background for subtle interactive elements like inputs and ghost buttons, providing a slight visual lift","group":"neutral","cssVariable":"--color-whisper-white"}],"typography":[{"role":"The sole typeface for all text content, from body to headings. Its compact, neutral quality maintains the minimalist aesthetic. A single weight ensures consistency and relies on size for hierarchy.","sizes":"12px, 14px, 16px, 24px","family":"GeistSans","weight":"400","lineHeight":"1.10, 1.30, 1.40, 1.43, 1.50","substitute":"Inter, Arial, sans-serif","letterSpacing":"normal"}],"spacing":{"radius":{"cards":"8px","links":"4px","inputs":"4px","buttons":"4px"},"elementGap":"16px","sectionGap":"96px","cardPadding":"16px"},"radius":{"cards":"8px","links":"4px","inputs":"4px","buttons":"4px"},"shadows":{"surfaces":[{"hex":"#f5f5f5","name":"Canvas","level":0,"purpose":"Broadest page backgrounds, creating a sense of openness and serving as a neutral backdrop for content."},{"hex":"#ffffff","name":"Porcelain","level":1,"purpose":"Elevated components or content blocks, providing a subtle differentiation from the Canvas."},{"hex":"#efefef","name":"Whisper White","level":2,"purpose":"Interactive element backgrounds like input fields and subtle buttons, offering a slight visual cue without strong contrast."}]},"guidelines":{"do":["Use GeistSans 400 for all typographic elements, varying only size for hierarchy.","Maintain high contrast text with Inkwell (#000000) on Canvas (#f5f5f5) or Porcelain (#ffffff) backgrounds.","Apply a 4px border-radius to all interactive elements like buttons and input fields.","When a button is not a primary action, render it as text-only with Inkwell (#000000) for a ghost-like appearance.","Utilize Whisper White (#efefef) sparingly, primarily for subtle input backgrounds or very soft button fills.","Separate content sections with ample vertical spacing, defaulting to sectionGap (96px) where appropriate.","Prioritize photography and crisp typography as primary visual elements, minimizing decorative UI."],"dont":["Avoid using any chromatic colors; maintain a purely achromatic palette.","Do not introduce heavy borders, drop shadows, or strong gradients that would detract from the content.","Refrain from using multiple font families or font weights other than 400 for GeistSans.","Do not clutter layouts with excessive UI elements; focus on functional minimalism.","Avoid large, attention-grabbing primary action buttons; keep interactive elements understated.","Do not apply padding or visible backgrounds to image grid items; let them float on the Canvas background.","Do not use underlines for links unless absolutely necessary for clarity in dense text blocks."]}}