{"id":"c45b115b-dcb5-446d-8952-85aef740f8e4","name":"Retool","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/c45b115b-dcb5-446d-8952-85aef740f8e4","originalSiteUrl":"https://retool.com","capturedAt":"2026-04-29T23:05:34.544Z","colors":[{"name":"Obsidian Canvas","hex":"#151515","role":"Primary page background, dominant surface across all sections; Hero background gradient — warm amber-rust bleeds from bottom-left into near-black","group":"neutral","gradient":"radial-gradient(at -5% 105%, rgba(27, 46, 68, 0.5) 26%, rgba(51, 45, 43, 0.5) 44%, rgba(74, 43, 17, 0.5) 62%, rgba(73, 31, 22, 0.5) 66%, rgba(21, 21, 21, 0) 85%, rgba(21, 21, 21, 0.03) 100%)","cssVariable":"--color-obsidian-canvas"},{"name":"Void Black","hex":"#0e0e0e","role":"Deepest surface layer, card backgrounds that recede below canvas","group":"neutral","cssVariable":"--color-void-black"},{"name":"Ember Surface","hex":"#242424","role":"Raised card and panel backgrounds — one step above canvas","group":"neutral","cssVariable":"--color-ember-surface"},{"name":"Charcoal Rim","hex":"#3f403d","role":"Subtle borders and dividers on dark surfaces","group":"neutral","cssVariable":"--color-charcoal-rim"},{"name":"Copper Wire","hex":"#8b867f","role":"Mid-tone icon fills, decorative borders, muted surface accents","group":"neutral","cssVariable":"--color-copper-wire"},{"name":"Ash Text","hex":"#94958e","role":"Secondary body text, nav subtitles, helper labels","group":"neutral","cssVariable":"--color-ash-text"},{"name":"Fog Text","hex":"#cbccc4","role":"Subheadings, supporting body copy, secondary headings","group":"neutral","cssVariable":"--color-fog-text"},{"name":"Limestone","hex":"#b6b8af","role":"Tertiary text, eyebrow labels, captions","group":"neutral","cssVariable":"--color-limestone"},{"name":"Parchment","hex":"#e9ebdf","role":"Primary text, headline color, outlined button borders and text, pill button fill — slightly warm off-white that softens the contrast against near-black ground","group":"neutral","cssVariable":"--color-parchment"},{"name":"Forest Deep","hex":"#185849","role":"Decorative background wash — large-area teal tint used as atmospheric section color","group":"brand","cssVariable":"--color-forest-deep"},{"name":"Midnight Moss","hex":"#0e352c","role":"Deeper teal wash, badge and label backgrounds in forest green","group":"brand","cssVariable":"--color-midnight-moss"},{"name":"Spectrum Shimmer","hex":"#e87650","role":"Animated text shimmer gradient — parchment transitions through coral and steel blue, used on select highlight phrases","group":"accent","gradient":"linear-gradient(90deg, rgb(233, 235, 223) 0%, rgb(233, 235, 223) 40%, rgb(232, 118, 94) 50%, rgb(81, 141, 210) 58%, rgba(233, 235, 223, 0.4) 64%, rgba(233, 235, 223, 0.4) 100%)","cssVariable":"--color-spectrum-shimmer"}],"typography":[{"role":"Primary typeface for all display, heading, body, and UI text. Weight 300 at 60-72px is anti-conventional — most platforms use 600-700 for hero text; the thin weight creates authority through mass (huge scale) rather than stroke weight. Weight 380 handles body and subheadings. Weight 570 for labels and small UI. Custom font unavailable externally.","sizes":"14px, 16px, 18px, 24px, 32px, 36px, 48px, 60px, 72px","family":"saansFont","weight":"300, 380, 570","lineHeight":"1.00 at 60-72px, 1.05 at 36-48px, 1.20 at 18-32px, 1.50 at 14-16px","substitute":"Inter, DM Sans","letterSpacing":"-0.022em at 72px (~-1.58px), -0.020em at 60px (~-1.2px), -0.010em at 36-48px, +0.010em to +0.020em at 12-14px small caps/labels","fontFeatureSettings":"\"ss01\" likely active for custom character alternates"},{"role":"Monospace-adjacent label font for nav, micro-copy, tags, and icon captions. The slight +0.010em tracking at small sizes distinguishes it from body text — reads like interface chrome rather than content.","sizes":"12px, 14px","family":"pxGroteskFont","weight":"400","lineHeight":"1.00, 1.20","substitute":"Space Grotesk, Geist","letterSpacing":"+0.010em at 12-14px (~+0.12-0.14px)"},{"role":"Fallback system font for utility text, form inputs, and browser-native UI elements. Not a designed choice — appears only as system default context.","sizes":"16px","family":"ui-sans-serif","weight":"400","lineHeight":"1.50","substitute":"System UI stack"}],"spacing":{"radius":{"cards-large":"12px","pills-large":"36px","tags-badges":"4px","buttons-pill":"9999px","cards-default":"8px","buttons-square":"0px"},"elementGap":"8-16px","sectionGap":"80-120px","cardPadding":"24px","pageMaxWidth":"1200px"},"radius":{"cards-large":"12px","pills-large":"36px","tags-badges":"4px","buttons-pill":"9999px","cards-default":"8px","buttons-square":"0px"},"shadows":{"philosophy":"Retool uses zero box-shadows throughout the UI. Depth is communicated entirely through surface color: #0e0e0 recedes, #151515 is ground, #242424 floats. Cards are literally lighter or darker patches of the same material — no light source simulation, no blur halos. This creates a flat-material depth system where hierarchy is read through luminance steps rather than shadow casting.","surfaces":[{"hex":"#0e0e0","name":"Void","level":0,"purpose":"Deepest background — recessed panels, testimonial blocks, elements that should feel inset below canvas"},{"hex":"#151515","name":"Canvas","level":1,"purpose":"Dominant page background — the ground all content sits on"},{"hex":"#242424","name":"Raised","level":2,"purpose":"Card surfaces, panel backgrounds, interactive tiles — lifted above canvas by lightness alone"},{"hex":"#185849","name":"Teal Wash","level":3,"purpose":"Atmospheric section tint — used as a large-area background color wash to signal a distinct content zone"}]},"guidelines":{"do":["Use #151515 as the default page background for all new pages and sections — never use pure black (#000000) or white.","Set all display and large headings (48px+) in saansFont weight 300 with letter-spacing between -0.020em and -0.022em — this compressed, light-weight combination is the signature headline treatment.","Use 9999px border-radius only for pill CTAs ('Book a demo', 'Start for free') and 0px for all other buttons — the binary radius grammar is intentional.","Apply #e9ebdf (Parchment) for all primary text, primary borders, and filled CTA backgrounds — this warm off-white is the system's single 'bright' color.","Elevate cards using background #242424 against canvas #151515 with no shadow — a 1px solid #3f403d border is optional for additional definition.","Use pxGroteskFont 400 12-14px at +0.013em tracking for all eyebrow labels, nav items, and micro-UI text — distinct from saansFont body text.","Apply the hero radial gradient (amber-rust from bottom-left fading to transparent over #151515) only on full-viewport hero sections — not on inner content panels."],"dont":["Never use saturated chromatic colors (#518dd2 blue, #e8765 coral, #9874d2 purple) as interface chrome — they exist only inside the animated shimmer text and illustration/3D renders.","Never add box-shadow to cards or panels — shadows break the flat-material surface system; use background lightness shifts instead.","Never mix square-corner buttons with pill buttons in the same row — choose one context and maintain it (nav uses pill, inline content uses square/ghost).","Never set heading text above 32px in weight 570 — the bold weight is reserved for small labels; large text must use 300 or 380.","Never use pure white (#ffffff) as a text or background color — all 'white' in this system is Parchment (#e9ebdf), which carries a warm gray-green tint.","Never increase section background saturation beyond the muted teal washes (#185849, #0e352c) — the entire page should register as near-achromatic at a glance.","Never apply border-radius values between 1px and 7px for buttons — the system only uses 0px or 9999px for button shapes."]}}