{"id":"3f2b79c1-d980-4380-a903-29856975fc37","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","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":"Midday","summary":"Achromatic ledger, crisp yet silent","description":"Midday uses a minimalist, content-focused visual language with a strong emphasis on readability and clean information architecture. The design balances crisp sans-serif with a commanding serif for headlines, all within an open, achromatic canvas. Subtle borders and ghost-like components keep the interface feeling lightweight and direct, with a monochromatic palette reinforcing a sense of serious utility and precision.","industry":"fintech","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, ghost button backgrounds, default icon fill — creates a bright, expansive foundation","group":"neutral"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.5,"letterSpacing":0.5},{"role":"body","size":14,"lineHeight":1.56,"letterSpacing":0.25},{"role":"subheading","size":18,"lineHeight":1.4,"letterSpacing":0.25},{"role":"heading-sm","size":24,"lineHeight":1.33,"letterSpacing":-0.25},{"role":"heading","size":48,"lineHeight":1,"letterSpacing":-1.2},{"role":"display","size":72,"lineHeight":1,"letterSpacing":-1.8}],"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."]},"components":[{"name":"Pill Button - Default","role":"Default interactive button"},{"name":"Solid Button - Primary","role":"Primary call to action button"},{"name":"Ghost Button","role":"Ghost-style button for secondary actions or toggles"},{"name":"Integration Card Variant","role":"Card for displaying tool integrations"},{"name":"Feature Card","role":"Information card for features or pricing"},{"name":"Badge - Introducing","role":"Informational badge for new features"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \ntext: #121212\nbackground: #ffffff\nborder: #dbdad7\naccent: #4caf50\nprimary action: #18181b (filled action)\n\nExample Component Prompts:\n1. Create a Primary Action Button: #18181b background, #616161 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n2. Create a Feature Card: Canvas White background (#ffffff), 0px border-radius, 20px padding. Inside, 'Reporting' as a subheading (18px Hedvig Letters Sans weight 400, #121212, line-height 1.4) followed by body text 'Detailed daily reports' (14px Hedvig Letters Sans weight 400, #121212, line-height 1.56).\n3. Create a Ghost Toggle Button: Transparent background, Muted Stone text (#616161), 1px Ash Gray border (#dbdad7), 0px border-radius. Padding 8px vertical, 12px horizontal. Text 'Monthly'."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777507453853-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777507453853-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f2b79c1-d980-4380-a903-29856975fc37-1777582679075-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f2b79c1-d980-4380-a903-29856975fc37-1777582679075-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f2b79c1-d980-4380-a903-29856975fc37-1777582679075-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/3f2b79c1-d980-4380-a903-29856975fc37-1777582679075-preview-detail-poster.jpg"},"similarStyleIds":["aeefc294-a8f7-443d-b76a-538dddc29afe","d703d9f7-4821-468e-8fe4-c8b5790b00ed","964b9215-396b-492c-abec-7bd778d7b1c9","a76ec6ba-20b3-495c-9d89-1e58281e79e7","8d3dc65e-4443-4bb3-b1a9-b0fc98381db9","c75603c7-492d-4c26-9744-9acc22fe6225","7c38e84b-aea0-4c8f-b3e9-60b994ee6c6b","29392960-0acf-4891-ad33-28a72f6a9b75","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","bcfc6cb0-1b39-4f3f-a95e-bd7b563b0efc","3172cd4d-118a-4a16-a259-6b634d32322e","9d16aa65-cef7-4bf7-83c8-91837a248cd9","80d7ef36-ed7e-48bb-b558-f772eb40106f","1bd3b2ba-9ad9-44ed-9130-03f9d94de821","a0630421-7b66-48b4-aa14-6194a3b2c2b9","7b083729-e694-4b66-82a3-befb08451722","2eab438d-32cd-40c2-b160-1e4127dac569","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","c1f7749f-319b-491b-8243-22050e85994f","c60f05ff-2420-4a24-92db-80c4b6a74683"],"exports":{"designMdUrl":"/references/refero/3f2b79c1-d980-4380-a903-29856975fc37/design.md","tokensJsonUrl":"/references/refero/3f2b79c1-d980-4380-a903-29856975fc37/tokens.json","tailwindV4Url":"/references/refero/3f2b79c1-d980-4380-a903-29856975fc37/tailwind-v4.css","cssVariablesUrl":"/references/refero/3f2b79c1-d980-4380-a903-29856975fc37/tailwind-v4.css"}}