{"id":"2eab438d-32cd-40c2-b160-1e4127dac569","name":"Gleap","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/2eab438d-32cd-40c2-b160-1e4127dac569","originalSiteUrl":"https://gleap.io","capturedAt":"2026-04-30T02:31:49.218Z","colors":[{"name":"Cloud Canvas","hex":"#f5f2f0","role":"Primary page background, provides a soft, warm base for all content","group":"neutral","cssVariable":"--color-cloud-canvas"},{"name":"Porcelain Surface","hex":"#ffffff","role":"Card backgrounds, elevated content areas, ensuring high contrast with text","group":"neutral","cssVariable":"--color-porcelain-surface"},{"name":"Graphite Text","hex":"#333333","role":"Primary text color for body copy, links, and detailed information","group":"neutral","cssVariable":"--color-graphite-text"},{"name":"Ink Text","hex":"#000000","role":"Headlines, navigation items, and strong textual elements for maximum emphasis","group":"neutral","cssVariable":"--color-ink-text"},{"name":"Platinum Border","hex":"#d6d6d6","role":"Subtle borders and dividers for UI separation without harsh lines","group":"neutral","cssVariable":"--color-platinum-border"},{"name":"Silver Detail","hex":"#bcbcbc","role":"Muted helper text, secondary borders, and subtle accent lines","group":"neutral","cssVariable":"--color-silver-detail"},{"name":"Deep Plum","hex":"#7b7b7b","role":"Tertiary text, less prominent links and meta information","group":"neutral","cssVariable":"--color-deep-plum"},{"name":"Amethyst Accent","hex":"#f1ccff","role":"Primary action buttons, prominent links, and accents within cards — it’s the brand’s signature interaction color, signaling interactivity","group":"brand","cssVariable":"--color-amethyst-accent"},{"name":"Sky Blue Highlight","hex":"#91e0ff","role":"Decorative card backgrounds, highlighted sections or text within content — provides visual interest","group":"accent","cssVariable":"--color-sky-blue-highlight"}],"typography":[{"role":"Display headlines and prominent section titles. Its classical, editorial feel contrasts the modern sans-serifs, lending an authoritative yet approachable tone.","sizes":"48px, 62px","family":"PP Editorial New","weight":"400","weights":[400],"lineHeight":"1.20, 1.25, 1.30","substitute":"Playfair Display","letterSpacing":"normal"},{"role":"All body text, subheadings, labels, and functional UI elements. Its clean, geometric form maintains readability and directness across the interface. Letter spacing is subtly tightened at larger sizes for visual density.","sizes":"13px, 14px, 16px, 20px, 32px","family":"Switzer","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.19, 1.20, 1.40, 1.43, 1.44","substitute":"Inter","letterSpacing":"-0.025em for 32px, -0.020em for 20px, -0.010em for 16px, normal for 13-14px"},{"role":"Fallback and specific UI components where extreme simplicity and system-level rendering is preferred, such as internal tools or complex data displays.","sizes":"14px, 16px","family":"Arial","weight":"400","weights":[400],"lineHeight":"1.25, 1.43","substitute":"Roboto","letterSpacing":"normal"},{"role":"Used for highly compact labels or system messages where minimal footprint is critical.","sizes":"14px","family":"system-ui","weight":"400","weights":[400],"lineHeight":"1.00","substitute":"Segoe UI","letterSpacing":"normal"}],"spacing":{"radius":{"cards":"24px","badges":"10px","buttons":"10px","largeElements":"42px"},"elementGap":"16px","sectionGap":"30px","cardPadding":"40px","pageMaxWidth":"1200px"},"radius":{"cards":"24px","badges":"10px","buttons":"10px","largeElements":"42px"},"shadows":{"surfaces":[{"hex":"#f5f2f0","name":"Cloud Canvas","level":0,"purpose":"Base page background, creating a soft, warm foundation for the entire interface."},{"hex":"#ffffff","name":"Porcelain Surface","level":1,"purpose":"Default background for UI cards, panels, and other contained content blocks resting on the base canvas."}]},"guidelines":{"do":["Use PP Editorial New (weight 400) for all display headlines, setting them at 48px or 62px with normal letter spacing for an elevated, editorial feel.","Apply Switzer (weights 400, 500, 600) for all body text, subheadings, and UI labels, adjusting letter spacing to -0.010em for 16px, -0.020em for 20px, and -0.025em for 32px to maintain visual compactness.","Elevate primary calls-to-action with Amethyst Accent (#f1ccff) for backgrounds, paired with Ink Text (#000000) for readability.","Utilize a 10px border-radius for all buttons and badges, reserving 24px for cards and 42px for distinct large elements, to establish a consistent soft-rounded identity.","Maintain a clear visual hierarchy by using Ink Text (#000000) for critical headlines and bold elements, and Graphite Text (#333333) for standard body copy and descriptions.","Structure layout using a 1200px max-width container, centered on the Cloud Canvas (#f5f2f0) background, with a consistent 30px vertical gap between major sections.","Apply subtle elevation to key UI components like Product Feature Cards using rgba(0, 0, 0, 0.04) 0px 8px 16px 0px shadows, while keeping default backgrounds clean and shadow-less."],"dont":["Avoid using multiple chromatic colors for primary actions; Amethyst Accent (#f1ccff) is the singular brand color for interactive elements.","Do not introduce sharp corners or unrounded containers; enforce the 10px, 24px, or 42px border-radius system meticulously.","Refrain from using strong, colorful gradients or textures; the system thrives on clean, mostly flat surfaces and subtle, tonal backgrounds.","Do not deviate from the defined type scale and letter spacing values, particularly for headlines and body text, to preserve the distinct typographic voice.","Avoid overuse of shadows; reserve the rgba(0, 0, 0, 0.04) 0px 8px 16px 0px shadow for cards and key elevated components only, preventing visual clutter.","Do not introduce new border colors for UI elements; stick to Platinum Border (#d6d6d6) or Ink Text (#000000) for subtle separation.","Resist dense layouts; ensure generous use of the 16px elementGap and 40px cardPadding to maintain a comfortable reading experience and visual breathing room."]}}