Retool

Overview

Retool is an enterprise-grade internal tools platform that embodies a philosophy of 'Technical Minimalism'—where sophisticated functionality is expressed through restrained, purposeful design. The visual language prioritizes clarity and speed: a near-black canvas (#151515) with warm, off-white text (#e9ebdf) creates high contrast for readability, while strategic accent colors (a cool blue #518dd2 for primary actions, a deep crimson #c72844 for warnings) provide visual hierarchy without distraction. The aesthetic is deliberately austere, evoking the precision of engineering dashboards and the confidence of enterprise software—users trust Retool because the interface gets out of the way. The brand personality is direct, technical, and unapologetically professional: voice is concise and jargon-aware, never patronizing. Example: 'Connect any database. Query in milliseconds. Deploy in minutes.'

Colors

The color system is built on a dark-first foundation with three distinct accent roles. **Primary surface** (#151515, rgb(21, 21, 21)) anchors the entire interface—it is the page background and the dominant container color, chosen for reduced eye strain in enterprise environments and to emphasize content. **On-surface text** (#e9ebdf, rgb(233, 235, 223)) is a warm off-white that sits atop the dark surface with a luminance contrast ratio of 16:1, exceeding WCAG AAA standards. **Primary action color** (#d9d9d9, rgb(217, 217, 217)) is a light gray used exclusively for primary CTAs ('Book a demo', 'Start for free') and interactive elements; it is not a neutral but a deliberate accent that draws the eye. **Secondary accent** (#518dd2, rgb(81, 141, 210)) is a cool blue reserved for secondary acti

Typography

The type system employs a two-family strategy: **Saans** (a geometric sans-serif) is reserved for headlines and display text, where its light weight (300–400) and generous letterSpacing (-0.02em to -0.01em) create an airy, premium feel befitting enterprise positioning. **Px Grotesk** (a technical monospace-influenced grotesque) handles labels, buttons, and UI chrome, where its uniform stroke weight and tight tracking (0.01em to 0.02em) reinforce precision and machine-like reliability. Body text defaults to system fonts (ui-sans-serif, system-ui) for optimal rendering across platforms. The display level (68px, 300 weight, 76px line-height) is reserved for hero headlines and sets the tone for the entire page; headline-lg (48px, 400 weight) is used for section titles; body-md (16px, 400 weigh

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile and tablet while constraining content on desktop to prevent line-length fatigue. The gutter is consistently 24px, applied symmetrically to all container edges. Vertical rhythm is established through the spacing scale: lg (40px) separates major sections (hero, feature blocks, testimonials), md (24px) separates subsections and card groups, and sm (12px) separates inline elements. The hero section uses full-width background imagery with a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) to ensure text legibility; content is centered and padded with xl (64px) top/bottom spacing. Cards and containers use md (24px) internal padding and are separated by lg (40px) margins. The container-max o

Elevation & Depth

Depth is conveyed through a three-tier shadow system paired with subtle background color shifts. **Level 1 (Base)**: no shadow; surface-container (#1f1f1f) background. **Level 2 (Standard Card)**: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); background: surface-container (#1f1f1f). **Level 3 (Modal/Elevated)**: box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1); background: surface-container (#1f1f1f) with a 1px border at surface-container-high (#2d2d2d). Hover states elevate cards to Level 2 via a smooth 200ms transition. The modal overlay uses a semi-transparent

Shapes

The shape philosophy is **Architectural Precision**: rounded corners are used sparingly and consistently to signal interactivity without compromising the technical aesthetic. Buttons and input fields use a 12px border-radius (rounded.lg), which is large enough to feel approachable but not so large as to appear playful. Cards and modals use 12px (rounded.lg) for consistency with buttons, creating a cohesive visual language. Badges and pills use 9999px (rounded.full) to indicate non-interactive status indicators. The rationale: sharp 90° corners would feel cold and dated; excessive rounding (24p

Components

Action Elements Buttons are the primary interaction mechanism and use a strict two-state system: **button-primary** (backgroundColor: #d9d9d9, textColor: #151515, padding: 8px 12px, height: 40px, rounded: 12px) for main CTAs like 'Book a demo' and 'Start for free'. On hover, the background shifts to #a8a8a8 (primary-container) with a 200ms transition. **button-secondary** (backgroundColor: transparent, border: 1px solid #5a5652, textColor: #d9d9d9, padding: 8px 12px, height: 40px, rounded: 12px) is used for tertiary actions and navigation links; on hover, the background becomes surface-container-high (#2d2d2d) and the border shifts to outline (#8b867f). **button-accent** (backgroundColor: #518dd2, textColor: #ffffff, padding: 8px 12px, height: 40px, rounded: 12px) is reserved for secon

Do's and Don'ts

**Do**

• Do use primary gray (#d9d9d9) exclusively for main CTAs—it is the most scannable color on the dark canvas and should never be diluted across secondary actions.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) to create a sense of precision and responsiveness.
• Do maintain at least 16:1 luminance contrast between on-surface text (#e9ebdf) and the surface background (#151515) to meet WCAG AAA standards and ensure accessibility.
• Do use the secondary blue (#518dd2) for focus states and data highlights—it provides visual separation from the primary gray without competing for attention.
• Do constrain content to the 1280px max-width container on desktop to prevent line-length fatigue and maintain readability of body text.

**Don't**

• Don't use the primary gray (#d9d9d9) for body text or backgrounds—it is reserved exclusively for interactive elements and CTAs.
• Don't apply border-radius greater than 16px to any component; excessive rounding undermines the technical, precision-focused aesthetic.
• Don't use animations longer than 300ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1)—the interface should feel responsive, not sluggish.
• Don't mix the tertiary crimson (#c72844) with the secondary blue (#518dd2) in the same visual context; they compete for attention and create visual noise.
• Don't apply box-shadows with blur radius greater than 45px—the interface should feel grounded and technical, not ethereal or floating.