Baseten

A high-contrast, engineering-forward AI-infrastructure interface built on a white canvas with pure-black type and sharp-cornered black CTAs. The brand voltage comes from a single electric green (#19e76e) used in the announcement bar, text highlight markers, and isometric product diagrams — paired with an oversized NeueAlteGrotesk grotesk headline set tight and heavy. The system reads as precise, technical, and confident: thin hairline grids, no shadows, square buttons, and product-architecture illustrations rendered in green line-art.

baseten.co

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display-xl 88px · 600 · 0.909

The quick brown fox jumps

display-lg 64px · 600 · 1.094

The quick brown fox jumps

title 24px · 600 · 1.333

The quick brown fox jumps

body 24px · 400 · 1.333

The quick brown fox jumps

button 16px · 400 · 1.5

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
hairline-pad	7px
xs	8px
sm	12px
sm-plus	14px
md	16px
md-plus	20px
lg	24px
lg-plus	28px
xl	32px
xxl	40px
xxxl	48px
section	56px
section-lg	64px

Border Radius

Name	Value	Preview
none	0px
pill	9999px
full	9999px

FAQ

What colors does Baseten use?: Baseten's core palette includes #000000, #000000, #0e0e0e, #111827, #374151. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Baseten DESIGN.md.
What font does Baseten use?: Baseten's primary typeface is NeueAlteGrotesk. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Baseten design system?: A high-contrast, engineering-forward AI-infrastructure interface built on a white canvas with pure-black type and sharp-cornered black CTAs. The brand voltage comes from a single electric green (#19e…

More like this

↓ .md ↓ All files

loading…