{"id":"2318d650-b229-4be0-9adc-9f17cecfd253","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","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":"New Genre","summary":"Shifting Gradual Horizon — a continuous, subtle color transition across surfaces, like watching a sunrise or sunset unfold.","description":"New Genre evokes a serene, almost academic atmosphere through subtle color gradients and precise typography. The core is a unique gradient background that shifts from deep, muted tones to soft, almost ethereal lightness, underpinning minimalist content blocks. Typography relies on custom fonts with generous letter-spacing, particularly noticeable in headlines, signaling thoughtfulness and understated authority rather than bold declarations. Interactive elements are sparingly defined, primarily through rounded shapes and light borders, maintaining a sense of quiet professionalism.","industry":"design","colorScheme":"light","colors":[{"name":"Ebon Depth","hex":"#000000","role":"Primary text, headers, prominent UI elements, icon fill — anchors the gradients with stark contrast.","group":"neutral"},{"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"},{"name":"Midnight Oil Stain","hex":"#1e1310","role":"Darkest background for footer sections — grounds the site with a rich, almost black earth tone.","group":"neutral"},{"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"},{"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"},{"name":"Steel Glimmer","hex":"#6d7074","role":"Desaturated gray for some headings — provides a softer emphasis compared to Ebon Depth.","group":"neutral"},{"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%)"},{"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%)"},{"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%)"},{"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%)"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.2},{"role":"body","size":16,"lineHeight":1.3,"letterSpacing":-0.16},{"role":"subheading","size":20,"lineHeight":1.15,"letterSpacing":-0.2},{"role":"heading","size":32,"lineHeight":1.15,"letterSpacing":-0.32},{"role":"display-sm","size":64,"lineHeight":1.05,"letterSpacing":-1.28},{"role":"display","size":72,"lineHeight":1.05,"letterSpacing":-1.44}],"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."]},"components":[{"name":"Cookie Consent Banner","role":""},{"name":"Process Step Cards","role":""},{"name":"Subtle Accent Button Group","role":""},{"name":"Navigation Link","role":"Interactive text link"},{"name":"Subtle Accent Button","role":"Ghost button with subtle background"},{"name":"Transparent Header Button","role":"Navigation button or inline action"},{"name":"Round Input Field","role":"User input field"},{"name":"Text Input Field","role":"Standard text input"},{"name":"Work Section Header","role":"Primary section title"},{"name":"Process Step Card","role":"Informational card outlining a step"},{"name":"Cookie Consent Banner","role":"Small, bottom-right notification"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference:**\n- Text (Primary): #0c1018\n- Background (Sections): #ffffff\n- Background (Hero/Page): #280e01 (start of Sky Gradient)\n- Hint Text/Border: #9e9fa3\n- Footer Background: #1e1310\n\n**Example Component Prompts:**\n1. Create a hero section: full-bleed background using the Sky Gradient. Place a heading in the center: Serif Condensed Regular, weight 400, 72px, line-height 1.05, letter-spacing -1.44px, color Whisper White #ffffff. Position a 'Our work' button 52px from the bottom-left edge, using the Subtle Accent Button style.\n2. Design a 'Process Step Card': background Whisper White #ffffff, 16px border-radius, 32px vertical padding, 24px horizontal padding. Include a subheading: Saans Variable, weight 500, 24px, line-height 1.15, letter-spacing -0.24px, color Onyx Shadow #0c1018. Followed by body text: Saans Regular, weight 380, 16px, line-height 1.3, letter-spacing -0.16px, color Onyx Shadow #0c1018.\n3. Implement a primary action button: text 'Sign me up', background rgba(153, 161, 175, 0.06), 90px border-radius, padding 16px vertical and 24px horizontal. Typography Saans Variable, weight 400, 16px, letter-spacing -0.16px, color Ebon Depth #000000.\n4. Generate a clean input field: background rgba(153, 161, 175, 0.06), 50px border-radius, padding 16px all sides. Placeholder text in Mist Gray #9e9fa3, typography Saans Medium, weight 570, 16px, color Onyx Shadow #0c1018.\n5. Create a standard link: text 'Artificial Intelligence', color Ebon Depth #000000, typography Saans Variable, weight 400, 14px, letter-spacing -0.14px. Underline on hover."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776009253135-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776009253135-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/2318d650-b229-4be0-9adc-9f17cecfd253-1777561865682-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/2318d650-b229-4be0-9adc-9f17cecfd253-1777561865682-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/2318d650-b229-4be0-9adc-9f17cecfd253-1777561865682-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/2318d650-b229-4be0-9adc-9f17cecfd253-1777561865682-preview-detail-poster.jpg"},"similarStyleIds":["703d69b7-2863-44fa-a443-2ac090db3873","d56508d7-c307-47f7-ad30-052e5a69f01f","ab1b113a-ed21-4512-acc2-d10c8927c410","c14bfde7-6f08-4b54-bd9b-39989d10cfef","fdc0f631-442c-466d-ab79-e1fff2bfdb7d","6c0b77d3-71f9-469d-98aa-4ce1d6d76ac8","4f76756b-0f06-47a3-baad-d3846b23e132","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","7bd31579-aec1-485c-91cf-72bbdfac40cd","274e85fb-a34d-4e41-9369-be03065b971b","ff8f39ee-a10e-4a9d-a94d-6993c6084060","5fd2cdc0-05ac-4290-b67c-72e7525a532c","db451eca-8de6-43a9-a5d5-35271befdffd","e869e214-f672-4ac3-bfc2-bd25de7b003b","4d4772a3-e1da-415f-a6d7-658dcefdcecd","9e3fde24-cc7d-4b96-a70a-7c172882aa8f","3e70af05-a07f-4c11-98ca-6ecb4765e967","6b667ffc-5158-4000-9252-3a107d5161ee","34baa524-5d5b-4165-bbab-d01f05e6d6b9","df452116-6b43-4963-991b-ebae892c8dc1"],"exports":{"designMdUrl":"/references/refero/2318d650-b229-4be0-9adc-9f17cecfd253/design.md","tokensJsonUrl":"/references/refero/2318d650-b229-4be0-9adc-9f17cecfd253/tokens.json","tailwindV4Url":"/references/refero/2318d650-b229-4be0-9adc-9f17cecfd253/tailwind-v4.css","cssVariablesUrl":"/references/refero/2318d650-b229-4be0-9adc-9f17cecfd253/tailwind-v4.css"}}