.webp)
Graphy
Data collaboration in a visual way
No items found.
No items found.
No items found.
Visual identity
Graphy — design reference
Source: https://graphy.app/. 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— selectorbody,input,textarea,select,buttonfont-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-comfont-family: var(--framer-font-family-preview,var(--framer-blockquote-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif)))— selectorp.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))— selectorcode.framer-text,code.framer-text span.framer-text:not([data-text-fill])font-family: var(--framer-font-family-preview,var(--framer-link-font-family,var(--framer-blockquote-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))))— selectora.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-link-font-family,var(--framer-blockquote-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif)))))— selectora.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))))— selectora.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([datfont-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)))))— selectora.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 sfont-size: 12px— selectorbody,input,textarea,select,buttonfont-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-comfont-size: calc(var(--framer-blockquote-font-size,var(--framer-font-size,16px))_var(--framer-font-size-scale,1))— selectorp.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))— selectora.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))— selectora.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([datfont-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))— selectora.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 sfont-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=DeprecatedRichTextfont-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-comfont-weight: var(--framer-font-weight-preview,var(--framer-blockquote-font-weight,var(--framer-font-weight,400)))— selectorp.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)))— selectorcode.framer-text,code.framer-text span.framer-text:not([data-text-fill])font-weight: var(--framer-font-weight-preview,var(--framer-link-font-weight,var(--framer-blockquote-font-weight,var(--framer-font-weight,400))))— selectora.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-link-font-weight,var(--framer-blockquote-font-weight,var(--framer-font-weight,400)))))— selectora.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))))— selectora.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([datfont-weight: var(--framer-code-font-weight,var(--framer-font-weight,400))— selectorcode.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)))))— selectora.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 sline-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-comline-height: var(--framer-blockquote-line-height,var(--framer-line-height,1.2em))— selectorp.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=DeprecatedRichTextletter-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-comletter-spacing: var(--framer-blockquote-letter-spacing,var(--framer-letter-spacing,0))— selectorp.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-comcolor: var(--framer-blockquote-text-color-rgb,var(--framer-blockquote-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000))))— selectorp.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))))))— selectorcode.framer-text,code.framer-text span.framer-text:not([data-text-fill])color: var(--framer-link-text-color-rgb,var(--framer-link-text-color,var(--framer-blockquote-text-color-rgb,var(--framer-blockquote-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000))))))— selectora.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))))))— selectora.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))— selectorp.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)))— selectorcode.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))— selectora.framer-text,span.framer-text[data-nested-link]background-color: var(--framer-blockquote-text-background-color,var(--framer-text-background-color,initial))— selectormark.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-textbackground-color: initial— selectora.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)— selectora.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)))— selectora.framer-text:hover,span.framer-text[data-nested-link]:hoverbackground-color: var(--framer-link-current-text-background-color,var(--framer-link-text-background-color,var(--framer-text-background-color,initial)))— selectora.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)))— selectora.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))— selectormark.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-textborder-radius: var(--framer-link-text-background-radius,initial)— selectora.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)))— selectora.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))— selectora.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([datborder-radius: var(--framer-link-hover-text-background-radius,var(--framer-link-current-text-background-radius,var(--framer-link-text-background-radius,initial)))— selectora.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 sbox-shadow: inset 0 -6px 8px #fffc,inset 0 0 20px 7px #ffffffb3,0 86px 35px #0054db03,0 49px 29px #0054db05,0 22px 22px #0054db0a,0 5px 12px #0054db0d— selector.framer-bnOTt .framer-1utmn76box-shadow: 0 0 .24px #fff,0 0 .48px #fff,0 0 1.68px #fff,0 0 3.36px #fff,0 0 5.76px #fff,0 0 10.08px #fff— selector.framer-bnOTt .framer-v7w99hbox-shadow: 0 0 .12px #fff,0 0 .24px #fff,0 0 .84px #fff,0 0 1.68px #fff,0 0 2.88px #fff,0 0 5.04px #fff— selector.framer-bnOTt .framer-1gj5zgybox-shadow: 0 .48175px 1.63795px -.333333px #00000005,0 1.83083px 6.22481px -.666667px #00000008,0 8px 27.2px -1px #00000014— selector.framer-bnOTt .framer-1qtirgi,.framer-bnOTt .framer-13q6rs5,.framer-bnOTt .framer-1ucl520box-shadow: 0 164px 65px #14004203,0 92px 55px #14004208,0 41px 41px #1400420f,0 10px 22px #14004212— selector.framer-bnOTt .framer-sbevta,.framer-bnOTt .framer-m6bcdp,.framer-bnOTt .framer-xz8bdlbox-shadow: 0 .722625px 1.30072px -.666667px #613b0614,0 2.74624px 4.94323px -1.33333px #613b0617,0 12px 21.6px -2px #613b061f— selector.framer-bnOTt .framer-1u41q0g,.framer-bnOTt .framer-h8nb6r,.framer-bnOTt .framer-1bu37en,.framer-bnOTt .framer-1ccuras,.framer-bnOTt .framer-11ne3kz,.framer-bnOTt .framer-195g9u7,.framer-bnOTt .framer-9ohxgh,.framer-bnOTt .framer-q7im42max-width: 1500px— selector.framer-bnOTt .framer-nfezzg-containerpadding: 0— selectorhtml,body,#mainpadding: var(--framer-blockquote-text-background-padding,var(--framer-text-background-padding,initial))— selectormark.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-textpadding: 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)— selectora.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)))— selectora.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))— selectora.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([datpadding: var(--framer-link-hover-text-background-padding,var(--framer-link-current-text-background-padding,var(--framer-link-text-background-padding,initial)))— selectora.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 sgap: 0— selector.framer-bnOTt.framer-h9rrlrgap: 80px— selector.framer-bnOTt .framer-1ag8aigap: 48px— selector.framer-bnOTt .framer-nwsi4jgap: 7px— selector.framer-bnOTt .framer-i1yasagap: 6px— selector.framer-bnOTt .framer-74iqb1gap: 5px— selector.framer-bnOTt .framer-hzlkrngap: 16px— selector.framer-bnOTt .framer-12x6myvgap: 10px— selector.framer-bnOTt .framer-wbi5c2
Responsive rules
(min-width: 1600px)
(min-width: 1200px) and (max-width: 1599.98px)
(min-width: 810px) and (max-width: 1199.98px)
(max-width: 809.98px)
(prefers-color-scheme:dark)
(max-width:1199px) and (min-width:810px)
(max-width:809px) and (min-width:0)
(min-width:810px) and (max-width:1199.98px)
(max-width:809.98px)
(min-width:1600px)Source: https://graphy.app/. 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://graphy.app/ — body
--token-baa62ec0-6e7c-43c6-85d5-0ff3b459e15a: #fff;
--token-3f232799-89f5-4546-917b-d4f597d4cb73: #fafafa;
--token-45877518-310c-4c13-bbde-7018f06d4452: #272625;
--token-b85af168-9505-44a9-b4cf-6f18c11268d8: #413f3e;
--token-97584676-6960-40ef-b29d-e6a7aba4c33c: #fffc;
--token-859fd315-1526-498f-bc9e-680f02ba4ece: #000;
--token-8a0bfc42-ccbe-462e-be9a-0d231cc3c3bc: #180d24;
--token-63c72b06-e17f-408a-bf00-0445aba8c23b: #e800a4;
--token-1d1fbbbd-d15e-422e-aca9-0ceb02c23bef: #a81ae9;
--token-10d645a8-9096-4cf6-b681-33f302547ce3: #f5c20a;
--token-d4c6969e-c923-4bf2-b89e-cb7a45986eaa: #c5ff55;
--token-6c23d2cd-9711-48c5-8c9f-3cd8d12cf83f: #3b72ff;
--token-2f5e84dd-b13e-4ed0-bccc-3b84ba69dad3: #93b1ff;
--token-0e8dd910-9326-4f62-90a6-9b9838f5f74c: #281bc5;
--token-b77c21f1-947e-4a87-aaf5-f3036f85f5bb: #d83f66;
--token-a14e65b4-e3ce-41be-a68c-6c3157928693: #578700;
--token-f0273e03-86cf-4ca2-9a35-ce23c8ebaa15: #bbe8aa;
--token-6227a44f-a74d-49a1-bc26-114af357dffb: #000;
--token-b2f0746d-4f43-487d-b13b-1448b47ea729: #f2f4f8;
--token-41d7209d-efe5-41fc-91c1-97a18c5bfc78: #e800a41a;
--token-3dccc6c0-ec01-4312-ac5e-7010a105d987: #a81ae91a;
--token-d942e7fa-ab08-49ef-bb34-d8b6cfc2a8b7: #ffc70029;
--token-f35853b5-60be-4ff6-a39d-42ecc10efedc: #3b72ff29;
--token-112c746f-b5a9-4c64-b4f5-4768cfbfcf59: #212121;
--token-199e5a6b-882f-4bb6-9a34-e9fc8180167a: #00000080;
--token-085c19a4-f383-45d1-9f91-2702dc5cf095: #000;
--token-8d06b7a7-49d0-458c-be86-26ba4873bb9e: #2e62ffe6;
--token-1946328b-a4ed-4031-b8c4-b05d74b9a948: #20295a;
--token-08954671-57ab-4c2f-8784-cee6f97106bd: #4a527a;
--token-47c7e4a0-962a-4700-9973-047187029304: #f2f4f8;
--token-96e51d66-3af8-4f7e-b220-c56094209d50: #180d24;
--token-2822c4b9-4100-4536-80f3-b478295fc097: #0c0907;
--token-28f9a6bf-7d1c-49ee-9569-00ee5851d2de: #b1b1b1;
--token-f46219c4-ad63-4679-be25-557925cf4220: #0000001a;
--token-c87c400e-3a46-46dd-a5f5-fcb616de4eee: #fcfcfc;
--token-c829f2d1-19c0-43be-8e0a-40b0f292e19e: #343434;
--token-ab1acd40-06da-45ce-95ab-ebe4fcfc92d4: #454545;
--token-9b2e5a92-9933-465d-b74a-3f59fa3b3b33: #adacac;
--token-a807fa34-df73-469e-b42b-f820cd9cf4d8: #fca89f;
--token-5d9382d8-eaed-4cca-ae14-b85668f3d907: #fc6a5b;
--token-490239f9-a710-45f6-a1d2-fe391b40e709: #f5f5f5;
--token-8a16be79-8d68-4a5a-a36b-bad4798a42c3: #fff;
--token-28f9a6bf-7d1c-49ee-9569-00ee5851d2de: #444;
--token-f46219c4-ad63-4679-be25-557925cf4220: #ffffff1a;
--token-c87c400e-3a46-46dd-a5f5-fcb616de4eee: #1e1e1e;
--token-c829f2d1-19c0-43be-8e0a-40b0f292e19e: #cdcdcd;
--token-ab1acd40-06da-45ce-95ab-ebe4fcfc92d4: #cdcdcd;
--token-9b2e5a92-9933-465d-b74a-3f59fa3b3b33: #414141;
--token-a807fa34-df73-469e-b42b-f820cd9cf4d8: #784f4b;
--token-490239f9-a710-45f6-a1d2-fe391b40e709: #2c2c2c;
--token-8a16be79-8d68-4a5a-a36b-bad4798a42c3: #212121;https://graphy.app/ — [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-component-type=Text] h2 span span,[data-framer-component-type=Text] h3 span span,[data-framer-component-type=Text] h4 span span,[data-framer-component-type=Text] h5 span span,[data-framer-component-type=Text] h6 span span,[data-framer-component-type=Text] a
--text-decoration: var(--framer-text-decoration-style,solid)var(--framer-text-decoration,none)var(--framer-text-decoration-color,currentcolor)var(--framer-text-decoration-thickness,auto);
--text-decoration-skip-ink: var(--framer-text-decoration-skip-ink);
--text-underline-offset: var(--framer-text-decoration-offset);
--font-family: var(--framer-font-family);
--font-style: var(--framer-font-style);
--font-weight: var(--framer-font-weight);
--text-color: var(--framer-text-color);
--letter-spacing: var(--framer-letter-spacing);
--font-size: var(--framer-font-size);
--text-transform: var(--framer-text-transform);
--line-height: var(--framer-line-height);https://graphy.app/ — :root
--overflow-clip-fallback: hidden;
--one-if-corner-shape-supported: 1;https://graphy.app/ — .framer-bnOTt .framer-phju95
--1335ju: 1.5;
--18mrqx2: #363f6b;
--3it368: 1;https://graphy.app/ — .framer-bnOTt .framer-1q6wwoy,.framer-bnOTt .framer-16jmrwf,.framer-bnOTt .framer-1530qr7,.framer-bnOTt .framer-v5xy66,.framer-bnOTt .framer-1igpj5a,.framer-bnOTt .framer-xyptzf
--border-bottom-width: 1px;
--border-color: #d7e8f080;
--border-left-width: 1px;
--border-right-width: 1px;
--border-style: solid;
--border-top-width: 1px;https://graphy.app/ — .framer-bnOTt .framer-ror2yy,.framer-bnOTt .framer-1v0f8wy
--border-bottom-width: 1px;
--border-color: #d7e8f080;
--border-left-width: 1px;
--border-right-width: 1px;
--border-style: solid;
--border-top-width: 1px;https://graphy.app/ — [data-framer-component-type=Text] a,[data-framer-component-type=Text] a div span,[data-framer-component-type=Text] a span span span,[data-framer-component-type=Text] a p span span,[data-framer-component-type=Text] a h1 span span,[data-framer-component-type=Text] a h2 span span,[data-framer-component-type=Text] a h3 span span,[data-framer-component-type=Text] a h4 span span,[data-framer-component-type=Text] a h5 span span,[data-framer-component-type=Text] a h6 span span
--font-family: var(--framer-link-font-family,var(--framer-font-family));
--font-style: var(--framer-link-font-style,var(--framer-font-style));
--font-weight: var(--framer-link-font-weight,var(--framer-font-weight));
--text-color: var(--framer-link-text-color,var(--framer-text-color));
--font-size: var(--framer-link-font-size,var(--framer-font-size));
--text-transform: var(--framer-link-text-transform,var(--framer-text-transform));
--text-decoration: var(--framer-link-text-decoration-style,var(--framer-text-decoration-style,solid))var(--framer-link-text-decoration,var(--framer-text-decoration,none))var(--framer-link-text-decoration-color,var(--framer-text-decoration-color,currentcolor))var(--framer-link-text-decoration-thickness,var(--framer-text-decoration-thickness,auto));
--text-decoration-skip-ink: var(--framer-link-text-decoration-skip-ink,var(--framer-text-decoration-skip-ink));
--text-underline-offset: var(--framer-link-text-decoration-offset,var(--framer-text-decoration-offset));https://graphy.app/ — [data-framer-component-type=Text] a:hover,[data-framer-component-type=Text] a div span:hover,[data-framer-component-type=Text] a span span span:hover,[data-framer-component-type=Text] a p span span:hover,[data-framer-component-type=Text] a h1 span span:hover,[data-framer-component-type=Text] a h2 span span:hover,[data-framer-component-type=Text] a h3 span span:hover,[data-framer-component-type=Text] a h4 span span:hover,[data-framer-component-type=Text] a h5 span span:hover,[data-framer-component-type=Text] a h6 span span:hover
--font-family: var(--framer-link-hover-font-family,var(--framer-link-font-family,var(--framer-font-family)));
--font-style: var(--framer-link-hover-font-style,var(--framer-link-font-style,var(--framer-font-style)));
--font-weight: var(--framer-link-hover-font-weight,var(--framer-link-font-weight,var(--framer-font-weight)));
--text-color: var(--framer-link-hover-text-color,var(--framer-link-text-color,var(--framer-text-color)));
--font-size: var(--framer-link-hover-font-size,var(--framer-link-font-size,var(--framer-font-size)));
--text-transform: var(--framer-link-hover-text-transform,var(--framer-link-text-transform,var(--framer-text-transform)));
--text-decoration-skip-ink: var(--framer-link-hover-text-decoration-skip-ink,var(--framer-link-text-decoration-skip-ink,var(--framer-text-decoration-skip-ink)));
--text-underline-offset: var(--framer-link-hover-text-decoration-offset,var(--framer-link-text-decoration-offset,var(--framer-text-decoration-offset)));https://graphy.app/ — [data-framer-component-type=Text].isCurrent a,[data-framer-component-type=Text].isCurrent a div span,[data-framer-component-type=Text].isCurrent a span span span,[data-framer-component-type=Text].isCurrent a p span span,[data-framer-component-type=Text].isCurrent a h1 span span,[data-framer-component-type=Text].isCurrent a h2 span span,[data-framer-component-type=Text].isCurrent a h3 span span,[data-framer-component-type=Text].isCurrent a h4 span span,[data-framer-component-type=Text].isCurrent a h5 span span,[data-framer-component-type=Text].isCurrent a h6 span span
--font-family: var(--framer-link-current-font-family,var(--framer-link-font-family,var(--framer-font-family)));
--font-style: var(--framer-link-current-font-style,var(--framer-link-font-style,var(--framer-font-style)));
--font-weight: var(--framer-link-current-font-weight,var(--framer-link-font-weight,var(--framer-font-weight)));
--text-color: var(--framer-link-current-text-color,var(--framer-link-text-color,var(--framer-text-color)));
--font-size: var(--framer-link-current-font-size,var(--framer-link-font-size,var(--framer-font-size)));
--text-transform: var(--framer-link-current-text-transform,var(--framer-link-text-transform,var(--framer-text-transform)));
--text-decoration-skip-ink: var(--framer-link-current-text-decoration-skip-ink,var(--framer-link-text-decoration-skip-ink,var(--framer-text-decoration-skip-ink)));
--text-underline-offset: var(--framer-link-current-text-decoration-offset,var(--framer-link-text-decoration-offset,var(--framer-text-decoration-offset)));https://graphy.app/ — ol.framer-text
--list-style-type: decimal;https://graphy.app/ — [data-framer-component-type=DeprecatedRichText] .text-styles-preset-reset
--font-variation-settings: normal;Source: https://graphy.app/. 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 | sans-serif | body,input,textarea,select,button |
| font-family | var(--font-family) | [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))) | 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)) | code.framer-text,code.framer-text span.framer-text:not([data-text-fill]) |
| font-family | var(--framer-font-family-preview,var(--framer-link-font-family,var(--framer-blockquote-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif)))) | 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-link-font-family,var(--framer-blockquote-font-family,var(--framer-font-family,Inter,Inter Placeholder,sans-serif))))) | 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)))) | 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))))) | 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 | body,input,textarea,select,button |
| font-size | var(--font-size) | [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)) | 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)) | 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)) | 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)) | 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) | [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)) | [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) | [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))) | 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))) | code.framer-text,code.framer-text span.framer-text:not([data-text-fill]) |
| font-weight | var(--framer-font-weight-preview,var(--framer-link-font-weight,var(--framer-blockquote-font-weight,var(--framer-font-weight,400)))) | 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-link-font-weight,var(--framer-blockquote-font-weight,var(--framer-font-weight,400))))) | 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)))) | 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)) | 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))))) | 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) | [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)) | 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) | [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) | [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)) | 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) | [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 |
| color | var(--text-color) | [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)))) | 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)))))) | code.framer-text,code.framer-text span.framer-text:not([data-text-fill]) |
| color | var(--framer-link-text-color-rgb,var(--framer-link-text-color,var(--framer-blockquote-text-color-rgb,var(--framer-blockquote-text-color,var(--framer-text-color-rgb,var(--framer-text-color,#000)))))) | 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)))))) | 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)) | 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))) | 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)) | a.framer-text,span.framer-text[data-nested-link] |
| background-color | var(--framer-blockquote-text-background-color,var(--framer-text-background-color,initial)) | 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 | 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) | 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))) | 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))) | 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))) | a.framer-text[data-framer-page-link-current]:hover,span.framer-text[data-framer-page-link-current]:hover |
| border-radius | var(--framer-blockquote-text-background-radius,var(--framer-text-background-radius,initial)) | 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) | 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))) | 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)) | 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))) | 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 |
| box-shadow | inset 0 -6px 8px #fffc,inset 0 0 20px 7px #ffffffb3,0 86px 35px #0054db03,0 49px 29px #0054db05,0 22px 22px #0054db0a,0 5px 12px #0054db0d | .framer-bnOTt .framer-1utmn76 |
| box-shadow | 0 0 .24px #fff,0 0 .48px #fff,0 0 1.68px #fff,0 0 3.36px #fff,0 0 5.76px #fff,0 0 10.08px #fff | .framer-bnOTt .framer-v7w99h |
| box-shadow | 0 0 .12px #fff,0 0 .24px #fff,0 0 .84px #fff,0 0 1.68px #fff,0 0 2.88px #fff,0 0 5.04px #fff | .framer-bnOTt .framer-1gj5zgy |
| box-shadow | 0 .48175px 1.63795px -.333333px #00000005,0 1.83083px 6.22481px -.666667px #00000008,0 8px 27.2px -1px #00000014 | .framer-bnOTt .framer-1qtirgi,.framer-bnOTt .framer-13q6rs5,.framer-bnOTt .framer-1ucl520 |
| box-shadow | 0 164px 65px #14004203,0 92px 55px #14004208,0 41px 41px #1400420f,0 10px 22px #14004212 | .framer-bnOTt .framer-sbevta,.framer-bnOTt .framer-m6bcdp,.framer-bnOTt .framer-xz8bdl |
| box-shadow | 0 .722625px 1.30072px -.666667px #613b0614,0 2.74624px 4.94323px -1.33333px #613b0617,0 12px 21.6px -2px #613b061f | .framer-bnOTt .framer-1u41q0g,.framer-bnOTt .framer-h8nb6r,.framer-bnOTt .framer-1bu37en,.framer-bnOTt .framer-1ccuras,.framer-bnOTt .framer-11ne3kz,.framer-bnOTt .framer-195g9u7,.framer-bnOTt .framer-9ohxgh,.framer-bnOTt .framer-q7im42 |
| max-width | 1500px | .framer-bnOTt .framer-nfezzg-container |
| padding | 0 | html,body,#main |
| padding | var(--framer-blockquote-text-background-padding,var(--framer-text-background-padding,initial)) | 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)) | .framer-text[data-text-fill] |
| padding | var(--framer-link-text-background-padding,initial) | 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))) | 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)) | 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))) | 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 | .framer-bnOTt.framer-h9rrlr |
| gap | 80px | .framer-bnOTt .framer-1ag8ai |
| gap | 48px | .framer-bnOTt .framer-nwsi4j |
| gap | 7px | .framer-bnOTt .framer-i1yasa |
| gap | 6px | .framer-bnOTt .framer-74iqb1 |
| gap | 5px | .framer-bnOTt .framer-hzlkrn |
| gap | 16px | .framer-bnOTt .framer-12x6myv |
| gap | 10px | .framer-bnOTt .framer-wbi5c2 |
Source: https://graphy.app/. 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.
- 106 custom-property declarations found; 664 relevant property declarations parsed.