Bangalore Startup Map — Startups in Bengaluru

Design Specification — Bangalore Startup Map — Startups in Bengaluru

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FAFAFA), ink text (#18181B), a vivid accent (#FF5A1F). All type is set in ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif. Detected font weights: 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://www.bangalorestartupmap.com/logos/ather-energy.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)

Typography

Primary typeface: ui-sans-serif — stack: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif

Font stacks (most used first)

• ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• inherit

Derived type scale

Font sizes (by frequency)

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

• 0 0 0 0 rgba(255,90,31,.45)
• 0 0 0 13px rgba(255,90,31,0)
• 0 0 0 0 rgba(255,90,31,0)
• 0 0 0 6px rgba(255,90,31,0)

Layout

Container max-width: 1400px

Grid columns (largest detected grid): 2

Breakpoints

• 640px

Animation & Motion

Easing curves

• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(0,0,.2,1)

Keyframes

@keyframes pulse { 50%{opacity:.5} }
@keyframes boost-pulse { 0%{box-shadow:0 0 0 0 rgba(255,90,31,.45)}70%{box-shadow:0 0 0 13px rgba(255,90,31,0)}to{box-shadow:0 0 0 0 rgba(255,90,31,0)} }
@keyframes hiring-pulse { 0%,to{box-shadow:0 0 0 0 rgba(255,90,31,.45)}50%{box-shadow:0 0 0 6px rgba(255,90,31,0)} }

Animations

• pulse 2s cubic-bezier(.4,0,.6,1) infinite
• hiring-pulse 2s cubic-bezier(.4,0,.6,1) infinite
• none

Components

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

button-primary — sample text: “Submit”

button-secondary — sample text: “map”

badge

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --bg: #fafafa;
  --card: #fff;
  --border: #e7e7e9;
  --text: #18181b;
  --muted: #71717a;
  --accent: #ff5a1f;
}

Do's and Don'ts

Do

• Do reserve the accent #FF5A1F for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FAFAFA; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 500, 600, 700.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-background: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text-primary: #18181B;
  --color-border: #E7E7E9;
  --color-accent: #FF5A1F;
  --color-primary: #FF5A1F;
  --color-secondary: #000000;
  --color-text-secondary: #9CA3AF;
  --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: #E7E7E9;
  --color-surface-container-high: #E5E7EB;
  --font-sans: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --shadow-sm: 0 0 0 0 rgba(255,90,31,.45);
  --shadow-md: 0 0 0 0 rgba(255,90,31,0);
  --shadow-lg: 0 0 0 6px rgba(255,90,31,0);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --tracking-display: -.025em;
  --tracking-label: .025em;
  --container-max: 1400px;
}