Earthy neutral backgrounds with vibrant orange accents for high visibility and technical precision.
03
Typography
grotesque-sans · monospace
display187px · 500
heading36px · 500
body16px · 400
caption12px · 500
Use tight negative letter spacing for large display headings · Uppercase tracking is generous for small labels · Weight 500 is the standard for UI and display text
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent 4px grid-based spacing system
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 99px
1px solid black
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Centered content with wide margins and generous vertical spacing
07
Motion & Interaction
200msmicro
300mssmall
800msmedium
cubic-bezier(0.3, 0, 0.15, 1)easing
Smooth background-color and color transitions on interactive elements · Opacity and visibility changes for modals or overlays
Subtle color or background shifts with smooth transitions · Immediate visual response via background-color change
08
Components
buttonSolid black pill with white text or outlined pill with black text
cardLight yellow or cream background with simple content blocks
chipSmall rounded tags with uppercase text and subtle borders
inputStandard text inputs with clear borders
heroMassive display typography with vibrant orange text highlights
09
Voice & Don'ts
ToneTechnical, direct, and highly capable
HeadlinesBold and punchy with highlighted keywords in orange
CTAsAction-oriented and clear, often using arrows
Don't use soft pastels — screenshot shows sharp black and vibrant orange instead
Don't use rounded corners excessively — screenshot shows sharp pill-shaped buttons and square borders
Don't use wide margins — screenshot shows a centered, dense layout with generous vertical padding
Don't use light gray for text — screenshot shows high-contrast black and dark gray for readability
Don't use decorative serifs — screenshot shows clean, modern grotesque-sans typography
Don't use subtle gradients — screenshot shows flat color blocks and solid highlights
Captured from the live site · real computed styles
11
System prompt
This design system for Browserbase is a high-contrast, developer-focused interface. It uses a palette of neutral off-whites and creams (#F1F0EC, #FFFACD) with deep black text (#000000) and a vibrant orange accent (#FF5500). Typography is centered around modern grotesque-sans for display and body, with monospace fonts for technical snippets. Critical constraints include avoiding soft pastels, excessive rounded corners, and decorative serifs. The layout is centered and dense, using a 4px grid and generous vertical spacing. Ensure all interactive elements have smooth, snappy transitions using a custom cubic-bezier easing curve. Maintain a direct, technical voice in all copy.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
