{"id":"8b708ba5-5c94-45a7-9868-36506fc423d0","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/8b708ba5-5c94-45a7-9868-36506fc423d0","originalSiteUrl":"https://nothing.tech","capturedAt":"2026-04-11T16:20:31.923Z","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":"Nothing","summary":"Monochrome digital interface. Pure high contrast black and white with pixelated accents against an almost clinical white canvas.","description":"This design evokes a retro-futuristic, almost industrial feel, like an early digital interface brought to modern precision. A high-contrast monochrome palette of pure black and white creates stark visual clarity, softened slightly by subtle gray tones. The purposeful use of a monospaced font for small labels and a pixelated icon style injects a distinct, nostalgic digital aesthetic, making the technology feel both approachable and cutting-edge without relying on vibrant colors.","tags":["monochrome","high-contrast","retro-futuristic","pixelated","minimalist","industrial","text-dominant","stark","digital"],"industry":"other","colorScheme":"light","colors":[{"name":"Pure White","hex":"#ffffff","role":"Page backgrounds, elevated surfaces, default icon color.","group":"neutral"},{"name":"Cloud Gray","hex":"#f5f5f5","role":"Subtle background accents, provides minimal contrast for secondary panels.","group":"neutral"},{"name":"Off White","hex":"#e5e7eb","role":"Divider lines, subtle button borders, a nearly invisible accent against Pure White.","group":"neutral"},{"name":"Ash Gray","hex":"#979898","role":"Low-contrast primary button background, provides a subtle active state.","group":"neutral"},{"name":"Carbon Gray","hex":"#585a5a","role":"Secondary text, subtle interactive element outlines, provides clear legibility against light backgrounds.","group":"neutral"},{"name":"Midnight Black","hex":"#000000","role":"Primary text, critical calls to action, dominant interactive elements, creating maximum visual impact.","group":"neutral"},{"name":"Vivid Red","hex":"#c6102","role":"Low prominence icon highlighting and rare, specific interactive elements.","group":"accent"}],"typography":[{"role":"Primary UI font, used widely for body text, headings, and interactive elements. Its custom nature provides distinct character in a largely functional design.","sizes":"16px, 24px, 32px","family":"NType82-Regular","weight":"100, 400","lineHeight":"1.10, 1.40","substitute":"Inter, Arial"},{"role":"Monospaced font for labels, secondary information, and subtle code-like elements. The tight letter-spacing (-0.04em) amplifies its technical, digital aesthetic.","sizes":"11px, 12px, 14px","family":"LatteraMonoLL","weight":"400","lineHeight":"1.10, 1.33, 1.43","substitute":"Menlo, Consolas","letterSpacing":"-0.04"},{"role":"Display font used sparingly for impactful headings, contributing to the retro-digital, pixelated machine aesthetic. Weight 55 for a lighter touch, 400 for bold statements.","sizes":"20px, 40px","family":"Ndot-Regular","weight":"55, 400","lineHeight":"1.00, 1.08","substitute":"VT323, Pixelify Sans"},{"role":"Used for specific headlines, providing a slightly different visual texture than 'NType82-Regular' for emphasis, maintaining overall brand consistency.","sizes":"16px","family":"NType82-Headline","weight":"400","lineHeight":"1.40","substitute":"Inter, Arial"}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.1,"letterSpacing":-0.04},{"role":"body","size":14,"lineHeight":1.43,"letterSpacing":-0.04},{"role":"body-lg","size":16,"lineHeight":1.4},{"role":"subheading","size":20,"lineHeight":1.08},{"role":"heading","size":24,"lineHeight":1.1},{"role":"heading-lg","size":32,"lineHeight":1.1},{"role":"display","size":40,"lineHeight":1}],"spacing":{"radius":{"pills":"9999px","buttons":"8px","default":"0px"},"elementGap":"8-16px","sectionGap":"64-80px","cardPadding":"16px"},"radius":{"pills":"9999px","buttons":"8px","default":"0px"},"guidelines":{"do":["Use Midnight Black (#000000) for all primary text and critical headlines, ensuring maximum contrast against light backgrounds.","Apply NType82-Regular (weights 100, 400) for general text, reserving Ndot-Regular for impactful display headings to maintain the pixelated aesthetic.","For all interactive elements requiring a default rounded corner, use 8px border-radius.","Utilize LatteraMonoLL with letter-spacing -0.04em for small, utility text, such as timestamps or meta-information, to enhance the technical feel.","Maintain high contrast (minimum AAA for text) by pairing Midnight Black text on Pure White or Cloud Gray backgrounds.","Employ Off White (#e5e7eb) for subtle borders and dividers, providing visual structure without harsh lines."],"dont":["Avoid introducing additional saturated colors; the palette is strictly monochrome with a single accent Vivid Red for specific, subtle functional highlights.","Do not use letter-spacing on NType82-Regular or Ndot-Regular; their baseline tracking is optimized as-is.","Do not vary from the established padding values (4px, 8px, 16px, 32px) for interactive elements; they create the system's spatial rhythm.","Avoid soft shadows or gradients; flat design with stark contrast and minimal elevation is central to the visual identity.","Do not use standard system fonts. The custom NType82 and Ndot maintain a core part of the brand's unique digital and retro identity."]},"components":[{"name":"Store Locator Modal","role":""},{"name":"Notification Banner","role":""},{"name":"Button Group Collection","role":""},{"name":"Primary Button","role":"Call to action"},{"name":"Secondary Button","role":"Secondary action"},{"name":"Ghost Button","role":"Tertiary action or navigation"},{"name":"Ghost Button Inverse","role":"Tertiary action on dark backgrounds"},{"name":"Active Button","role":"Selected state"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: Midnight Black (#000000)\n- Background: Pure White (#ffffff)\n- CTA Background: Midnight Black (#000000)\n- CTA Text: Pure White (#ffffff)\n- Border: Off White (#e5e7eb)\n- Accent: Vivid Red (#c6102e)\n\n### Example Component Prompts\n1. Create a primary button: 'Submit' text. Midnight Black background (#000000), Pure White text (#ffffff), padding 16px, 8px border-radius. Use NType82-Regular, weight 400, size 16px.\n2. Create a secondary button: 'Learn More' text. Ash Gray background with 5% opacity (rgba(88, 90, 90, 0.05)), Midnight Black text (#000000), padding 4px top/bottom, 8px left/right, 8px border-radius. Use NType82-Regular, weight 400, size 16px.\n3. Create a small label for a form field: 'Email Address' text. Carbon Gray text (#585a5a), LatteraMonoLL, weight 400, size 12px, letter-spacing -0.04em.\n4. Design a call to action headline: 'It's metal now'. Midnight Black text (#000000), Ndot-Regular, weight 400, size 40px, line height 1.00.\n5. Create a ghost button: 'Explore Offers' text. Transparent background, Midnight Black text (#000000), padding 16px, 0px border-radius. Use NType82-Regular, weight 400, size 16px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924412433-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775924412433-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8b708ba5-5c94-45a7-9868-36506fc423d0-1777582652032-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8b708ba5-5c94-45a7-9868-36506fc423d0-1777582652032-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8b708ba5-5c94-45a7-9868-36506fc423d0-1777582652032-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/8b708ba5-5c94-45a7-9868-36506fc423d0-1777582652032-preview-detail-poster.jpg"},"similarStyleIds":["6b5a0bf4-3d2a-4c3b-aa2e-652f1acb82c0","572bc29f-8827-4f77-b248-08dddf1c2e26","859f6be7-9d2d-4da6-a9b7-baa658172696","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","a1b78a21-a304-482b-8ce5-f612d95d44fe","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","b76c7503-0217-4822-80b2-18fa19af46ee","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","08c8700c-f278-42bc-812e-f60dc6ce996e","68d18deb-bb09-4258-8024-001af9c844c0","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","7337d65c-9a98-4b0f-b8bb-6f470742af98","8eb9c53e-d69c-497a-b640-610856cf3a60","ab2a0b58-377d-4674-986e-4abbdf6c49ed","c43237e3-dae2-4fc6-a917-519b25c870e5","408a149c-702f-4442-99df-bea49d9c0d9b","aecf9dda-5cba-4dc7-9e73-59b65d895cdf","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","50833119-cb36-4b75-b0cc-be48afea050a","969b879e-166b-4c1f-9c33-e44fa643188c"],"exports":{"designMdUrl":"/references/refero/8b708ba5-5c94-45a7-9868-36506fc423d0/design.md","tokensJsonUrl":"/references/refero/8b708ba5-5c94-45a7-9868-36506fc423d0/tokens.json","tailwindV4Url":"/references/refero/8b708ba5-5c94-45a7-9868-36506fc423d0/tailwind-v4.css","cssVariablesUrl":"/references/refero/8b708ba5-5c94-45a7-9868-36506fc423d0/tailwind-v4.css"}}