Tines

Source: https://www.tines.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.

https://www.tines.com/ — :root

--pageForegroundColor: var(--c-purple55) !important;
--footerBackgroundColor: transparent;
--footerForegroundColor: var(--c-purple55);
--footerLinkHoverColor: #8d75e6;
--areaNavPillBg: var(--c-purple5);
--areaNavPillBgHover: var(--c-purple10);
--areaNavActiveColor: var(--c-purple60);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc40) 50%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-resolved-scheme=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 40%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-color-scheme=auto]:not([data-resolved-scheme]) .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 40%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-page-theme-mode=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 40%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-appearance=lighter] .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc40) 20%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-resolved-scheme=dark] [data-appearance=lighter] .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 20%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-color-scheme=auto]:not([data-resolved-scheme]) [data-appearance=lighter] .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 20%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-page-theme-mode=dark] [data-appearance=lighter] .CollectionViewToggle-module-scss-module**zlj3RW**tab

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 20%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-appearance=lighter] .CollectionViewToggle-module-scss-module**zlj3RW**tab:not(.CollectionViewToggle-module-scss-module**zlj3RW**active):hover

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc30) 20%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — .CollectionViewToggle-module-scss-module**zlj3RW**tab:not(.CollectionViewToggle-module-scss-module**zlj3RW**active):hover

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc30) 50%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-resolved-scheme=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab:not(.CollectionViewToggle-module-scss-module**zlj3RW**active):hover

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 50%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-color-scheme=auto]:not([data-resolved-scheme]) .CollectionViewToggle-module-scss-module**zlj3RW**tab:not(.CollectionViewToggle-module-scss-module**zlj3RW**active):hover

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 50%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-page-theme-mode=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab:not(.CollectionViewToggle-module-scss-module**zlj3RW**active):hover

--ViewSwitcherTabBg: color-mix(in srgb, var(--acc50) 50%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: var(--acc5);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-resolved-scheme=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: var(--acc90);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-color-scheme=auto]:not([data-resolved-scheme]) .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: var(--acc90);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-page-theme-mode=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: var(--acc90);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-neutral-color] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: color-mix(in srgb, var(--c-purple5) 70%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-resolved-scheme=dark] [data-neutral-color] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: color-mix(in srgb, var(--darkest) 60%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-color-scheme=auto]:not([data-resolved-scheme]) [data-neutral-color] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: color-mix(in srgb, var(--darkest) 60%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-page-theme-mode=dark] [data-neutral-color] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**active

--ViewSwitcherTabBg: color-mix(in srgb, var(--darkest) 60%, transparent);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**featuredActive

--ViewSwitcherTabBg: var(--c-lightest);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-resolved-scheme=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**featuredActive

--ViewSwitcherTabBg: var(--c-darkest);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-color-scheme=auto]:not([data-resolved-scheme]) .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**featuredActive

--ViewSwitcherTabBg: var(--c-darkest);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — [data-page-theme-mode=dark] .CollectionViewToggle-module-scss-module**zlj3RW**tab.CollectionViewToggle-module-scss-module**zlj3RW**featuredActive

--ViewSwitcherTabBg: var(--c-darkest);

https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css — .ChecklistBlock-module-scss-module**ypyd8G**checklist

--checklistIconColor: var(--acc40);

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root

