Website Design Company in India at ₹2999 or $49 | Web Designers

Design Specification — Website Design Company in India at ₹2999 or $49 | Web Designers

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 (#F04D0C). All type is set in "Open Sans", sans-serif, Arial, Helvetica. Detected font weights: 300, 400, 500, 600, 700, 800, 900. Detected style signatures: glassmorphism; soft-ui / layered elevation; gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://www.foduu.com/themes/default/frontend_assets/images/logo/foduu-logo.webp

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

• radial-gradient(circle at top left, #fdf3ec, transparent 105%)
• linear-gradient(145deg, #ffff 56%, #ff8e67 220%, #ffbfa9 100%)
• linear-gradient(180deg, #ff8a00, #ffb347)
• linear-gradient(180deg, #ff6a00, #ff9f45)
• linear-gradient(180deg, #ff5400, #ff8c42)
• linear-gradient(180deg, #ff3d00, #ff7043)
• linear-gradient(45deg, #ff3d00 0%, #F09819 51%, #FF512F 100%)

Typography

Primary typeface: Open Sans — stack: "Open Sans", sans-serif, Arial, Helvetica

Font stacks (most used first)

• "Open Sans", sans-serif, Arial, Helvetica
• "Open Sans",sans-serif,Arial,Helvetica
• inherit
• Raleway, sans-serif
• sans-serif
• Raleway,sans-serif
• "Helvetica Neue", Helvetica, Arial, sans-serif
• "Helvetica Neue",Helvetica,Arial,sans-serif
• 'FontAwesome'
• Menlo, Monaco, Consolas, "Courier New", monospace

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

• none
• 0 -1px 4px 0 rgb(0 0 0 / .15)
• inset 0 1px 1px rgba(0,0,0,.075)
• 0 6px 12px rgba(0,0,0,.175)
• inset 0 1px 0 rgba(255,255,255,.1)
• 0 3px 9px rgba(0,0,0,.5)
• 0 5px 15px rgba(0,0,0,.5)
• 0 13px 42px 11px rgba(0,0,0,.05)
• 5px 10px 15px rgb(0 0 0 / 50%)
• inset 0 -1px 0 rgb(0 0 0 / .25)

Layout

Container max-width: 767px

Grid columns (largest detected grid): 3

Breakpoints

• 480px
• 576px
• 767px
• 768px
• 991px
• 992px
• 1199px
• 1200px

Animation & Motion

Transitions

• margin .4s ease, padding .4s ease
• border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s
• border-color ease-in-out .15s, box-shadow ease-in-out .15s
• opacity .15s linear
• -webkit-transform .3s ease-out
• -o-transform .3s ease-out
• transform .3s ease-out
• color .3s ease-in-out, background-color .3s ease-in-out, width .3s ease-in-out
• opacity .3s ease
• all .2s ease-in-out
• color .3s ease-in-out
• opacity .3s ease-in-out

Easing curves

• ease
• ease-out
• cubic-bezier(.215, .61, .355, 1)
• cubic-bezier(.755, .05, .855, .06)
• ease-out
• ease-in
• ease-in-out
• cubic-bezier(.55, .055, .675, .19)

Keyframes

@keyframes slideUp { 0% { top: 100%; opacity: 0; } 100% { top: 50%; opacity: 1; } }
@keyframes fa-spin { 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)} }
@keyframes progress-bar-stripes { from { background-position: 40px 0 } to { background-position: 0 0 } }
@keyframes BgAnimated { from { background-position: 0 0 } to { background-position: 0 400px } }
@keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } }
@keyframes bouncedelay { 0%, 100%, 80% { transform: scale(0); -webkit-transform: scale(0) } 40% { transform: scale(1); -webkit-transform: scale(1) } }
@keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0) rotateY(0); -webkit-transform: perspective(120px) rotateX(0) rotateY(0) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) } }
@keyframes cssspinnerbounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0) } 50% { transform: scale(1); -webkit-transform: scale(1) } }
@keyframes stretchdelay { 0%, 100%, 40% { transform: scaleY(.4); -webkit-transform: scaleY(.4) } 20% { transform: scaleY(1); -webkit-transform: scaleY(1) } }
@keyframes cubemove { 25% { transform: translateX(42px) rotate(-90deg) scale(.5); -webkit-transform: translateX(42px) rotate(-90deg) scale(.5) } 50% { transform: translateX(42px) translateY(42px) rotate(-179deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg) } 50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { transform: translateX(0) translateY(42px) rotate(-270deg) scale(.5); -webkit-transform: tra }
@keyframes scaleout { 0% { transform: scale(0); -webkit-transform: scale(0) } 100% { transform: scale(1); -webkit-transform: scale(1); opacity: 0 } }
@keyframes ball-grid-pulse { 0% { -webkit-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(.5); transform: scale(.5); opacity: .7 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } }
@keyframes rotate { 0% { -webkit-transform: rotate(0) scale(1); transform: rotate(0) scale(1) } 50% { -webkit-transform: rotate(180deg) scale(.6); transform: rotate(180deg) scale(.6) } 100% { -webkit-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1) } }
@keyframes ballrotate { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } }
@keyframes ball-zig-deflect { 17% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px) } 34% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px) } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } 67% { -webkit-transform: translate(15px, -30px); transform: translate(15px, -30px) } 84% { -webkit-transform: translate(-15px, -30px); transform: translate(-15px, -30px) } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } }
@keyframes ball-zag-deflect { 17% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px) } 34% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px) } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } 67% { -webkit-transform: translate(-15px, 30px); transform: translate(-15px, 30px) } 84% { -webkit-transform: translate(15px, 30px); transform: translate(15px, 30px) } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0) } }
@keyframes ball-scale-multiple { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } 5% { opacity: 1 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0 } }

Animations

• 15s linear hero-1-img-zoomout
• .5s ease-out forwards slideUp
• slideUp 0.5s ease-out forwards
• swiper-preloader-spin 1s steps(12, end) infinite
• scrollLeft 30s linear infinite
• scrollRight 30s linear infinite

Components

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

button-primary — sample text: “GET A QUOTE”

button-secondary — sample text: “VIEW OUR PORTFOLIO”

CTA labels found on page

• GET A QUOTE
• VIEW OUR PORTFOLIO
• View more packages
• Check Our Portfolio
• Contact us

Effects

• backdrop-filter: blur(14px)

Source Design Tokens (CSS custom properties)

:root {
  --moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx);
  --primary: #fff;
}

Do's and Don'ts

Do

• Do reserve the accent #F04D0C 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: #FFFFFF;
  --color-accent: #F04D0C;
  --color-background: #FFFFFF;
  --color-surface: #EEEEEE;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #333333;
  --color-border: #999999;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F8F8;
  --color-surface-container: #F5F5F5;
  --color-surface-container-high: #F2F2F2;
  --color-surface-container-highest: #EEEEEE;
  --font-sans: "Open Sans", sans-serif, Arial, Helvetica;
  --font-size-headline-lg: 42px;
  --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: 8px;
  --radius-lg: 35px;
  --radius-pill: 50%;
  --shadow-sm: none;
  --shadow-md: 0 3px 9px rgba(0,0,0,.5);
  --shadow-lg: 5px 10px 15px rgb(0 0 0 / 50%);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 60px;
  --tracking-label: 1px;
  --container-max: 767px;
}