Band

Overview

Band is enterprise infrastructure for real-time, multi-peer collaboration between AI agents and humans. The design system embodies 'Technical Clarity with Human Warmth'—a philosophy that marries the precision of monospace typography and geometric layouts with the approachability of a vibrant green accent and generous whitespace. The brand serves technical teams and enterprise architects who demand both sophistication and usability; the UI evokes competence, forward momentum, and trustworthiness through clean lines, purposeful color, and breathing room. Voice: direct, confident, never condescending. Example: 'Agents sync in real-time. Governance stays intact. No compromise.'

Colors

The color palette centers on a signature bright green (#92ed92) as the primary accent—used exclusively for call-to-action buttons, success states, and brand-critical interactive elements. This green is paired with a near-black text color (#001319) for maximum contrast and accessibility (WCAG AAA). The surface stack uses pure white (#ffffff) as the base, with carefully calibrated grays (#f5f5f5, #e9ecef, #d4d4d8) for container hierarchy and subtle depth. Secondary accents include cyan (#56b6c2) for informational elements and sky blue (#61aeee) for tertiary actions. The error state uses a warm red (#ff6b6b) to signal warnings without harshness. All surfaces maintain a 1px border at #d4d4d8 (outline token) to define edges in the light theme. Shadows are soft and restrained: 0 3px 8px rgba(0,

Typography

The type system pairs JetBrains Mono (monospace, 800 weight, -1px letter-spacing) for display-scale headlines—evoking technical precision and code-forward identity—with Inter (humanist sans-serif) for body, labels, and UI text. Display headlines use 64px / 72px line-height to command attention; headline-lg scales to 40px for section breaks; body-md sits at 16px / 24px for comfortable reading. Label-sm (13px, 700 weight, 0.02em tracking) is applied to button text and badges, creating visual distinction for interactive elements. All type uses 400–600 weight range except display (800) and labels (700), maintaining hierarchy without excessive weight variation. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels over complex backgrounds (e.g., hero illustration overlays) to ensure

Layout

The layout follows a 12-column grid with a 1280px container max-width, maintaining a fluid 24px gutter on desktop and 16px on mobile. Page rhythm is established through 40px (lg spacing) section separation, with 24px (md spacing) used for component padding and 12px (sm spacing) for internal element gaps. The hero section uses a 755px minimum height with centered content alignment, creating a focal point before scrolling. Cards and containers employ 6px border-radius (DEFAULT token) for a slightly technical feel—not fully rounded, but softened. Whitespace is generous: the footer uses 64px (xl spacing) vertical padding, and content blocks maintain 50px gaps between sections on desktop, collapsing to 24px on mobile. This breathing room reinforces the 'clarity' pillar of the brand.

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive layering. Level 1 (Base): white background (#ffffff) with no shadow. Level 2 (Standard Card): 1px solid border at #d4d4d8 + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background remains white. Level 3 (Elevated/Modal): same border + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background shifts to #f5f5f5. The header uses a 20px backdrop-filter blur with a semi-transparent white background (rgba(255, 255, 255, 0.9)) to create a floating effect without heavy shadows. Hover states on car

Shapes

The shape philosophy is 'Geometric Precision with Softness'—corners are subtly rounded (4–6px) rather than sharp or fully rounded, reflecting the brand's balance between technical rigor and human approachability. Buttons use 6px border-radius (DEFAULT), creating a modern, slightly technical appearance without the friendliness of 12px+ radii. Cards and input fields also use 6px, maintaining consistency. Badges and pill-shaped elements use the full token (9999px) for visual distinction. The 4px (sm) radius is reserved for small, dense UI elements like icon buttons or tight component groups. This

Components

Action Elements Buttons are the primary interaction driver. The primary button uses #92ed92 background with #001319 text, 13px label-sm typography, 44px height, and 13px vertical / 24px horizontal padding. On hover, the background shifts to #92ed92 (primary-fixed-dim, a slightly darker green) over 150ms. The secondary button mirrors the primary in dimensions but uses a white background with a 1px #d4d4d8 border and #404d53 text, allowing it to recede visually while remaining clickable. Ghost buttons (tertiary) have transparent backgrounds and #6c757d text, useful for low-priority actions in dense layouts. All buttons apply a 150ms ease transition on background-color and box-shadow to signal state changes smoothly.

Containers & Surfaces Cards are the primary content container: whit

Do's and Don'ts

**Do**

• Do use #92ed92 exclusively for primary CTAs and success states—it is the brand's signature and must not be diluted across secondary elements.
• Do apply 24px (md spacing) as the default padding for cards and containers; it creates the breathing room that defines the brand's clarity.
• Do pair JetBrains Mono headlines (64px, 800 weight) with Inter body text (16px, 400 weight) to reinforce the technical-yet-human positioning.
• Do use the 6px border-radius consistently on buttons, cards, and inputs to maintain the 'geometric precision' aesthetic.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease timing to signal responsiveness without jarring jumps.

**Don't**

• Don't use the primary green (#92ed92) on secondary buttons, badges, or decorative elements—reserve it for high-intent actions only.
• Don't apply shadows stronger than 0 8px 24px rgba(0, 0, 0, 0.12); the design system prioritizes lightness and clarity over depth.
• Don't mix typefaces beyond JetBrains Mono (display) and Inter (body/UI); introducing a third font dilutes the technical identity.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 6px, md: 8px, lg: 12px, xl: 16px, full: 9999px)—custom radii break the system's coherence.
• Don't reduce the 24px gutter or section padding below 16px on mobile; whitespace is a core brand value and must be preserved across breakpoints.