--purple: #8d75e6;
--purple25: #f8f2f6;
--purple50: #f3ecf7;
--purple100: #eadff8;
--purple200: #d7c4fa;
--purple300: #c2aafa;
--purple400: #a990f5;
--purple500: #8d75e6;
--purple600: #7f69ce;
--purple700: #6956a8;
--purple800: #4d3e78;
--purple900: #32274b;
--green: #25a871;
--green25: #f3f6ee;
--green50: #e9f3e7;
--green100: #d6edd9;
--green200: #b0e0bd;
--green300: #87d1a3;
--green400: #5abe89;
--green500: #25a871;
--green600: #239667;
--green700: #1f7a57;
--green800: #195642;
--green900: #11352e;
--orange: #f47e3f;
--orange25: #fdf3eb;
--orange50: #feede0;
--orange100: #ffe0cc;
--orange200: #ffc8a3;
--orange300: #ffaf7e;
--orange400: #fd975d;
--orange500: #f47e3f;
--orange600: #e16521;
--orange700: #b74d1a;
--orange800: #803218;
--orange900: #4c1812;
--pink: #e269a4;
--pink25: #fdf2f2;
--pink50: #feebee;
--pink100: #ffdce8;
--pink200: #ffbfdb;
--pink300: #fda2cb;
--pink400: #f486b8;
--pink500: #e269a4;
--pink600: #cb5d94;
--pink700: #a54b7a;
--pink800: #763359;
--pink900: #4a1d3b;
--yellow: #e49307;
--yellow25: #fdf4ea;
--yellow50: #feefdf;
--yellow100: #ffe5ca;
--yellow200: #ffd29f;
--yellow300: #fdbd74;
--yellow400: #f5a847;
--yellow500: #e49307;
--yellow600: #cd840e;
--yellow700: #a96c14;
--yellow800: #7a4d16;
--yellow900: #4f3014;
--lime: #99b22a;
--lime25: #f8f6ea;
--lime50: #f4f3e0;
--lime100: #ebedcb;
--lime200: #d9e1a2;
--lime300: #c6d478;
--lime400: #b0c44f;
--lime500: #99b22a;
--lime600: #8aa028;
--lime700: #718424;
--lime800: #52601e;
--lime900: #343e17;
--blue: #4e8fd0;
--blue25: #f4f4f5;
--blue50: #eceff6;
--blue100: #dce5f7;
--blue200: #bbd2f8;
--blue300: #96bdf3;
--blue400: #71a7e5;
--blue500: #4e8fd0;
--blue600: #4780bc;
--blue700: #3c699b;
--blue800: #2e4c73;
--blue900: #20304c;
--red: #e14f4c;
--red25: #fdf1ec;
--red50: #fee8e2;
--red100: #ffd8cf;
--red200: #ffb6ab;
--red300: #fe9589;
--red400: #f67269;
--red500: #e14f4c;
--red600: #ca4845;
--red700: #a53c3a;
--red800: #772e2c;
--red900: #4b1f1e;
--teal: #04b9ad;
--teal25: #f4f7f2;
--teal50: #ebf5ef;
--teal100: #daf0e9;
--teal200: #b6e7dd;
--teal300: #8edbcf;
--teal400: #5fcbbf;
--teal500: #04b9ad;
--teal600: #05a49c;
--teal700: #058380;
--teal800: #04595d;
--teal900: #01333c;
--white: #fff;
--black: #000;
--lightest: #fcf9f5;
--darkest: #1e1c22;
--gray: #b3b1af;
--light100: #f8f4f0;
--light200: #f3efea;
--light300: #ede9e3;
--light400: #e4e0d9;
--light500: #dcd7d0;
--dark500: #32313b;
--dark600: #2e2d36;
--dark700: #2a2831;
--dark800: #26242c;
--dark900: #222027;
--darkModeBg: var(--c-darkest);
--pageBg: var(--lightest);
--pageForegroundColor: var(--acc65);
--panelBg: var(--lightest);
--pageAccent: var(--purple);
--intercomBannerHeight: 0px;
--pageTopFixedElementsHeight: calc(var(--siteNavHeight,0px) + var(--intercomBannerHeight,0px));
--c-lightest: #fcf9f5;
--c-darkest: #16131e;
--c-purple1: #f8f6fa;
--c-purple2: #f5f2fb;
--c-purple5: #ece8fd;

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root[data-color-scheme=light]:not([data-page-theme-mode])

--lightningcss-light: initial;
--lightningcss-dark: ;
--pageBg: var(--lightest);
--panelBg: var(--lightest);
--pageForegroundColor: var(--acc65);

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root[data-color-scheme=dark]:not([data-page-theme-mode])

--lightningcss-light: ;
--lightningcss-dark: initial;
--pageBg: var(--darkModeBg);
--panelBg: var(--darkModeBg);
--pageForegroundColor: var(--c-lightest);

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root[data-page-theme=matrix]:root

