.webp)
Typedesk
Send replies faster and more consistently
No items found.
No items found.
Visual identity
Typedesk — design reference
Source: https://www.typedesk.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Typography
font-family: Sora, Tahoma, serif— selectorh1font-family: Sora,Verdana,sans-serif— selector.btnfont-family: Sora,Tahoma,sans-serif— selector.font-titlefont-family: var(--tda-font-sans)— selector.td-hero-stagefont-family: var(--tda-font-button)— selector.td-hero-stage .tab-namefont-size: 100%— selectorbutton,input,optgroup,select,textareafont-size: .875rem— selector.btn-xsfont-size: 1.5rem— selector.text-2xlfont-size: 1.875rem— selector.text-3xlfont-size: 2.25rem— selector.text-4xlfont-size: 3rem— selector.text-5xlfont-weight: 600— selector.btnfont-weight: 700— selectorh1font-weight: 700!important— selectorh2 afont-weight: 600!important— selectorh3 afont-weight: 500— selector.td-hero-stage .tab-nameline-height: 1.25rem— selector.btn-xsline-height: 2rem— selector.text-2xlline-height: 2.25rem— selector.text-3xlline-height: 2.5rem— selector.text-4xlline-height: 1— selector.text-5xlline-height: 1.5rem— selector.text-baseline-height: 1.75rem— selector.text-lgletter-spacing: -.025em— selectorh1letter-spacing: .08em— selector.td-hero-stage .compose-labelletter-spacing: .02em— selector.td-hero-stage .compose-body.is-chat .expanded-body:before
Colors and surfaces
color: rgb(255 255 255/var(--tw-text-opacity,1))— selector.btn-primarycolor: rgb(148 163 184/var(--tw-text-opacity,1))!important— selector.!text-slate-400color: rgb(15 23 42/var(--tw-text-opacity,1))!important— selector.!text-slate-900color: rgb(2 6 23/var(--tw-text-opacity,1))!important— selector.!text-slate-950color: rgb(15 118 110/var(--tw-text-opacity,1))!important— selector.!text-teal-700color: rgb(30 137 105/var(--tw-text-opacity,1))!important— selector.!text-typedesk-600color: rgb(255 255 255/var(--tw-text-opacity,1))!important— selector.!text-whitebackground-color: transparent— selectorbutton,input:where([type=button]),input:where([type=reset]),input:where([type=submit])background-color: rgb(245 245 245/var(--tw-bg-opacity,1))— selector.btn:hoverbackground-color: rgb(30 137 105/var(--tw-bg-opacity,1))— selector.btn-primarybackground-color: rgb(36 166 128/var(--tw-bg-opacity,1))— selector.btn-primary:hoverbackground-color: rgb(229 231 235/var(--tw-bg-opacity,1))— selector.btn-secondarybackground-color: rgb(243 244 246/var(--tw-bg-opacity,1))— selector.btn-secondary:hoverbackground-color: rgb(249 250 251/var(--tw-bg-opacity,1))— selector.btn-secondary:hover:disabledbackground-color: rgb(250 204 21/var(--tw-bg-opacity,1))— selectorh1 .underline:after,h2 .underline:after
Components and layout
border-radius: 9999px— selector.btnborder-radius: 24px— selector.td-hero-stageborder-radius: 50%— selector.td-hero-bg-orbborder-radius: 16px 16px 0 0— selector.td-hero-stage .compose-chromeborder-radius: 8px— selector.td-hero-stage .tab-iconborder-radius: 999px— selector.td-hero-stage .tab-dotborder-radius: 0 0 16px 16px— selector.td-hero-stage .compose-bodyborder-radius: 10px 2px 10px 10px— selector.td-hero-stage .compose-body.is-chat .expanded-bodybox-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)— selector.btn-primary:hoverbox-shadow: 0 40px 80px -20px rgba(13,121,103,.18),inset 0 1px 0 hsla(0,0%,100%,.8)— selector.td-hero-stagebox-shadow: 0 0 0 2px rgba(37,211,102,.25)— selector.td-hero-stage .chat-status-dotbox-shadow: 0 1px .5px rgba(11,40,32,.13)— selector.td-hero-stage .compose-body.is-chat .expanded-bodybox-shadow: 0 18px 40px -12px rgba(15,23,42,.18),inset 0 1px 0 hsla(0,0%,100%,.8)— selector.td-hero-stage .autosuggestmax-width: 640px— selector.containermax-width: 768px— selector.containermax-width: 1024px— selector.containermax-width: 1280px— selector.containermax-width: 1536px— selector.containermax-width: 82%— selector.td-hero-stage .compose-body.is-chat .expanded-bodypadding: 0— selectorbutton,input,optgroup,select,textareapadding: .75rem 2rem— selector.btnpadding: .875rem 3rem— selector.btnpadding: .5rem 1.25rem— selector.btn-smpadding: .375rem 1.5rem— selector.btn-xspadding: .25rem— selector.btn-linkpadding: 14px 18px— selector.td-hero-stage .compose-tabspadding: 18px 22px 22px— selector.td-hero-stage .compose-bodygap: .25rem— selector.btngap: .5rem— selector.btngap: 12px— selector.td-hero-stage .compose-tabsgap: 4px— selector.td-hero-stage .tab-actionsgap: 6px— selector.td-hero-stage .chat-statusgap: 10px— selector.td-hero-stage .compose-body.is-chat .trigger-linegap: 8px— selector.td-hero-stage .scene-railtransition: opacity .3s var(--tda-ease)— selector.td-hero-stage .hero-animtransition: box-shadow .12s var(--tda-ease),background .12s var(--tda-ease)— selector.td-hero-stage .trigger-typedtransition: left 80ms linear,top 80ms linear— selector.td-hero-stage .hero-cursortransition: all .2s var(--tda-ease)— selector.td-hero-stage .scene-dottransition: width 80ms linear— selector.td-hero-stage .dot-progress
Responsive rules
(min-width:1024px)
(min-width:640px)
(min-width:768px)
(min-width:1280px)
(min-width:1536px)
(prefers-reduced-motion:reduce)Source: https://www.typedesk.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.
https://www.typedesk.com/css/web\_new.css?id=d9277c130c7087b5c9109068d3d610bb — .td-hero-stage
--tda-teal-50: #ecfdfa;
--tda-teal-100: #cffaf3;
--tda-teal-200: #93f3e4;
--tda-teal-300: #57ecd5;
--tda-teal-500: #13ac93;
--tda-teal-600: #0d7967;
--tda-teal-700: #08473c;
--tda-yellow-light: #fef3c7;
--tda-yellow-dark: #92400e;
--tda-slate-50: #f8fafc;
--tda-slate-100: #f1f5f9;
--tda-slate-200: #e2e8f0;
--tda-slate-300: #cbd5e1;
--tda-fg-1: #111827;
--tda-fg-2: #202b35;
--tda-fg-3: #6b7280;
--tda-fg-4: #9ca3af;
--tda-border: var(--tda-slate-200);
--tda-border-strong: var(--tda-slate-300);
--tda-gray-900: #111827;
--tda-ease: cubic-bezier(0.2,0,0.2,1);
--tda-ease-out: cubic-bezier(0.16,1,0.3,1);
--tda-font-sans: "Rubik","Helvetica",system-ui,-apple-system,sans-serif;
--tda-font-button: "Outfit","Helvetica",system-ui,-apple-system,sans-serif;Source: https://www.typedesk.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.
| Property | Declared value | Selector |
|---|---|---|
| font-family | Sora, Tahoma, serif | h1 |
| font-family | Sora,Verdana,sans-serif | .btn |
| font-family | Sora,Tahoma,sans-serif | .font-title |
| font-family | var(--tda-font-sans) | .td-hero-stage |
| font-family | var(--tda-font-button) | .td-hero-stage .tab-name |
| font-size | 100% | button,input,optgroup,select,textarea |
| font-size | .875rem | .btn-xs |
| font-size | 1.5rem | .text-2xl |
| font-size | 1.875rem | .text-3xl |
| font-size | 2.25rem | .text-4xl |
| font-size | 3rem | .text-5xl |
| font-weight | 600 | .btn |
| font-weight | 700 | h1 |
| font-weight | 700!important | h2 a |
| font-weight | 600!important | h3 a |
| font-weight | 500 | .td-hero-stage .tab-name |
| line-height | 1.25rem | .btn-xs |
| line-height | 2rem | .text-2xl |
| line-height | 2.25rem | .text-3xl |
| line-height | 2.5rem | .text-4xl |
| line-height | 1 | .text-5xl |
| line-height | 1.5rem | .text-base |
| line-height | 1.75rem | .text-lg |
| letter-spacing | -.025em | h1 |
| letter-spacing | .08em | .td-hero-stage .compose-label |
| letter-spacing | .02em | .td-hero-stage .compose-body.is-chat .expanded-body:before |
| color | rgb(255 255 255/var(--tw-text-opacity,1)) | .btn-primary |
| color | rgb(148 163 184/var(--tw-text-opacity,1))!important | .!text-slate-400 |
| color | rgb(15 23 42/var(--tw-text-opacity,1))!important | .!text-slate-900 |
| color | rgb(2 6 23/var(--tw-text-opacity,1))!important | .!text-slate-950 |
| color | rgb(15 118 110/var(--tw-text-opacity,1))!important | .!text-teal-700 |
| color | rgb(30 137 105/var(--tw-text-opacity,1))!important | .!text-typedesk-600 |
| color | rgb(255 255 255/var(--tw-text-opacity,1))!important | .!text-white |
| background-color | transparent | button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) |
| background-color | rgb(245 245 245/var(--tw-bg-opacity,1)) | .btn:hover |
| background-color | rgb(30 137 105/var(--tw-bg-opacity,1)) | .btn-primary |
| background-color | rgb(36 166 128/var(--tw-bg-opacity,1)) | .btn-primary:hover |
| background-color | rgb(229 231 235/var(--tw-bg-opacity,1)) | .btn-secondary |
| background-color | rgb(243 244 246/var(--tw-bg-opacity,1)) | .btn-secondary:hover |
| background-color | rgb(249 250 251/var(--tw-bg-opacity,1)) | .btn-secondary:hover:disabled |
| background-color | rgb(250 204 21/var(--tw-bg-opacity,1)) | h1 .underline:after,h2 .underline:after |
| border-radius | 9999px | .btn |
| border-radius | 24px | .td-hero-stage |
| border-radius | 50% | .td-hero-bg-orb |
| border-radius | 16px 16px 0 0 | .td-hero-stage .compose-chrome |
| border-radius | 8px | .td-hero-stage .tab-icon |
| border-radius | 999px | .td-hero-stage .tab-dot |
| border-radius | 0 0 16px 16px | .td-hero-stage .compose-body |
| border-radius | 10px 2px 10px 10px | .td-hero-stage .compose-body.is-chat .expanded-body |
| box-shadow | var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000) | .btn-primary:hover |
| box-shadow | 0 40px 80px -20px rgba(13,121,103,.18),inset 0 1px 0 hsla(0,0%,100%,.8) | .td-hero-stage |
| box-shadow | 0 0 0 2px rgba(37,211,102,.25) | .td-hero-stage .chat-status-dot |
| box-shadow | 0 1px .5px rgba(11,40,32,.13) | .td-hero-stage .compose-body.is-chat .expanded-body |
| box-shadow | 0 18px 40px -12px rgba(15,23,42,.18),inset 0 1px 0 hsla(0,0%,100%,.8) | .td-hero-stage .autosuggest |
| max-width | 640px | .container |
| max-width | 768px | .container |
| max-width | 1024px | .container |
| max-width | 1280px | .container |
| max-width | 1536px | .container |
| max-width | 82% | .td-hero-stage .compose-body.is-chat .expanded-body |
| padding | 0 | button,input,optgroup,select,textarea |
| padding | .75rem 2rem | .btn |
| padding | .875rem 3rem | .btn |
| padding | .5rem 1.25rem | .btn-sm |
| padding | .375rem 1.5rem | .btn-xs |
| padding | .25rem | .btn-link |
| padding | 14px 18px | .td-hero-stage .compose-tabs |
| padding | 18px 22px 22px | .td-hero-stage .compose-body |
| gap | .25rem | .btn |
| gap | .5rem | .btn |
| gap | 12px | .td-hero-stage .compose-tabs |
| gap | 4px | .td-hero-stage .tab-actions |
| gap | 6px | .td-hero-stage .chat-status |
| gap | 10px | .td-hero-stage .compose-body.is-chat .trigger-line |
| gap | 8px | .td-hero-stage .scene-rail |
| transition | opacity .3s var(--tda-ease) | .td-hero-stage .hero-anim |
| transition | box-shadow .12s var(--tda-ease),background .12s var(--tda-ease) | .td-hero-stage .trigger-typed |
| transition | left 80ms linear,top 80ms linear | .td-hero-stage .hero-cursor |
| transition | all .2s var(--tda-ease) | .td-hero-stage .scene-dot |
| transition | width 80ms linear | .td-hero-stage .dot-progress |
Source: https://www.typedesk.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Evidence and limitations
- Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
- CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
- No inferred dark theme, semantic color roles or framework defaults have been added.
- 24 custom-property declarations found; 687 relevant property declarations parsed.