{"id":"c14bfde7-6f08-4b54-bd9b-39989d10cfef","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","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":"Render","summary":"Crisp canvas, gradient fireworks. A bright, white backdrop that provides contrast for a constellation of colorful gradients and powerful typography.","description":"This design system is a light, airy canvas punctuated by bold, evocative gradients and a vibrant, expansive color palette. The combination of clean, modern sans-serifs and a striking, multi-color gradient usage creates a dynamic yet professional atmosphere. Text is predominantly dark charcoal against a pristine white background, allowing the rich accent colors and gradients to highlight key information and interactive elements, giving the impression of a sophisticated, high-performance platform.","tags":["clean","modern","gradient-rich","high-contrast","developer-focused","vibrant-accents","sharp-edges","minimalist","expressive-typography"],"industry":"devtools","colorScheme":"light","colors":[{"name":"White Canvas","hex":"#ffffff","role":"Primary page and component backgrounds, offering a pristine, expansive base for content.","group":"neutral"},{"name":"Charcoal Text","hex":"#0d0d0d","role":"Primary text color for headlines and body copy, ensuring strong contrast against light backgrounds.","group":"neutral"},{"name":"Asphalt Gray","hex":"#272727","role":"Darker borders and subtle background elements, providing visual separation without harshness.","group":"neutral"},{"name":"Pebble Gray","hex":"#4d4d4d","role":"Secondary text, navigation items, and less prominent text, offering a softened contrast.","group":"neutral"},{"name":"Smoke Gray","hex":"#6b6b6b","role":"Tertiary text, subtle descriptions, and inactive states.","group":"neutral"},{"name":"Silver Lining","hex":"#e3e3e3","role":"Borders, dividers, and subtle background fills, establishing visual structure on cards and sections.","group":"neutral"},{"name":"Lavender Mist","hex":"#e6daff","role":"Lightest accent background for navigation states and contextual highlights.","group":"neutral"},{"name":"Arctic Blue Tint","hex":"#e0f4ff","role":"Background for specific informational sections or subtle visual separation.","group":"neutral"},{"name":"Grape Glow","hex":"#8a05ff","role":"Highlight elements, interactive states, and specific brand feature callouts – the primary accent color.","group":"accent"},{"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))"},{"name":"Digital Emerald","hex":"#009e7a","role":"Specific callouts and highlighted text/icons, indicating positive states or unique offerings.","group":"accent"},{"name":"Deep Plum","hex":"#48008c","role":"Link states and stronger purple accents, providing depth to interactive elements.","group":"accent"},{"name":"Crimson Spark","hex":"#e96770","role":"Highlighting specific sections and attention-grabbing elements, signaling urgency or novelty.","group":"accent"},{"name":"Candy Pink","hex":"#f347ff","role":"Secondary vibrant accent, used for diverse visual elements to add a playful yet modern touch.","group":"accent"},{"name":"Sky Surge","hex":"#33acff","role":"Secondary accent for active states and informational elements, providing a clear, bright contrast.","group":"accent"},{"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))"},{"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))"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.43,"letterSpacing":0.24},{"role":"body-sm","size":14,"lineHeight":1.4,"letterSpacing":0.14},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0.08},{"role":"subheading","size":18,"lineHeight":1.33},{"role":"heading-sm","size":20,"lineHeight":1.2,"letterSpacing":-0.2},{"role":"heading","size":24,"lineHeight":1.25},{"role":"heading-lg","size":32,"lineHeight":1.15,"letterSpacing":-0.48},{"role":"display","size":64,"lineHeight":1.08,"letterSpacing":-1.6}],"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."]},"components":[{"name":"Hero CTA Button Group","role":""},{"name":"Feature Steps — Click, click, done","role":""},{"name":"Announcement Banner + Pill Tags","role":""},{"name":"Primary Dark Button","role":"Call to Action"},{"name":"Outline Button","role":"Secondary Action"},{"name":"Text Link Button","role":"Tertiary Action"},{"name":"Header Navigation Item","role":"Primary Navigation"},{"name":"Hero Headline","role":"Page Title"},{"name":"Feature List Item Heading","role":"Section Sub-heading"},{"name":"Body Paragraph","role":"General Content"},{"name":"Pill Tag","role":"Metadata/Label"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text: `#0d0d0d` (Charcoal Text)\n- Background: `#ffffff` (White Canvas)\n- CTA Background: `#0d0d0d` (Charcoal Text)\n- CTA Text: `#ffffff` (White Canvas)\n- Border: `#e3e3e3` (Silver Lining)\n- Accent: `#8a05ff` (Grape Glow)\n\n### 3-5 Example Component Prompts\n1. **Create a hero section:** White background. Headline 'Your fastest path to production for' in Roobert, 64px, weight 400, #0d0d0d, letter-spacing -1.6px. Followed by 'apps & agents' using `linear-gradient(to right, rgb(138, 5, 255), rgb(214, 127, 46))` as foreground color, same font. Body text 'Intuitive infrastructure to scale any app or agent from your first user to your billionth.' in PPNeueMontreal, 18px, weight 400, #0d0d0d, line-height 1.33. Add a Primary Dark Button 'Start for free' and an Outline Button 'Get in touch'.\n2. **Generate a feature card:** White background, 0px border-radius, 20px padding. Title 'Select a service' in Roobert, 20px, weight 400, #0d0d0d, letter-spacing -0.2px. A numeric indicator '1' in Grape Glow (`#8a05ff`), size 24px. Body text 'Choose what you need to run your apps, APIs, agent logic, databases, cron jobs, and more.' in PPNeueMontreal, 16px, weight 400, #0d0d0d, line-height 1.5. Border-bottom of the card is Silver Lining (`#e3e3e3`).\n3. **Design a top navigation bar:** White background, 0px border-radius. Logo on the left, `#0d0d0d`. Navigation links 'Product', 'Pricing', 'Customers' using PPNeueMontreal, 14px, weight 500, #4d4d4d, line-height 1.25. On the far right, an Outline Button 'Sign In' and a Primary Dark Button 'Get Started'."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923263576-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923263576-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c14bfde7-6f08-4b54-bd9b-39989d10cfef-1777557372319-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c14bfde7-6f08-4b54-bd9b-39989d10cfef-1777557372319-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c14bfde7-6f08-4b54-bd9b-39989d10cfef-1777557372319-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c14bfde7-6f08-4b54-bd9b-39989d10cfef-1777557372319-preview-detail-poster.jpg"},"similarStyleIds":["fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","0c77bb2a-c7cd-499b-b5cd-90268eefe906","62b22816-2d98-4e98-9c17-bf600ddb2fc8","e050061c-346d-44cc-92ba-6b22beb4a91f","408a149c-702f-4442-99df-bea49d9c0d9b","9342e89b-c2fe-4acf-9993-53b44e0c13b5","e549766e-b8b1-48a2-bd72-8cc04e9e4e9d","12255b63-e506-4bc1-a4cd-d05487de32f3","123a15b8-4e17-4812-83ec-899cce45db5b","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","1287abc9-da90-410d-a997-96b8b11ad646","4caadb3c-3865-4a4d-9e1a-46478ac71078","60b529c2-c0f7-49be-9a77-8d3762838f05","4d0a5051-1c4c-4338-8406-2babdc97915c","e6a3facd-791c-4cc6-868d-2c6382d3cb0a","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","a76ec6ba-20b3-495c-9d89-1e58281e79e7","47c9e353-bed3-4d6c-8316-63a2db5cc377","c81d2be0-05b7-4755-8046-f2d19fbc448c"],"exports":{"designMdUrl":"/references/refero/c14bfde7-6f08-4b54-bd9b-39989d10cfef/design.md","tokensJsonUrl":"/references/refero/c14bfde7-6f08-4b54-bd9b-39989d10cfef/tokens.json","tailwindV4Url":"/references/refero/c14bfde7-6f08-4b54-bd9b-39989d10cfef/tailwind-v4.css","cssVariablesUrl":"/references/refero/c14bfde7-6f08-4b54-bd9b-39989d10cfef/tailwind-v4.css"}}