Source: https://www.weglot.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: Arial,sans-serif — selector body
font-family: Inter,sans-serif — selector body
font-family: Ppneuemontreal,Arial,sans-serif — selector h1
font-size: 16px — selector .rich-text.article a strong
font-size: 2em — selector h1
font-size: 14px — selector body
font-size: 38px — selector h1
font-size: 32px — selector h2
font-size: 24px — selector h3
font-size: 18px — selector h4
font-weight: 700 — selector h1,h2,h3,h4,h5,h6
font-weight: 600 — selector .infos-styleguide-title
font-weight: 300 — selector .text-xl.regular
font-weight: 500 — selector .text-xxl.medium
line-height: 1.1 — selector .rich-text.article a strong
line-height: 20px — selector body
line-height: 44px — selector h1
line-height: 36px — selector h2
line-height: 30px — selector h3
line-height: 24px — selector h4
line-height: 18px — selector h6
letter-spacing: -.02em — selector .wg-demo-heading

Colors and surfaces

color: #18164C — selector .rich-text.article a strong
color: #333 — selector body
color: var(--color--font-color) — selector body
color: var(--color--heading-color) — selector h1
background-color: #f6f7fb — selector .compare-table-section .compare-table-specs-line:nth-child(even)
background-color: initial — selector .popular .compare-table-section .compare-table-specs-line:nth-child(even), .enterprise .compare-table-section .compare-table-specs-line:nth-child(even)
background-color: #0000 — selector a
background-color: #fff — selector body

Components and layout

border-radius: 8px — selector .button
border-radius: 4px — selector .button.extra-small
border-radius: 80px — selector .button\__shape-hover--shape-1
border-radius: 10px — selector .wg-demo-btn
border-radius: 50% — selector .ab-hero_shape
max-width: var(--structural--container-960) — selector .container
max-width: var(--structural--container-sm-960) — selector .container-small
max-width: var(--structural--container-md-960) — selector .container-medium
max-width: var(--structural--container-lg-960) — selector .container-large
padding: 0 — selector button::-moz-focus-inner,input::-moz-focus-inner
padding: 1.25rem 2.5rem — selector .button
padding: .55rem 1rem — selector .button.extra-small
gap: 8px — selector .wg-demo-pill
gap: 12px — selector .ads-lp-score-row
gap: .75rem 1.25rem — selector .ads-lp-checks
transition: color .2s cubic-bezier(.55,.085,.68,.53) — selector .rt-blog a
transition: border-color .2s cubic-bezier(.55,.085,.68,.53),background-color .2s cubic-bezier(.55,.085,.68,.53),color .2s cubic-bezier(.55,.085,.68,.53) — selector .button
transition: box-shadow .2s — selector .card
transition: opacity .2s cubic-bezier(.55,.085,.68,.53) — selector .link-logo-navbar
transition: background-color .2s cubic-bezier(.55,.085,.68,.53) — selector .card-menu-left
transition: background .15s — selector .wg-demo-btn
transition: opacity .5s — selector .wg-demo-heading-v2

Responsive rules

screen and (max-width:991px)
screen and (max-width:767px)
screen and (max-width:479px)
(min-width:768px)
screen and (min-width:1280px)
screen and (min-width:1440px)
screen and (min-width:1920px)

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://cdn.prod.website-files.com/677bd20abddfbf90ef7a01bb/css/weglot-stg.webflow.shared.258d2a2f0.min.css — :root

