{"id":"0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","name":"Augen Pro","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","colors":[{"name":"Midnight Ink","hex":"#0f1012","role":"Primary text, darkest UI elements, default borders. Provides sharp contrast against lighter backgrounds.","group":"neutral","cssVariable":"--color-midnight-ink"},{"name":"Ghost White","hex":"#f2f2f4","role":"Dominant page and card backgrounds. Creates a luminous, expansive stage for content.","group":"neutral","cssVariable":"--color-ghost-white"},{"name":"Canvas","hex":"#fdfdfd","role":"Secondary background surfaces, slightly brighter than Ghost White, offering subtle layering.","group":"neutral","cssVariable":"--color-canvas"},{"name":"Skyline Gray","hex":"#868788","role":"Subtle background tones, offering a soft visual break without introducing strong chromaticism.","group":"neutral","cssVariable":"--color-skyline-gray"},{"name":"Slate Comment","hex":"#8f8f8f","role":"Secondary text, button labels, and subtle UI strokes. Provides visual hierarchy without being muted.","group":"neutral","cssVariable":"--color-slate-comment"},{"name":"Deep Graphite","hex":"#020201","role":"Accented text elements, button states, and fine strokes. Offers the highest contrast.","group":"neutral","cssVariable":"--color-deep-graphite"},{"name":"Future Blue","hex":"#0071e3","role":"Interactive elements like links, buttons, and active states. Commands attention as the sole chromatic accent.","group":"accent","cssVariable":"--color-future-blue"}],"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"}],"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."]}}