{"id":"703d69b7-2863-44fa-a443-2ac090db3873","name":"Grand Matter","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/703d69b7-2863-44fa-a443-2ac090db3873","originalSiteUrl":"https://grandmatter.com","capturedAt":"2026-04-30T04:02:02.720Z","colors":[{"name":"Pitch Black","hex":"#000000","role":"Primary text, strong borders, navigation accents, foundational UI elements","group":"neutral","cssVariable":"--color-pitch-black"},{"name":"Deep Charcoal","hex":"#0f2226","role":"Secondary text, subtle borders, input text and outlines","group":"neutral","cssVariable":"--color-deep-charcoal"},{"name":"Canvas White","hex":"#ffffff","role":"Primary page background, prominent card surfaces, essential text against dark backgrounds","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Light Mist","hex":"#f8f7f7","role":"Subtle background for UI sections, secondary card surfaces, input backgrounds","group":"neutral","cssVariable":"--color-light-mist"},{"name":"Warm Parchment","hex":"#ede8e0","role":"Section backgrounds, image backgrounds, tertiary surface levels, subtle borders","group":"neutral","cssVariable":"--color-warm-parchment"},{"name":"Ash Gray","hex":"#020202","role":"Darkest background for subtle elevation, alternative text color","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Radiant Orange","hex":"#f25f29","role":"Navigation active states, decorative accents — a vibrant punctuation against the neutral palette","group":"accent","cssVariable":"--color-radiant-orange"},{"name":"Electric Blue","hex":"#1573dd","role":"Outlined action borders, interactive links, image borders — providing a clear interactive signal","group":"accent","cssVariable":"--color-electric-blue"}],"typography":[{"role":"Body text, navigation items, descriptive content where clarity and neutrality are key.","sizes":"18px","family":"Inter","weight":"400","weights":[400],"lineHeight":"1.67","substitute":"system-ui","letterSpacing":"normal"},{"role":"Display headlines and subheadings, callouts, and prominent text elements. This serif delivers a classic, authoritative voice.","sizes":"16px, 18px, 20px, 24px, 32px, 48px, 54px, 56px","family":"big-caslon-fb","weight":"400","weights":[400],"lineHeight":"0.82, 0.85, 0.87, 0.88, 0.96, 1.00, 1.11, 1.22, 1.67","substitute":"serif","letterSpacing":"-0.031em"},{"role":"Secondary headlines, emphasized body text, and specific link styles. Its tighter tracking at larger sizes maintains elegance.","sizes":"12px, 18px, 24px, 32px, 56px","family":"adobe-caslon-pro","weight":"400","weights":[400],"lineHeight":"0.88, 1.00, 1.11, 1.50","substitute":"serif","letterSpacing":"-0.042em at 56px, -0.021em at 12px"},{"role":"Specialized headlines and key informational tags. The heavy weights and negative tracking create impact and a modern feel.","sizes":"16px, 24px, 32px, 56px","family":"basis-grotesque-black","weight":"400, 600","weights":[400,600],"lineHeight":"0.78, 0.87, 0.92, 0.96, 1.00, 1.11","substitute":"sans-serif","letterSpacing":"-0.031em at 56px, -0.028em at 32px, -0.018em at 16px"}],"spacing":{"radius":{"inputs":"5px","buttons":"5px"},"elementGap":"20px","sectionGap":"80px","cardPadding":"40px"},"radius":{"inputs":"5px","buttons":"5px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas White","level":0,"purpose":"Base page background and highest-level content containers."},{"hex":"#f8f7f7","name":"Light Mist","level":1,"purpose":"Secondary background for sections and content blocks, providing a slight visual separation."},{"hex":"#ede8e0","name":"Warm Parchment","level":2,"purpose":"Tertiary background for distinct content groups or image framing, offering a warmer neutral tone."},{"hex":"#020202","name":"Ash Gray","level":3,"purpose":"Darkest background for subtle overlay effects or contrasting sections."}]},"guidelines":{"do":["Prioritize big-caslon-fb or adobe-caslon-pro for headings and display text to establish an editorial and authoritative tone.","Use Pitch Black (#000000) for primary text and Deep Charcoal (#0f2226) for secondary text and borders to maintain high contrast and sophistication.","Employ Light Mist (#f8f7f7) for section backgrounds and Warm Parchment (#ede8e0) for subtler background variations to create depth across surfaces.","Utilize Radiant Orange (#f25f29) for key navigation accents and Electric Blue (#1573dd) for interactive link borders, ensuring color is used as functional punctuation.","Apply 5px border-radius to all interactive input and button components, creating a subtle softness without compromising structure.","Maintain comfortable spacing with 80px section gaps and 20px element gaps, ensuring visual breathing room across the layout.","Use Inter at 18px with 1.67 line height for all body text to ensure readability and a clean informational delivery."],"dont":["Avoid applying heavy drop shadows; the system favors flat surfaces and content-driven elevation.","Do not introduce additional vivid colors beyond Radiant Orange and Electric Blue for UI elements; maintain a restricted accent palette.","Do not use highly decorative borders or complex background patterns; simple 1px solid borders are preferred.","Refrain from using large images as primary page backgrounds; instead, use neutral background colors to frame content.","Do not deviate from the specified negative letter-spacing for display typography; it is crucial to the distinctive feel.","Avoid overly dense content blocks; prioritize generous white space and clear visual separation between elements.","Do not use generic system fonts for headlines; always opt for big-caslon-fb, adobe-caslon-pro, or basis-grotesque-black to preserve brand identity."]}}