Twist

Source: https://twist.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://twist.com/\_next/static/css/6ac611ef1987375f.css — :root

--color-black-08: rgba(0,0,0,.88);
--color-black-07: rgba(0,0,0,.66);
--color-black-06: rgba(0,0,0,.45);
--color-black-05: rgba(0,0,0,.24);
--color-black-04: rgba(0,0,0,.14);
--color-black-03: rgba(0,0,0,.08);
--color-black-02: rgba(0,0,0,.05);
--color-black-01: rgba(0,0,0,.02);
--color-grey-01: #fafafa;
--color-grey-02: #f2f2f2;
--color-grey-03: #ebebeb;
--color-grey-04: #dedede;
--color-grey-05: #c2c2c2;
--color-grey-06: #999;
--color-grey-07: #575757;
--color-grey-08: #1f1f1f;
--color-red-01: #fdf4f3;
--color-red-02: #fbe3e0;
--color-red-03: #ee5244;
--color-red-04: #e44232;
--color-red-06: #d1453b;
--color-blue-01: #f1f7fe;
--color-blue-02: #e2f0ff;
--color-blue-03: #3879fa;
--color-blue-04: #316fea;
--color-blue-06: #2064ca;
--color-beige-01: #fcf8f3;
--color-beige-02: #efebe6;
--color-beige-03: #eae5de;
--color-green-01: #f6f9f7;
--color-green-02: #d2e0da;
--color-green-03: #c7d4cf;
--color-green-04: #6b8767;
--color-gold-01: #faf6eb;
--color-gold-02: #efe0b9;
--color-gold-03: #e3cf91;
--color-gold-04: #f7b84f;
--color-yellow-03: #fffcf0;
--color-yellow-04: #ffd669;
--color-linkedin: #0077b5;
--color-facebook: #1877f2;
--color-twitter: #1da1f2;
--color-youtube: red;
--color-instagram: #e145a5;
--color-base-white: #fff;
--color-base-black: #000;
--color-td-primary: #e44232;
--color-td-secondary-dark: #fae8d6;
--color-td-secondary-mid: #fff5eb;
--color-td-secondary-light: #fff9f3;
--color-td-cta-active: #d1453b;
--color-td-cta-hover: #ee5244;
--color-tw-primary: #316fea;
--color-tw-secondary-dark: #dce7e4;
--color-tw-secondary-mid: #f0f7f5;
--color-tw-secondary-light: #f6f9f8;
--color-tw-cta-active: #2a61cf;
--color-tw-cta-hover: #3879fa;
--color-dst-primary: #438952;
--color-dst-secondary-dark: #f3ecd1;
--color-dst-secondary-light: #fefbf1;
--color-dst-cta-active: #4f7d54;
--color-dst-cta-hover: #539359;
--color-perceptional-green: #6b8767;
--color-perceptional-yellow: #ffc93e;
--color-perceptional-pink: #ffada4;
--radius-sm: 2.5px;
--radius-md: 4px;
--space-2: 0.125rem;
--space-4: 0.25rem;
--space-8: 0.5rem;
--space-12: 0.75rem;
--space-16: 1rem;
--space-24: 1.5rem;
--space-32: 2rem;
--space-40: 2.5rem;
--space-48: 3rem;
--space-64: 4rem;
--space-96: 6rem;
--space-128: 8rem;
--space-160: 10rem;
--space-192: 12rem;
--space-240: 15rem;
--space-304: 19rem;
--z-index-sticky: 100;
--z-index-popup: 5000;
--z-index-dialog: 6000;
--z-index-dropdown: 7000;
--z-index-overlay: 8000;
--z-index-modal: 9000;
--z-index-toast: 10000;
--animation-ease-base: cubic-bezier(0.2,0.8,0.2,1);
--animation-duration-150: 150ms;
--animation-duration-350: 350ms;
--animation-duration-600: 600ms;
--shadow-grey: rgba(0,0,0,.08);
--shadow-color: rgba(0,0,0,.24);
--shadow-xs: 0 2px 4px rgba(0,0,0,.04);
--shadow-sm: 0 2px 7px 0 rgba(0,0,0,.12);
--shadow-md: 0px 3px 20px rgba(0,0,0,.15);
--shadow-xl: 0px 4px 64px rgba(0,0,0,.35);
--shadow-lg: 0 2px 6px 0 rgba(0,0,0,.06),0 7px 15px 0 rgba(0,0,0,.12);
--shadow-hover: 0 6px 24px 0px rgba(0,0,0,.24);
--shadow-focus-xs: 0px 2px 7px rgba(0,0,0,.14);
--shadow-focus: 0 0 0 1px #1f60c2,0 0 0 4px #dceaff;
--shadow-focus-error: 0 0 0 1px #d1453b,0 0 0 4px #fbdad7;
--shadow-elevated: 0px 1px 19px 0px rgba(42,29,48,.06),0px 0px 48px 0px hsla(30,78%,91%,.6);
--shadow-focusvisible-default: 0 0 0 1px #1f60c2,0 0 0 4px #dceafe;
--shadow-focusvisible-error: 0 0 0 1px #d1453b,0 0 0 4px #fbdad7;
--shadow-selectable-control: 0px 1px 5px 0px rgba(42,29,48,.11),0px 0px 0px 1px rgba(42,29,48,.04);
--icon-xl: 24px;
--icon-lg: 20px;
--icon-base: 18px;
--icon-sm: 16px;
--icon-xs: 14px;
--opacity-disabled: 0.4;
--border-radius-full: 9999px;
--border-radius-xl: 13px;
--border-radius-lg: 10px;
--border-radius-base: 8px;
--border-radius-sm: 6px;
--border-radius-none: 0;
--display-onlight-primary: #232115;
--display-onlight-primary-dimmed: rgba(35,33,21,.87);
--display-onlight-secondary: rgba(35,33,21,.65);
--display-onlight-tertiary: rgba(35,33,21,.48);
--display-onlight-color-blue: #0067c7;
--display-onlight-color-red: #d64638;
--display-onlight-color-green: #266f1b;
--display-onlight-color-yellow: #bd8800;
--display-onlight-color-orange: #8f4700;
--display-ondark-primary: #fff;
--display-ondark-secondary: hsla(0,0%,100%,.7);
--display-ondark-tertiary: hsla(0,0%,100%,.5);
--display-ondark-color-blue: #0079eb;
--ui-border: rgba(42,29,48,.16);
--ui-background: hsla(53,10%,69%,.15);
--composition-background-primary: #fefdfc;
--composition-background-secondary: #fff;
--accents-red: #de483a;
--accents-yellow: #ffc93e;
--accents-green: #6b8767;
--accents-pink: #ffada4;
--accents-creme: #fae8d6;
--tone-neutral: var(--display-onlight-secondary);
--tone-positive: var(--display-onlight-color-green);
--tone-critical: var(--display-onlight-color-red);
--actionable-primary-background-idle: #de483a;
--actionable-primary-background-onhover: #d34936;
--actionable-secondary-background-idle: hsla(53,10%,69%,.2);
--actionable-secondary-background-onhover: hsla(53,10%,69%,.3);
--actionable-tertiary-background-idle: transparent;
--actionable-tertiary-background-onhover: rgba(0,103,199,.08);
--actionable-quaternary-background-idle: transparent;
--actionable-quaternary-background-onhover: hsla(53,10%,69%,.2);
--selectable-unselected-background-idle: hsla(53,10%,69%,.5);
--selectable-unselected-background-onhover: hsla(53,10%,69%,.65);
--selectable-selected-background-idle: #de483a;
--selectable-selected-background-onhover: #c74433;
--badge-background-default: #fbeddf;
--badge-background-new: #e6eeea;
--badge-background-beta: #faead1;
--field-fill-background-idle: hsla(53,10%,69%,.2);
--field-fill-background-onhover: hsla(53,10%,69%,.25);
--field-outline-background-idle: #fff;
--field-outline-background-onhover: #fff;
--field-outline-border-idle: rgba(42,29,48,.24);
--field-outline-border-onhover: rgba(42,29,48,.32);
--elevated-background: #fff;
--elevated-border: rgba(42,29,48,.16);
--overlay-background-idle: rgba(35,33,21,.75);
--overlay-background-onhover: rgba(35,33,21,.65);
--overlay-blur: blur(8px);
--background-primary: #fefdfc;
--background-secondary: #fff;
--font-family-sans: "Graphik Web","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-family-heading: "Graphik Web","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-family-body: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--typography-max-screen: 70;
--typography-min-screen: 30;
--major-font-weight: 600;
--major-letter-spacing: -0.02em;
--major-line-height: 1.15;
--minor-font-family: var(--font-family-body);
--minor-letter-spacing: 0.01em;
--minor-font-weight: 475;
--minor-line-height: 1.35;
--major-4xl-min-size: 2.75;
--major-4xl-max-size: 5.375;
--major-3xl-min-size: 2.625;
--major-3xl-max-size: 4.1875;
--major-2xl-min-size: 2.3125;
--major-2xl-max-size: 3.4375;
--major-2xl-letter-spacing: -0.01em;
--major-xl-min-size: 2;
--major-xl-max-size: 2.75;
--major-xl-letter-spacing: -0.01em;
--major-lg-min-size: 1.75;
--major-lg-max-size: 2.375;
--major-lg-letter-spacing: -0.005em;
--major-lg-line-height: 1.28;
--major-base-min-size: 1.5;
--major-base-max-size: 1.8125;
--major-base-line-height: 1.28;
--major-sm-min-size: 1.1875;
--major-sm-max-size: 1.375;

