{"id":"2318d650-b229-4be0-9adc-9f17cecfd253","name":"New Genre","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/2318d650-b229-4be0-9adc-9f17cecfd253","originalSiteUrl":"https://newgenre.studio","capturedAt":"2026-04-12T15:54:43.005Z","colors":[{"name":"Ebon Depth","hex":"#000000","role":"Primary text, headers, prominent UI elements, icon fill — anchors the gradients with stark contrast.","group":"neutral","cssVariable":"--color-ebon-depth"},{"name":"Whisper White","hex":"#ffffff","role":"Background for clean content sections, inverse text on dark backgrounds, active elements in navigation — creates clear content islands on the gradient canvas.","group":"neutral","cssVariable":"--color-whisper-white"},{"name":"Midnight Oil Stain","hex":"#1e1310","role":"Darkest background for footer sections — grounds the site with a rich, almost black earth tone.","group":"neutral","cssVariable":"--color-midnight-oil-stain"},{"name":"Onyx Shadow","hex":"#0c1018","role":"Main body text, input fields, prominent text — a very dark gray that provides high contrast without being pure black.","group":"neutral","cssVariable":"--color-onyx-shadow"},{"name":"Mist Gray","hex":"#9e9fa3","role":"Subtle secondary text, border elements, placeholder text — used for less prominent information, allowing primary content to stand out.","group":"neutral","cssVariable":"--color-mist-gray"},{"name":"Steel Glimmer","hex":"#6d7074","role":"Desaturated gray for some headings — provides a softer emphasis compared to Ebon Depth.","group":"neutral","cssVariable":"--color-steel-glimmer"},{"name":"Sky Gradient","hex":"#280e01","role":"Primary page background, hero section — shifts from deep, burnt umber through cool blues to soft, pale gold, creating a dynamic, subtle backdrop that feels vast and atmospheric.","group":"brand","gradient":"linear-gradient(rgb(40, 14, 1) 0%, rgb(24, 38, 68) 15.2608%, rgb(90, 118, 159) 30.284%, rgb(135, 161, 196) 43.3787%, rgb(193, 211, 230) 58.8313%, rgb(254, 249, 225) 79.7139%, rgb(247, 243, 240) 100%)","cssVariable":"--color-sky-gradient"},{"name":"Amber Glow","hex":"#ffe600","role":"Subtle accent for ephemeral elements, often with transparency — its soft luminosity is a counterpoint to the primary gradient.","group":"accent","gradient":"radial-gradient(75% 300% at 109.6% 147.1%, rgb(255, 230, 0) 0%, rgb(237, 148, 84) 29.5837%, rgba(153, 161, 175, 0.06) 100%)","cssVariable":"--color-amber-glow"},{"name":"Sunset Gradient","hex":"#f7f3f0","role":"Decorative background gradient used for visual breaks — transitions from transparent through fiery oranges and reds to a deep, earthy brown, adding warmth and energy.","group":"brand","gradient":"linear-gradient(rgba(247, 243, 240, 0) 0%, rgba(241, 189, 122, 0.97) 17.3899%, rgb(252, 190, 109) 32.9462%, rgb(228, 108, 68) 51.4622%, rgb(84, 37, 18) 78.2939%, rgb(30, 19, 16) 100%)","cssVariable":"--color-sunset-gradient"},{"name":"Earthfire Gradient","hex":"#1e1310","role":"Rich, warm gradient for sections requiring strong visual presence — deep browns and oranges signifying grounding and energy.","group":"brand","gradient":"linear-gradient(rgb(30, 19, 16) 25.1883%, rgb(144, 60, 39) 50.2763%, rgb(228, 108, 68) 76.0487%, rgb(237, 148, 84) 100%)","cssVariable":"--color-earthfire-gradient"}],"typography":[{"role":"Display headlines and primary page titles — its condensed form and generous negative letter-spacing (-0.02em = -1.44px at 72px) create a distinctive, slightly formal and precise look.","sizes":"64px, 72px","family":"Serrif Condensed Regular","weight":"400","lineHeight":"1.05","substitute":"IBM Plex Serif","letterSpacing":"-1.44"},{"role":"Versatile all-purpose sans-serif for body text, subheadings, and UI elements — its variable nature and consistent negative letter-spacing (-0.01em = -0.12px at 12px) contribute to the compact, yet legible aesthetic.","sizes":"12px, 14px, 16px, 20px, 24px, 32px","family":"Saans Variable","weight":"300, 400, 500","lineHeight":"1.00, 1.10, 1.15, 1.40","substitute":"Inter Variable","letterSpacing":"-0.12"},{"role":"Specific use for input fields, providing slight visual differentiation from other Saans weights. The subtle letter-spacing maintains consistency.","sizes":"16px","family":"Saans Medium","weight":"400, 570","lineHeight":"1.00","substitute":"Inter Medium","letterSpacing":"-0.16"},{"role":"Used for standard body text, featuring a slightly lighter weight and increased line height for enhanced readability in paragraphs.","sizes":"16px","family":"Saans Regular","weight":"380","lineHeight":"1.30","substitute":"Inter Regular","letterSpacing":"-0.16"}],"spacing":{"radius":{"buttons":"50px","default":"8px","components":"16px","pillButtons":"90px"},"elementGap":"6-24px","sectionGap":"48-52px","cardPadding":"16-32px"},"radius":{"buttons":"50px","default":"8px","components":"16px","pillButtons":"90px"},"guidelines":{"do":["Prioritize the Sky Gradient as the primary background for full-page or hero segments to establish the atmospheric and shifting visual identity.","Use Serrif Condensed Regular with -0.02em letter-spacing for all significant headlines to emphasize precision and a slightly formal tone.","Maintain a clear hierarchy with Ebon Depth #000000 or Onyx Shadow #0c1018 for primary text and Mist Gray #9e9fa3 for secondary information.","Apply 90px border-radius for all primary action buttons ('pill buttons') and 50px radius for input fields, establishing a soft, approachable interaction style.","Ensure consistent horizontal padding of 24px for all major content blocks and card elements to maintain a structured, spacious feel.","Leverage the Saans Variable font family for all body, subheading, and UI text, ensuring its specific negative letter-spacing for a tight, refined look."],"dont":["Avoid harsh, solid background colors; instead, opt for gradients or Whisper White #ffffff to preserve the site's ethereal quality.","Do not use overly bold or heavy font weights; the system relies on lighter weights like Saans Variable 300-500 and Serrif Condensed Regular 400.","Refrain from using strong, single-color accents; instead, any accent should be subtle, transparent, or part of a larger gradient.","Do not introduce sharp corners or small radii on interactive elements; all buttons and inputs should adhere to 50px or 90px border-radius.","Avoid dense, information-heavy sections without adequate section gaps (48-52px) or element gaps (6-24px); maintain a compact yet breathable layout.","Do not use default browser link styling; ensure all links use Saans Variable and are styled consistently with the navigation links or body text."]}}