--lightningcss-light: ;
--lightningcss-dark: initial;
--pageBg: var(--c-green99);
--panelBg: var(--c-green99);
--darkModeBg: var(--c-green99);
--pageForegroundColor: var(--c-green30);
--fontSans: var(--fontPixel);
--fontSerif: var(--fontPixel);
--fontSerifDisplay: var(--fontPixel);
--matrixGreen: var(--c-green30);
--matrixGreenBright: var(--c-green25);
--matrixGreenDim: var(--c-green40);
--matrixGreenDark: var(--c-green70);
--matrixGreenDarker: var(--c-green85);
--matrixGreenBg: var(--c-green85);
--matrixGlow: 0 0 8px color-mix(in srgb, var(--c-green40) 40%, transparent);
--matrixGlowStrong: 0 0 12px color-mix(in srgb, var(--c-green40) 60%, transparent);
--acc1: var(--c-green1);
--acc2: var(--c-green2);
--acc5: var(--c-green5);
--acc10: var(--c-green10);
--acc15: var(--c-green15);
--acc20: var(--c-green20);
--acc25: var(--c-green25);
--acc30: var(--c-green30);
--acc35: var(--c-green35);
--acc40: var(--c-green40);
--acc45: var(--c-green45);
--acc50: var(--c-green50);
--acc55: var(--c-green55);
--acc60: var(--c-green60);
--acc65: var(--c-green65);
--acc70: var(--c-green70);
--acc75: var(--c-green75);
--acc80: var(--c-green80);
--acc85: var(--c-green85);
--acc90: var(--c-green90);
--acc95: var(--c-green95);
--acc97: var(--c-green97);
--acc99: var(--c-green99);
--areaNavPillBg: var(--c-green85);
--areaNavPillColor: var(--c-green5);
--areaNavPillBgHover: var(--c-green80);
--pageAccent: var(--matrixGreenBright);
--areaNavActiveColor: var(--matrixGreenBright);
--pxTextSm: 9px;
--pxText: 18px;
--pxHeadingSm: 27px;
--pxHeadingMd: 36px;
--pxHeadingLg: 45px;
--pxHeadingXl: 54px;
--pxDisplay: 63px;
--pxTextSm: 12px;
--pxText: 16px;
--pxHeadingSm: 22.5px;
--pxHeadingMd: 31.5px;
--pxHeadingXl: 49.5px;
--pxDisplay: 58.5px;

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root[data-page-theme-mode=dark]

--lightningcss-light: ;
--lightningcss-dark: initial;

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root[data-page-theme-mode=light]

--lightningcss-light: initial;
--lightningcss-dark: ;

https://www.tines.com/\_next/static/immutable/chunks/3-nyg4z27prjn.css — :root[data-color-scheme=auto]:not([data-page-theme-mode])

--lightningcss-light: ;
--lightningcss-dark: initial;
--pageBg: var(--darkModeBg);
--panelBg: var(--darkModeBg);
--pageForegroundColor: var(--white);
--lightningcss-light: initial;
--lightningcss-dark: ;
--pageBg: var(--lightest);
--panelBg: var(--lightest);
--pageForegroundColor: var(--acc65);

Source: https://www.tines.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.

Source: https://www.tines.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Evidence and limitations

• Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
• CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
• No inferred dark theme, semantic color roles or framework defaults have been added.
• 1599 custom-property declarations found; 3241 relevant property declarations parsed.

Stylesheet sources

• https://www.tines.com/
• https://www.tines.com/_next/static/immutable/chunks/3-nyg4z27prjn.css
• https://www.tines.com/_next/static/immutable/chunks/1bmd2ryn1r-hv.css
• https://www.tines.com/_next/static/immutable/chunks/2l3bz0bpn0zxr.css
• https://www.tines.com/_next/static/immutable/chunks/0gvygmvdi341j.css
• https://www.tines.com/_next/static/immutable/chunks/0v211balgkkha.css
• https://www.tines.com/_next/static/immutable/chunks/1yaui-dbhxgdk.css
• https://www.tines.com/_next/static/immutable/chunks/2lv8xv7ndxqcn.css