{"id":"3f2b79c1-d980-4380-a903-29856975fc37","name":"Midday","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/3f2b79c1-d980-4380-a903-29856975fc37","originalSiteUrl":"https://midday.ai","capturedAt":"2026-04-30T00:04:36.211Z","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, ghost button backgrounds, default icon fill — creates a bright, expansive foundation","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Ink Black","hex":"#121212","role":"Secondary body text, navigation labels, and subdued headings. Do not promote it to the primary CTA color","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Ash Gray","hex":"#dbdad7","role":"Hairline borders for cards, buttons, and decorative separators — defines structure without visual weight, echoing traditional ledger paper","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Deep Graphite","hex":"#18181b","role":"Primary action button background — provides a strong, serious focal point for key interactions against the light canvas","group":"neutral","cssVariable":"--color-deep-graphite"},{"name":"Cool Gray Mist","hex":"#e6e4e0","role":"Subtle background for secondary sections, selected tabs, and subtle hints of elevation — adds textural variation within the neutral palette","group":"neutral","cssVariable":"--color-cool-gray-mist"},{"name":"Muted Stone","hex":"#616161","role":"Secondary text, link text, helper text, and subtle icon strokes — provides hierarchy and de-emphasizes content gently","group":"neutral","cssVariable":"--color-muted-stone"},{"name":"Success Green","hex":"#4caf50","role":"Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color","group":"accent","cssVariable":"--color-success-green"}],"typography":[{"role":"Primary UI text, body copy, navigation, button labels, and small headings — maintains clarity and compactness across the interface.","sizes":"10px, 11px, 12px, 14px, 16px, 18px, 20px, 24px, 48px, 508px","family":"Hedvig Letters Sans","weight":"400, 500","weights":[400,500],"lineHeight":"1.00, 1.33, 1.40, 1.43, 1.50, 1.56, 1.63","substitute":"Inter","letterSpacing":"0.0250em for lighter weights, 0.0500em for smaller body text"},{"role":"Prominent headings and display text — its formal, open character with generous negative tracking creates a sense of established authority and elegant presence.","sizes":"24px, 72px","family":"Hedvig Letters Serif","weight":"400","weights":[400],"lineHeight":"1.00, 1.33","substitute":"Playfair Display","letterSpacing":"-0.0250em"}],"spacing":{"radius":{"cards":"0px","icons":"8px","input":"0px","badges":"9999px","buttons":"9999px"},"elementGap":"8px","sectionGap":"24px","cardPadding":"20px","pageMaxWidth":"1280px"},"radius":{"cards":"0px","icons":"8px","input":"0px","badges":"9999px","buttons":"9999px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas","level":0,"purpose":"Dominant page background, foundational for all content."},{"hex":"#ffffff","name":"Card Base","level":1,"purpose":"Background for primary content cards and information blocks."},{"hex":"#e6e4e0","name":"Muted Section","level":2,"purpose":"Background for subtle alternations in section backgrounds or selected interface elements."}]},"guidelines":{"do":["Use Hedvig Letters Sans at weight 400 for all body text and UI elements, with Ink Black (#121212) as the default text color.","Apply Hedvig Letters Serif at weight 400 and letter-spacing -0.0250em for main headings and display text, using Ink Black (#121212).","Define all structural boundaries with a 1px solid Ash Gray (#dbdad7) border to maintain a lightweight, precise aesthetic.","Utilize Canvas White (#ffffff) as the dominant background for all primary content surfaces and page canvas.","Form primary action buttons with a solid Deep Graphite (#18181b) background and Canvas White (#ffffff) text, always with a 0px border-radius.","Ensure all interactive elements and badges with a soft, secondary role use a 9999px radii, contrasting with the sharp corners of content cards.","Maintain a clear visual hierarchy by applying Muted Stone (#616161) for secondary text and helper elements."],"dont":["Avoid using box-shadows; visible elevation is created through subtle background color changes or strong typographic hierarchy instead.","Do not introduce additional chromatic colors beyond Success Green (#4caf50), reserving it exclusively for semantic indicators and data accents.","Never use rounded corners on content cards or panels; maintain the sharp, square aesthetic (0px radius) for all informational containers.","Do not vary line-height unless explicitly defined by the type scale; follow the specified line-heights for each font size to maintain vertical rhythm.","Avoid using bold weights for body text; rely on color contrast and spacing for emphasis within paragraphs.","Do not use gradients for backgrounds or components; the system relies on flat colors and subtle textural variation.","Refrain from using decorative imagery or full-bleed photography that breaks the clean, high-key achromatic canvas."]}}