Meiro

Meiro — design reference

Source: https://meiro.cc/. 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: sans-serif — selector body,input,textarea,select,button
• font-family: var(--font-family) — selector [data-framer-component-type=Text] div div span,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] span span span,[data-framer-component-type=Text] p span span,[data-framer-component-type=Text] h1 span span,[data-framer-com
• font-family: var(--framer-font-family-preview,var(--framer-blockquote-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,mark.framer-text,span.framer-text:not([data-text-fill])
• font-family: var(--framer-code-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif)) — selector code.framer-text,code.framer-text span.framer-text:not([data-text-fill])
• font-family: var(--framer-font-family-preview,var(--framer-blockquote-font-family,var(--framer-link-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif)))) — selector a.framer-text,a.framer-text span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link],span.framer-text[data-nested-link] span.framer-text:not([data-text-fill])
• font-family: var(--framer-font-family-preview,var(--framer-link-hover-font-family,var(--framer-blockquote-font-family,var(--framer-link-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))))) — selector a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link]:hover,span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill])
• font-family: var(--framer-font-family-preview,var(--framer-link-current-font-family,var(--framer-link-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif)))) — selector a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current] span.framer-text:not([dat
• font-family: var(--framer-font-family-preview,var(--framer-link-hover-font-family,var(--framer-link-current-font-family,var(--framer-link-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))))) — selector a.framer-text[data-framer-page-link-current]:hover,a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover s
• font-size: 12px — selector body,input,textarea,select,button
• font-size: var(--font-size) — selector [data-framer-component-type=Text] div div span,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] span span span,[data-framer-component-type=Text] p span span,[data-framer-component-type=Text] h1 span span,[data-framer-com
• font-size: calc(var(--framer-blockquote-font-size,var(--framer-font-size,16px))_var(--framer-font-size-scale,1)) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,mark.framer-text,span.framer-text:not([data-text-fill])
• font-size: calc(var(--framer-link-hover-font-size,var(--framer-blockquote-font-size,var(--framer-font-size,16px)))_var(--framer-font-size-scale,1)) — selector a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link]:hover,span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill])
• font-size: calc(var(--framer-link-current-font-size,var(--framer-link-font-size,var(--framer-font-size,16px)))_var(--framer-font-size-scale,1)) — selector a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current] span.framer-text:not([dat
• font-size: calc(var(--framer-link-hover-font-size,var(--framer-link-current-font-size,var(--framer-link-font-size,var(--framer-font-size,16px))))_var(--framer-font-size-scale,1)) — selector a.framer-text[data-framer-page-link-current]:hover,a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover s
• font-size: var(--framer-font-size,16px) — selector [data-framer-component-type=DeprecatedRichText] p,[data-framer-component-type=DeprecatedRichText] div,[data-framer-component-type=DeprecatedRichText] h1,[data-framer-component-type=DeprecatedRichText] h2,[data-framer-component-type=DeprecatedRichText
• font-size: var(--framer-link-font-size,var(--framer-font-size,16px)) — selector [data-framer-component-type=DeprecatedRichText] a,[data-framer-component-type=DeprecatedRichText] a span:not([data-text-fill])
• font-weight: min(calc(var(--framer-font-weight-increase,0) + var(--font-weight,400)),900) — selector [data-framer-component-type=Text] div div span,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] span span span,[data-framer-component-type=Text] p span span,[data-framer-component-type=Text] h1 span span,[data-framer-com
• font-weight: var(--framer-font-weight-preview,var(--framer-blockquote-font-weight,var(--framer-font-weight,400))) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,mark.framer-text,span.framer-text:not([data-text-fill])
• font-weight: var(--framer-blockquote-font-weight,var(--framer-code-font-weight,var(--framer-font-weight,400))) — selector code.framer-text,code.framer-text span.framer-text:not([data-text-fill])
• font-weight: var(--framer-font-weight-preview,var(--framer-blockquote-font-weight,var(--framer-link-font-weight,var(--framer-font-weight,400)))) — selector a.framer-text,a.framer-text span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link],span.framer-text[data-nested-link] span.framer-text:not([data-text-fill])
• font-weight: var(--framer-font-weight-preview,var(--framer-link-hover-font-weight,var(--framer-blockquote-font-weight,var(--framer-link-font-weight,var(--framer-font-weight,400))))) — selector a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link]:hover,span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill])
• font-weight: var(--framer-font-weight-preview,var(--framer-link-current-font-weight,var(--framer-link-font-weight,var(--framer-font-weight,400)))) — selector a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current] span.framer-text:not([dat
• font-weight: var(--framer-code-font-weight,var(--framer-font-weight,400)) — selector code.framer-text a.framer-text[data-framer-page-link-current],code.framer-text a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]),code.framer-text span.framer-text[data-framer-page-link-current],code.framer-text span.
• font-weight: var(--framer-font-weight-preview,var(--framer-link-hover-font-weight,var(--framer-link-current-font-weight,var(--framer-link-font-weight,var(--framer-font-weight,400))))) — selector a.framer-text[data-framer-page-link-current]:hover,a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover s
• line-height: var(--line-height) — selector [data-framer-component-type=Text] div div span,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] span span span,[data-framer-component-type=Text] p span span,[data-framer-component-type=Text] h1 span span,[data-framer-com
• line-height: var(--framer-blockquote-line-height,var(--framer-line-height,1.2em)) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,mark.framer-text,span.framer-text:not([data-text-fill])
• line-height: var(--framer-line-height,1.2em) — selector [data-framer-component-type=DeprecatedRichText] p,[data-framer-component-type=DeprecatedRichText] div,[data-framer-component-type=DeprecatedRichText] h1,[data-framer-component-type=DeprecatedRichText] h2,[data-framer-component-type=DeprecatedRichText
• letter-spacing: var(--letter-spacing) — selector [data-framer-component-type=Text] div div span,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] span span span,[data-framer-component-type=Text] p span span,[data-framer-component-type=Text] h1 span span,[data-framer-com
• letter-spacing: var(--framer-blockquote-letter-spacing,var(--framer-letter-spacing,0)) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,mark.framer-text,span.framer-text:not([data-text-fill])
• letter-spacing: var(--framer-letter-spacing,0) — selector [data-framer-component-type=DeprecatedRichText] p,[data-framer-component-type=DeprecatedRichText] div,[data-framer-component-type=DeprecatedRichText] h1,[data-framer-component-type=DeprecatedRichText] h2,[data-framer-component-type=DeprecatedRichText

Colors and surfaces

• color: var(--text-color) — selector [data-framer-component-type=Text] div div span,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] span span span,[data-framer-component-type=Text] p span span,[data-framer-component-type=Text] h1 span span,[data-framer-com
• color: var(--framer-blockquote-text-color-rgb,var(--framer-blockquote-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000)))) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,span.framer-text:not([data-text-fill])
• color: var(--framer-blockquote-text-color-rgb,var(--framer-blockquote-text-color,var(--framer-code-text-color-rgb,var(--framer-code-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000)))))) — selector code.framer-text,code.framer-text span.framer-text:not([data-text-fill])
• color: var(--framer-blockquote-text-color-rgb,var(--framer-blockquote-text-color,var(--framer-link-text-color-rgb,var(--framer-link-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000)))))) — selector a.framer-text,span.framer-text[data-nested-link]
• color: var(--framer-link-current-text-color-rgb,var(--framer-link-current-text-color,var(--framer-link-text-color-rgb,var(--framer-link-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000)))))) — selector a.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current]
• color: var(--framer-blockquote-text-color,var(--framer-text-color,#000)) — selector p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text,mark.framer-text,span.framer-text:not([data-text-fill])
• color: var(--framer-blockquote-text-color,var(--framer-code-text-color,var(--framer-text-color,#000))) — selector code.framer-text,code.framer-text span.framer-text:not([data-text-fill])
• background-color: var(--framer-link-text-background-color-rgb,var(--framer-link-text-background-color,initial)) — selector a.framer-text,span.framer-text[data-nested-link]
• background-color: var(--framer-blockquote-text-background-color,var(--framer-text-background-color,initial)) — selector mark.framer-text,p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text
• background-color: initial — selector a.framer-text,a.framer-text span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link],span.framer-text[data-nested-link] span.framer-text:not([data-text-fill])
• background-color: var(--framer-link-text-background-color,initial) — selector a.framer-text,span.framer-text[data-nested-link]
• background-color: var(--framer-link-hover-text-background-color,var(--framer-link-text-background-color,var(--framer-text-background-color,initial))) — selector a.framer-text:hover,span.framer-text[data-nested-link]:hover
• background-color: var(--framer-link-current-text-background-color,var(--framer-link-text-background-color,var(--framer-text-background-color,initial))) — selector a.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current]
• background-color: var(--framer-link-hover-text-background-color,var(--framer-link-current-text-background-color,var(--framer-link-text-background-color,initial))) — selector a.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover

Components and layout

• border-radius: var(--framer-blockquote-text-background-radius,var(--framer-text-background-radius,initial)) — selector mark.framer-text,p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text
• border-radius: var(--framer-link-text-background-radius,initial) — selector a.framer-text,a.framer-text span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link],span.framer-text[data-nested-link] span.framer-text:not([data-text-fill])
• border-radius: var(--framer-link-hover-text-background-radius,var(--framer-link-text-background-radius,var(--framer-text-background-radius,initial))) — selector a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link]:hover,span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill])
• border-radius: var(--framer-link-current-text-background-radius,var(--framer-link-text-background-radius,initial)) — selector a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current] span.framer-text:not([dat
• border-radius: var(--framer-link-hover-text-background-radius,var(--framer-link-current-text-background-radius,var(--framer-link-text-background-radius,initial))) — selector a.framer-text[data-framer-page-link-current]:hover,a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover s
• max-width: 380px — selector .framer-YutHF .framer-1wrg6tv
• max-width: 1512px — selector .framer-NC4yB .framer-t282um
• max-width: 100% — selector .framer-image.framer-text
• padding: 0 — selector html,body,#main
• padding: var(--framer-blockquote-text-background-padding,var(--framer-text-background-padding,initial)) — selector mark.framer-text,p.framer-text,div.framer-text,h1.framer-text,h2.framer-text,h3.framer-text,h4.framer-text,h5.framer-text,h6.framer-text,li.framer-text,ol.framer-text,ul.framer-text
• padding: max(0em,calc(calc(1.3em - var(--framer-blockquote-line-height,var(--framer-line-height,1.3em)))/2)) — selector .framer-text[data-text-fill]
• padding: var(--framer-link-text-background-padding,initial) — selector a.framer-text,a.framer-text span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link],span.framer-text[data-nested-link] span.framer-text:not([data-text-fill])
• padding: var(--framer-link-hover-text-background-padding,var(--framer-link-text-background-padding,var(--framer-text-background-padding,initial))) — selector a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]),span.framer-text[data-nested-link]:hover,span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill])
• padding: var(--framer-link-current-text-background-padding,var(--framer-link-text-background-padding,initial)) — selector a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current],span.framer-text[data-framer-page-link-current] span.framer-text:not([dat
• padding: var(--framer-link-hover-text-background-padding,var(--framer-link-current-text-background-padding,var(--framer-link-text-background-padding,initial))) — selector a.framer-text[data-framer-page-link-current]:hover,a.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]),span.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover s
• gap: 0 — selector .framer-YutHF.framer-72rtr7
• gap: 25px — selector .framer-YutHF .framer-17w73lb
• gap: 30px — selector .framer-YutHF .framer-14f2oia
• gap: 20px — selector .framer-YutHF .framer-13r15dv
• gap: 6px — selector .framer-YutHF .framer-hy1osi
• gap: 15px — selector .framer-YutHF .framer-n8s6r9,.framer-YutHF .framer-jii8t0
• gap: 42px — selector .framer-YutHF .framer-93tqam
• gap: 32px — selector .framer-YutHF .framer-q6i1c3

Responsive rules

(min-width: 1440px)
(min-width: 1200px) and (max-width: 1439.98px)
(min-width: 810px) and (max-width: 1199.98px)
(max-width: 809.98px)
(max-width:959px) and (min-width:640px)
(max-width:639px) and (min-width:0)
(max-width:1439px) and (min-width:1200px)
(max-width:1199px) and (min-width:810px)
(max-width:809px) and (min-width:0)
(min-width:1200px) and (max-width:1439.98px)
(min-width:810px) and (max-width:1199.98px)
(max-width:809.98px)