{"id":"703d69b7-2863-44fa-a443-2ac090db3873","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","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":"Grand Matter","summary":"Editorial Art House","description":"Grand Matter features a high-contrast, editorial aesthetic. It pairs bold, classic serif typography for headlines with contemporary sans-serif for body text, creating a distinguished yet approachable feel. The palette is largely monochrome, relying on stark black, white, and off-white neutrals. A vibrant orange and a vivid blue act as precise accent colors, sparingly deployed to highlight interactive elements and navigation, giving a sense of sophisticated playfulness amidst the gravitas. Surfaces are predominantly flat, with minimal elevation, emphasizing content and typography. Layout is spacious, featuring generous vertical rhythm and clear content segmentation.","industry":"agency","colorScheme":"light","colors":[{"name":"Pitch Black","hex":"#000000","role":"Primary text, strong borders, navigation accents, foundational UI elements","group":"neutral"},{"name":"Deep Charcoal","hex":"#0f2226","role":"Secondary text, subtle borders, input text and outlines","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Primary page background, prominent card surfaces, essential text against dark backgrounds","group":"neutral"},{"name":"Light Mist","hex":"#f8f7f7","role":"Subtle background for UI sections, secondary card surfaces, input backgrounds","group":"neutral"},{"name":"Warm Parchment","hex":"#ede8e0","role":"Section backgrounds, image backgrounds, tertiary surface levels, subtle borders","group":"neutral"},{"name":"Ash Gray","hex":"#020202","role":"Darkest background for subtle elevation, alternative text color","group":"neutral"},{"name":"Radiant Orange","hex":"#f25f29","role":"Navigation active states, decorative accents — a vibrant punctuation against the neutral palette","group":"accent"},{"name":"Electric Blue","hex":"#1573dd","role":"Outlined action borders, interactive links, image borders — providing a clear interactive signal","group":"accent"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":-0.5},{"role":"body-sm","size":16,"lineHeight":1.67,"letterSpacing":-0.5},{"role":"body","size":18,"lineHeight":1.67,"letterSpacing":-0.5},{"role":"subheading","size":24,"lineHeight":1.11,"letterSpacing":-0.67},{"role":"heading","size":32,"lineHeight":0.96,"letterSpacing":-0.89},{"role":"heading-lg","size":48,"lineHeight":1,"letterSpacing":-1.33},{"role":"display","size":56,"lineHeight":0.78,"letterSpacing":-1.75}],"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."]},"components":[{"name":"Form Button","role":"Primary action within forms or specific interactive elements."},{"name":"Text Input (Simple)","role":"Standard input fields for text entry."},{"name":"Navigation Badge","role":"Categorization or filter labels in navigation."},{"name":"Outline Link","role":"Interactive text links and visual borders for interactive elements."},{"name":"Accent Navigation Link","role":"Current or active navigation item."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #000000\nbackground: #ffffff\nborder: #0f2226\naccent: #f25f29\nprimary action: #1573dd (outlined action border)\n\nExample Component Prompts:\n1. Create a hero section: full-bleed background with a vivid image (like the magenta portrait), centered headline 'Meaningful Creativity' in big-caslon-fb, 56px, 400 weight, #ffffff, letter-spacing -1.75px. Subheading 'Grand Matter' in Inter, 18px, 400 weight, #ffffff, normal letter-spacing.\n2. Create an Outlined Link: 'Learn more' text in Electric Blue (#1573dd), with a 1px solid Electric Blue (#1573dd) border. Font adobe-caslon-pro, 18px, 400 weight, letter-spacing -0.56px.\n3. Create a Form Text Input: background Light Mist (#f8f7f7), text Deep Charcoal (#0f2226), 1px solid Deep Charcoal (#0f2226) border, 5px border-radius, 10px vertical and 40px horizontal padding. Placeholder text in Deep Charcoal (#0f2226). Font big-caslon-fb, 16px, 400 weight, letter-spacing -0.49px.\n4. Create a Section Heading: 'Our Artists' in big-caslon-fb, 32px, 400 weight, Pitch Black (#000000), letter-spacing -0.89px. Immediately followed by a sub-line 'Chosen for their unique styles across multiple disciplines' in Inter, 18px, 400 weight, Deep Charcoal (#0f2226), normal letter-spacing."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777521698400-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777521698400-thumb.jpg"},"similarStyleIds":["ab1b113a-ed21-4512-acc2-d10c8927c410","e1223d32-c423-4c95-ae0a-8a6f8585e6a2","3e70af05-a07f-4c11-98ca-6ecb4765e967","d56508d7-c307-47f7-ad30-052e5a69f01f","5f72a3c2-7040-4d8c-9882-4d9384822469","0226e028-3cd3-440d-b469-ca459267161d","edc0c03e-8c20-4e22-badd-2735fcb9f4a8","837ba115-568f-4ada-8182-3dc100c8b3e4","2c18e573-0ffb-4f0d-848c-ff72a5839fd3","ff8f39ee-a10e-4a9d-a94d-6993c6084060","908017b4-311c-4b89-afa5-c29c8cb08e8b","c47654a9-7d7a-4b2c-8e0a-cd9296719c69","fdc0f631-442c-466d-ab79-e1fff2bfdb7d","75be52f8-4dbe-45da-9a0e-a11bc92f6927","139c4bee-396d-494c-baf0-fe211bf4928d","fece962d-a580-4365-8afd-c9905a2502b1","bb63a015-b018-4bd9-be66-0973ac6be753","733f32ca-efc3-40fb-bc58-327bd2b45828","11764fe0-e246-4b17-b3fb-a5d567466355","34aa811f-6084-484c-b4c0-f587b514e970"],"exports":{"designMdUrl":"/references/refero/703d69b7-2863-44fa-a443-2ac090db3873/design.md","tokensJsonUrl":"/references/refero/703d69b7-2863-44fa-a443-2ac090db3873/tokens.json","tailwindV4Url":"/references/refero/703d69b7-2863-44fa-a443-2ac090db3873/tailwind-v4.css","cssVariablesUrl":"/references/refero/703d69b7-2863-44fa-a443-2ac090db3873/tailwind-v4.css"}}