वर्मा एंड वर्मा माइक्रोफाइनेंस – सस्ते ब्याज पर आसान लोन

Design Specification — वर्मा एंड वर्मा माइक्रोफाइनेंस – सस्ते ब्याज पर आसान लोन

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 (#E9232F). All type is set in 'Noto Sans Devanagari'. Detected font weights: 100, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: soft-ui / layered elevation; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://vermamicrofinance.com/frontend/images/logom.png · https://vermamicrofinance.com/frontend/images/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

• radial-gradient(1200px 420px at 20% -20%, #1b6a52 0%, #0f4b3c 55%)
• linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0))
• linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))

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

Typography

Primary typeface: Noto Sans Devanagari — stack: 'Noto Sans Devanagari'

Font stacks (most used first)

• 'Noto Sans Devanagari'
• 'Poppins'
• 'Playfair Display'
• var(--title-font)
• 'Noto Sans Devanagari', sans-serif
• var(--bs-font-sans-serif)
• var(--text-font)
• 'DM Sans'
• 'slick'
• var(--bs-body-font-family)

Web font sources

• fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Poppins:wght@300;400;500;600;700;800;900&display=swap
• fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 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 0 0 50px rgba(233, 35, 47, 0)
• 0 0 0 0 rgba(233, 35, 47, 0)
• 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05)
• 0 0 0 70px rgba(255, 255, 255, 0)
• 0 0 0 0 rgba(255, 255, 255, 0)
• 0 0 3px rgba(0, 0, 0, 0.1)
• 0 0 20px rgba(0, 0, 0, 0.05)
• 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 4

Breakpoints

• 575.98px
• 576px
• 767.98px
• 768px
• 991px
• 991.98px
• 1199.98px
• 1200px

Animation & Motion

Transitions

• color 0.2s ease
• all 0.2s ease
• transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease
• opacity .15s linear
• none
• transform 0.3s ease-in-out
• all 0.3s ease
• all 500ms ease
• ease-in 500ms
• all 0.8s
• 0.7s

Easing curves

• cubic-bezier(0.3, 0, 0.7, 1)
• cubic-bezier(0.215, 0.610, 0.355, 1.000)
• cubic-bezier(0.755, 0.050, 0.855, 0.060)
• ease-out
• ease-in
• ease-in-out
• cubic-bezier(0.550, 0.055, 0.675, 0.190)
• cubic-bezier(0.175, 0.885, 0.320, 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 fpFadeInDown { from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} }
@keyframes ripple { 70% { -webkit-box-shadow: 0 0 0 50px rgba(233, 35, 47, 0); box-shadow: 0 0 0 50px rgba(233, 35, 47, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(233, 35, 47, 0); box-shadow: 0 0 0 0 rgba(233, 35, 47, 0); } }
@keyframes video-animation { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); } }
@keyframes bounce-y { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes sway { 0% { -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } }
@keyframes swayX { 0% { -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } }
@keyframes footer__shadow { 0% { margin-left: -200px; } 100% { margin-right: -200px; } }
@keyframes sway_Y { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(20px); transform: translateY(20px); } }
@keyframes sway_YY { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } }
@keyframes sunMove { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 50% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 75% { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }
@keyframes floatBob { 0% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } 50% { -webkit-transform: translateY(10px) translateX(10px) rotate(5deg); transform: translateY(10px) translateX(10px) rotate(5deg); } 100% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } }
@keyframes arryUpDown { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } }
@keyframes arryLeftRight { 0% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(10px); transform: translateX(10px); } }

Animations

• pulse 1s infinite linear
• fadeInRight 0.4s cubic-bezier(0.3, 0, 0.7, 1) both
• arryLeftRight 2s ease infinite alternate
• rotateAndScale 20s linear infinite
• starZoom 5s linear infinite
• starZoom 7s linear infinite
• forItrotate 20s linear infinite

CTA labels found on page

• Apply Loan
• Loan Status
• लोन अप्लाई करें
• लोन स्टेटस

Source Design Tokens (CSS custom properties)

:root {
  --vvf-bg: #0f4b3c;
  --vvf-card: #155843;
  --vvf-border: rgba(174, 214, 58, 0.28);
  --vvf-text: #e6f3ea;
  --vvf-muted: #c9ddcf;
  --vvf-accent: #b4d629;
  --vv-pill-bg: #c5e61f;
  --vv-pill-text: #173929;
  --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;
}

Do's and Don'ts

Do

• Do reserve the accent #E9232F 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, 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: #C9A84C;
  --color-accent: #E9232F;
  --color-background: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #1A3C2E;
  --color-border: #DEE2E6;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F9FA;
  --color-surface-container: #EBF1F5;
  --color-surface-container-high: #E9ECEF;
  --color-surface-container-highest: #DEE2E6;
  --font-sans: 'Noto Sans Devanagari';
  --font-size-display: 48px;
  --font-size-headline-lg: 34px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 22.4px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.4px;
  --font-size-label-sm: 12px;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 30px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 50px rgba(233, 35, 47, 0);
  --shadow-md: 0 0 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.0509803922);
  --space-xs: 5px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-xl: 60px;
  --tracking-label: 2px;
  --container-max: 768px;
}