Where teamscome together

Teamspace brings your team together with channels, messages, and integrations that make work simpler, more pleasant, and more productive.

Get Started Free See Demo

Sarah K.

Just deployed the new API endpoint!

Mike R.

Nice! The tests are all passing.

Lisa M.

Can we review the PR before EOD?

Everything your team needs

From quick messages to complex workflows, Teamspace has the tools to keep your team moving.

Channels

Organize conversations by topic, project, or team. Keep everything searchable.

Direct Messages

Private conversations with teammates. Share files, code, and ideas one-on-one.

Integrations

Connect your favorite tools: project trackers, file storage, code repos, and 2,400+ more apps.

Search

Find any message, file, or conversation instantly across your entire workspace.

Trusted worldwide

750,000+ companies

From startups to Fortune 100, teams of every size rely on Teamspace to stay connected and productive.

Acme CorpGlobexInitechSolarisApex Digital

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — deep blue */
  --background: 0 0% 100%;
  --foreground: 213 13% 16%;
  --card: 0 0% 100%;
  --card-foreground: 213 13% 16%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 13% 16%;
  --primary: 220 72% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 5% 96%;
  --secondary-foreground: 213 13% 40%;
  --accent: 220 40% 95%;
  --accent-foreground: 220 72% 35%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 154 64% 40%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 213 13% 16%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 220 72% 50%;
  --chart-1: 220 72% 50%;
  --chart-2: 154 64% 40%;
  --chart-3: 38 92% 50%;
  --chart-4: 198 80% 45%;
  --chart-5: 340 65% 50%;

/* Sidebar — deep navy */
  --sidebar-background: 220 40% 18%;
  --sidebar-foreground: 220 20% 85%;
  --sidebar-primary: 0 0% 100%;
  --sidebar-primary-foreground: 220 40% 18%;
  --sidebar-accent: 220 30% 25%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 220 25% 25%;
  --sidebar-ring: 220 72% 50%;

/* Typography */
  --font-sans: 'Lato', system-ui, sans-serif;
  --font-heading: 'Lato', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

/* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.03);
  --shadow-lg: 0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --shadow-xl: 0 12px 20px -4px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);

/* Glass & overlay */
  --overlay-opacity: 0.5;
  --backdrop-blur: 8px;
  --glass-bg: rgba(252, 252, 253, 0.8);
  --glass-border: rgba(255, 255, 255, 0.15);

/* Spacing & density — compact */
  --spacing-scale: 0.9;
  --container-max-width: 1280px;
  --container-padding: 1.5rem;
  --card-padding: 1.25rem;
  --input-height: 2.25rem;
  --button-height: 2rem;
  --section-gap: 3rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --heading-weight: 700;
  --heading-letter-spacing: -0.02em;
  --heading-line-height: 1.2;

/* Shape — functional, compact */
  --radius: 0.375rem;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --avatar-radius: 0.375rem;
  --badge-radius: 9999px;
  --button-radius: 0.375rem;
  --input-radius: 0.375rem;
  --card-radius: 0.5rem;
  --tooltip-radius: 0.375rem;

/* Component shadows */
  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --dropdown-shadow: 0 6px 10px -2px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.03);
  --dialog-shadow: 0 12px 20px -4px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.03);
  --button-shadow: none;

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.15;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.5;

/* Buttons */
  --button-style: filled;
  --button-weight: 500;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.5;

/* Links */
  --link-style: color-only;
  --link-weight: inherit;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1.5;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);

/* Selection */
  --selection-background: 220 72% 50%;
  --selection-foreground: 0 0% 100%;

/* Tooltips */
  --tooltip-style: dark;

/* Tables */
  --table-style: clean;
  --table-header-weight: 600;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 150ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: fast;
  --hover-transition: 150ms ease;
  --enter-transition: 200ms ease-out;
  --exit-transition: 150ms ease-in;
}

RBuilt with Refraction UI