{"id":"e869e214-f672-4ac3-bfc2-bd25de7b003b","name":"Base44","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","colors":[{"name":"Canvas Pearl","hex":"#faf9f7","role":"Page backgrounds, subtle card surfaces","group":"neutral","cssVariable":"--color-canvas-pearl"},{"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","cssVariable":"--color-snowdrift-white"},{"name":"Ink Black","hex":"#000000","role":"Primary text, prominent headings, strong borders","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Graphite Text","hex":"#232529","role":"Secondary text, input placeholder text, subtle borders","group":"neutral","cssVariable":"--color-graphite-text"},{"name":"Slate Gray","hex":"#324158","role":"Dividers, subtle accent borders on cards","group":"neutral","cssVariable":"--color-slate-gray"},{"name":"Stone Whisper","hex":"#696f7b","role":"Muted body text, supportive captions, subtle input backgrounds","group":"neutral","cssVariable":"--color-stone-whisper"},{"name":"#e6e6e6","hex":"#e6e6e6","role":"Backgrounds for decorative elements and subtle section dividers","group":"neutral","cssVariable":"--color-token"},{"name":"Ash Border","hex":"#cfcfcf","role":"Default button borders, light input borders","group":"neutral","cssVariable":"--color-ash-border"},{"name":"Lime Spritz","hex":"#ade900","role":"Primary action button borders, 'Start Building' button accent","group":"brand","cssVariable":"--color-lime-spritz"},{"name":"Light Lime","hex":"#ebffb1","role":"Selected item background, subtle brand highlights","group":"brand","cssVariable":"--color-light-lime"},{"name":"Sunset Orange","hex":"#d8723c","role":"Outlined action button borders for prompts","group":"accent","cssVariable":"--color-sunset-orange"},{"name":"Blazing Orange","hex":"#ff631f","role":"Decorative illustration accents, brand iconography","group":"brand","cssVariable":"--color-blazing-orange"},{"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%)","cssVariable":"--color-sky-dream-gradient"},{"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%)","cssVariable":"--color-warm-horizon-gradient"}],"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"}],"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."]}}