{"id":"c45b115b-dcb5-446d-8952-85aef740f8e4","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","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":"Retool","summary":"Warm obsidian workshop — a precision tool surface lit by ember glow, where everything is built.","description":"Retool operates on a near-black canvas — #151515 as the dominant ground — with off-white text (#e9ebdf) that reads more like parchment than pure white, giving the dark surface a warm, organic quality rather than a cold tech-void. Typography is the primary design tool: the custom 'saansFont' runs from weight 300 at 72px down to 380 at body sizes, with aggressive negative tracking at large scales creating compressed, authoritative headlines that feel proprietary. Surface depth is achieved through a three-step stack (#0e0e0 → #151515 → #242424) with no shadows — cards are literally darker or lighter slabs of the same material, not elevated objects. The only chromatic punctuation is muted teal (#185849, #0e352c) used as subtle background washes, while the hero gradient bleeds warm earthy tones (amber-rust into near-black) from the bottom-left, creating atmospheric depth without visual noise. Buttons are square-cornered or pill-cornered depending on context — no in-between — reinforcing a binary, decisive visual grammar.","industry":"devtools","colorScheme":"dark","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%)"},{"name":"Void Black","hex":"#0e0e0e","role":"Deepest surface layer, card backgrounds that recede below canvas","group":"neutral"},{"name":"Ember Surface","hex":"#242424","role":"Raised card and panel backgrounds — one step above canvas","group":"neutral"},{"name":"Charcoal Rim","hex":"#3f403d","role":"Subtle borders and dividers on dark surfaces","group":"neutral"},{"name":"Copper Wire","hex":"#8b867f","role":"Mid-tone icon fills, decorative borders, muted surface accents","group":"neutral"},{"name":"Ash Text","hex":"#94958e","role":"Secondary body text, nav subtitles, helper labels","group":"neutral"},{"name":"Fog Text","hex":"#cbccc4","role":"Subheadings, supporting body copy, secondary headings","group":"neutral"},{"name":"Limestone","hex":"#b6b8af","role":"Tertiary text, eyebrow labels, captions","group":"neutral"},{"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"},{"name":"Forest Deep","hex":"#185849","role":"Decorative background wash — large-area teal tint used as atmospheric section color","group":"brand"},{"name":"Midnight Moss","hex":"#0e352c","role":"Deeper teal wash, badge and label backgrounds in forest green","group":"brand"},{"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%)"}],"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"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.2,"letterSpacing":0.12},{"role":"body-sm","size":14,"lineHeight":1.5,"letterSpacing":0.14},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0},{"role":"subheading","size":18,"lineHeight":1.2,"letterSpacing":-0.18},{"role":"heading-sm","size":24,"lineHeight":1.2,"letterSpacing":-0.24},{"role":"heading","size":36,"lineHeight":1.05,"letterSpacing":-0.36},{"role":"heading-lg","size":48,"lineHeight":1.05,"letterSpacing":-0.48},{"role":"display","size":72,"lineHeight":1,"letterSpacing":-1.58}],"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."]},"components":[{"name":"Announcement Bar + CTA Button Group","role":""},{"name":"Stat / Social Proof Cards","role":""},{"name":"Feature Section Card — AppGen","role":""},{"name":"Pill Button — Filled","role":"Primary call-to-action (e.g. 'Book a demo', 'Get early access')"},{"name":"Ghost Button — Square","role":"Secondary actions, nav-level text links with visible border"},{"name":"Dark Surface Button — Square","role":"Section-level actions embedded in dark content cards"},{"name":"Muted Ghost Button","role":"Tertiary actions, low-emphasis interactive text"},{"name":"Raised Card","role":"Feature cards, integration tiles, content panels"},{"name":"Deep Card","role":"Full-bleed content sections, testimonial panels"},{"name":"Eyebrow Label","role":"Section category labels above headlines (e.g. 'AppGen for the enterprise')"},{"name":"Beta Badge","role":"Status tags, 'Public Beta' announcement strip"},{"name":"Announcement Bar","role":"Global top-of-page announcement strip"},{"name":"Navigation Bar","role":"Sticky top navigation"},{"name":"Logo Grid Row","role":"Social proof customer logo strip"},{"name":"Integration Icon Bubble","role":"Integration/connector showcase icons in hero grid"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text (primary): #e9ebdf\n- text (secondary): #cbccc4\n- text (tertiary): #94958e\n- background (canvas): #151515\n- background (card): #242424\n- background (deep): #0e0e0e\n- border (default): #3f403d\n- border (subtle): rgba(233,235,223,0.12)\n- brand accent (teal wash): #185849\n- primary action: #242424 (filled action)\n\n**Example Component Prompts**\n\n1. **Hero Section**: Full-viewport background #151515 with radial gradient from bottom-left (rgba(74,43,17,0.5) → transparent). Headline 'Build how you want.' at 72px saansFont weight 300, color #e9ebdf, letter-spacing -1.58px, line-height 1.0. Second headline line same treatment. Subtext at 18px saansFont weight 380, color #cbccc4, line-height 1.2.\n\n2. **Navigation Bar**: Background #151515, backdrop-filter blur(4px), height 60px, border-bottom 1px solid #3f403d. Logo left. Nav links center: pxGroteskFont 400 14px #94958e. Right side: 'Sign in' text link #e9ebdf, then 'Book a demo' ghost pill (border 1px solid #e9ebdf, transparent bg, #e9ebdf text, 9999px radius, padding 8px 16px), then 'Start for free' filled pill (#e9ebdf background, #151515 text, 9999px radius, padding 8px 16px).\n\n3. **Feature Card**: Background #242424, border-radius 12px, padding 24px, no box-shadow. Eyebrow label pxGroteskFont 400 12px #b6b8af letter-spacing +0.013em. Heading saansFont 380 24px #e9ebdf letter-spacing -0.24px. Body text saansFont 380 16px #cbccc4 line-height 1.5. Optional 1px border solid #3f403d.\n\n4. **Announcement Bar**: Full-width background #151515 with slight #0e352c teal tint, height 40px, border-bottom 1px solid #3f403d. Text: pxGroteskFont 400 14px #e9ebdf. Badge: background #0e352c, text #e9ebdf, border-radius 4px, padding 2px 6px. Followed by linked text 'Learn more ↗' in #cbccc4.\n\n5. **Logo Strip (Social Proof)**: Section background #151515, full-bleed width. Logos in a horizontal flex row with 40-48px gaps. All logos recolored to #e9ebdf fill (SVG currentColor or CSS filter). No card containers, no borders — logos float directly on canvas surface at roughly 32-40px height."},{"title":"Motion & Animation","content":"Retool uses expressive, deliberate motion. Primary easing is cubic-bezier(0.72, 0, 0.12, 1) — a fast-out slow-in curve that feels mechanical and intentional, like a precision instrument snapping into place. Duration hierarchy: 0.6s for major section transitions, 0.4s for component reveals, 0.2-0.3s for hover states. The shimmer text animation (PromptAction shimmer) uses a linear-gradient swept horizontally across headline text, transitioning through coral (#e8765e) and steel blue (#518dd2) — reserved for single high-emphasis phrases only. Commonly transitioned properties: opacity, transform (typically translateY), color, border-color, fill/stroke. Avoid animating background-color on large surfaces — transitions on text, borders, and opacity only."},{"title":"Gradient System","content":"Three distinct gradient types serve different purposes:\n\n1. **Hero Atmosphere Gradient** (ambient background): radial-gradient from bottom-left corner — muted amber/rust/navy tones at 50% opacity layered over #151515 canvas. Creates warmth without saturation. Applied only on the primary hero viewport section.\n\n2. **Shimmer Text Gradient** (animated accent): linear-gradient(90deg) sweeping parchment → coral (#e8765e) → steel blue (#518dd2) → parchment. Applied as a background-clip:text animation on select headline words. This is the only place where chromatic color appears as a designed UI element.\n\n3. **Tonal Spectrum Gradient** (decorative): linear-gradient from forest green through violet to lavender-blue — appears in illustration/decorative contexts, never as page background.\n\nAll gradients either start or terminate in #151515 or transparent — they emerge from and dissolve back into the canvas rather than creating hard color blocks."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777503779439-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777503779439-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c45b115b-dcb5-446d-8952-85aef740f8e4-1777567538461-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c45b115b-dcb5-446d-8952-85aef740f8e4-1777567538461-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c45b115b-dcb5-446d-8952-85aef740f8e4-1777567538461-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/c45b115b-dcb5-446d-8952-85aef740f8e4-1777567538461-preview-detail-poster.jpg"},"similarStyleIds":["3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","7b083729-e694-4b66-82a3-befb08451722","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","8601c8ef-e1ea-4186-adb2-6f9a74caf436","ac14ea36-ea3e-4a25-bd16-11fb50d806fb","c81d2be0-05b7-4755-8046-f2d19fbc448c","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","4d4772a3-e1da-415f-a6d7-658dcefdcecd","733e6475-892a-4138-8835-bf40344df317","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","90ce5883-bb24-4466-93f7-801cd617b0d1","6323a42b-3b47-4774-92e4-15651a9ba2ac","e869e214-f672-4ac3-bfc2-bd25de7b003b","d16b85ee-0bbc-4030-9190-71e1408ff119","c3ceca5c-d329-4559-b947-016172941ba2","607c2098-bbbb-40bb-b23e-adf2b72c63dd","461da0f0-fde6-46bc-8137-7eca006260a8","720c9806-2d70-4dd1-9a19-12efd71fc742","3f296d6e-6a1c-45db-829b-afb078d49ab4"],"exports":{"designMdUrl":"/references/refero/c45b115b-dcb5-446d-8952-85aef740f8e4/design.md","tokensJsonUrl":"/references/refero/c45b115b-dcb5-446d-8952-85aef740f8e4/tokens.json","tailwindV4Url":"/references/refero/c45b115b-dcb5-446d-8952-85aef740f8e4/tailwind-v4.css","cssVariablesUrl":"/references/refero/c45b115b-dcb5-446d-8952-85aef740f8e4/tailwind-v4.css"}}