Squaretrix — AI & Web Development Company in India

Design Specification — Squaretrix — AI & Web Development Company in India

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 (#FD504A). All type is set in 'Poppins'. Detected font weights: 300, 400, 500, 600, 700, 800, 900. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://squaretrix.in/assets/squaretrix-logo-CYjsbDCt.png · https://squaretrix.in/assets/squaretrix-logo-white-CfdFZdi5.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(90deg, 0%, 45%, 55%, 100%)
• linear-gradient(to right, 1px,transparent 1px),linear-gradient(to bottom, 1px,transparent 1px)
• linear-gradient(to right,color-mix(in oklab, 6%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in oklab, 6%,transparent) 1px,transparent 1px)
• linear-gradient(90deg, 0%, 50%, 100%)
• linear-gradient(90deg, 0%,color-mix(in oklab, 70%,white) 50%, 100%)
• linear-gradient(135deg, 0%, 100%)
• linear-gradient(135deg, 0%,color-mix(in oklab, 65%,white) 100%)
• conic-gradient(#0000 70%,#ffffff8c,#0000)
• linear-gradient(135deg, 0%,#ff7a76 100%)

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

Typography

Primary typeface: Poppins — stack: 'Poppins'

Font stacks (most used first)

• 'Poppins'
• var(--font-mono)
• var(--font-display)
• "Poppins", Helvetica, Arial, "Lucida Sans", sans-serif
• var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)
• var(--font-sans)

Web font sources

• fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 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

• 0 24px 60px -24px , 0 6px 16px -8px
• 0 10px 24px -10px #fd504a8c

Layout

Container max-width: 768px

Grid columns (largest detected grid): 12

Breakpoints

• 40rem
• 48rem
• 64rem
• 80rem
• 96rem

Animation & Motion

Transitions

• opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)
• transform .32s cubic-bezier(.16,1,.3,1)
• transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s
• transform .7s cubic-bezier(.16,1,.3,1)
• transform .35s cubic-bezier(.16,1,.3,1)
• opacity .25s

Easing curves

• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.4, 0, .6, 1)
• cubic-bezier(.4, 0, .2, 1)
• var(--tw-ease,var(--default-transition-timing-function))
• cubic-bezier(.7,0,.2,1)
• cubic-bezier(.7,0,.2,1)
• var(--ease-in-out)

Keyframes

@keyframes word-flip-in { 0%{opacity:0;transform:rotateX(90deg)translateY(.4em)}to{opacity:1;transform:rotateX(0)translateY(0)} }
@keyframes word-flip-out { 0%{opacity:1;transform:rotateX(0)translateY(0)}to{opacity:0;transform:rotateX(-90deg)translateY(-.4em)} }
@keyframes word-shimmer { to{background-position:200%} }
@keyframes caret-blink { 0%,70%,to{opacity:1}20%,50%{opacity:0} }
@keyframes wheel-spin { to{transform:rotate(360deg)} }
@keyframes wheel-pulse { 0%,to{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)} }
@keyframes orbit { 0%{transform:rotate(0) translate(var(--orbit-r,200px)) rotate(0)}to{transform:rotate(360deg) translate(var(--orbit-r,200px)) rotate(-360deg)} }
@keyframes node-pop { 0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)} }
@keyframes ai-core-float { 0%,to{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes ai-brain-pulse { 0%,to{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.05)} }
@keyframes ai-spark { 0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)} }
@keyframes svc-spin { to{transform:rotate(360deg)} }
@keyframes svc-float { 0%,to{transform:translateY(0)}50%{transform:translateY(-3px)} }
@keyframes wa-ping { 0%{opacity:.6;transform:scale(1)}80%,to{opacity:0;transform:scale(1.9)} }
@keyframes wa-bob { 0%,to{transform:translateY(0)}50%{transform:translateY(-4px)} }
@keyframes ai-buddy-bob { 0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-6px)rotate(2deg)} }
@keyframes ai-buddy-ping { 0%{opacity:.55;transform:scale(1)}80%,to{opacity:0;transform:scale(2)} }
@keyframes ai-buddy-bubble-in { 0%{opacity:0;transform:translateY(8px)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)} }

Animations

• none!important
• var(--animate-bounce)
• 1.25s ease-out infinite caret-blink
• enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• var(--animate-ping)
• var(--animate-pulse)
• var(--animate-spin)
• exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)
• accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “services”

button-secondary — sample text: “Schedule a Call”

navigation-link

badge

Source Design Tokens (CSS custom properties)

:root {
  --font-sans: "Poppins", Helvetica, Arial, "Lucida Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-500: #fb2c36;
  --color-green-400: #05df72;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --tracking-tight: -.025em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-spin: spin 1s linear infinite;
}

Do's and Don'ts

Do

• Do reserve the accent #FD504A 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, 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-primary: #F84C41;
  --color-accent: #FD504A;
  --color-background: #FFFFFF;
  --color-surface: #FCFCFC;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #CCCCCC;
  --color-border: #E1DED7;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FCFCFC;
  --color-surface-container: #F4F2EA;
  --color-surface-container-high: #F0EEE9;
  --color-surface-container-highest: #E1DED7;
  --font-sans: 'Poppins';
  --font-size-headline-md: 26px;
  --font-size-body-md: 16px;
  --font-size-label-md: 13px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 2px;
  --radius-md: 14px;
  --radius-lg: 40px;
  --shadow-sm: 0 24px 60px -24px , 0 6px 16px -8px;
  --shadow-md: 0 10px 24px -10px #fd504a8c;
  --space-lg: 48px;
  --tracking-display: -.02em;
  --tracking-label: .3em;
  --container-max: 768px;
}