{"id":"8b708ba5-5c94-45a7-9868-36506fc423d0","name":"Nothing","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","colors":[{"name":"Pure White","hex":"#ffffff","role":"Page backgrounds, elevated surfaces, default icon color.","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Cloud Gray","hex":"#f5f5f5","role":"Subtle background accents, provides minimal contrast for secondary panels.","group":"neutral","cssVariable":"--color-cloud-gray"},{"name":"Off White","hex":"#e5e7eb","role":"Divider lines, subtle button borders, a nearly invisible accent against Pure White.","group":"neutral","cssVariable":"--color-off-white"},{"name":"Ash Gray","hex":"#979898","role":"Low-contrast primary button background, provides a subtle active state.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Carbon Gray","hex":"#585a5a","role":"Secondary text, subtle interactive element outlines, provides clear legibility against light backgrounds.","group":"neutral","cssVariable":"--color-carbon-gray"},{"name":"Midnight Black","hex":"#000000","role":"Primary text, critical calls to action, dominant interactive elements, creating maximum visual impact.","group":"neutral","cssVariable":"--color-midnight-black"},{"name":"Vivid Red","hex":"#c6102","role":"Low prominence icon highlighting and rare, specific interactive elements.","group":"accent","cssVariable":"--color-vivid-red"}],"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"}],"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."]}}