{"id":"ff4606f8-164b-47cc-941c-945e9a4b5c27","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","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":"Minimalistpassword","summary":"monochromatic information architecture on white","description":"Minimalist employs a restrained and focused visual language, featuring a stark achromatic palette on a white canvas. Compact, confident typography creates a clear hierarchy, prioritizing content over visual flourishes. Components are lightweight and functional, relying on minimal borders and generous spacing to define elements rather than heavy fills or shadows. The overall impression is one of clarity and quiet utility, allowing the informational content to stand out.","industry":"productivity","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, primary interface canvas","group":"neutral"},{"name":"Midnight Text","hex":"#1a1a1a","role":"Primary text, headings, strong content, default borders","group":"neutral"},{"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"},{"name":"Divider Gray","hex":"#eeeeee","role":"Hairline borders, subtle separators, background accents for subtle differentiation","group":"neutral"},{"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"}],"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"}],"typeScale":[{"role":"subheading","size":20,"lineHeight":1.5,"letterSpacing":0},{"role":"heading-sm","size":24,"lineHeight":1.5,"letterSpacing":0},{"role":"heading","size":32,"lineHeight":1.2,"letterSpacing":0},{"role":"heading-lg","size":42,"lineHeight":1.2,"letterSpacing":0},{"role":"display","size":46,"lineHeight":1,"letterSpacing":0}],"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."]},"components":[{"name":"Primary Navigation Button","role":"The main call to action in the header."},{"name":"Secondary Navigation Link","role":"Standard navigation item."},{"name":"Text Content Block","role":"Standard body text content."},{"name":"Section Heading","role":"Large, prominent text for section titles."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #1a1a1a\nbackground: #ffffff\nborder: #eeeeee\naccent: #0d6efd\nprimary action: no distinct CTA color\n\nExample Component Prompts:\nNo distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.\n2. Design a hero heading: text 'Goodbye to Minimalist' using 'Midnight Text' (#1a1a1a), weight 700, 46px size, 1.0 line height, centered.\n3. Implement a body text paragraph: text using 'Subtle Gray' (#555555), weight 400, 20px size, 1.5 line height, with 20px bottom margin and 18px horizontal padding.\n4. Create a footer link: text using 'Midnight Text' (#1a1a1a), weight 400, 19px size, with 30px left margin."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777519660460-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777519660460-thumb.jpg"},"similarStyleIds":["04f6cb02-de90-4d78-9c5f-0eb52f826484","68d18deb-bb09-4258-8024-001af9c844c0","8b708ba5-5c94-45a7-9868-36506fc423d0","b76c7503-0217-4822-80b2-18fa19af46ee","fe602c0f-2862-432b-88fc-fa5f9fbc3c78","35ff063b-1fcc-48a2-83b3-56da01e23880","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","e8589e7c-5ba9-4923-aa7f-0f1bf0d679be","572bc29f-8827-4f77-b248-08dddf1c2e26","36752f78-1c43-471b-b125-e82152ad23dd","8401cb26-91a3-4b46-941e-1c75790821eb","4067a82e-c6fe-4236-9487-805f25c11864","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","004f4856-4b01-4c23-a9fb-866303d5013b","25009c35-8b3b-4898-9295-3e0e0aa07207","c11797c6-ceb2-4b57-a0ea-0c349d13b38c","8321c2d1-686f-4752-9156-ea613a879b9e","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","742b500d-3e10-4daa-bb89-d0d26272e5f6","1b293bed-e6fc-4880-9691-2dbf04339bd5"],"exports":{"designMdUrl":"/references/refero/ff4606f8-164b-47cc-941c-945e9a4b5c27/design.md","tokensJsonUrl":"/references/refero/ff4606f8-164b-47cc-941c-945e9a4b5c27/tokens.json","tailwindV4Url":"/references/refero/ff4606f8-164b-47cc-941c-945e9a4b5c27/tailwind-v4.css","cssVariablesUrl":"/references/refero/ff4606f8-164b-47cc-941c-945e9a4b5c27/tailwind-v4.css"}}