Google Meet: Online Web ve Video Konferans Görüşmeleri | Google Workspace

Design Specification — Google Meet: Online Web ve Video Konferans Görüşmeleri | Google Workspace

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#202124), a vivid accent (#1967D2). All type is set in 'Google Sans Text'. Detected font weights: 400, 500, 600, 700. Detected style signatures: rounded / pill-heavy.

Logo asset(s): https://www.gstatic.com/images/branding/productlogos/gmail_2026/v2/web/192px.svg · https://www.gstatic.com/images/branding/productlogos/drive_2026/v2/web/192px.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(47.38deg, #3186ff 26.32%, #346bf1 51.11%, #4fa0ff 74.96%)
• linear-gradient(90deg,#fff 0% 50%,#0000 100%)
• linear-gradient(270deg,#fff 0% 50%,#0000 100%)

Typography

Primary typeface: Google Sans Text — stack: 'Google Sans Text'

Font stacks (most used first)

• 'Google Sans Text'
• 'Google Sans'
• Google Sans Text,Google Sans,Roboto,Arial,Noto Sans JP,Noto Sans KR,sans-serif
• Google Sans,Google Sans Text,Roboto,Arial,Noto Sans JP,Noto Sans KR,sans-serif
• 'Roboto'
• Material Icons
• Roboto,Arial,sans-serif,Google Sans Text,Noto Sans JP,Noto Sans KR
• Google Sans,Roboto,Arial,sans-serif
• 'Material Icons'
• inherit

Web font sources

• fonts.googleapis.com/css?family=Material+Icons|Google+Sans:500,700|Google+Sans+Text:400,500|Roboto:400,500&subset=latin,latin-ext&display=swap
• fonts.googleapis.com/css?family=Google+Sans:400|Google+Sans+Text:700|Roboto:700&subset=latin,latin-ext&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 2px 6px #0100001f
• 0 3px 4.7px .3px #0000003d
• 0 2px 6px #0000001f,inset 0 -1px #dadce0
• inset 0 -.5px #e6eaf0
• 0 0 0 1px #1a73e8, 0px 6px 10px 4px #36404326, 0px 2px 3px 0px #3640434d
• 0 0 0 1px #1a73e8,0 6px 10px 4px #36404326,0 2px 3px #3640434d
• 0 2px 16px #2051da52
• 0 2px 16px #18191d5c
• 0 1px 20px #3c40430d,0 1px 10px #80868b08,0 4px 20px #80868b1a
• 0 1px 2px #3640434d,0 1px 3px 1px #36404326

Animation & Motion

Transitions

• transform .3s
• background-color .2s,color .2s,box-shadow .2s
• color .2s
• background-color .3s,border-color .3s,box-shadow .3s
• filter .3s
• 0 transform cubic-bezier(.22, 1, .36, 1) 50ms
• color .2s cubic-bezier(.215,.61,.355,1)
• opacity .2s cubic-bezier(.215,.61,.355,1)
• box-shadow .2s,border-color .2s
• transform .18s ease-in-out
• color .3s,background-color .3s
• fill .3s

Easing curves

• cubic-bezier(.22, 1, .36, 1)
• cubic-bezier(.215,.61,.355,1)
• cubic-bezier(.5,1,.89,1)
• cubic-bezier(.65, 0, .35, 1)

Keyframes

@keyframes LayerPanel_layer-panel-spin { to{transform:rotate(360deg)} }
@keyframes TemplateHeader_fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes TemplateHeader_fade-out { 0%{opacity:1}to{opacity:0} }
@keyframes base_gws-lottie-poster-in { 0%{opacity:0}to{opacity:1} }
@keyframes TemplateBackgroundContainer_translateGradient { 0%{transform:translate(0)}to{transform:translate(-2264px)} }
@keyframes TemplateCompare_glowTimelineFade { 0%{opacity:0}3%,97%{opacity:.55}to{opacity:0} }
@keyframes TemplateEndCard_text-clip-animation { 0%{background-position:0%}50%{background-position:100%}to{background-position:0%} }
@keyframes TemplateGeminiHero_fadeIn { 50%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes TemplateJumplinks_showScrollCta { 0%{opacity:0}to{opacity:1} }
@keyframes TemplateLogoCarousel_scroll { 0%{transform:translate(0)}to{transform:translate(-50%)} }
@keyframes TemplateMultifunctionalCardGrid_modalAppear { 0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)} }
@keyframes InfoCard_scroll-left { 0%{transform:translate(0)}to{transform:translate(-50%)} }
@keyframes InfoCard_scroll-right { 0%{transform:translate(-50%)}to{transform:translate(0)} }
@keyframes CompareAppReel_compareReelTrackScroll { 0%{transform:translateY(195px)translateZ(0)}to{transform:translateY(calc(195px - (var(--slide-count,6) - 1) * 94px)) translateZ(0)} }
@keyframes CompareAppReel_appItemHighlight-0 { 0%,12%{opacity:1;transform:scale(1)translateZ(0)}18%,to{opacity:.3;transform:scale(.88)translateZ(0)} }
@keyframes CompareAppReel_appItemHighlight-1 { 0%,14%{opacity:.3;transform:scale(.88)translateZ(0)}18%,28%{opacity:1;transform:scale(1)translateZ(0)}34%,to{opacity:.3;transform:scale(.88)translateZ(0)} }
@keyframes CompareAppReel_appItemHighlight-2 { 0%,30%{opacity:.3;transform:scale(.88)translateZ(0)}34%,48%{opacity:1;transform:scale(1)translateZ(0)}54%,to{opacity:.3;transform:scale(.88)translateZ(0)} }
@keyframes CompareAppReel_appItemHighlight-3 { 0%,50%{opacity:.3;transform:scale(.88)translateZ(0)}54%,68%{opacity:1;transform:scale(1)translateZ(0)}74%,to{opacity:.3;transform:scale(.88)translateZ(0)} }

Animations

• base_gws-lottie-poster-in .2s ease var(--gws-lottie-poster-delay,.6s) both
• none

CTA labels found on page

• Yapay Zeka
• Fiyatlandırma
• Daha Çok Göster
• Uygulamaya gidin
• Oturum açın
• Meet'i işte deneyin

Source Design Tokens (CSS custom properties)

:root {
  --annotation: "Body Extra Small";
  --desktop: not(.breakpoints--tablet):not(.breakpoints--mobile);
  --tablet: not(.breakpoints--mobile);
  --mobile: not(.breakpoints--desktop);
  --medium: hover:not(:disabled);
  --low: hover:not(:disabled);
  --inline: hover:not(:disabled);
  --gws-column-xs-mobile-start: 1;
  --gws-column-xs-mobile-end: 6;
  --gws-column-mobile-start: 1;
  --gws-column-mobile-end: 6;
  --gws-column-tablet-start: 2;
  --gws-column-tablet-end: 11;
  --gws-column-laptop-start: 2;
  --gws-column-laptop-end: 11;
  --gws-spacer-mobile-size: 24px;
  --gws-spacer-desktop-size: 24px;
  --gws-spacer-background-color: transparent;
  --md-sys-color-primary: #1a73e8;
  --md-outlined-text-field-label-text-color: #3c4043;
  --md-outlined-select-text-field-label-text-color: #3c4043;
  --md-outlined-text-field-container-color: #fff;
  --md-menu-item-selected-container-color: #f1f3f4;
  --md-menu-item-hover-state-layer-color: #5f6368;
  --md-outlined-select-text-field-container-color: #fff;
  --md-outlined-text-field-error-label-text-color: #3c4043;
  --md-outlined-select-text-field-error-label-text-color: #3c4043;
  --newsletter-margin-inline-start: 12px;
  --md-menu-container-color: #fff;
  --md-outlined-text-field-supporting-text-size: 0px;
  --md-outlined-text-field-supporting-text-line-height: 0px;
  --background-bar-min-height: 375px;
  --withBackgroundBar: after;
  --gws-phone-input-border: 1px solid #80868b;
  --gws-phone-input-border-radius: 4px;
  --gws-phone-input-text-color: #202124;
  --gws-phone-input-placeholder-text-color: #3c4043;
  --md-outlined-select-text-field-outline-color: #dadce0;
  --md-outlined-text-field-outline-color: #dadce0;
  --md-outlined-text-field-error-focus-outline-color: #d93025;
  --md-outlined-text-field-error-outline-color: #d93025;
  --md-outlined-select-text-field-error-focus-outline-color: #d93025;
  --md-outlined-select-text-field-error-outline-color: #d93025;
  --md-outlined-select-text-field-error-focus-caret-color: #d93025;
  --md-outlined-text-field-error-focus-label-text-color: #d93025;
  --md-outlined-select-text-field-error-focus-label-text-color: #d93025;
  --gws-template-hero-simple-inline-button-gap: 16px;
  --gws-footer-color: #616161;
  --gws-button-color: var(--gws-footer-color);
  --gws-button-hover-color: #202124;
  --gws-button-text-decoration: underline;
  --header-height: 64px;
  --header-height-single-row: 64px;
  --active: after,.TemplateHeader_headerNavGroupButton:hover:after,a.TemplateHeader_headerNavGroupButton.--active:after,a.TemplateHeader_headerNavGroupButton:hover:after;
  --noAside: after,.TemplateHeader_navDropdownContainer--noAside:before;
  --withAsideTitle: after;
  --withHighlightedCards: before;
  --gws-card-max-width: 100%;
  --gws-card-border-radius: 20px;
  --gws-card-border: 1px solid #d3e3fd;
}

Do's and Don'ts

Do

• Do reserve the accent #1967D2 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 600, 700.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #1A73E8;
  --color-accent: #1967D2;
  --color-background: #FFFFFF;
  --color-surface: #E8F0FE;
  --color-text-primary: #202124;
  --color-secondary: #202124;
  --color-text-secondary: #5F6368;
  --color-border: #E8EAED;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F9FAFB;
  --color-surface-container-high: #F8F9FA;
  --color-surface-container-highest: #F1F3F4;
  --font-sans: 'Google Sans Text';
  --font-size-display: 54px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 48px;
  --radius-pill: 50%;
  --shadow-sm: 0 2px 6px #0100001f;
  --shadow-md: 0 1px 20px #3c40430d,0 1px 10px #80868b08,0 4px 20px #80868b1a;
  --shadow-lg: 0 0 0 1px #1a73e8, 0px 6px 10px 4px #36404326, 0px 2px 3px 0px #3640434d;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-display: -.015625rem;
  --tracking-label: .0125rem;
  --container-max: 1440px;
}