---
version: alpha
name: "chatbase.co"
description: "Design system extracted from https://www.chatbase.co/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#eaecf7"
  foreground: "#09090b"
  muted-foreground: "#52525b"
  primary: "#000000"
  on-primary: "#ffffff"
  secondary: "#2c41b3"
  border: "#e4e4e7"
typography:
  headline-display:
    fontFamily: "Geist"
    fontSize: "64px"
    fontWeight: 500
    lineHeight: "70.4px"
    letterSpacing: "-2.56px"
  headline-lg:
    fontFamily: "Geist"
    fontSize: "48px"
    fontWeight: 500
    lineHeight: "52.8px"
    letterSpacing: "-0.96px"
  headline-md:
    fontFamily: "Geist"
    fontSize: "32px"
    fontWeight: 500
    lineHeight: "41.6px"
    letterSpacing: "-0.64px"
  body-md:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "24px"
    letterSpacing: "-0.32px"
  label-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.3"
    letterSpacing: "-0.12px"
  button:
    fontFamily: "Geist"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "24px"
    letterSpacing: "-0.32px"
rounded:
  none: "0px"
  full: "9999px"
  lg: "12px"
  sm: "4px"
spacing:
  unit: "8px"
  1: "8px"
  2: "16px"
  3: "24px"
  4: "32px"
  5: "48px"
  6: "80px"
components:
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "36px"
    padding: "8px 12px"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "36px"
    padding: "8px 16px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "55px"
    padding: "0px 0px"
  card:
    backgroundColor: "transparent"
    rounded: "12px"
    padding: "20px"
---

# chatbase.co

## Overview

AI Agents for Customer Experience & Support | Chatbase: Chatbase is the AI customer experience platform. Its AI agents resolve complex queries and reduce ticket volume in every channel for over 10,000 businesses.

