Meetroom Design System Reference

Meetroom is a video conferencing platform with bold Bloom blue, custom Happy Face + Almaden typography, and a clean two-tier design for marketing and app surfaces.

Website Colors

Meetroom's marketing website uses a bold blue-dominant brushwork anchored by "Bloom" blue and "Midnight" navy.

Primary

Bloom

#0B5CFF

CTAs, links, active states

Midnight

#00053D

Headings, secondary buttons, text

White

#FFFFFF

Backgrounds, button text

Secondary / Accent

Deep Navy

#00031D

Hero gradient endpoint

Royal Blue

#02145D

Dark accent

Bright Blue

#1281F8

Interactive accents

Violet

#8D5DF7

Gradient accent, AI features

Lavender

#C7C5FD

Hero gradient midpoint

Pink

#FB327E

Accent highlight

Neutrals

Dark Gray

#696B6E

Secondary text, inactive tabs

Medium

#D1DEF2

Borders, inactive dots

Light Grey

#F3F8FF

Section backgrounds, tab bg

Pale Grey

#F3F3F3

Mobile tab background

Carousel Blue

#E6F0FF

Carousel nav buttons

Gradients

          Hero banner: radial-gradient(ellipse 400% 240% at 50% 100%, #fff, #fff 10%, #c7c5fd 16%, #9a67fa99 17%, #264cab 28%, #00031d 45%, #00031d)
        

          Scroll fade: linear-gradient(270deg, hsla(0, 0%, 100%, 0.8), transparent)
        

Website Typography

Two font families: "Happy Face Semi Bold" for display/headings and "Almaden Sans" for body/UI text.

Hero Title / Headline XXXL

Find out what's possible when work connects

Happy Face Semi Bold · 54px / 3.375rem · weight 400 · line-height 112%

Headline XL

One platform for all

Happy Face Semi Bold · 46px / 2.875rem · line-height 115% · letter-spacing -0.02em

Headline S / Card Title

Meetroom Contact Center

Almaden Sans · 20px / 1.25rem · weight 500 · line-height 105% · letter-spacing -0.02em

Body Large

Whether you're chatting with teammates or supporting customers, Meetroom makes it easier to connect, collaborate, and reach goals.

Almaden Sans · 18px / 1.125rem · weight 400 · line-height 140% · letter-spacing -0.01em

Body Medium

Modernize workflows with Meetroom's trusted collaboration tools.

Almaden Sans · 16px / 1rem · weight 400 · line-height 130%

Button Text

Explore products

Almaden Sans · 16px / 1rem · weight 600 · line-height 120% · letter-spacing -0.02em

Caption

Save up to 18%

Almaden Sans · 12px / 0.75rem · weight 400 · line-height 135%

Eyebrow

WORKPLACE

Almaden Sans · 14px / 0.875rem · line-height 120% · letter-spacing -0.02em

Website Buttons

Rounded 12px buttons with semibold weight and slight negative letter-spacing. Hover reduces opacity to 0.8.

Primary (Bloom Blue)

background: #0B5CFF · color: #FFF · border-radius: 12px · padding: 4px 20px · height: 46px · font-weight: 600

Secondary (Midnight)

background: #00053D · color: #FFF · border-radius: 12px

Outline

Outline White (on dark)

Ghost / Link Button

Website Cards

Cards use 20px border-radius with hover elevation animation (translateY and box-shadow).

Meetroom Contact Center

Provide intelligent customer experiences that drive loyalty.

Meetroom Meetings

Reliable, high-quality video meetings with AI features.

border-radius: 20px · hover: translateY(-8px) · shadow: 0 1.8rem 0.8rem #CCD3E8 · transition: 0.3s ease-in-out

Website Tabs

Pill-shaped toggle tabs with sliding active indicator.

Pill Tabs

background: rgba(11,92,255,0.10) · border: 1px solid #0B5CFF · radius: 62.4375rem · active bg: #0B5CFF · transition: 0.3s ease-in

Hero Section

Full-width radial gradient hero with centered text and dual CTA buttons.

Find out what's possible when work connects

Whether you're chatting with teammates or supporting customers, Meetroom makes it easier to connect, collaborate, and reach goals.

Carousel

Carousel with dot indicators and circular nav buttons.

Dot Navigation

inactive: 12px circle #D1DEF2 · active: 44.8px pill #00053D · radius: 100px

App / Portal Colors

The Meetroom web portal uses a slightly different brushwork with darker grays and a distinct blue (#0065F2).

Primary

App Blue

#0065F2

Primary actions, CTAs

App Black

#131619

Headings, primary text

App Dark

#232333

Body text, form text

App Gray

#747487

Tertiary text, borders

Status Colors

Success

#1C7E41

Success BG

#E4F7EB

Error

#B22424

Error BG

#FFE8E8

Error Accent

#E8173D

Warning

#B36200

Warning BG

#FFF9F2

Backgrounds

Page / Sidebar BG

#39394D

Sign-in page background

Divider

#EAEAEA

Borders, dividers

Input Border

#6E7680

Form field borders

App Typography

The portal uses "Internacional" for headings and "Almaden Sans" for body/UI text with smaller base sizes.

App Heading (H1)

Internacional · 32px · weight 500 · line-height 40px · color #131619

App Body

Meetroom is protected by reCAPTCHA and the Privacy Policy and Terms of Service apply.

Almaden Sans · 14px · weight 400 · line-height 20px · color #232333

App Body Large (Input)

Email or phone number

Almaden Sans · 16px · weight 400 · line-height 28px

Price Display

$14.16

Almaden Sans · 32px · weight 600 · line-height 32px · color #333

Toggle / Small Label

ANNUAL · MONTHLY

Almaden Sans · 12px · weight 500 · letter-spacing 0.5px · color #696B6E

App Buttons

App portal uses similar rounded buttons with slightly different sizing and weights.

Primary App Button

background: #0B5CFF · border: 1px solid #0B5CFF · radius: 12px · padding: 13px 14px · font: 16px / weight 500

Secondary App Button

background: #FFF · border: 1px solid #747487 · radius: 8px · padding: 5px 16px · font: 14px / weight 400

Ghost / Link App Button

color: #0956B5 · no border · font: 14px / weight 500

App Inputs

Form inputs with 8px radius, 1px solid borders, and floating-style label pattern.

Text Input

border: 1px solid #6E7680 · radius: 8px · padding: 12px · font: 16px · focus: border #0B5CFF + ring

Sign In Page

Split-panel layout with promotional content on the left and form on the right.

Pricing Cards

Vertical pricing cards with plan name, price display, CTA, and feature checklist.

Basic

Free

40 minutes per meeting
100 participants per meeting
Team Chat

Pro

$14.16

/user per month · billed annually

30 hours per meeting
100 participants per meeting
AI Companion
Cloud storage

Business

$18.33

/user per month · billed annually

30 hours per meeting
300 participants per meeting
Managed domains

Status Badges

Pill-shaped status badges with paired background/text colors.

Active Error Pending Info

Alerts

Full-width alert banners with icon, message, and semantic color pairing.

✓ Your settings have been saved successfully.

✗ Invalid email address. Please check and try again.

⚠ Your plan expires in 3 days. Upgrade now.

ⓘ A new version of Meetroom is available.

Toggle / Switch

Used for billing period selection and settings toggles.

Monthly

Annual Save up to 18%

Spacing Scale

4px base unit spacing scale.

4px

8px

12px

16px

20px

24px

32px

40px

48px

60px

80px

120px

Border Radius

8px
Inputs, app buttons

12px
Website buttons, tabs, cards

20px
Cards, carousel items

50%
Avatars, nav buttons

62.4375rem
Pill tabs, badges

Shadows

Tab / Card Shadow
0 9px 80px rgba(0,0,0,0.07)

Card Hover
0 1.8rem 0.8rem #CCD3E8

Modal Shadow
0 20px 60px rgba(0,0,0,0.15)

Motion & Transitions

Element	Property	Duration	Easing
Button hover	`opacity`	0.3s	ease
Card hover	`transform, box-shadow`	0.3s	ease-in-out
Carousel nav	`all`	0.8s	ease-in-out
Tab slider	`transform`	0.3s	ease-in-out
Tab content	`fadeInScale`	0.75s	ease-in-out
Tab switch	`all`	0.3s	ease-in
Input focus	`border-color`	0.2s	ease
Toggle	`background, transform`	0.2s	ease

Breakpoints

Name	Range	Notes
Mobile	`max-width: 481px`	Single column, stacked layout
Tablet	`482px - 1024px`	Reduced headings, collapsed carousel
Desktop	`min-width: 1025px`	Full layout, hover states enabled

Container	Value
Max content width	`87.5rem` (1400px)
Content area	`56.375rem` (902px)
Nomina section	`1150px`
Sign-in form	`360px`

CSS Custom Properties

Ready-to-paste CSS custom properties block extracted from .

:root {
  /* Primary Colors */
  --primary-bloom: #0B5CFF;
  --primary-midnight: #00053D;
  --primary-white: #FFFFFF;

  /* Secondary Colors */
  --deep-navy: #00031D;
  --royal-blue: #02145D;
  --bright-blue: #1281F8;
  --violet: #8D5DF7;
  --lavender: #C7C5FD;
  --pink: #FB327E;

  /* Neutrals */
  --neutrals-light-grey: #F3F8FF;
  --neutrals-medium: #D1DEF2;
  --neutrals-dark-gray: #696B6E;
  --neutrals-pale: #F3F3F3;
  --carousel-blue: #E6F0FF;

  /* App Colors */
  --app-blue: #0065F2;
  --app-text-primary: #131619;
  --app-text-secondary: #232333;
  --app-text-tertiary: #747487;
  --app-link: #0956B5;
  --app-bg-dark: #39394D;
  --app-input-border: #6E7680;
  --app-divider: #EAEAEA;

  /* Status Colors */
  --success: #1C7E41;
  --success-bg: #E4F7EB;
  --error: #B22424;
  --error-bg: #FFE8E8;
  --error-accent: #E8173D;
  --warning: #B36200;
  --warning-bg: #FFF9F2;

  /* Typography */
  --font-display: 'Happy Face Semi Bold', Helvetica, Arial, sans-serif;
  --font-body: 'Almaden Sans', Helvetica, Arial, sans-serif;
  --font-app-heading: Internacional, Helvetica, Arial;

  /* Headline Sizes */
  --headline-xxxl: 3.875rem;
  --headline-xxl: 3.38rem;
  --headline-xl: 2.875rem;
  --headline-s: 1.25rem;
  --body-l: 1.125rem;
  --body-m: 1rem;
  --caption: 0.75rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 62.4375rem;
  --radius-round: 50%;
}

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`
App / Portal	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Meetroom Design System Reference

Website Colors

Primary

Secondary / Accent

Neutrals

Gradients

Website Typography

Website Buttons

Website Cards

Website Tabs

Hero Section

Find out what's possible when work connects

Navigation

Carousel

App / Portal Colors

Primary

Status Colors

Backgrounds

App Typography

App Buttons

App Inputs

Sign In Page

Beyond friction in collaboration

Sign in

Pricing Cards

Status Badges

Alerts

Toggle / Switch

Modal / Dialog

Spacing Scale

Border Radius

Shadows

Motion & Transitions

Breakpoints

CSS Custom Properties

Tailwind Mapping