Brainfish

Overview

Brainfish embodies a design philosophy of **Playful Clarity**—a modern, approachable aesthetic that transforms complex AI knowledge management into an intuitive, delightful experience. The brand serves product teams and customer support organizations seeking to align their AI agents with real product knowledge. The UI combines a serene cyan canvas (#c5f3f8) with a vibrant lime-green accent (#a3e635) and supporting accents in blue (#3c82f6), purple (#8c5df6), and red (#f4405e), creating an energetic yet trustworthy visual language. The emotional response is one of optimism and clarity: users feel empowered to solve complex problems without friction.

The brand voice is conversational, direct, and confident—never corporate or breathless. Brainfish speaks to practitioners as peers: "Most tools forget what you ship. Brainfish doesn't." The vocabulary emphasizes action (builds, delivers, learns, fixes) and human outcomes (effort, efficiency, expertise). Typography relies on Satoshi and Inter for a contemporary, friendly tone. The design system prioritizes accessibility and legibility across all interactive states, with generous padding (12px–24px), clear focus indicators (3px rgba(163, 230, 53, 0.1) shadow), and high contrast ratios (7:1 on primary text).

Colors

The color system is organized around a dominant cyan background (#c5f3f8) paired with a signature lime-green primary accent (#a3e635). Primary (#a3e635) is reserved exclusively for call-to-action buttons, interactive highlights, and brand-critical UI elements—it appears on "Book Demo" CTAs and secondary navigation states. On-primary text is always dark (#171717) for 7:1 contrast. The primary-container (#d2fae5) provides a soft, approachable background for secondary actions and informational badges. Secondary blue (#3c82f6) supports data visualization, links, and status indicators; tertiary purple (#8c5df6) accents feature highlights and premium tier indicators. Error red (#f4405e) is used sparingly for destructive actions and validation errors. The surface stack progresses from pure white

Typography

The type system uses Satoshi as the primary font family (with Arial and sans-serif fallbacks) for all headings and body text, delivering a contemporary, friendly voice. Display (64px, 500 weight, -0.02em tracking) anchors hero sections and major page titles; headline-lg (48px, 500 weight) breaks up content sections; headline-md (32px, 500 weight) introduces subsections. Body-lg (20px, 500 weight) is the default paragraph size, ensuring readability at 28px line-height. Body-md (16px, 400 weight) is used for secondary content and descriptions. Label-md (16px, 500 weight) and label-sm (12px, 500 weight) are applied to buttons, badges, and form labels with 0.01em–0.05em letter-spacing for visual distinction. All text uses -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: graysca

Layout

The layout system uses a 12-column grid with a max-width of 1340px, centered on the viewport. The gutter is 24px between columns, and the container padding is 24px on desktop (reduced to 16px on tablet, 12px on mobile). Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for component-level grouping. The hero section occupies full-width with centered content, leveraging the cyan background (#c5f3f8) as a visual anchor. Cards and containers use 24px internal padding ({spacing.md}) with 1px borders at outline-variant (#d0d0d0). Floating elements (clouds, decorative shapes) are positioned absolutely within their parent containers, creating depth without disrupting the grid. White-space is generous: minimum 40px vertical

Elevation & Depth

Elevation is conveyed through a three-tier shadow system combined with subtle background color shifts. Level 1 (Base): no shadow, surface color #ffffff. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(10, 10, 13, 0.15), background: #ffffff with 1px border at #d0d0d0. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(10, 10, 13, 0.12), background: #ffffff with 1px border at #cccccc. Interactive elements (buttons, inputs) use no shadow at rest; on hover, they transition to a 150ms ease-out animation with a 2px lift (transform: translateY(-2px)) and the md shadow. Focus states add a 3px

Shapes

The shape system follows a **Soft-Technical** philosophy: rounded corners are used consistently to soften the interface while maintaining a professional, product-focused aesthetic. Buttons use 0.5rem (4px) border-radius for a subtle, modern appearance—not fully rounded, but distinctly softer than sharp corners. Cards and containers use 1rem (8px) for a more prominent, inviting feel. Input fields use 0.5rem (4px) to match buttons and maintain visual cohesion. Badges and chips use 9999px (full) for a pill-shaped, approachable look that signals secondary or supplementary information. Floating dec

Components

Action Elements Buttons are the primary interaction pattern. **Button-primary** uses {colors.primary} (#a3e635) background with {colors.on-primary} (#171717) text, 8px 16px padding, 40px height, and 0.5rem border-radius. On hover, the background transitions to #8cc82e (a darker lime) over 150ms with ease-out timing. **Button-secondary** uses a transparent background with a 1px {colors.outline-variant} border (#d0d0d0), {colors.on-surface} text, and the same padding/height. On hover, it fills with {colors.surface-container-high} (#e5e5e5). **Button-ghost** is transparent with {colors.primary} text; on hover, it fills with {colors.primary-container} (#d2fae5). All buttons use {typography.label-md} (16px, 500 weight) and support focus states with a 3px inset shadow in primary color (0 0 0

Do's and Don'ts

**Do**

• Do use {colors.primary} (#a3e635) exclusively for primary CTAs and interactive highlights—it's the brand's signature accent and should never be diluted.
• Do maintain 24px gutter spacing between grid columns and 40px vertical rhythm between major sections to preserve the clarity-first aesthetic.
• Do apply 150ms ease-out transitions to all hover and focus state changes (background-color, box-shadow, border-color) for smooth, predictable interactions.
• Do use {typography.body-lg} (20px, 500 weight) as the default paragraph size to ensure readability and approachability across all content.
• Do pair cyan backgrounds (#c5f3f8) with dark text (#171717) for maximum contrast and accessibility (7:1 ratio minimum).

**Don't**

• Don't use primary green (#a3e635) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and state indicators.
• Don't apply border-radius greater than 1rem (8px) to buttons or input fields; the soft-technical philosophy rejects fully rounded corners on functional UI.
• Don't use shadows darker than rgba(10, 10, 13, 0.15) or lighter than rgba(10, 10, 13, 0.06); maintain the dark-boxshadow token (#0a0a0d) for visual consistency.
• Don't mix font families—Satoshi is the primary choice for all headings and body text; Arial and sans-serif are fallbacks only.
• Don't create hover states that change text color or remove borders entirely; always maintain visual stability and accessibility during interactions.