Pill-shaped controls, layered shadows for depth, large display type at 64px / 500, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 2188 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/desktop-1440-light.png`: Desktop 1440, light mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Start free trial"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("Start free trial"), focus
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-link-1--rest.png`: Text link 1 ("Expandable"), rest
- `screenshots/c-link-1--focus.png`: Text link 1 ("Expandable"), focus
- `screenshots/c-fab-1--rest.png`: Floating action button 1, rest
- `screenshots/c-fab-1--hover.png`: Floating action button 1, hover
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Customers"), rest
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Customers"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Product"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Product"), hover
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Security"), rest
- `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest
- `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("get_subscription"), rest
- `screenshots/c-card-1--rest.png`: Card 1 ("Procedures written in pl"), rest
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("GDPRFull compliance with"), rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("1.Ask for the email on t"), rest
- `screenshots/c-blockquote-1--rest.png`: Blockquote 1 (""Chatbase is a strong si"), rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-button-2--rest.png`: Button 2 ("Get a demo"), rest
- `screenshots/c-button-2--focus.png`: Button 2 ("Get a demo"), focus
- `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest
- `screenshots/c-overlay-popover-1--open.png`: Popover 1 opened by icon-button
- `screenshots/c-link-2--rest.png`: Text link 2 ("Learn more"), rest
- `screenshots/c-link-2--focus.png`: Text link 2 ("Learn more"), focus
- `screenshots/c-badge-2--rest.png`: Badge / pill / tag 2 ("New"), rest
- `screenshots/c-icon-2--rest.png`: Icon 2, rest
- `screenshots/c-icon-button-3--rest.png`: Icon button 3, rest
- `screenshots/c-icon-button-3--focus.png`: Icon button 3, focus
- `screenshots/c-icon-button-3--disabled.png`: Icon button 3, disabled
- `screenshots/c-link-3--rest.png`: Text link 3 ("Learn more"), rest
- `screenshots/c-badge-3--rest.png`: Badge / pill / tag 3 ("On hold"), rest
- `screenshots/c-button-4--rest.png`: Button 4 ("01BuildConnect your data"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#eaecf7` | Cards, panels, raised or recessed surfaces |
| foreground | `#09090b` | Primary text |
| muted-foreground | `#52525b` | Secondary text, captions |
| primary | `#000000` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#2c41b3` | Secondary accent (blue) |
| border | `#e4e4e7` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#2c41b3`, `#eaecf7`, `#09090b`, `#fe6737`, `#2563eb`, `#000000`, `#d97706`.

Gradients in use: `linear-gradient(to top, rgb(32, 52, 159) 0%, rgba(32, 52, 159, 0) 88.438%)`; `linear-gradient(rgba(250, 250, 250, 0), lab(98.2716 0 0) 59.28%)`; `linear-gradient(rgba(250, 250, 250, 0), lab(98.2716 0 0) 82%)`.

The accent `#000000` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Geist** for h1, h2, h3, body, button: self-hosted webfont; verify availability and permission; **Geist** is the suggested stand-in.
- **Inter** for label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Geist | 64px | 500 | 70.4px | -2.56px |
| headline-lg | Geist | 48px | 500 | 52.8px | -0.96px |
| headline-md | Geist | 32px | 500 | 41.6px | -0.64px |
| body-md | Geist | 16px | 500 | 24px | -0.32px |
| label-md | Inter | 12px | 500 | 1.3 | -0.12px |
| button | Geist | 16px | 500 | 24px | -0.32px |

Type scale in use: 12px, 14px, 16px, 20px, 32px, 48px, 64px. Base body size 16px.

The hero heading (h1) renders at 64px / 500, left aligned, up to 550px wide, tracking -2.56px. Sample: "Conversational agents for customer experience".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 8px. Scale in use: 8, 16, 24, 32, 48, 80 (px).
- Flex and grid gaps: 8, 16, 24, 32, 64 px.
- Content max width: 1238px, centred.
- Breakpoints: 360px, 640px, 768px, 1024px, 1280px.
- Header: 61px tall, sticky, background `lab(98.2716 0 0)`, bottom hairline 1px solid lab(90.6505 0.399292 -1.45453); 5 nav links at 16px / 400 (Chatbase · Customers · Enterprise · Pricing · Login).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 6px 6px 0px, rgba(0, 0, 0, 0.01) 0px 14px 9px 0px`
- shadow-2: `rgba(9, 9, 11, 0.04) 0px 1px 2px 0px, rgba(9, 9, 11, 0.06) 0px 1px 3px 0px`
- shadow-3: `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- shadow-4: `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`

## Shapes

- Buttons: 9999px
- Inputs: 9999px
- Cards and panels: 12px
- Images and media: 0px
- Radius scale: none 0px, full 9999px, lg 12px, sm 4px

## Components

### Button, ghost

Background transparent, text `#000000`, border none, radius 8px, height 36px, padding 8px 12px, 14px / 400. Sample label: "Product".

### Button, secondary

Background transparent with gradient `linear-gradient(0deg, rgba(228, 228, 231, 0) 50%, rgba(228, 228, 231, 0.2) 100%)`, text `#000000`, border 1px solid transparent, radius 8px, height 36px, padding 8px 16px, 14px / 500, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`. Sample label: "Login".

### Button, primary

Background `#000000`, text `#000000`, border none, radius 9999px, height 55px, padding 0px 0px, 16px / 400, shadow `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`.

### Card

Background `transparent`, border 1px solid #e4e4e7, radius 14px, padding 20px, shadow `rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 6px 6px 0px, rgba(0, 0, 0, 0.01) 0px 14px 9px 0px`. Typical size about 293×242px.

### Link

Colour `#000000`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (26 of 87 in the checklist, 51 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 15 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ink, secondary, outline-with-icon, ghost sm, ghost-with-icon sm, secondary sm, ghost lg, ghost-with-icon lg | focus | "Start free trial" |
| Icon button | secondary, ghost, secondary, secondary | focus, disabled |  |
| Text link | plain, plain, plain | focus | "Expandable" |
| Floating action button | ink | hover |  |
| Switch / toggle | custom | rest only |  |
| Header / navbar | default | rest only | "ChatbaseProduct Solutions Reso" |
| Navigation link | plain | focus | "Customers" |
| Menu / dropdown trigger | ghost | hover | "Product" |
| Footer | default | rest only | "ChatbaseProductSecurityChatbas" |
| Footer link | plain | rest only | "Security" |
| Social icon links | default | rest only |  |
| Badge / pill / tag | subtle-square, info-square, warning-square, neutral-square, danger-square | rest only | "get_subscription" |
| Counter / notification dot | info-filled | rest only |  |
| Card | flat, elevated, elevated, elevated-media-top, elevated, elevated | rest only | "Procedures written in plain la" |
| Feature item (icon + title + text) | outlined-media-top | rest only | "GDPRFull compliance with EU da" |
| Stat / metric | default | rest only | "4M+Users served" |
| Styled list | default | rest only | "1.Ask for the email on the acc" |
| Blockquote | default | rest only | ""Chatbase is a strong signal o" |
| Image / figure | aspect-1.17, aspect-2.66, aspect-0.88 | rest only |  |
| Video / media embed | default | rest only |  |
| Icon | outline-24px, outline-29px, outline-16px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Theme toggle, Language / region switch, Tooltip, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Pricing card / plan, Testimonial / quote card, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## Dark Mode

Both themes exist; the default render is light and the light theme was reached via data-theme=light. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#ffffff` |
| surface | `#eaecf7` | `#eaecf7` |
| foreground | `#09090b` | `#09090b` |
| muted-foreground | `#71717a` | `#52525b` |
| primary | `#000000` | `#000000` |
| on-primary | `#ffffff` | `#ffffff` |
| secondary | `#2c41b3` | `#2c41b3` |
| border | `#e4e4e7` | `#e4e4e7` |

Light-theme shadows: `rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 6px 6px 0px, rgba(0, 0, 0, 0.01) 0px 14px 9px 0px`; `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`; `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`; `rgba(0, 0, 0, 0.08) 0px 4px 9px 0px, rgba(0, 0, 0, 0.07) 0px 16px 16px 0px, rgba(0, 0, 0, 0.04) 0px 36px 21px 0px, rgba(0, 0, 0, 0.01) 0px 63px 25px 0px`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1238px | 181px | 16px | 64px, 3 lines, left | 61px, 5 links, 1 CTA | media above text | 2→2 col; 3→3 col; 2→1 col | content-width |
| laptop 1024px | 711px | 81px | 16px | 64px, 4 lines, left | 61px, 5 links, 1 CTA | media above text | 2→2 col; 3→3 col; 2→1 col | content-width |
| tablet 768px | 720px | 24px | 16px | 48px, 2 lines, left | 59px, hamburger (Open menu) | media above text | 2→2 col; 2→2 col; 2→2 col | 12 full-width |
| phone 390px | 342px | 24px | 16px | 48px, 4 lines, left | 59px, hamburger (Open menu) | media above text | 2→2 col; 2→2 col; 2→2 col | 12 full-width |

- H1 goes 64px → 48px (75%), 3 → 4 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 61px → 59px.
- Card grids: 3 columns → 1 column on phones (gap 20px → 24px).
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 24px.
- 12 buttons stretch full-width on phones.
- Section top padding 80px → 44px.

## Interaction & Motion

205 elements carry transitions; typical 0.15s with cubic-bezier(0.4, 0, 0.2, 1), mostly on color, background-color, border-color. 5 running keyframe animations (test-visual-module__ZcxjhG__spin 0.7s infinite; accordion-up 0.2s 1; chatbase-bubble-entrance 0.18s 1).

- Hover on button-primary ("Login"): no visible change; cursor pointer; transition background-color, color, border-color, box-shadow | 0.15s | cubic-bezier(0, 0, 0.2, 1).
- Hover on button-secondary ("Start free trial"): no visible change; cursor pointer; transition background-color, color, border-color, box-shadow | 0.15s | cubic-bezier(0, 0, 0.2, 1).
- Hover on nav-link ("Chatbase"): no visible change; cursor pointer.
- Focus on button-primary: outline 2px solid lab(2.50303 0.210844 -0.773582), offset 2px.
- No tooltip could be triggered from the first viewport, but the stylesheet defines tooltip rules (.context-view.monaco-component.top:has(.monaco-hover[role="tooltip"])): transform: translateY(calc(100% + 25px)).
- Hover/click menus: below the trigger, 2563px gap, right edges aligned; transparent, radius 0px, padding 0px 0px, shadow none; 4 items, 36px tall, 16px, padding 8px 12px, with icons, with descriptions; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace).
- 18 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 8px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#000000` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 16px in Geist.
- Do match corner radii per element class (buttons 9999px, cards 12px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.