Patter

Overview

Patter is a developer-focused, open-source SDK for voice AI that prioritizes technical clarity and architectural precision. The design system embodies a "Technical Minimalism" aesthetic: a near-monochromatic palette (pure black #000000 and white #ffffff) anchored by a warm peach accent (#df9367 and #c97a4c), combined with hard geometric borders, dot-grid textures, and deliberate rejection of soft shadows. The brand personality is direct, unpretentious, and engineer-first—every visual decision serves functional clarity over decoration. The UI evokes the precision of a technical blueprint: hard edges (border-radius: 4px to 24px, never rounded beyond necessity), 1.5px to 2px borders in pure black, and a subtle dot-grid background (radial-gradient with 18px spacing) that recalls graph paper. Voice: precise, matter-of-fact, no marketing flourish. Example: "Connect any agent to real phone calls in 4 lines of code. Python and TypeScript, MIT licensed, sub-500 ms latency."

Colors

The color system is deliberately austere: a monochromatic foundation (black #000000, white #ffffff, grays from #1a1a1a to #cbcbcb) with a single warm accent—peach—used sparingly on CTAs, highlights, and brand moments. Primary (#000000) is the dominant ink color, used for text, borders, and the main call-to-action button (background: #000000, color: #ffffff, border: 1.5px solid #000000). Secondary (peach #df9367, with container #fff8ef and deep variant #c97a4c) appears on accent text (the italicized 'phone number' in the hero), menu icons, and badges. Tertiary (blue #278eff, container #ebf0f5) supports secondary actions and data visualization. Surface colors follow a strict hierarchy: surface (#ffffff) is the base, surface-dim (#f6f6f4) for subtle backgrounds, surface-container variants (#f

Typography

The type system uses a single typeface family—Instrument Sans (from Google Fonts, weights 400–700)—paired with JetBrains Mono for code and labels. Display (128px, 700 weight, -0.035em letter-spacing, 122px line-height) is reserved for hero headlines and sets the tone of architectural boldness. Headline-lg (64px, 700 weight, -0.02em) and headline-md (40px, 700 weight) handle section titles with tight line-height (1.0–1.15) to reinforce density. Body-lg (21px, 400 weight, 1.5 line-height) is used for hero subheadings and prominent copy; body-md (16px, 400 weight, 1.4 line-height) is the default paragraph text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons and interactive labels; label-sm (12px, 500 weight, 0.08em letter-spacing, JetBrains Mono) is used for eyebrow

Layout

The layout system uses a fixed 12-column grid with a max-width of 1280px and a gutter of 32px (padding: 0 32px on the container). A tighter variant, container-tight, constrains content to 1080px for focused reading. The hero section spans full-width with centered content, using a dot-grid background (radial-gradient at 18px spacing, masked with an elliptical radial-gradient to fade at edges) to add texture without visual noise. Section spacing follows a semantic scale: lg (40px) separates major sections, md (24px) separates subsections, and sm (12px) separates inline elements. The dot-grid background (--dot-grid: radial-gradient(circle at 1px 1px, #dad8de 1px, transparent 0); background-size: 18px 18px) is applied selectively to hero and feature sections to reinforce the technical aestheti

Elevation & Depth

Depth is conveyed through hard borders and stacked shadows rather than soft blur. Level 1 (Base): flat surfaces with 1.5px solid borders in #000000 or #aaaaaa. Level 2 (Cards/Containers): 1.5px border + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) for subtle lift. Level 3 (Modals/Overlays): 1.5px border + box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18) for pronounced depth. A distinctive 'stack' shadow (box-shadow: 0 8px 0 -1px #f6f6f4, 0 8px 0 0 #000000) is used on certain interactive elements to create a physical 3D offset effect, evoking stacked paper or layered cards. Hover states increase shado

Shapes

The shape philosophy is 'Architectural Sharpness': borders and radii are intentionally minimal and geometric, never organic. Buttons and pills use border-radius: 999px (full pill shape) for primary CTAs and secondary actions, creating a distinctive rounded-rectangle silhouette. Cards and containers use border-radius: 16px (lg) for standard containers and 24px (xl) for elevated modals, maintaining a clean, technical appearance. Input fields and smaller components use border-radius: 8px (DEFAULT) or 12px (md). The eyebrow tag uses 999px to match button styling. All borders are 1.5px solid (--bw-

Components

Action Elements Buttons follow a strict two-tier system: primary (background: #000000, color: #ffffff, border: 1.5px solid #000000, border-radius: 999px, padding: 10px 18px, height: 40px) for main CTAs like 'Get a demo →', and secondary (background: #ffffff, color: #000000, border: 1.5px solid #000000, border-radius: 999px) for supporting actions. On hover, primary buttons shift to background: #df9367 (peach) with border: 1.5px solid #000000, maintaining the border for visual continuity. Secondary buttons hover to background: #f6f6f4 (surface-dim). All buttons use transition: all 150ms cubic-bezier(0.2, 0.0, 0.0, 1) for snappy, predictable motion. Ghost buttons (transparent background, 1.5px border, no fill) are used for tertiary actions and hover to background: #f6f6f4. Install pills

Do's and Don'ts

**Do**

• Do use pure black (#000000) and white (#ffffff) as the primary palette; reserve peach (#df9367) for accents and brand moments only.
• Do apply hard borders (1.5px solid #000000 or #aaaaaa) instead of soft shadows; use stacked shadows (0 8px 0 -1px #f6f6f4, 0 8px 0 0 #000000) for 3D depth on interactive elements.
• Do use Instrument Sans for all body and headline text; use JetBrains Mono exclusively for code, labels, and monospace content.
• Do maintain border-radius consistency: 999px for pills/buttons, 16px for cards, 8px for inputs, 4px for small components.
• Do apply negative letter-spacing (-0.035em to -0.01em) on headlines and 0em on body text to control visual density.
• Do use the dot-grid texture (radial-gradient at 18px spacing, masked elliptically) sparingly on hero and feature sections to reinforce the technical aesthetic.

**Don't**

• Don't use soft shadows, blur filters, or transparency overlays; every layer must have a hard 1.5px border and opaque background.
• Don't mix typefaces; Instrument Sans is the only sans-serif; JetBrains Mono is the only monospace.
• Don't use rounded corners beyond 24px (xl) or soften pill buttons below 999px border-radius.
• Don't apply peach (#df9367) to backgrounds or large surfaces; reserve it for text accents, icons, and hover states on primary buttons.
• Don't use color gradients or multi-color backgrounds; every surface must be a single, opaque hex color from the palette.
• Don't animate opacity or blur; use transform: translateY() and transition: all 150ms cubic-bezier(0.2, 0.0, 0.0, 1) for all motion.