{"id":"e869e214-f672-4ac3-bfc2-bd25de7b003b","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/e869e214-f672-4ac3-bfc2-bd25de7b003b","originalSiteUrl":"https://base44.com","capturedAt":"2026-04-29T00:09:54.093Z","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":"Base44","summary":"Softly Lit Gradient Canvas","description":"The Base44 design system feels like a softly lit, expansive workspace, where ideas emerge clearly against a gentle, optimistic backdrop. Pastel gradients and a predominant off-white canvas create an airy, unburdened atmosphere. Subtle dark gray text and muted interactive elements ensure focus remains on content creation, while distinct, vibrant accents like lime green and vivid orange are used sparingly for key actions, adding a precise, almost signal-like pop of functionality. Rounded corners on interactive components juxtapose with the generally crisp, unadorned typography, softening the technical edge of an AI platform.","industry":"ai","colorScheme":"light","colors":[{"name":"Canvas Pearl","hex":"#faf9f7","role":"Page backgrounds, subtle card surfaces","group":"neutral"},{"name":"Snowdrift White","hex":"#ffffff","role":"Observed in link borderColor, other backgroundColor, button borderColor. Extracted usage does not support a distinct primary control color.","group":"neutral"},{"name":"Ink Black","hex":"#000000","role":"Primary text, prominent headings, strong borders","group":"neutral"},{"name":"Graphite Text","hex":"#232529","role":"Secondary text, input placeholder text, subtle borders","group":"neutral"},{"name":"Slate Gray","hex":"#324158","role":"Dividers, subtle accent borders on cards","group":"neutral"},{"name":"Stone Whisper","hex":"#696f7b","role":"Muted body text, supportive captions, subtle input backgrounds","group":"neutral"},{"name":"#e6e6e6","hex":"#e6e6e6","role":"Backgrounds for decorative elements and subtle section dividers","group":"neutral"},{"name":"Ash Border","hex":"#cfcfcf","role":"Default button borders, light input borders","group":"neutral"},{"name":"Lime Spritz","hex":"#ade900","role":"Primary action button borders, 'Start Building' button accent","group":"brand"},{"name":"Light Lime","hex":"#ebffb1","role":"Selected item background, subtle brand highlights","group":"brand"},{"name":"Sunset Orange","hex":"#d8723c","role":"Outlined action button borders for prompts","group":"accent"},{"name":"Blazing Orange","hex":"#ff631f","role":"Decorative illustration accents, brand iconography","group":"brand"},{"name":"Sky Dream Gradient","hex":"#F2F1ED","role":"Hero section background","group":"brand","gradient":"linear-gradient(rgb(242, 241, 237) 42.49%, rgb(213, 223, 224) 93.98%, rgb(229, 255, 148) 104.08%)"},{"name":"Warm Horizon Gradient","hex":"#FBFBFB","role":"Hero section background","group":"brand","gradient":"linear-gradient(rgba(251, 250, 248, 0) 0%, rgba(255, 240, 222, 0.3) 18.28%, rgb(255, 174, 83) 43.58%, rgb(255, 127, 71) 55.6%, rgba(255, 174, 83, 0) 80.7%)"}],"typography":[{"role":"Small functional text like captions, utility links, and fine print. The system font choice maintains legibility at small sizes.","sizes":"10px, 13px, 14px","family":"Arial","weight":"400","lineHeight":"1.20","substitute":"Arial"},{"role":"Display and Major Headings — its generous letter spacing and fluid line heights give large text a soft, open presence.","sizes":"22px, 24px, 34px, 51px, 55px, 56px, 63px","family":"wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39","weight":"400","lineHeight":"0.90, 1.00, 1.07, 1.10, 1.40","substitute":"system-ui"},{"role":"Section headings and content titles — slightly more structured than display text, maintaining readability without feeling dense.","sizes":"16px, 20px, 28px, 30px, 42px","family":"wfont_343a2a_4e484da66ffc4465a05a1c9ea5caf495","weight":"400","lineHeight":"1.00, 1.20, 1.30","substitute":"system-ui"},{"role":"Body text and user input fields — consistent letter spacing across weights ensures clarity in both continuous prose and short UI labels.","sizes":"12px, 14px, 16px, 18px","family":"wix-madefor-text-v2","weight":"400, 500, 600, 700","lineHeight":"1.20, 1.30, 1.40, 1.50, 1.60","substitute":"system-ui","letterSpacing":"0.1em"},{"role":"Navigation and button labels — a steady weight for interactive elements that need to be clear and inviting.","sizes":"16px","family":"Madefor-Text","weight":"400","lineHeight":"1.20","substitute":"system-ui"},{"role":"Microcopy and specialized decorative text, offering a distinctive voice for minor elements.","sizes":"10px","family":"Madefor-Display","weight":"400","lineHeight":"1.20","substitute":"system-ui"},{"role":"wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39 — detected in extracted data but not described by AI","sizes":"22px, 24px, 34px, 51px, 55px, 56px, 63px","family":"wfont_343a2a_5b4cd32fc19d46e1b8c1b142abb27d39","weight":"400","lineHeight":"0.9, 1, 1.07, 1.1, 1.4"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.2},{"role":"body","size":14,"lineHeight":1.2,"letterSpacing":0.1},{"role":"heading-sm","size":20,"lineHeight":1.2},{"role":"heading","size":28,"lineHeight":1.3},{"role":"heading-lg","size":42,"lineHeight":1.3},{"role":"display","size":56,"lineHeight":1.07}],"spacing":{"radius":{"cards":"7.42183px","small":"3px","buttons":"999px","default":"9.89577px","compact-buttons":"300px","decorative-large":"741.445px","prominent-elements":"13.8541px"},"elementGap":"10px","sectionGap":"45px","cardPadding":"40px"},"radius":{"cards":"7.42183px","small":"3px","buttons":"999px","default":"9.89577px","compact-buttons":"300px","decorative-large":"741.445px","prominent-elements":"13.8541px"},"shadows":{"surfaces":[{"hex":"#faf9f7","name":"Canvas Pearl","level":0,"purpose":"Base page background"},{"hex":"#ffffff","name":"Snowdrift White","level":1,"purpose":"Primary surface for cards, inputs, and interactive elements"}]},"guidelines":{"do":["Use Canvas Pearl #faf9f7 for primary page backgrounds to maintain an airy feel.","Apply Snowdrift White #ffffff for card surfaces and interactive elements to create soft contrast and elevation against the canvas.","Reserve Ink Black #000000 for primary text and headings, ensuring high readability.","Implement Ghost Button styling with a 1px Ash Border #cfcfcf and 999px border-radius for secondary actions.","Utilize Lime Spritz #ade900 for CTA button borders and key interactive indicators, contrasting with the soft neutrals.","Maintain a comfortable information density using an average elementGap of 10px and sectionGap of 45px.","Employ the 999px border-radius for all primary buttons and tags to deliver a consistent, rounded interactive experience."],"dont":["Avoid using saturated background colors for large sections; gradients should remain pastel and subtle.","Do not use dark text colors on anything but light backgrounds to preserve contrast and system aesthetic.","Do not introduce sharp corners on interactive elements; prefer soft rounding (999px or 9.89577px) for buttons and inputs.","Do not apply prominent box shadows for elevation; rely on subtle background color shifts or the single rgba(34, 40, 42, 0.04) 0px 3px 10px 0px for modals.","Avoid introducing additional vivid colors outside of Lime Spritz #ade900 and Sunset Orange #d8723c to maintain focused accents.","Do not break the established type scale; ensure all text adheres to defined sizes, weights, and line heights for consistent rhythm.","Avoid using complex or busy background imagery; prefer soft gradients or solid colors that allow UI elements to stand out."]},"components":[{"name":"Hero Input with Suggestion Pills","role":""},{"name":"Feature Section Card","role":""},{"name":"Button Group + CTA Variants","role":""},{"name":"Primary Navigation Link","role":"Interactive element"},{"name":"Header CTA Button","role":"Primary Call to Action"},{"name":"Ghost Button","role":"Secondary action"},{"name":"Feature Card","role":"Content container"},{"name":"Input Field","role":"Data entry"},{"name":"Suggestion Pill Button","role":"Interactive filter/suggestion"},{"name":"New Feature Tag","role":"Informational label"},{"name":"Toggle Switch","role":"Binary control"},{"name":"Text Input Button","role":"Secondary Call to Action"},{"name":"Modal Card","role":"Overlay content"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \n- text: #000000\n- background: #faf9f7\n- border: #cfcfcf\n- accent: #ade900\n- primary action: #ebffb1 (filled action)\n\nExample Component Prompts:\n1. Create a Primary Action Button: #ebffb1 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n2. Develop a Header CTA Button: background Light Lime #ebffb1, border 1px solid Lime Spritz #ade900, text 'Start Building' using Madefor-Text at 16px weight 400, Ink Black #000000. Apply a 999px border-radius. Padding 0px vertical, 16px horizontal.\n3. Design an Input Field: background Snowdrift White #ffffff, text Graphite Text #232529. Border is transparent. Padding 15px top, 3px bottom, 10px right, 24px left.\n4. Construct a Feature Card: background Snowdrift White #ffffff, border-radius 7.42183px. No box shadow. Padding 0px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777421369053-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777421369053-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e869e214-f672-4ac3-bfc2-bd25de7b003b-1777562967062-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e869e214-f672-4ac3-bfc2-bd25de7b003b-1777562967062-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e869e214-f672-4ac3-bfc2-bd25de7b003b-1777562967062-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e869e214-f672-4ac3-bfc2-bd25de7b003b-1777562967062-preview-detail-poster.jpg"},"similarStyleIds":["c60a19c1-259a-4001-95d9-6a3826f5c06e","742b500d-3e10-4daa-bb89-d0d26272e5f6","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","90ce5883-bb24-4466-93f7-801cd617b0d1","607c2098-bbbb-40bb-b23e-adf2b72c63dd","c14bfde7-6f08-4b54-bd9b-39989d10cfef","41547c7a-3bbe-49f0-95d6-9701c9df9a5e","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","fe955d4a-c56d-4ab0-a6b3-8d985ab9570c","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","418b374a-be64-44f0-b17e-1d45308c7e62","7b083729-e694-4b66-82a3-befb08451722","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","a76ec6ba-20b3-495c-9d89-1e58281e79e7","2b6642d9-fa66-4c06-9804-30f56e544a6d","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","123a15b8-4e17-4812-83ec-899cce45db5b","031056ff-7af1-46db-8daa-115f731c5d26","75c06591-34d2-493a-bd49-70551b5e4a53","c5326639-873a-4257-ad1a-7da9111e9286"],"exports":{"designMdUrl":"/references/refero/e869e214-f672-4ac3-bfc2-bd25de7b003b/design.md","tokensJsonUrl":"/references/refero/e869e214-f672-4ac3-bfc2-bd25de7b003b/tokens.json","tailwindV4Url":"/references/refero/e869e214-f672-4ac3-bfc2-bd25de7b003b/tailwind-v4.css","cssVariablesUrl":"/references/refero/e869e214-f672-4ac3-bfc2-bd25de7b003b/tailwind-v4.css"}}