--color--font-color: #434649;
--text--text-md-webflow: 15px;
--text--text-line-height: 1.6em;
--text--text-md: 16px;
--text--text-md-mobile: 15px;
--spacing--1-5rem: 1.5rem;
--color--heading-color: #18164c;
--dsp--dsp-2xl-webflow: 50px;
--dsp--dsp-line-height: 1.2em;
--dsp--dsp-2xl: 63px;
--spacing--1rem: 1rem;
--dsp--dsp-2xl-mobile: 40px;
--dsp--dsp-xl-webflow: 41px;
--dsp--dsp-xl: 48px;
--dsp--dsp-xl-mobile: 32px;
--dsp--dsp-lg-webflow: 27px;
--dsp--dsp-lg: 32px;
--dsp--dsp-lg-mobile: 28px;
--dsp--dsp-md-webflow: 21px;
--dsp--dsp-md: 24px;
--dsp--dsp-md-mobile: 21px;
--dsp--dsp-sm-webflow: 17px;
--dsp--dsp-sm: 20px;
--dsp--dsp-sm-mobile: 17px;
--dsp--dsp-xs-webflow: 15px;
--dsp--dsp-xs: 16px;
--dsp--dsp-xs-mobile: 15px;
--text--text-lg-webflow: 17px;
--text--text-lg: 18px;
--color--secondary-color: #18164c;
--spacing--2rem: 2rem;
--text--text-xl-webflow: 20px;
--text--text-xl: 20px;
--text--text-xl-mobile: 20px;
--structural--container-960: 872px;
--structural--container-1440: 872px;
--structural--container-1280: 872px;
--structural--container-sm-960: 720px;
--structural--container-sm-1440: 720px;
--structural--container-sm-1280: 720px;
--structural--container-md-960: 960px;
--structural--container-md-1440: 1208px;
--structural--container-md-1280: 1080px;
--structural--container-lg-960: 960px;
--structural--container-lg-1440: 1360px;
--structural--container-lg-1280: 1200px;
--structural--section-webflow: 7.5rem;
--structural--section: 7.5rem;
--color--light-blue: #c2e3fb;
--color--thistle: #f5cdff;
--color--default-grey: #f6f7fb;
--structural--section-tablet-padding: 1.75rem;
--structural--section-mobile: 4.5rem;
--structural--section-mobile-padding: 1.75rem;
--spacing--12rem: 12rem;
--spacing--10rem: 10rem;
--spacing--2-5rem: 2.5rem;
--structural--0rem: 0rem;
--spacing--5rem: 5rem;
--color--medium-grey: #cdced0;
--spacing--14rem: 14rem;
--color--primary-color: #473ae0;
--color--pink: #fdcbc3;
--structural--gap-div-par-2: 1.25rem;
--color--black: black;
--spacing--3rem: 3rem;
--color--transparent: #fff0;
--color--orange-red: #f95b17;
--structural--wrapper-col-min-height: 1.25rem;
--structural--gap-default: 2.5rem;
--spacing--0-25rem: .25rem;
--spacing--0-5rem: .5rem;
--spacing--0-75rem: .75rem;
--spacing--1-25rem: 1.25rem;
--spacing--3-5rem: 3.5rem;
--spacing--4rem: 4rem;
--spacing--4-5rem: 4.5rem;
--spacing--6rem: 6rem;
--spacing--8rem: 8rem;
--color--white: white;
--structural--negative-gap-div-par-2: -1.25rem;
--color--heading-secondary-color: white;
--color--font-secondary-color: white;
--text--text-lg-mobile: 17px;
--text--text-sm-webflow: 13px;
--text--text-sm: 14px;
--text--text-sm-mobile: 13px;
--color--dark-grey: #888c8f;
--text--text-xs: 12px;
--text--text-xs-mobile: var(--text--text-xs);
--color--medium-violet-red: #cc1a85;
--rich-text-blog--quote-color: var(--color--heading-color);
--text--text-xxl: 24px;
--rich-text-blog--bold-color: var(--color--secondary-color);
--rich-text-blog--h1-color: var(--color--heading-color);
--rich-text-blog--h1-webflow: var(--dsp--dsp-2xl-webflow);
--rich-text-blog--h1: var(--dsp--dsp-2xl);
--rich-text-blog--h1-mobile: var(--dsp--dsp-2xl-mobile);
--rich-text-blog--h2-color: var(--color--heading-color);
--rich-text-blog--h2-webflow: var(--dsp--dsp-lg-webflow);
--rich-text-blog--h2: var(--dsp--dsp-lg);
--rich-text-blog--h2-mobile: var(--dsp--dsp-lg-mobile);
--rich-text-blog--h3-color: var(--color--heading-color);
--rich-text-blog--h3-webflow: var(--dsp--dsp-md-webflow);
--rich-text-blog--h3: var(--dsp--dsp-md);
--rich-text-blog--h3-mobile: var(--dsp--dsp-md-mobile);
--rich-text-blog--h4-color: var(--color--heading-color);
--rich-text-blog--h4-webflow: 19px;
--rich-text-blog--h4: 21px;
--rich-text-blog--h4-mobile: 18px;
--rich-text-blog--h5-color: var(--color--heading-color);
--rich-text-blog--h5-webflow: 18px;
--rich-text-blog--h5: 19px;
--rich-text-blog--h5-mobile: 17px;
--rich-text-blog--h6-color: var(--color--heading-color);
--rich-text-blog--h6-webflow: 18px;
--rich-text-blog--h6: 19px;
--rich-text-blog--h6-mobile: 17px;
--color--tertiary-color: #17007e;
--structural--gap-wrap-button: 1rem;
--color--border-color: #eee;
--text--text-xxl-webflow: var(--text--text-xl);
--text--text-xxl-mobile: 18px;
--rich-text-blog--link-color: var(--color--primary-color);
--text--text-xs-webflow: var(--text--text-xs);
--structural--container-navbar-960: 960px;
--structural--container-navbar-1440: 1360px;
--structural--container-navbar-1280: 1260px;
--structural--negative-gap: -2.5rem;
--rich-text-blog--link-color-hover: var(--color--secondary-color);
--rich-text-blog--quote-block-color: var(--color--border-color);

Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.