https://twist.com/\_next/static/css/6ac611ef1987375f.css — :root .twistTheme

--shadow-elevated: 0px 0px 5px -2px rgba(0,0,0,.2),0px 4px 40px rgba(0,111,133,.05);
--icon-base: 16px;
--icon-sm: 14px;
--border-radius-lg: 8px;
--border-radius-base: 6px;
--display-onlight-primary: #222829;
--display-onlight-primary-dimmed: rgba(32,41,43,.87);
--display-onlight-secondary: rgba(26,45,49,.64);
--display-onlight-tertiary: rgba(21,49,54,.42);
--display-onlight-color-green: #3a7400;
--display-ondark-primary: #fff;
--ui-border: rgba(6,35,41,.16);
--ui-divider: var(--ui-border);
--ui-background: rgba(0,64,77,.05);
--tone-critical: var(--color-tw-display-onlight-ruddy-brown);
--actionable-primary-background-idle: #008aa6;
--actionable-primary-background-onhover: #1995af;
--actionable-secondary-background-idle: rgba(0,138,166,.1);
--actionable-secondary-background-onhover: rgba(0,138,166,.07);
--actionable-tertiary-background-idle: transparent;
--actionable-tertiary-background-onhover: transparent;
--actionable-quaternary-background-idle: transparent;
--actionable-quaternary-background-onhover: rgba(0,64,77,.07);
--selectable-unselected-background-idle: rgba(0,64,77,.2);
--selectable-unselected-background-onhover: rgba(0,64,77,.14);
--selectable-selected-background-idle: #008aa6;
--selectable-selected-background-onhover: #1995af;
--card-background-idle: #fcfcfc;
--card-background-onhover: #fff;
--card-border-idle: rgba(6,35,41,.1);
--card-border-onhover: rgba(6,35,41,.22);
--field-fill-background-idle: rgba(0,64,77,.1);
--field-fill-background-onhover: rgba(0,64,77,.07);
--field-outline-background-idle: #fcfcfc;
--field-outline-background-onhover: #fff;
--field-outline-border-idle: rgba(6,35,41,.17);
--field-outline-border-onhover: rgba(0,39,47,.26);
--overlay-background-idle: rgba(34,40,41,.8);
--overlay-background-onhover: rgba(34,40,41,.7);
--background-primary: #fafafa;

Source: https://twist.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://twist.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.
• 1169 custom-property declarations found; 730 relevant property declarations parsed.

Stylesheet sources

• https://twist.com/_next/static/css/6ac611ef1987375f.css
• https://twist.com/_next/static/css/d6d75771e034c085.css