Agentic MDR.100% Coverage.7-Day Go-Live.

Design Specification — Agentic MDR.100% Coverage.7-Day Go-Live.

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#060F18), ink text (#091722), a vivid accent (#1C8C9C). All type is set in Poppins,sans-serif. Detected font weights: 100, 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://tenex.ai/wp-content/uploads/2026/01/Tenexai-Logo-Light-Blue-small.png · https://tenex.ai/wp-content/uploads/2023/10/logo.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(135deg,rgb(6, 147, 227) 0%,rgb(155, 81, 224) 100%)
• linear-gradient(135deg,rgb(122, 220, 180) 0%,rgb(0, 208, 130) 100%)
• linear-gradient(135deg,rgb(252, 185, 0) 0%,rgb(255, 105, 0) 100%)
• linear-gradient(135deg,rgb(255, 105, 0) 0%,rgb(207, 46, 46) 100%)
• linear-gradient(135deg,rgb(238, 238, 238) 0%,rgb(169, 184, 195) 100%)
• linear-gradient(135deg,rgb(74, 234, 220) 0%,rgb(151, 120, 209) 20%,rgb(207, 42, 186) 40%,rgb(238, 44, 130) 60%,rgb(251, 105, 98) 80%,rgb(254, 248, 76) 100%)
• linear-gradient(135deg,rgb(255, 206, 236) 0%,rgb(152, 150, 240) 100%)
• linear-gradient(135deg,rgb(254, 205, 165) 0%,rgb(254, 45, 45) 50%,rgb(107, 0, 62) 100%)
• linear-gradient(135deg,rgb(255, 203, 112) 0%,rgb(199, 81, 192) 50%,rgb(65, 88, 208) 100%)
• linear-gradient(135deg,rgb(255, 245, 203) 0%,rgb(182, 227, 212) 50%,rgb(51, 167, 181) 100%)

> 5 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Poppins — stack: Poppins,sans-serif

Font stacks (most used first)

• Poppins,sans-serif
• 'Readex Pro'
• 'DM Sans'
• DM Sans
• var(--nexis-content-font-family)
• 'Geist Mono',monospace
• 'Geist Mono',ui-monospace,monospace
• var(--nexis-header-font-family)
• "DM Sans"
• Flaticon

Web font sources

• fonts.googleapis.com/css?family=Poppins%3A400%2C400%7CMichroma%3A400%2C400%2C500%2C600%2C700%7CDM%20Sans%3A700%2C500%7CReadex%20Pro%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 1px 1px 5px rgba(0,0,0,.1019607843)
• 0 12px 32px rgba(9,23,34,.08),0 2px 6px rgba(9,23,34,.05)
• 0 24px 60px rgba(9,23,34,.18)
• 0 8px 30px rgba(28,124,140,.28)
• inset 1em 1em
• 4px 4px 15px rgba(0,0,0,.15)

Layout

Container max-width: 1190px

Grid columns (largest detected grid): 3

Breakpoints

• 600px
• 767px
• 768px
• 860px
• 865px
• 1190px
• 1200px
• 1500px

Animation & Motion

Transitions

• none
• opacity .4s
• all .2s
• all .2s cubic-bezier(.22, .61, .36, 1)
• 50ms
• background-color .1s
• all .4s
• color .3s
• all .3s
• all .3s,height 0s
• .4s
• background-color 0s ease-in-out 9999s

Easing curves

• cubic-bezier(.22, .61, .36, 1)

Keyframes

