Qleviq - IT Solution HTML Template

Design Specification — Qleviq - IT Solution HTML Template

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#212529), a vivid accent (#DC3545). All type is set in var(--font-montserrat). Detected font weights: 100, 400, 500, 600, 700, 800. Detected style signatures: glassmorphism; soft-ui / layered elevation; gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://demo.egenslab.com/html/qleviq/preview/assets/img/header-logo.svg · https://demo.egenslab.com/html/qleviq/preview/assets/img/home2-header-logo.svg

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(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))
• linear-gradient(0deg, 0%, 100%)
• linear-gradient(270deg, #E24C4A 0%, #386BB7 100%)
• linear-gradient(180deg, rgb(4, 5, 14) 0%, rgb(4, 5, 14) 100%)
• linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%)
• linear-gradient(90deg, #010ED0 0%, rgba(1, 14, 208, 0) 100%)
• linear-gradient(180deg, rgb(23, 23, 23) 0%, rgb(23, 23, 23) 100%)
• linear-gradient(to bottom, 0%, 98%)
• linear-gradient(180deg, rgb(239, 246, 255) 0%, rgb(239, 246, 255) 100%)
• linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%)

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

Typography

Primary typeface: var(--font-montserrat) — stack: var(--font-montserrat)

Font stacks (most used first)

• var(--font-montserrat)
• var(--font-poppins)
• 'Montserrat'
• var(--bs-font-sans-serif)
• Arial,Helvetica,sans-serif
• swiper-icons
• 'slick'
• var(--bs-body-font-family)
• var(--bs-font-monospace)
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600, 700, 800

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

• 0 0 0 .25rem rgba(13,110,253,.25)
• 0 0 5px #666
• 0px 4px 24px 0px rgba(0, 0, 0, 0.1019607843)
• unset
• 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
• inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075)

Layout

Container max-width: 1199px

Grid columns (largest detected grid): 5

Breakpoints

• 576px
• 767px
• 991px
• 992px
• 1199px
• 1200px
• 1399px
• 1599px

Animation & Motion

Transitions

• color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
• none
• opacity .15s linear
• color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
• width 0.6s ease
• transform 0.3s ease-in-out
• .3s opacity
• all 200ms linear
• 0.2s
• background-size 0.2s linear 0.15s
• opacity 0.3s 0.15s

Easing curves

• cubic-bezier(0.215, 0.61, 0.355, 1)
• cubic-bezier(0.755, 0.05, 0.855, 0.06)
• cubic-bezier(0.215, 0.61, 0.355, 1)
• ease-out
• ease-in
• ease-in-out
• cubic-bezier(0.55, 0.055, 0.675, 0.19)
• cubic-bezier(0.175, 0.885, 0.32, 1)

Keyframes

@keyframes progress-bar-stripes { 0%{background-position-x:1rem} }
@keyframes spinner-border { to{transform:rotate(360deg)} }
@keyframes spinner-grow { 0%{transform:scale(0)}50%{opacity:1;transform:none} }
@keyframes placeholder-glow { 50%{opacity:.2} }
@keyframes placeholder-wave { 100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%} }
@keyframes bounce { 0%, 20%, 53%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { -webkit-animatio }
@keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
@keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } }
@keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webki }
@keyframes shakeX { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } }
@keyframes shakeY { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } }
@keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-tran }
@keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }
@keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } }
@keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, }
@keyframes jello { 0%, 11.1%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625de }
@keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes backInDown { 0% { -webkit-transform: translateY(-1200px) scale(0.7); transform: translateY(-1200px) scale(0.7); opacity: 0.7; } 80% { -webkit-transform: translateY(0) scale(0.7); transform: translateY(0) scale(0.7); opacity: 0.7; } to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }

Animations

• fade-up 0.5s linear
• qode-draw 0.75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards
• fade-down 0.45s linear
• bounceIn 1.2s linear
• fade-down 0.3s linear
• fade-down2 0.3s linear
• textRotation 8s linear infinite
• scroll-x-reverse 30s linear infinite

CTA labels found on page

• Help Desk
• Contact Us
• Free Consulting
• View Services
• View All Service
• View All Industry
• Review Our Clutch Profile

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

Source Design Tokens (CSS custom properties)

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13,110,253;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 25,135,84;
  --bs-info-rgb: 13,202,240;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
}

Do's and Don'ts

Do

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

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: #FFFFFF;
  --color-text-primary: #212529;
  --color-primary: #FFFFFF;
  --color-accent: #DC3545;
  --color-surface: #EEEEEE;
  --color-secondary: #000000;
  --color-text-secondary: #DEE2E6;
  --color-border: #343A40;
  --color-on-primary: #212529;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F9FA;
  --color-surface-container: #EEEEEE;
  --color-surface-container-high: #E9ECEF;
  --color-surface-container-highest: #DEE2E6;
  --font-sans: var(--font-montserrat);
  --font-size-headline-md: 30px;
  --font-size-title-lg: 23px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 .25rem rgba(13,110,253,.25);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0px 4px 24px 0px rgba(0, 0, 0, 0.1019607843);
  --space-xs: 4px;
  --space-sm: 10px;
  --space-md: 18px;
  --space-lg: 35px;
  --space-xl: 60px;
  --tracking-label: 0.4px;
  --container-max: 1199px;
}