PUBLIC REFERENCE
Retool
Warm obsidian workshop — a precision tool surface lit by ember glow, where everything is built.
Colors
#151515 Primary page background, dominant surface across all sections; Hero background gradient — warm amber-rust bleeds from bottom-left into near-black
#0e0e0e Deepest surface layer, card backgrounds that recede below canvas
#242424 Raised card and panel backgrounds — one step above canvas
#3f403d Subtle borders and dividers on dark surfaces
#8b867f Mid-tone icon fills, decorative borders, muted surface accents
#94958e Secondary body text, nav subtitles, helper labels
#cbccc4 Subheadings, supporting body copy, secondary headings
#b6b8af Tertiary text, eyebrow labels, captions
#e9ebdf Primary text, headline color, outlined button borders and text, pill button fill — slightly warm off-white that softens the contrast against near-black ground
#185849 Decorative background wash — large-area teal tint used as atmospheric section color
#0e352c Deeper teal wash, badge and label backgrounds in forest green
#e87650 Animated text shimmer gradient — parchment transitions through coral and steel blue, used on select highlight phrases
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.
Don't
- 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.