{"id":"39098e34-b911-4ad3-bcb5-ee80a392cd95","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/39098e34-b911-4ad3-bcb5-ee80a392cd95","originalSiteUrl":"https://joinclyde.com","capturedAt":"2026-04-30T01:54:33.410Z","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":"Clyde","summary":"Iridescent gradients on obsidian glass","description":"Clyde deploys a dark, atmospheric interface punctuated by subtle gradients and an emphasis on dimensional product rendering. The design system uses sparse, highly contrasted typography with a blend of classic serif and modern grotesk fonts, creating a 'luxury tech' feel. Surfaces are dark, with elements softly lit by internal shadows and occasional, vibrant iridescent gradients. The overall density is comfortable, providing generous breathing room for content.","industry":"saas","colorScheme":"dark","colors":[{"name":"Midnight","hex":"#000000","role":"Page background, primary text on light surfaces, icon fills, strong borders","group":"neutral"},{"name":"Ghost Ash","hex":"#f6f6f4","role":"Primary text on dark backgrounds, ghost button text, accent borders, light surface elements","group":"neutral"},{"name":"Slate","hex":"#7d7d7d","role":"Secondary background surfaces, ghost button backgrounds, muted text","group":"neutral"},{"name":"White Smoke","hex":"#ffffff","role":"Subtle inset shadows, light accents","group":"neutral"},{"name":"Dark Charcoal","hex":"#1a1a1a","role":"Subtle dark borders","group":"neutral"},{"name":"Iridescent Glow","hex":"#ff8400","role":"Decorative gradient accent, hero product highlighting; Decorative gradient accent, hero product highlighting with vertical flow","group":"accent","gradient":"linear-gradient(90deg, rgb(254, 237, 122) 0%, rgb(255, 132, 0) 48.96%, rgb(223, 145, 247) 100%)"}],"typography":[{"role":"Display headlines and page titles — the large, highly tracked text creates a distinct, sophisticated visual statement.","sizes":"36px, 47px, 61px, 80px, 125px","family":"Recoleta","weight":"400","lineHeight":"1.00, 1.10","substitute":"Playfair Display","letterSpacing":"-0.0300em at 125px, -0.0200em at 80px, -0.0100em at 36px","fontFeatureSettings":"\"clig\", \"liga\""},{"role":"Body text, subheadings, and UI elements — its subtle tracking and modern sans-serif form balance the Recoleta headlines, providing clear readability.","sizes":"15px, 16px, 21px, 80px, 138px","family":"Oldschool Grotesk","weight":"300, 400","lineHeight":"1.00, 1.30, 1.40, 1.60","substitute":"Inter","letterSpacing":"-0.0300em at 138px, -0.0200em at 80px, 0.0100em at 15px","fontFeatureSettings":"\"clig\", \"liga\""},{"role":"System fallback for various UI elements where a classic serif provides visual texture.","sizes":"16px","family":"Times","weight":"400","lineHeight":"1.20, 1.25","substitute":"Times New Roman","letterSpacing":"normal","fontFeatureSettings":"\"clig\", \"liga\""}],"typeScale":[{"role":"body-sm","size":15,"lineHeight":1.6,"letterSpacing":0.15},{"role":"subheading","size":21,"lineHeight":1.4,"letterSpacing":0.21},{"role":"heading","size":36,"lineHeight":1.1,"letterSpacing":-0.36},{"role":"heading-lg","size":47,"lineHeight":1.1,"letterSpacing":-0.94},{"role":"display","size":61,"lineHeight":1.1,"letterSpacing":-1.22},{"role":"display-lg","size":80,"lineHeight":1,"letterSpacing":-1.6},{"role":"display-xl","size":125,"lineHeight":1,"letterSpacing":-3.75},{"role":"display-xxl","size":138,"lineHeight":1,"letterSpacing":-4.14}],"spacing":{"radius":{"cards":"16px","links":"12px","inputs":"4px","buttons":"100px","largeElements":"38px"},"elementGap":"20px","sectionGap":"50px","cardPadding":"22px"},"radius":{"cards":"16px","links":"12px","inputs":"4px","buttons":"100px","largeElements":"38px"},"shadows":{"surfaces":[{"hex":"#000000","name":"Midnight Canvas","level":0,"purpose":"Dominant page background, providing a deep, dark atmospheric base."},{"hex":"#7d7d7d","name":"Slate Module","level":1,"purpose":"Secondary background for cards and ghost buttons, offering a slightly lighter, distinct surface within the dark theme."}]},"guidelines":{"do":["Use Midnight (#000000) for all page backgrounds to maintain atmospheric depth.","Apply Recoleta for all primary headlines, leveraging its unique tracking values for distinct visual impact.","Implement 100px border-radius for all primary buttons to achieve a soft, pill-shaped aesthetic.","Employ the Iridescent Glow gradient (linear-gradient(90deg, #feed7a, #ff8400, #df91f7)) for any elements requiring unique visual emphasis or product highlights.","Ensure Ghost Ash (#f6f6f4) is the default text color on dark backgrounds, providing maximum contrast and legibility.","Maintain generous spacing with a base unit of 4px and elemental gaps around 20px, fostering a comfortable content density."],"dont":["Avoid harsh, solid borders or backgrounds, except for functional elements that require clear separation.","Do not use highly saturated colors for text except for specific accent elements; stick to Ghost Ash (#f6f6f4) and Midnight (#000000) for content.","Do not introduce sharp corners or small radii on interactive elements; favor the 16px and 100px radii for organic, approachable shapes.","Avoid generic system fonts for any primary heading or body text; always use Recoleta or Oldschool Grotesk.","Do not use explicit drop shadows for elevation; rely on subtle inset shadows (rgba(255, 255, 255, 0.25) 0px 0.636826px 3.82096px 0px inset) for depth on dark surfaces.","Do not introduce competing gradients; the Iridescent Glow is the signature gradient."]},"components":[{"name":"Ghost Header Button","role":"Navigation and secondary actions"},{"name":"Pill Button","role":"Primary Call to Action"},{"name":"Feature Card","role":"Content container for features or case studies"},{"name":"Large Radius Card","role":"Prominent content blocks"},{"name":"Inline Text Link","role":"Linked text within content"},{"name":"Announcement Bar Link","role":"High-visibility information link"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #f6f6f4\nbackground: #000000\nborder: #1a1a1a\naccent: #ff8400\nprimary action: no distinct CTA color\n\nExample Component Prompts:\n1. Create a hero section with a Midnight (#000000) background and an 'Iridescent Glow' gradient abstract visual. Headline: 'Protect the whole customer journey' using Recoleta, size 125px, weight 400, Ghost Ash (#f6f6f4), letter-spacing -3.75px. Subtext: 'Available at Amazon, eBay, Wayfair and thousands more stores.' using Oldschool Grotesk, size 16px, weight 400, Ghost Ash (#f6f6f4).\n2. Design a 'Pill Button' component: background Slate (#7d7d7d), text 'Request a Demo' in Ghost Ash (#f6f6f4), using Oldschool Grotesk, size 16px, weight 400. Apply a 100px border-radius and 22px padding all around.\n3. Implement a 'Feature Card': transparent background with inset shadow (rgba(255, 255, 255, 0.25) 0px 0.636826px 3.82096px 0px inset), 16px border-radius, and 10px padding. Content text: 'Hassle-free claims, instant payouts and global repairs' in Ghost Ash (#f6f6f4), Oldschool Grotesk, size 16px, weight 400.\n4. Create a top navigation bar: Midnight (#000000) background. 'Product' and 'Resources' links in Ghost Ash (#f6f6f4), Oldschool Grotesk, size 16px, weight 400, with 0px border-radius and transparent background (Ghost Header Button style). Include a 'Demo' button in the 'Pill Button' style from example 2."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777514052561-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777514052561-thumb.jpg"},"similarStyleIds":["1f204e95-454a-437e-845b-c1b169d35607","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","7b083729-e694-4b66-82a3-befb08451722","7f6799d9-0733-4523-9a94-036b9ad3bf28","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","9fecf7d6-b717-49ca-8edc-b10d6110b21c","4d4772a3-e1da-415f-a6d7-658dcefdcecd","9e5bd4b1-0ba8-4592-a5ec-a935bd4ea9c6","36752f78-1c43-471b-b125-e82152ad23dd","3389358b-68b2-4fca-82a8-52c07b3a3475","c3ceca5c-d329-4559-b947-016172941ba2","c81d2be0-05b7-4755-8046-f2d19fbc448c","4e1ac04c-02ae-41cf-b588-3f6226a882f8","ef7c4bc2-f75d-4198-8be3-52af5be494ac","733e6475-892a-4138-8835-bf40344df317","28e8e762-8d8c-4e88-84ed-858f9917cb58","34baa524-5d5b-4165-bbab-d01f05e6d6b9","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","30c3aa18-4323-4448-8ddd-3ca933fe5780"],"exports":{"designMdUrl":"/references/refero/39098e34-b911-4ad3-bcb5-ee80a392cd95/design.md","tokensJsonUrl":"/references/refero/39098e34-b911-4ad3-bcb5-ee80a392cd95/tokens.json","tailwindV4Url":"/references/refero/39098e34-b911-4ad3-bcb5-ee80a392cd95/tailwind-v4.css","cssVariablesUrl":"/references/refero/39098e34-b911-4ad3-bcb5-ee80a392cd95/tailwind-v4.css"}}