Verma & Verma Microfinance

Design Specification — Verma & Verma Microfinance

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 (#B4D629). All type is set in 'Source Sans Pro'. Detected font weights: 300, 400, 500, 600, 700, 800. Detected style signatures: soft-ui / layered elevation; technical / mono accents.

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(900px 420px at 10% 0%, rgba(180, 214, 41, 0.22), transparent 55%),

radial-gradient(800px 380px at 100% 100%, rgba(26, 65, 55, 0.18), transparent 52%),

linear-gradient(135deg, #edf2ee 0%, #e5ece7 100%)`

• linear-gradient(135deg, #1a4137 0%, #245547 100%)
• linear-gradient(135deg, #17392f 0%, #1f4b3f 100%)

Typography

Primary typeface: Source Sans Pro — stack: 'Source Sans Pro'

Font stacks (most used first)

• 'Source Sans Pro'
• "Helvetica Neue",Helvetica,Arial,sans-serif
• 'Glyphicons Halflings'
• inherit
• monospace,monospace
• Menlo,Monaco,Consolas,"Courier New",monospace
• 'FontAwesome'
• "Ionicons"
• 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif
• 'Source Sans Pro',sans-serif

Derived type scale

Font sizes (by frequency)

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

• inset 0 3px 5px rgba(0,0,0,0.125)
• inset 0 -1px 0 rgba(0,0,0,.25)
• inset 0 1px 1px rgba(0,0,0,.075)
• inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
• inset 0 3px 5px rgba(0,0,0,.125)
• inset 0 1px 2px rgba(0,0,0,.1)
• 0 5px 10px rgba(0,0,0,.2)
• inset 0 0 100px rgba(0,0,0,0.2)
• 0 18px 48px rgba(20, 45, 38, 0.14)
• 0 0 0 3px rgba(180, 214, 41, 0.22)

Layout

Container max-width: 768px

Breakpoints

• 480px
• 768px

Animation & Motion

Transitions

• border-color .2s, box-shadow .2s, background .2s
• transform .16s ease, box-shadow .16s ease, background .16s 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
• all linear .3s

Easing curves

• ease
• ease-in

Keyframes

@keyframes progress-bar-stripes { from{background-position:40px 0}to{background-position:0 0} }
@keyframes fa-spin { 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)} }
@keyframes flipInX { 0%{transform:perspective(400px) rotate3d(1, 0, 0, 90deg);transition-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1, 0, 0, -20deg);transition-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1, 0, 0, 10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1, 0, 0, -5deg)}100%{transform:perspective(400px)} }

CTA labels found on page

• Sign In

Source Design Tokens (CSS custom properties)

:root {
  --primary: #fff;
}

Do's and Don'ts

Do

• Do reserve the accent #B4D629 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.

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: #B4D629;
  --color-background: #FFFFFF;
  --color-surface: #EEEEEE;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #999999;
  --color-border: #333333;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F7FAF8;
  --color-surface-container: #F7F7F7;
  --color-surface-container-high: #F5F5F5;
  --color-surface-container-highest: #EDF2EE;
  --font-sans: 'Source Sans Pro';
  --font-size-headline-lg: 38px;
  --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: 1px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  --shadow-md: 0 18px 48px rgba(20, 45, 38, 0.14);
  --shadow-lg: 0 0 0 3px rgba(180, 214, 41, 0.22);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --tracking-label: 0.8px;
  --container-max: 768px;
}