braintrust.dev website design: fonts, colors and UI patterns

Design character

Braintrust balances developer seriousness with memorable brand flashes: a vivid chartreuse (#ccff00) and an electric blue (#2c1fea family) against black, white, and zinc grays (#71717a). Home and pricing move between light content bands and deep blue brand fields (footer/hero moments), with card-heavy layouts, 16px radii, and clean sans type.

What should survive adaptation:

• Chartreuse + electric blue as signature accents (use sparingly)
• Zinc/gray secondary text on light surfaces
• Card-heavy product storytelling
• 16px rounding as the default soft geometry
• Dark and light bands in one system, not two unrelated sites

Foundations

Color

Typography

• Body 16/24 regular dominant
• Lead 18/28, 20/28
• Display 48/48 regular or 300; 36/40 for mid display
• Subheads 24/28.8–32 (400/600)
• Small 12–14/16–20

Large type is calm and geometric; chartreuse draws the eye more than weight extremes.

Spacing and layout

• Horizontal padding 32px common; 16px in denser UI
• Section vertical padding 128px on big bands; 32–48px inside cards
• Pricing and home share card grids and comparison structures
• Footer can become a full blue brand slab with multi-column links and large wordmark

Radii and shadows

• Radii: 16px default; also 6, 12, 32; rare full pills
• Light shadows: 0 2px 4px -2px and 0 4px 6px -1px
• 1px borders on cards/tables

Visual language

• Flat surfaces, occasional soft shadow
• Product charts/observability visuals and crisp icons
• Geometric logo mark + wordmark lockup
• Tick marks / ruler motifs appear as brand texture on blue fields (visual)

Components and states

• Marketing nav + CTA
• Hero with strong claim (“Trace everything”) and email capture
• Feature cards and logo walls
• Pricing tiers/tables
• Blue footer brand slab with link columns
• Buttons: solid brand or high-contrast on accent fields

Responsive behavior

Eight captures across / and /pricing from ~1326–1688px. Layout stays desktop marketing; cards should wrap, while blue footer columns stack. Keep accent sparseness when compressing.

Practical guidance

Preserve: chartreuse + blue sparingly, zinc secondary, 16px cards, dual light/dark bands, geometric wordmark presence.

Avoid: turning the whole page chartreuse, muddy mid-blues, heavy skeuomorphic charts, or generic purple AI gradients.

Scope note

Eight captures of home and pricing. Color roles were relatively rich; declared font families were not available.