{"id":"ff4606f8-164b-47cc-941c-945e9a4b5c27","name":"Minimalistpassword","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/ff4606f8-164b-47cc-941c-945e9a4b5c27","originalSiteUrl":"https://minimalistpassword.com","capturedAt":"2026-04-30T03:27:55.905Z","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary interface canvas","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Midnight Text","hex":"#1a1a1a","role":"Primary text, headings, strong content, default borders","group":"neutral","cssVariable":"--color-midnight-text"},{"name":"Subtle Gray","hex":"#555555","role":"Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color","group":"neutral","cssVariable":"--color-subtle-gray"},{"name":"Divider Gray","hex":"#eeeeee","role":"Hairline borders, subtle separators, background accents for subtle differentiation","group":"neutral","cssVariable":"--color-divider-gray"},{"name":"OS Blue","hex":"#0d6efd","role":"Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color","group":"accent","cssVariable":"--color-os-blue"}],"typography":[{"role":"The primary typeface for all content (headings, body, navigation, links). Its range of weights and sizes provides flexibility while maintaining a consistent visual identity. The absence of specific letter-spacing suggests an emphasis on clear, uncompressed text.","sizes":"19px, 20px, 24px, 32px, 42px, 46px","family":"Minimalist","weight":"400, 500, 700","weights":[400,500,700],"lineHeight":"1.00, 1.20, 1.50","substitute":"system-ui","letterSpacing":"normal"}],"spacing":{"radius":{"buttons":"1000px"},"elementGap":"12px","sectionGap":"60px","cardPadding":"20px","pageMaxWidth":"1320px"},"radius":{"buttons":"1000px"},"shadows":{"philosophy":"This design system intentionally avoids shadows, relying instead on clean surface separation through ample spacing and minimal borders. This creates a lightweight, airy feel, emphasizing clarity over perceived depth.","surfaces":[{"hex":"#ffffff","name":"Canvas White","level":0,"purpose":"Primary page background and base surface for all content."},{"hex":"#ffffff","name":"Subtle Card","level":1,"purpose":"Used for informational cards or containers where a subtle elevation might be implied by borders or spacing rather than shadows."}]},"guidelines":{"do":["Use 'Canvas White' (#ffffff) as the default background for all pages and most surfaces.","Apply 'Midnight Text' (#1a1a1a) for primary headings and important textual content.","Utilize 'Subtle Gray' (#555555) for body copy, secondary text, and less emphasized information.","Employ 'Divider Gray' (#eeeeee) for subtle borders and horizontal rules.","Form pill-shaped buttons and tags by applying a 1000px border-radius.","Maintain high levels of achromatic contrast for readability, using 'Midnight Text' against 'Canvas White' or 'Divider Gray'.","Structure page content using a max-width of 1320px, with content centered."],"dont":["Avoid using saturated brand colors for large background areas; maintain the achromatic dominance.","Do not introduce complex shadows or depth effects; rely on spacing and minimal borders for visual separation.","Refrain from tight spacing; use minimum 12px for element gaps and 60px for section gaps to ensure a spacious feel.","Do not deviate from the 'Minimalist' typeface; it is central to the brand's identity.","Avoid decorative imagery that competes with the UI's simple aesthetic; stick to product screenshots or clean icons.","Do not use generic system link blue; prefer 'Subtle Gray' for inactive links and 'OS Blue' as a subtle accent only when necessary."]}}