


Source: https://specifyapp.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.
font-family: sans-serif โ selector body,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-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,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-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])font-family: 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])font-family: var(var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))) โ selector code.framer-text a.framer-text:hover,code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill])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],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill])font-size: 12px โ selector body,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)) โ 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])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])font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) _ var(--framer-font-size-scale, 1)) โ selector code.framer-text a.framer-text:hover,code.framer-text a.framer-text: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])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])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=DeprecatedRichTextfont-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-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,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-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])font-weight: 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])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],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill])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])font-weight: 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])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-comline-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,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)) โ 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])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=DeprecatedRichTextcolor: 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, 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, var(--framer-code-text-color, 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, var(--framer-link-text-color, var(--framer-text-color, #000))) โ selector a.framer-text,a.framer-text span.framer-text:not([data-text-fill])color: var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))) โ selector code.framer-text a.framer-text,code.framer-text a.framer-text span.framer-text:not([data-text-fill])color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)))) โ selector a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill])color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))))) โ selector code.framer-text a.framer-text:hover,code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill])color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))) โ selector a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill])background-color: var(--token-774051f2-97a1-4997-90c3-a9756757bfb0, #ffffff) โ selector .framer-hauRM.framer-c3gd6ubackground-color: #151718 โ selector .framer-hauRM .framer-1a347hqbackground-color: #000c โ selector .framer-hauRM .framer-1s59c51background-color: var(--token-5f9bc571-32fe-4b02-b8a1-aa0fef8fe86d, #ebedef) โ selector .framer-hauRM .framer-rmdyu2background-color: var(--token-c32c278d-b15d-4814-b598-4714eace47a6, #f6f7f9) โ selector .framer-hauRM .framer-vjerry,.framer-hauRM .framer-1eof4nb,.framer-hauRM .framer-xxteyp,.framer-hauRM .framer-1kewe0gbackground-color: var(--token-21c381bc-664b-4277-97a1-69816b34b276, #624de3) โ selector .framer-hauRM .framer-1hcw1rxbackground-color: #a5a5a5 โ selector .calendly-overlaybackground-color: rgba(31,31,31,.4) โ selector .calendly-overlayborder-radius: 24px โ selector .framer-hauRM .framer-1jxn7lt,.framer-hauRM .framer-t3vaueborder-radius: 8px โ selector .framer-hauRM .framer-rmdyu2border-radius: 25px โ selector .calendly-badge-widget .calendly-badge-contentborder-radius: 50% โ selector .calendly-spinner>divbox-shadow: 0 12px 24px #00000014,0 2px 4px #0000000f โ selector .framer-hauRM .framer-rmdyu2box-shadow: 0 2px 5px rgba(0,0,0,.25) โ selector .calendly-badge-widget .calendly-badge-contentmax-width: 810px โ selector .framer-mlL6I .framer-1d3d4z8-container,.framer-mlL6I .framer-1v9azkh-container,.framer-mlL6I .framer-1lsh4n9-containerpadding: 0 โ selector html,body,#mainpadding: max(0em,calc(calc(1.3em - var(--framer-blockquote-line-height, var(--framer-line-height, 1.3em))) / 2)) โ selector .framer-text[data-text-fill]gap: 0px โ selector .framer-hauRM.framer-c3gd6ugap: 20px โ selector .framer-hauRM .framer-1a347hqgap: 40px โ selector .framer-hauRM .framer-a8cbx3gap: 80px โ selector .framer-hauRM .framer-1ao8viwgap: 16px โ selector .framer-hauRM .framer-dl30xagap: 24px โ selector .framer-hauRM .framer-1guhua1gap: 64px โ selector .framer-hauRM .framer-fte7gvgap: 4px โ selector .framer-hauRM .framer-15rxxkx,.framer-hauRM .framer-fyzcmv,.framer-hauRM .framer-1u7f320,.framer-hauRM .framer-1muxxrd,.framer-hauRM .framer-159yqhm,.framer-hauRM .framer-pwo4y1(min-width: 1440px)
(min-width: 1200px) and (max-width: 1439px)
(min-width: 810px) and (max-width: 1199px)
(max-width: 809px)
(prefers-color-scheme: dark)
(max-width: 1199px) and (min-width: 810px)
(max-width: 809px) and (min-width: 0px)
(max-width:975px)
Source: https://specifyapp.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://specifyapp.com/ โ body
--token-4bdccbfa-12c0-428b-ac60-7ef1e3edfaa1: #1A1D1E;
--token-22773e87-12b2-45ca-a2f1-dddf5fc63bd6: rgba(26, 29, 30, .85);
--token-e762c3b9-8b61-4440-bc08-ccf47ca8b8e1: rgba(26, 29, 30, .5);
--token-5fab030b-ee66-42c7-9364-8f808a584e54: rgb(255, 255, 255);
--token-3538a7d0-431d-4769-b1ba-3c90c8d9700c: rgba(255, 255, 255, .8);
--token-703c781d-88fc-4db0-b0bc-b65130886925: rgb(255, 255, 255);
--token-6d5442b9-065c-401b-b976-919f98d267f8: rgba(255, 255, 255, .7);
--token-b8d33a74-9ac8-4d53-b45a-050ec6bdca88: rgb(26, 29, 30);
--token-16388cf7-55c3-4beb-8d96-b6e3c04d0418: rgba(26, 29, 30, .7);
--token-d4a02bc7-13b1-4cd5-83b9-efab1b7a67b6: rgb(98, 77, 227);
--token-6ce6919e-0714-4b76-b83a-040a4d496c0d: rgb(149, 62, 163);
--token-26d343a0-3a08-494b-aa42-fcfd43cb1751: rgb(210, 49, 151);
--token-f82b809f-8617-4bef-813e-59cfe5cf3a91: rgb(204, 78, 0);
--token-ba11ec79-7a4f-4da4-a882-db3a11a0c6c5: rgb(171, 100, 0);
--token-c102109b-bfdb-4a30-ac69-a14cb76eed4a: rgb(92, 124, 47);
--token-e3e17b53-65c2-4efe-8a1c-519900c57513: rgb(33, 131, 88);
--token-dfaa06b8-63d8-4926-9ffa-28b7a1cd19d8: rgb(16, 125, 152);
--token-19a3edff-c5f3-4a26-8a4a-8574359a2335: rgb(13, 116, 206);
--token-87efeab6-9ec8-4227-9190-ae9b510cb6f4: rgb(26, 29, 30);
--token-5d43d46f-2ff1-4d5e-8e67-1f2567665115: rgb(230, 232, 235);
--token-89ea44c1-e693-4e82-a666-8c3d214feb25: rgba(26, 29, 30, .1);
--token-be1718e3-28e5-489a-9fc4-f6b193f2d227: rgb(255, 255, 255);
--token-3407e96b-b502-4720-a010-8ad9ac1a274a: rgb(98, 77, 227);
--token-16342b47-d160-451b-8ab0-0892fa790466: rgb(255, 255, 255);
--token-5f9bc571-32fe-4b02-b8a1-aa0fef8fe86d: rgb(235, 237, 239);
--token-c32c278d-b15d-4814-b598-4714eace47a6: rgb(246, 247, 249);
--token-f6e3f714-b1e6-4900-aff6-67d9f221a648: rgb(26, 29, 30);
--token-0957076e-6037-46f8-809c-44f7cbb7564c: rgba(26, 29, 30, .15);
--token-9f9cfcd7-a874-4670-acd2-ae6dd2535939: rgba(26, 29, 30, .1);
--token-2b41149c-7b11-4881-8cdb-d1618dbe480f: rgb(255, 255, 255);
--token-53fc4981-e8d8-4b75-a757-ea19924ac92c: rgba(255, 255, 255, .15);
--token-2fc9241f-c568-4709-bf4f-d8dfd979272a: rgb(26, 29, 30);
--token-21c381bc-664b-4277-97a1-69816b34b276: rgb(98, 77, 227);
--token-dceff1cf-157e-4e41-8b68-0520ddf26b48: rgb(193, 177, 255);
--token-cd96444e-4c64-4455-bc47-761872ad345a: rgb(244, 240, 254);
--token-112a473c-b75e-4692-bcc5-34419f0061ab: rgb(149, 62, 163);
--token-7b697b06-9bc1-4bae-b27a-9755ab17c81e: rgb(251, 235, 251);
--token-275d13db-062d-439e-89d1-3c705b5adf00: rgb(210, 49, 151);
--token-32336e0a-a786-444c-a823-a79a16dcbfea: rgb(252, 229, 243);
--token-65c6150e-9dc7-4809-acec-c284a24449be: rgb(204, 78, 0);
--token-473ca7c1-c979-48b5-ba71-730839b29ed9: rgb(255, 239, 214);
--token-b374e7e0-7d32-422c-90f0-d132bb0d7635: rgb(171, 100, 0);
--token-ae6c0da9-98ed-492b-b8f8-874f3a33f671: rgb(255, 247, 194);
--token-d3a20c28-3bcd-4673-8dd9-c9bfbb7c7d9c: rgb(92, 124, 47);
--token-2632795a-a572-4cc7-8a02-053075b7e483: rgb(238, 246, 214);
--token-fd51bad7-62ae-4742-8c17-bda7b8dedf63: rgb(33, 131, 88);
--token-e8ebcdff-f074-490a-977f-89a5a5e4a402: rgb(230, 246, 235);
--token-cb5f5267-0c9c-42a3-9bef-e418f1f35b86: rgb(16, 125, 152);
--token-66f4a663-af0b-4469-ac12-9faec9f863d4: rgb(222, 247, 249);
--token-046a460a-e6bc-4763-8b9a-4c2409c4d8ca: rgb(13, 116, 206);
--token-d456a219-ffdb-424b-8e92-d883377f5775: rgb(230, 244, 254);
--token-774051f2-97a1-4997-90c3-a9756757bfb0: rgb(255, 255, 255);
--token-40c434d6-27d8-48e8-adcd-b13017846b01: rgb(26, 29, 30);
--token-4bdccbfa-12c0-428b-ac60-7ef1e3edfaa1: #FFFFFF;
--token-22773e87-12b2-45ca-a2f1-dddf5fc63bd6: rgba(255, 255, 255, .8);
--token-e762c3b9-8b61-4440-bc08-ccf47ca8b8e1: rgba(255, 255, 255, .5);
--token-5fab030b-ee66-42c7-9364-8f808a584e54: rgb(21, 23, 24);
--token-3538a7d0-431d-4769-b1ba-3c90c8d9700c: rgba(21, 23, 24, .7);
--token-b8d33a74-9ac8-4d53-b45a-050ec6bdca88: rgb(21, 23, 24);
--token-16388cf7-55c3-4beb-8d96-b6e3c04d0418: rgba(21, 23, 24, .7);
--token-d4a02bc7-13b1-4cd5-83b9-efab1b7a67b6: rgb(134, 115, 253);
--token-6ce6919e-0714-4b76-b83a-040a4d496c0d: rgb(231, 150, 243);
--token-26d343a0-3a08-494b-aa42-fcfd43cb1751: rgb(246, 92, 182);
--token-f82b809f-8617-4bef-813e-59cfe5cf3a91: rgb(255, 160, 87);
--token-ba11ec79-7a4f-4da4-a882-db3a11a0c6c5: rgb(255, 202, 22);
--token-c102109b-bfdb-4a30-ac69-a14cb76eed4a: rgb(189, 229, 108);
--token-e3e17b53-65c2-4efe-8a1c-519900c57513: rgb(61, 214, 140);
--token-dfaa06b8-63d8-4926-9ffa-28b7a1cd19d8: rgb(76, 204, 230);
--token-19a3edff-c5f3-4a26-8a4a-8574359a2335: rgb(112, 184, 255);
--token-87efeab6-9ec8-4227-9190-ae9b510cb6f4: rgb(255, 255, 255);
--token-5d43d46f-2ff1-4d5e-8e67-1f2567665115: rgb(76, 81, 85);
--token-89ea44c1-e693-4e82-a666-8c3d214feb25: rgba(255, 255, 255, .1);
--token-be1718e3-28e5-489a-9fc4-f6b193f2d227: rgb(21, 23, 24);
--token-16342b47-d160-451b-8ab0-0892fa790466: rgb(21, 23, 24);
--token-5f9bc571-32fe-4b02-b8a1-aa0fef8fe86d: rgb(32, 36, 37);
--token-c32c278d-b15d-4814-b598-4714eace47a6: rgb(43, 47, 49);
--token-f6e3f714-b1e6-4900-aff6-67d9f221a648: rgb(255, 255, 255);
--token-0957076e-6037-46f8-809c-44f7cbb7564c: rgba(255, 255, 255, .2);
--token-9f9cfcd7-a874-4670-acd2-ae6dd2535939: rgba(255, 255, 255, .15);
--token-2fc9241f-c568-4709-bf4f-d8dfd979272a: rgb(21, 23, 24);
--token-cd96444e-4c64-4455-bc47-761872ad345a: rgb(51, 37, 91);
--token-112a473c-b75e-4692-bcc5-34419f0061ab: rgb(231, 150, 243);
--token-7b697b06-9bc1-4bae-b27a-9755ab17c81e: rgb(69, 29, 71);
--token-275d13db-062d-439e-89d1-3c705b5adf00: rgb(246, 92, 182);
--token-32336e0a-a786-444c-a823-a79a16dcbfea: rgb(75, 20, 61);
--token-65c6150e-9dc7-4809-acec-c284a24449be: rgb(255, 160, 87);
--token-473ca7c1-c979-48b5-ba71-730839b29ed9: rgb(70, 33, 0);
--token-b374e7e0-7d32-422c-90f0-d132bb0d7635: rgb(255, 202, 22);
--token-ae6c0da9-98ed-492b-b8f8-874f3a33f671: rgb(63, 39, 0);
--token-d3a20c28-3bcd-4673-8dd9-c9bfbb7c7d9c: rgb(189, 229, 108);
--token-2632795a-a572-4cc7-8a02-053075b7e483: rgb(41, 55, 29);
--token-fd51bad7-62ae-4742-8c17-bda7b8dedf63: rgb(61, 214, 140);
--token-e8ebcdff-f074-490a-977f-89a5a5e4a402: rgb(17, 59, 41);
--token-cb5f5267-0c9c-42a3-9bef-e418f1f35b86: rgb(76, 204, 230);
--token-66f4a663-af0b-4469-ac12-9faec9f863d4: rgb(0, 56, 72);
--token-046a460a-e6bc-4763-8b9a-4c2409c4d8ca: rgb(112, 184, 255);
--token-d456a219-ffdb-424b-8e92-d883377f5775: rgb(0, 51, 98);
--token-774051f2-97a1-4997-90c3-a9756757bfb0: rgb(21, 23, 24);
--token-40c434d6-27d8-48e8-adcd-b13017846b01: rgb(255, 255, 255);https://specifyapp.com/ โ [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
--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);
--text-decoration: var(--framer-text-decoration);
--line-height: var(--framer-line-height);https://specifyapp.com/ โ [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, var(--framer-text-decoration));https://specifyapp.com/ โ [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: var(--framer-link-hover-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration)));https://specifyapp.com/ โ [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: var(--framer-link-current-text-decoration, var(--framer-link-text-decoration, var(--framer-text-decoration)));https://specifyapp.com/ โ ol.framer-text
--list-style-type: decimal;https://specifyapp.com/ โ .framer-hauRM .framer-1jxn7lt,.framer-hauRM .framer-t3vaue
--border-bottom-width: 1px;
--border-color: var(--token-5d43d46f-2ff1-4d5e-8e67-1f2567665115, #e6e8eb);
--border-left-width: 1px;
--border-right-width: 1px;
--border-style: solid;
--border-top-width: 1px;https://specifyapp.com/ โ .framer-hauRM .framer-bklcgq,.framer-hauRM .framer-19z9mjg
--border-bottom-width: 1px;
--border-color: var(--token-5d43d46f-2ff1-4d5e-8e67-1f2567665115, #e6e8eb);
--border-left-width: 1px;
--border-right-width: 1px;
--border-style: solid;
--border-top-width: 1px;https://specifyapp.com/ โ .framer-hauRM .framer-rmdyu2
--border-bottom-width: 1px;
--border-color: var(--token-89ea44c1-e693-4e82-a666-8c3d214feb25, rgba(26, 29, 30, .1));
--border-left-width: 1px;
--border-right-width: 1px;
--border-style: solid;
--border-top-width: 1px;
Source: https://specifyapp.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 | 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-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,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-blockquote-font-family, var(--framer-link-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))) | a.framer-text,a.framer-text span.framer-text:not([data-text-fill]) |
| font-family | 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)))) | a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]) |
| font-family | var(var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))) | code.framer-text a.framer-text:hover,code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill]) |
| 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],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) |
| 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,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]) |
| font-size | calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) _ var(--framer-font-size-scale, 1)) | code.framer-text a.framer-text:hover,code.framer-text a.framer-text: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]) |
| 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]) |
| 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-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-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,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-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400))) | a.framer-text,a.framer-text span.framer-text:not([data-text-fill]) |
| font-weight | var(--framer-link-hover-font-weight, var(--framer-blockquote-font-weight, var(--framer-link-font-weight, var(--framer-font-weight, 400)))) | a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]) |
| 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],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) |
| 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]) |
| font-weight | 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]) |
| 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,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,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, 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, var(--framer-code-text-color, var(--framer-text-color, #000))) | code.framer-text,code.framer-text span.framer-text:not([data-text-fill]) |
| color | var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))) | a.framer-text,a.framer-text span.framer-text:not([data-text-fill]) |
| color | var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))) | code.framer-text a.framer-text,code.framer-text a.framer-text span.framer-text:not([data-text-fill]) |
| color | var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)))) | a.framer-text:hover,a.framer-text:hover span.framer-text:not([data-text-fill]) |
| color | var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000))))) | code.framer-text a.framer-text:hover,code.framer-text a.framer-text:hover span.framer-text:not([data-text-fill]) |
| color | var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))) | a.framer-text[data-framer-page-link-current],a.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) |
| background-color | var(--token-774051f2-97a1-4997-90c3-a9756757bfb0, #ffffff) | .framer-hauRM.framer-c3gd6u |
| background-color | #151718 | .framer-hauRM .framer-1a347hq |
| background-color | #000c | .framer-hauRM .framer-1s59c51 |
| background-color | var(--token-5f9bc571-32fe-4b02-b8a1-aa0fef8fe86d, #ebedef) | .framer-hauRM .framer-rmdyu2 |
| background-color | var(--token-c32c278d-b15d-4814-b598-4714eace47a6, #f6f7f9) | .framer-hauRM .framer-vjerry,.framer-hauRM .framer-1eof4nb,.framer-hauRM .framer-xxteyp,.framer-hauRM .framer-1kewe0g |
| background-color | var(--token-21c381bc-664b-4277-97a1-69816b34b276, #624de3) | .framer-hauRM .framer-1hcw1rx |
| background-color | #a5a5a5 | .calendly-overlay |
| background-color | rgba(31,31,31,.4) | .calendly-overlay |
| border-radius | 24px | .framer-hauRM .framer-1jxn7lt,.framer-hauRM .framer-t3vaue |
| border-radius | 8px | .framer-hauRM .framer-rmdyu2 |
| border-radius | 25px | .calendly-badge-widget .calendly-badge-content |
| border-radius | 50% | .calendly-spinner>div |
| box-shadow | 0 12px 24px #00000014,0 2px 4px #0000000f | .framer-hauRM .framer-rmdyu2 |
| box-shadow | 0 2px 5px rgba(0,0,0,.25) | .calendly-badge-widget .calendly-badge-content |
| max-width | 810px | .framer-mlL6I .framer-1d3d4z8-container,.framer-mlL6I .framer-1v9azkh-container,.framer-mlL6I .framer-1lsh4n9-container |
| padding | 0 | html,body,#main |
| padding | max(0em,calc(calc(1.3em - var(--framer-blockquote-line-height, var(--framer-line-height, 1.3em))) / 2)) | .framer-text[data-text-fill] |
| gap | 0px | .framer-hauRM.framer-c3gd6u |
| gap | 20px | .framer-hauRM .framer-1a347hq |
| gap | 40px | .framer-hauRM .framer-a8cbx3 |
| gap | 80px | .framer-hauRM .framer-1ao8viw |
| gap | 16px | .framer-hauRM .framer-dl30xa |
| gap | 24px | .framer-hauRM .framer-1guhua1 |
| gap | 64px | .framer-hauRM .framer-fte7gv |
| gap | 4px | .framer-hauRM .framer-15rxxkx,.framer-hauRM .framer-fyzcmv,.framer-hauRM .framer-1u7f320,.framer-hauRM .framer-1muxxrd,.framer-hauRM .framer-159yqhm,.framer-hauRM .framer-pwo4y1 |
Source: https://specifyapp.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.