iCTurbo – Независимое digital-агентство

Design Specification — iCTurbo – Независимое digital-агентство

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#D43E30). All type is set in 'Inter Tight',Arial,sans-serif. Detected font weights: 300, 400, 500, 600, 700. Detected style signatures: glassmorphism; gradient-rich / aurora; ambient blurred glow background; rounded / pill-heavy.

Logo asset(s): https://static.tildacdn.com/tild3865-3934-4233-b731-306463333037/Vector.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(0.506709675255666turn,rgba(35,35,35,0.38) 0%,rgba(197,197,197,0.09) 100%)
• radial-gradient(circle at center,rgba(0,0,0,0.93) 22%,rgba(255,247,5,0) 100%)
• linear-gradient(0turn,rgba(243,245,249,1) 0%,rgba(243,245,249,0.83) 99%)
• linear-gradient(0turn,rgba(186,93,93,1) 0%,rgba(210,13,13,0.48) 100%)
• linear-gradient(0turn,rgba(255,48,72,1) 0%,rgba(206,61,44,0.48) 100%)
• linear-gradient(0turn,rgba(57,138,185,1) 0%,rgba(52,102,232,0.58) 100%)
• linear-gradient(0.9673103085221648turn,rgba(242,242,242,1) 36%,rgba(140,140,140,1) 98%)
• linear-gradient(0turn,rgba(242,242,242,1) 0%,rgba(236,236,236,1) 98%)
• linear-gradient(0turn,rgba(242,242,242,1) 0%,rgba(186,186,186,1) 98%)
• linear-gradient(0turn,rgba(242,242,242,1) 0%,rgba(140,140,140,1) 98%)

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

Typography

Primary typeface: Inter Tight — stack: 'Inter Tight',Arial,sans-serif

Font stacks (most used first)

• 'Inter Tight',Arial,sans-serif
• 'Inter Tight'
• 'Times'
• Inter Tight
• "Roboto",Arial,sans-serif
• ``

Web font sources

• fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700

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

• inset 0px -0px 0px 0px #0000FF
• 0 0 7px 0 rgb(0 0 0 / 20%)
• inset 0 -px 0 0
• none

Layout

Container max-width: 1599px

Breakpoints

• 479px
• 639px
• 640px
• 959px
• 980px
• 1199px
• 1200px
• 1599px

Animation & Motion

Transitions

• opacity ease-in-out 1s
• transform 0.15s
• background-color 0.4s ease-in-out, color 0.4s ease-in-out, border-color 0.4s ease-in-out
• color 0.3s ease-in-out, opacity 0.3s ease-in-out
• all 0.3s ease
• transform .5s ease-in-out
• .25s ease-in-out
• background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out
• background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out
• all ease-in-out .3s
• transform ease-in-out 0.3s
• opacity ease-in-out 0.3s

Easing curves

• ease-in-out
• ease
• cubic-bezier(.19,1,.22,1)
• cubic-bezier(.19,1,.22,1)
• cubic-bezier(.22,.65,.2,1)
• ease-in-out

Keyframes

@keyframes t-menuburger-anim { 0% { width: 80%; left: 20%; right: 0; } 50%{ width: 100%; left: 0; right: 0; } 100%{ width: 80%; left: 0; right: 20%; } }
@keyframes t-menuburger-anim2 { 0% { width: 80%; left: 0; } 50%{ width: 100%; right: 0; left: 0; } 100%{ width: 80%; left: 20%; right: 0; } }
@keyframes light { 20% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } }
@keyframes light-md { 30% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } }
@keyframes light-lg { 40% { -webkit-transform: translateX(100%); transform: translateX(100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } }
@keyframes t774__icon-anim { 0%{transform:translate3d(-20px,0,0);opacity:0}10%{transform:translate3d(-20px,0,0);opacity:0}20%{transform:translate3d(-20px,0,0);opacity:1}70%{transform:translate3d(0,0,0);opacity:1}80%{transform:translate3d(0,0,0);opacity:1}81%{transform:translate3d(0,0,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:0} }
@keyframes fadeInUp { 0%{opacity:0;-webkit-transform:translateY(110%);transform:translateY(110%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }
@keyframes fadeInDown { 0%{opacity:0;-webkit-transform:translateY(-110%);transform:translateY(-110%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }
@keyframes fadeInLeft { 0%{opacity:0;-webkit-transform:translateX(36px);transform:translateX(36px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)} }
@keyframes fadeInRight { 0%{opacity:0;-webkit-transform:translateX(-36px);transform:translateX(-36px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)} }
@keyframes fadeInLeftGradient { 0%{clip-path:inset(0 0 0 100%);-webkit-clip-path:inset(0 0 0 100%);display:inline-block;-webkit-filter:blur(2px);filter:blur(2px);opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}99%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);display:inline-block;-webkit-filter:blur(0);filter:blur(0);opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}to{clip-path:none;-webkit-clip-path:none;display:inline;-webkit-filter:blur(0);filter:blur(0);opacity:1;-webk }
@keyframes fadeInRightGradient { 0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);display:inline-block;-webkit-filter:blur(2px);filter:blur(2px);opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}99%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);display:inline-block;-webkit-filter:blur(0);filter:blur(0);opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}to{clip-path:none;-webkit-clip-path:none;display:inline;-webkit-filter:blur(0);filter:blur(0);opacity:1;-webkit }
@keyframes fadeIn { 0%{opacity:0}to{opacity:1} }
@keyframes fadeInBlur { 0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}to{-webkit-filter:blur(0);filter:blur(0);opacity:1} }
@keyframes button-icon-fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes tn-icon-animation-rotate15 { 0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:rotate(15deg);transform:rotate(15deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)} }
@keyframes tn-icon-animation-rotate360 { 0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)} }
@keyframes tn-icon-animation-scale { 0%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-transform:scale(.8);transform:scale(.8)}to{-webkit-transform:scale(1);transform:scale(1)} }

Animations

• t-menuburger-anim 0.3s ease-out normal forwards
• t-menuburger-anim2 0.3s ease-out normal forwards
• fadeInBlur .9s cubic-bezier(.22,.65,.2,1) forwards

CTA labels found on page

• Оставить заявку

Effects

• backdrop-filter: blur(41px)
• backdrop-filter: blur(30px)
• backdrop-filter: blur(40px)

Source Design Tokens (CSS custom properties)

:root {
  --borderRadiusContainer: 16px;
  --borderRadiusLogo: 16px;
  --overflow: visible;
  --heightLogo: 120px;
  --widthLogo: 70px;
  --heightLogoMobile: 100px;
  --widthLogoMobile: 200px;
  --button-shadow: none;
}

Do's and Don'ts

Do

• Do reserve the accent #D43E30 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): 300, 400, 500, 600, 700.

Don't

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

Design Tokens (copy-paste)

:root {
  --color-primary: #D43E30;
  --color-accent: #D43E30;
  --color-background: #FFFFFF;
  --color-surface: #F2F2F2;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #CCCCCC;
  --color-border: #8C8C8C;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F7F7F7;
  --color-surface-container-high: #F6F6F6;
  --color-surface-container-highest: #F3F5F9;
  --font-sans: 'Inter Tight',Arial,sans-serif;
  --font-size-display: 75px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-lg: 25px;
  --shadow-sm: 0 0 7px 0 rgb(0 0 0 / 20%);
  --shadow-md: none;
  --space-sm: 10px;
  --space-md: 18px;
  --space-lg: 40px;
  --tracking-display: -0.5px;
  --container-max: 1599px;
}