Channel browser

16 channels available

#general

Joined

Company-wide announcements and work-based matters

156 members

#engineering

Joined

Engineering team discussions, code reviews, and architecture decisions

42 members

#random

Joined

Non-work banter and water cooler conversation

148 members

#design

Joined

Design system updates, UI reviews, and creative discussions

28 members

#marketing

Joined

Campaign planning, content strategy, and brand discussions

35 members

#product

Product roadmap, feature requests, and user feedback

52 members

#frontend

React, CSS, TypeScript, and all things frontend

31 members

#backend

APIs, databases, infrastructure, and server-side discussions

27 members

#devops

CI/CD, monitoring, deployment, and infrastructure as code

18 members

#qa-testing

Quality assurance, test automation, and bug reports

22 members

#hiring

Open positions, referrals, and recruitment updates

45 members

#social-events

Team outings, celebrations, and fun activities

120 members

#book-club

Monthly book picks, discussions, and recommendations

34 members

#fitness

Workout tips, running groups, and health challenges

56 members

#pets

Share photos and stories of your furry (and not so furry) friends

89 members

#food-recipes

Cooking tips, restaurant reviews, and recipe sharing

67 members

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