{"id":"04f6cb02-de90-4d78-9c5f-0eb52f826484","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/04f6cb02-de90-4d78-9c5f-0eb52f826484","originalSiteUrl":"https://mikematas.com","capturedAt":"2026-04-11T16:39:06.283Z","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":"Mike Matas","summary":"Minimalist textual canvas. Information presented with monastic simplicity against an expansive white background.","description":"This design system projects an aura of understated intellectual authority, emphasizing content and clarity through a stark monochrome palette. The deliberate absence of color accents on the main page, combined with generous negative space, creates a calm, focused reading environment. Type is the primary visual element, meticulously sized and weighted to establish hierarchy and draw attention without visual noise, making every word feel considered and precise.","tags":["minimalist","text-heavy","monochrome","spacious","high-contrast","typographic","editorial","professional portfolio","clean","sharp"],"industry":"agency","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#FFFFFF","role":"Page backgrounds, overall dominant background. Provides a pristine, high-contrast surface for text.","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"Primary text, headings, icons, interactive elements. Represents the core informational content.","group":"neutral"},{"name":"Muted Gray","hex":"#999999","role":"Secondary text, subtle details, meta-information. Lowers the visual prominence without losing readability.","group":"neutral"}],"typography":[{"role":"The sole typeface, spanning all content from body text to headlines. The use of a custom sans-serif with a prominent thin (100) weight for main branding sets a tone of quiet sophistication and technical precision.","sizes":"18px, 20px, 40px","family":"Lab Grotesque","weight":"100, 400, 600","lineHeight":"1.20","substitute":"system-ui, sans-serif","letterSpacing":"normal"}],"spacing":{"radius":{"none":"0px"},"elementGap":"","sectionGap":"","cardPadding":"","pageMaxWidth":"900px"},"radius":{"none":"0px"},"guidelines":{"do":["Prioritize text as the primary visual element; every textual unit should be considered and precise.","Maintain a high-contrast ratio between Ink Black (#000000) text and Canvas White background.","Use Lab Grotesque consistently across all type roles, adhering to specified weights and sizes.","Employ generous negative space, particularly horizontal and vertical margins (72px, 36px), to create a sense of calm and focus.","Use a 0px border-radius for all elements, maintaining crisp, sharp edges.","Confine body and main content to a max-width of 900px, centered on the page."],"dont":["Avoid decorative elements, borders, or background colors that detract from body copy or visual clarity.","Do not introduce additional typefaces or weights beyond Lab Grotesque 100, 400, 600.","Refrain from using shadows or gradients; depth is achieved primarily through spacing and content hierarchy.","Do not use color for emphasis; use changes in type size, weight, or the Muted Gray (#999999) secondary color.","Avoid unnecessary icons or imagery that don't directly convey essential information.","Do not break the strict achromatic palette with any brand or accent colors on the main content page."]},"components":[{"name":"Project Card — California Plants","role":""},{"name":"Site Navigation Header","role":""},{"name":"Portfolio Project List","role":""},{"name":"Main Navigation Link","role":"Unadorned textual links for navigation."},{"name":"Secondary Navigation Link","role":"Subtle links for 'About', 'Twitter', 'Instagram'."},{"name":"Body Text Block","role":"Paragraphs of body content."},{"name":"Primary Heading","role":"Main title and section headings."},{"name":"Secondary Heading","role":"Sub-headings or project titles."},{"name":"Project Metadata/Year Tag","role":"Contextual dates or brief descriptors alongside project titles."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (Primary): #000000\n- Text (Secondary): #999999\n- Background: #FFFFFF\n- Interactive Elements: #000000 (as text)\n\n### Example Component Prompts\n1. Create a page header: text 'Mike Matas' size 40px, Lab Grotesque, weight 600, color #000000. Underneath, '2026' in size 18px, Lab Grotesque, weight 400, color #000000. Ensure 36px vertical gap between these two lines.\n2. Generate a navigation link group in the top right: 'About', 'Twitter', 'Instagram'. Each link uses Lab Grotesque, 18px, weight 400, color #999999. Use 25px horizontal spacing between links.\n3. Create a body text paragraph: Start with 'Hi, I’m Mike Matas.' and continue with the provided text. Use Lab Grotesque, 20px, weight 400, lineHeight 1.20, color #000000. Ensure text block is capped at 900px width.\n4. Design a project entry: Headline 'Lobe' in Lab Grotesque, 40px, weight 600, color #000000. Sub-heading 'Founder Acquired by Microsoft 2020' in Lab Grotesque, 18px, weight 400, color #999999. Place 36px vertical space after the headline."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925531371-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925531371-thumb.jpg"},"similarStyleIds":["8321c2d1-686f-4752-9156-ea613a879b9e","b76c7503-0217-4822-80b2-18fa19af46ee","25009c35-8b3b-4898-9295-3e0e0aa07207","2b014368-6db1-417b-b84a-8af9c6450b53","81a66e75-23af-4525-8a4e-f4a54c2700e7","e67ac20e-6497-4756-b7e2-17859a794fb6","68d18deb-bb09-4258-8024-001af9c844c0","adbdc8b1-be46-4d4c-a973-5022f6fd381e","35ff063b-1fcc-48a2-83b3-56da01e23880","ff4606f8-164b-47cc-941c-945e9a4b5c27","5fae307a-90ef-4181-9525-3ac308896ffc","2ca88a8f-fd06-4e2c-8ff5-7e1bd37e37eb","8b708ba5-5c94-45a7-9868-36506fc423d0","fe602c0f-2862-432b-88fc-fa5f9fbc3c78","6bc0dff4-b803-4e0c-a8f5-bef016843ae8","c43237e3-dae2-4fc6-a917-519b25c870e5","004f4856-4b01-4c23-a9fb-866303d5013b","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","3d126fb1-a7f2-439d-be96-04e4bacee8b1","6d0db1c7-5500-40cd-b2f3-d3d9abbd3a2f"],"exports":{"designMdUrl":"/references/refero/04f6cb02-de90-4d78-9c5f-0eb52f826484/design.md","tokensJsonUrl":"/references/refero/04f6cb02-de90-4d78-9c5f-0eb52f826484/tokens.json","tailwindV4Url":"/references/refero/04f6cb02-de90-4d78-9c5f-0eb52f826484/tailwind-v4.css","cssVariablesUrl":"/references/refero/04f6cb02-de90-4d78-9c5f-0eb52f826484/tailwind-v4.css"}}