{"id":"c14bfde7-6f08-4b54-bd9b-39989d10cfef","name":"Render","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/c14bfde7-6f08-4b54-bd9b-39989d10cfef","originalSiteUrl":"https://render.com","capturedAt":"2026-04-11T16:01:27.213Z","colors":[{"name":"White Canvas","hex":"#ffffff","role":"Primary page and component backgrounds, offering a pristine, expansive base for content.","group":"neutral","cssVariable":"--color-white-canvas"},{"name":"Charcoal Text","hex":"#0d0d0d","role":"Primary text color for headlines and body copy, ensuring strong contrast against light backgrounds.","group":"neutral","cssVariable":"--color-charcoal-text"},{"name":"Asphalt Gray","hex":"#272727","role":"Darker borders and subtle background elements, providing visual separation without harshness.","group":"neutral","cssVariable":"--color-asphalt-gray"},{"name":"Pebble Gray","hex":"#4d4d4d","role":"Secondary text, navigation items, and less prominent text, offering a softened contrast.","group":"neutral","cssVariable":"--color-pebble-gray"},{"name":"Smoke Gray","hex":"#6b6b6b","role":"Tertiary text, subtle descriptions, and inactive states.","group":"neutral","cssVariable":"--color-smoke-gray"},{"name":"Silver Lining","hex":"#e3e3e3","role":"Borders, dividers, and subtle background fills, establishing visual structure on cards and sections.","group":"neutral","cssVariable":"--color-silver-lining"},{"name":"Lavender Mist","hex":"#e6daff","role":"Lightest accent background for navigation states and contextual highlights.","group":"neutral","cssVariable":"--color-lavender-mist"},{"name":"Arctic Blue Tint","hex":"#e0f4ff","role":"Background for specific informational sections or subtle visual separation.","group":"neutral","cssVariable":"--color-arctic-blue-tint"},{"name":"Grape Glow","hex":"#8a05ff","role":"Highlight elements, interactive states, and specific brand feature callouts – the primary accent color.","group":"accent","cssVariable":"--color-grape-glow"},{"name":"Sunset Violet","hex":"#d67f2","role":"Prominent headings and visual highlights, signifying importance and drawing immediate attention with its vibrant energy.","group":"brand","gradient":"linear-gradient(to right, rgb(138, 5, 255), rgb(214, 127, 46))","cssVariable":"--color-sunset-violet"},{"name":"Digital Emerald","hex":"#009e7a","role":"Specific callouts and highlighted text/icons, indicating positive states or unique offerings.","group":"accent","cssVariable":"--color-digital-emerald"},{"name":"Deep Plum","hex":"#48008c","role":"Link states and stronger purple accents, providing depth to interactive elements.","group":"accent","cssVariable":"--color-deep-plum"},{"name":"Crimson Spark","hex":"#e96770","role":"Highlighting specific sections and attention-grabbing elements, signaling urgency or novelty.","group":"accent","cssVariable":"--color-crimson-spark"},{"name":"Candy Pink","hex":"#f347ff","role":"Secondary vibrant accent, used for diverse visual elements to add a playful yet modern touch.","group":"accent","cssVariable":"--color-candy-pink"},{"name":"Sky Surge","hex":"#33acff","role":"Secondary accent for active states and informational elements, providing a clear, bright contrast.","group":"accent","cssVariable":"--color-sky-surge"},{"name":"Twilight Gradient","hex":"#8a05ff","role":"Used for hero sections and distinctive backgrounds, creating a sense of depth and advanced technology.","group":"brand","gradient":"linear-gradient(to right, rgb(28, 0, 55), rgb(42, 0, 82), rgb(226, 166, 110))","cssVariable":"--color-twilight-gradient"},{"name":"Radiant Purple to Pink","hex":"#9b52fb","role":"Used for specific interactive elements or visual flourishes, adding a dynamic and soft touch.","group":"accent","gradient":"linear-gradient(to right, rgb(157, 102, 255), rgb(251, 206, 255))","cssVariable":"--color-radiant-purple-to-pink"}],"typography":[{"role":"Headlines and prominent display text that require a strong, modern presence. The negative letter spacing at larger sizes creates a tight, impactful visual.","sizes":"20px, 32px, 40px, 48px, 56px, 64px, 80px","family":"Roobert","weight":"300, 400","lineHeight":"1.00, 1.05, 1.06, 1.07, 1.08, 1.10, 1.15, 1.20","substitute":"Inter","letterSpacing":"-0.03em at 80px, -0.025em at 64px, -0.02em at 56px, -0.015em at 48px, -0.01em at 40px"},{"role":"Body copy, navigation, buttons, and general UI text. Its clean, readable nature ensures clarity for all informational content.","sizes":"12px, 14px, 16px, 18px, 20px, 24px","family":"PPNeueMontreal","weight":"400, 500","lineHeight":"1.12, 1.21, 1.25, 1.33, 1.38, 1.40, 1.44, 1.50","substitute":"System UI","letterSpacing":"0.02em at 12px, 0.01em at 14px, 0.005em at 16px"},{"role":"Code snippets, technical labels, and specialized data display where monospaced precision is essential for alignment and clarity.","sizes":"11px, 12px, 14px","family":"PPNeueMontrealMono","weight":"400, 500","lineHeight":"1.27, 1.33, 1.43","substitute":"Space Mono","letterSpacing":"0.025em at 11px, 0.02em at 12px"}],"spacing":{"radius":{"tags":"937px","buttons":"0px","default":"0px"},"elementGap":"8px","sectionGap":"40px","cardPadding":"20px"},"radius":{"tags":"937px","buttons":"0px","default":"0px"},"guidelines":{"do":["Use Charcoal Text (`#0d0d0d`) for all primary text against white backgrounds to ensure AAA contrast.","Apply `borderRadius: 0px` for all standard buttons and cards to maintain a sharp, modern aesthetic.","Utilize `Roobert` for all headlines with negative letter spacing (`-0.03em` to `-0.01em`) to create a signature tight, impactful look.","Employ the `Grape Glow` (`#8a05ff`) as the primary accent for interactive elements and key numerical highlights.","Incorporate the linear brand gradients (e.g., `linear-gradient(to right, rgb(138, 5, 255), rgb(214, 127, 46))`) for high-impact headlines or distinctive background sections.","Maintain a clear visual hierarchy by consistently using `PPNeueMontreal` for body text and UI elements, with `16px` as a base font size.","Ensure all interactive elements have a clear hover state, typically darkening the text or background subtly as seen on navigation items."],"dont":["Do not introduce rounded corners other than `937px` for specific pill-shaped tags to maintain the sharp aesthetic.","Avoid using additional bright, highly saturated colors for backgrounds; reserve them for accents and gradients.","Do not deviate from the specified font families; PPNeueMontreal and Roobert define the typographic voice.","Do not use generic box shadows; elevation is primarily achieved through background color shifts and borders.","Avoid overuse of the vivid accent colors; their power comes from strategic placement to highlight key information.","Do not apply `letterSpacing: 0` to large headlines; the distinctive negative letter spacing of Roobert is crucial.","Do not use a solid background color for the 'apps & agents' portion of the main hero headline; it must retain its gradient fill."]}}