{"id":"0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","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/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","originalSiteUrl":"https://augen.pro","capturedAt":"2026-04-11T16:43:52.253Z","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":"Augen Pro","summary":"Architectural Blueprint on White Marble. Every element is immaculately placed against a pristine, bright background, creating a sense of technical elegance.","description":"This system projects an aura of understated precision and future-forward serenity, akin to a meticulously designed piece of advanced technology. The stark, high-contrast monochrome palette of near-black text on near-white surfaces emphasizes product clarity and intellectual rigor. A singular vivid blue accent hue is reserved exclusively for interactive elements, guiding user focus with subtle distinction rather than overt visual noise. Minimalist typography, combining readability with a touch of modern sophistication, reinforces a sense of controlled innovation.","tags":["minimalist","high-contrast","scifi","precision","futuristic","monochromatic","spacious","architectural"],"industry":"saas","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#0f1012","role":"Primary text, darkest UI elements, default borders. Provides sharp contrast against lighter backgrounds.","group":"neutral"},{"name":"Ghost White","hex":"#f2f2f4","role":"Dominant page and card backgrounds. Creates a luminous, expansive stage for content.","group":"neutral"},{"name":"Canvas","hex":"#fdfdfd","role":"Secondary background surfaces, slightly brighter than Ghost White, offering subtle layering.","group":"neutral"},{"name":"Skyline Gray","hex":"#868788","role":"Subtle background tones, offering a soft visual break without introducing strong chromaticism.","group":"neutral"},{"name":"Slate Comment","hex":"#8f8f8f","role":"Secondary text, button labels, and subtle UI strokes. Provides visual hierarchy without being muted.","group":"neutral"},{"name":"Deep Graphite","hex":"#020201","role":"Accented text elements, button states, and fine strokes. Offers the highest contrast.","group":"neutral"},{"name":"Future Blue","hex":"#0071e3","role":"Interactive elements like links, buttons, and active states. Commands attention as the sole chromatic accent.","group":"accent"}],"typography":[{"role":"Display and Large Headlines: Creates a delicate yet impactful presence, hinting at sophisticated technology.","sizes":"10px, 12px, 13px, 14px, 16px, 18px, 27px","family":"PP Neue Montreal","weight":"350, 400","lineHeight":"1.20","substitute":"Inter, Arial","letterSpacing":"-0.02"},{"role":"Body, Subheadings, Buttons, Links: Ensures consistent readability across all functional text. The tight letter-spacing maintains a modern, compact feel.","sizes":"10px, 12px, 13px, 14px, 16px, 18px, 27px","family":"PP Neue Montreal","weight":"350, 400","lineHeight":"1.20","substitute":"Inter, Arial","letterSpacing":"-0.02"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.2,"letterSpacing":-0.2},{"role":"heading-lg","size":18,"lineHeight":1.2,"letterSpacing":-0.36},{"role":"display","size":27,"lineHeight":1.2,"letterSpacing":-0.54}],"spacing":{"radius":{"misc":"54px","buttons":"10px","pillButtons":"26px"},"elementGap":"6px","sectionGap":"94px","cardPadding":""},"radius":{"misc":"54px","buttons":"10px","pillButtons":"26px"},"guidelines":{"do":["Use Ghost White (#f2f2f4) as the primary background for most sections to maintain a bright, expansive canvas.","Reserve Future Blue (#0071e3) strictly for interactive states, links, and primary call-to-action elements.","Apply PP Neue Montreal weight 350 for headlines and larger text where a lighter, more refined feel is desired.","Implement a default letter-spacing of -0.0200em for all PP Neue Montreal text to ensure a tight, modern aesthetic.","Utilize 10px border radius for contained interactive elements like navigation tags, providing a soft touch consistent with the Pill Tag Button.","Employ a base spacing of 6px for element gaps to maintain visual separation without clutter.","Ensure section padding consistently uses the larger `sectionGap` of 94px to create generous vertical breathing room."],"dont":["Avoid using chromatic colors other than Future Blue (#0071e3) to maintain the minimalist and precise aesthetic.","Do not introduce strong drop shadows; the design relies on stark contrast and subtle background shifts for hierarchy.","Do not vary body text weights or families; all continuous text should adhere to PP Neue Montreal weight 400 for consistency.","Refrain from using excessively large or bold typography; the system prioritizes restraint and clarity over visual shouting.","Avoid cluttering layouts; adhere to spacious element gaps and section padding to preserve an uncluttered, architectural feel.","Do not use heavily saturated imagery or illustrations; imagery should align with the sparse, sophisticated visual tone."]},"components":[{"name":"Explore Tag Pills","role":""},{"name":"Announcement Banner","role":""},{"name":"Progress Section Card","role":""},{"name":"Ghost Button","role":"Call to action with minimal visual emphasis"},{"name":"Pill Tag Button","role":"Top navigation and filtering options"},{"name":"Search Input Button","role":"Primary search trigger in header"},{"name":"Nav Link","role":"Primary navigation links"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: #0f1012 (Midnight Ink)\n- Background: #f2f2f4 (Ghost White)\n- CTA: #0071e3 (Future Blue)\n- Border: #0f1012 (Midnight Ink) for high contrast, #8f8f8f (Slate Comment) for subtle.\n- Accent: #0071e3 (Future Blue)\n\n### Example Component Prompts\n1. **Create a Hero Section:** Full-bleed Ghost White background. Centered headline 'Beyond Humanware.' using PP Neue Montreal, weight 350, size 27px, #0f1012, letter-spacing -0.02em. Below it, a row of three Ghost Buttons: 'A¹ Sense', 'B¹ Eye', 'A¹ Neuro', all text #0f1012, no background, no border radius.\n2. **Generate a Primary Nav Item:** 'Wearable' as a Pill Tag Button: background rgba(117, 117, 117, 0.1), text rgba(0, 0, 0, 0.4), 10px border-radius, 0px vertical padding, 10px horizontal padding, PP Neue Montreal weight 400, size 13px, letter-spacing -0.02em.\n3. **Design a Feature Section (Dark):** Background #0f1012 (Midnight Ink). Section padding 94px top/bottom. Main heading 'The new Method' using PP Neue Montreal, weight 350, size 27px, #f2f2f4 (Ghost White), letter-spacing -0.02em. Body text '#f2f2f4 (Ghost White), PP Neue Montreal weight 400, size 16px, line-height 1.2, letter-spacing -0.02em."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925813903-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775925813903-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2-1777582440018-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2-1777582440018-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2-1777582440018-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2-1777582440018-preview-detail-poster.jpg"},"similarStyleIds":["68d18deb-bb09-4258-8024-001af9c844c0","63bd1ed9-b161-45fd-8734-85282bd945ec","461da0f0-fde6-46bc-8137-7eca006260a8","c43237e3-dae2-4fc6-a917-519b25c870e5","fece962d-a580-4365-8afd-c9905a2502b1","41af8353-6a8f-416d-947b-57932f591497","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","a48ef430-8c6a-42d8-8c53-ab7bb43cf33b","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","a76ec6ba-20b3-495c-9d89-1e58281e79e7","62b22816-2d98-4e98-9c17-bf600ddb2fc8","32845f27-6b24-48be-af25-8e664f826b30","626ae2de-c402-4805-b859-2c6adca41022","34baa524-5d5b-4165-bbab-d01f05e6d6b9","2db41cd9-c898-4f59-b704-3042c0d87f45","7b083729-e694-4b66-82a3-befb08451722","6eb5fc89-d0db-4293-8bff-13c5aa530a28","a6950b49-8ce4-4330-9499-26ca08061599","36752f78-1c43-471b-b125-e82152ad23dd","ac14ea36-ea3e-4a25-bd16-11fb50d806fb"],"exports":{"designMdUrl":"/references/refero/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2/design.md","tokensJsonUrl":"/references/refero/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2/tokens.json","tailwindV4Url":"/references/refero/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2/tailwind-v4.css","cssVariablesUrl":"/references/refero/0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2/tailwind-v4.css"}}