{"id":"39098e34-b911-4ad3-bcb5-ee80a392cd95","name":"Clyde","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","colors":[{"name":"Midnight","hex":"#000000","role":"Page background, primary text on light surfaces, icon fills, strong borders","group":"neutral","cssVariable":"--color-midnight"},{"name":"Ghost Ash","hex":"#f6f6f4","role":"Primary text on dark backgrounds, ghost button text, accent borders, light surface elements","group":"neutral","cssVariable":"--color-ghost-ash"},{"name":"Slate","hex":"#7d7d7d","role":"Secondary background surfaces, ghost button backgrounds, muted text","group":"neutral","cssVariable":"--color-slate"},{"name":"White Smoke","hex":"#ffffff","role":"Subtle inset shadows, light accents","group":"neutral","cssVariable":"--color-white-smoke"},{"name":"Dark Charcoal","hex":"#1a1a1a","role":"Subtle dark borders","group":"neutral","cssVariable":"--color-dark-charcoal"},{"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%)","cssVariable":"--color-iridescent-glow"}],"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\""}],"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."]}}