@keyframes tp-fade-in { 0%{opacity:0}20%{opacity:0}100%{opacity:100} }
@keyframes tnxDash { to{stroke-dashoffset:-28} }
@keyframes tnxGlow { 0%,100%{background:#fff;border-color:#b0ebf2;color:#091722}50%{background:#62d6e5;border-color:#62d6e5;color:#091722} }
@keyframes fa-spin { 0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} }
@keyframes burger_top-1-45 { 0%{top:0;transform:rotate(0)}50%{top:7px;transform:rotate(0)}100%{top:7px;transform:rotate(45deg)} }
@keyframes burger_top-2-45 { 0%{top:7px;transform:rotate(45deg)}50%{top:7px;transform:rotate(0)}100%{top:0;transform:rotate(0)} }
@keyframes burger_bottom-1-135 { 0%{bottom:0;transform:rotate(0)}50%{bottom:7px;transform:rotate(0)}100%{bottom:7px;transform:rotate(135deg)} }
@keyframes burger_bottom-2-135 { 0%{bottom:7px;transform:rotate(135deg)}50%{bottom:7px;transform:rotate(0)}100%{bottom:0;transform:rotate(0)} }
@keyframes burger_scaled-1 { 50%{transform:scale(0)}100%{transform:scale(0)} }
@keyframes burger_scaled-2 { 0%{transform:scale(0)}50%{transform:scale(0)}100%{transform:scale(1)} }
@keyframes eicon-spin { 0%{transform:rotate(0)}to{transform:rotate(359deg)} }
@keyframes swiper-preloader-spin { 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }
@keyframes a { 0%{transform:rotate(0)}to{transform:rotate(359deg)} }
@keyframes e-contact-buttons-close { 0%,99.99%{opacity:1;visibility:visible}to{opacity:0;transform:none;visibility:hidden} }
@keyframes elementor-headline-dash { 0%{opacity:1;stroke-dasharray:0 1500}to{opacity:1;stroke-dasharray:1500 1500} }
@keyframes hide-highlight { 0%{opacity:1;stroke-dasharray:1500 1500}to{filter:blur(10px);opacity:0} }
@keyframes elementor-headline-flip-in { 0%{opacity:0;transform:rotateX(180deg)}35%{opacity:0;transform:rotateX(120deg)}65%{opacity:0}to{opacity:1;transform:rotateX(1turn)} }
@keyframes elementor-headline-flip-out { 0%{opacity:1;transform:rotateX(0)}35%{opacity:1;transform:rotateX(-40deg)}65%{opacity:0}to{opacity:0;transform:rotateX(180deg)} }

Animations

• 1s linear tp-fade-in
• 1.4s linear infinite tnxDash
• 4.8s ease-in-out infinite tnxGlow
• 4.8s ease-in-out .8s infinite tnxGlow
• 4.8s ease-in-out 1.6s infinite tnxGlow
• 4.8s ease-in-out 4s infinite tnxGlow
• 4.8s ease-in-out 3.2s infinite tnxGlow
• 4.8s ease-in-out 2.4000000000000004s infinite tnxGlow
• none!important

CTA labels found on page

• See Demo
• Request a Demo
• ‪(650) 605-7865‬
• [email protected]
• Go Live in 7-Days*
• See how it works

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --wp--preset--aspect-ratio--square: 1;
  --wp--preset--aspect-ratio--4-3: 4/3;
  --wp--preset--aspect-ratio--3-4: 3/4;
  --wp--preset--aspect-ratio--3-2: 3/2;
  --wp--preset--aspect-ratio--2-3: 2/3;
  --wp--preset--aspect-ratio--16-9: 16/9;
  --wp--preset--aspect-ratio--9-16: 9/16;
  --wp--preset--color--black: #000000;
  --wp--preset--color--cyan-bluish-gray: #abb8c3;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--light-green-cyan: #7bdcb5;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--pale-cyan-blue: #8ed1fc;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6, 147, 227) 0%,rgb(155, 81, 224) 100%);
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122, 220, 180) 0%,rgb(0, 208, 130) 100%);
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252, 185, 0) 0%,rgb(255, 105, 0) 100%);
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255, 105, 0) 0%,rgb(207, 46, 46) 100%);
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238, 238, 238) 0%,rgb(169, 184, 195) 100%);
  --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74, 234, 220) 0%,rgb(151, 120, 209) 20%,rgb(207, 42, 186) 40%,rgb(238, 44, 130) 60%,rgb(251, 105, 98) 80%,rgb(254, 248, 76) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255, 206, 236) 0%,rgb(152, 150, 240) 100%);
  --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254, 205, 165) 0%,rgb(254, 45, 45) 50%,rgb(107, 0, 62) 100%);
  --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255, 203, 112) 0%,rgb(199, 81, 192) 50%,rgb(65, 88, 208) 100%);
  --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255, 245, 203) 0%,rgb(182, 227, 212) 50%,rgb(51, 167, 181) 100%);
  --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202, 248, 128) 0%,rgb(113, 206, 126) 100%);
  --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2, 3, 129) 0%,rgb(40, 116, 252) 100%);
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, .2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, .4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, .2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255),6px 6px rgb(0, 0, 0);
  --wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
  --sr-7-css-loaded: 1;
  --primary: hover;
  --ghost: hover;
  --ghostDark: hover;
  --bg: #060F18;
  --surface: #0C1B27;
  --surface-2: #060F18;
  --fg1: #F2FEFF;
  --fg2: rgba(242, 254, 255, .94);
  --fg3: rgba(242, 254, 255, .80);
  --line: rgba(255, 255, 255, .13);
  --navy-950: #04090F;
  --teal-700: #62D6E5;
}

Do's and Don'ts

Do

• Do reserve the accent #1C8C9C for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #060F18; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 200, 300, 400, 500, 600, 700, 800, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #060F18;
  --color-surface: #0C1B27;
  --color-accent: #1C8C9C;
  --color-primary: #62D6E5;
  --color-text-primary: #091722;
  --color-secondary: #091722;
  --color-text-secondary: #3C5263;
  --color-border: #DDE5EB;
  --color-on-primary: #091722;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #E4E4E4;
  --color-surface-container: #DDE5EB;
  --color-surface-container-high: #DBDBDB;
  --color-surface-container-highest: #C4D0D9;
  --font-sans: Poppins,sans-serif;
  --font-size-display: 52px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20.8px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-pill: 50%;
  --shadow-sm: 0 12px 32px rgba(9,23,34,.08),0 2px 6px rgba(9,23,34,.05);
  --shadow-md: 0 8px 30px rgba(28,124,140,.28);
  --shadow-lg: 4px 4px 15px rgba(0,0,0,.15);
  --space-xs: 4.8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --tracking-display: -.025em;
  --tracking-label: .16em;
  --container-max: 1190px;
}