Property	Declared value	Selector
font-family	`Arial,sans-serif`	`body`
font-family	`Inter,sans-serif`	`body`
font-family	`Ppneuemontreal,Arial,sans-serif`	`h1`
font-size	`16px`	`.rich-text.article a strong`
font-size	`2em`	`h1`
font-size	`14px`	`body`
font-size	`38px`	`h1`
font-size	`32px`	`h2`
font-size	`24px`	`h3`
font-size	`18px`	`h4`
font-weight	`700`	`h1,h2,h3,h4,h5,h6`
font-weight	`600`	`.infos-styleguide-title`
font-weight	`300`	`.text-xl.regular`
font-weight	`500`	`.text-xxl.medium`
line-height	`1.1`	`.rich-text.article a strong`
line-height	`20px`	`body`
line-height	`44px`	`h1`
line-height	`36px`	`h2`
line-height	`30px`	`h3`
line-height	`24px`	`h4`
line-height	`18px`	`h6`
letter-spacing	`-.02em`	`.wg-demo-heading`
color	`#18164C`	`.rich-text.article a strong`
color	`#333`	`body`
color	`var(--color--font-color)`	`body`
color	`var(--color--heading-color)`	`h1`
background-color	`#f6f7fb`	`.compare-table-section .compare-table-specs-line:nth-child(even)`
background-color	`initial`	`.popular .compare-table-section .compare-table-specs-line:nth-child(even), .enterprise .compare-table-section .compare-table-specs-line:nth-child(even)`
background-color	`#0000`	`a`
background-color	`#fff`	`body`
border-radius	`8px`	`.button`
border-radius	`4px`	`.button.extra-small`
border-radius	`80px`	`.button\__shape-hover--shape-1`
border-radius	`10px`	`.wg-demo-btn`
border-radius	`50%`	`.ab-hero_shape`
max-width	`var(--structural--container-960)`	`.container`
max-width	`var(--structural--container-sm-960)`	`.container-small`
max-width	`var(--structural--container-md-960)`	`.container-medium`
max-width	`var(--structural--container-lg-960)`	`.container-large`
padding	`0`	`button::-moz-focus-inner,input::-moz-focus-inner`
padding	`1.25rem 2.5rem`	`.button`
padding	`.55rem 1rem`	`.button.extra-small`
gap	`8px`	`.wg-demo-pill`
gap	`12px`	`.ads-lp-score-row`
gap	`.75rem 1.25rem`	`.ads-lp-checks`
transition	`color .2s cubic-bezier(.55,.085,.68,.53)`	`.rt-blog a`
transition	`border-color .2s cubic-bezier(.55,.085,.68,.53),background-color .2s cubic-bezier(.55,.085,.68,.53),color .2s cubic-bezier(.55,.085,.68,.53)`	`.button`
transition	`box-shadow .2s`	`.card`
transition	`opacity .2s cubic-bezier(.55,.085,.68,.53)`	`.link-logo-navbar`
transition	`background-color .2s cubic-bezier(.55,.085,.68,.53)`	`.card-menu-left`
transition	`background .15s`	`.wg-demo-btn`
transition	`opacity .5s`	`.wg-demo-heading-v2`

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.
131 custom-property declarations found; 2369 relevant property declarations parsed.

Weglot

Marketing Pages

Product Interfaces

Emails

Visual identity

Weglot — design reference

Typography

Colors and surfaces

Components and layout

Responsive rules

Evidence and limitations

Stylesheet sources