Design System

The faces

Rules

• Headings are Arapey Regular, sentence case, line-height 0.95 to 1.05, letter-spacing −0.02 to −0.04em.
• Body is Switzer 400 at 16px (18px for lead paragraphs), line-height 1.5, measure no wider than 70 characters.
• Labels and buttons are Switzer 500, 12 to 14px, upper case, tracked 0.06 to 0.14em.
• Index headings (nav, footer) are Arapey 20px upper case tracked 0.22em with a red number before them.
• Never fake bold. If it needs to be louder, make it bigger or give it the Link.
• Numbers in tables use tabular figures where the tool allows.
• Rupee (₹) and arrow (→) glyphs are missing from both faces: write INR or use the patched web font subset in the developer notes.

The page grid

Every page on indianvcs.com is one CSS grid of five columns: a left rail, three content columns and a right gutter that lines up with the menu button. The header divides into the same columns. On tablets and phones (991px and below) the rail disappears and content runs full width.

At 1280px: 226 · 301 · 301 · 301 · 151. Content spans columns 2 to 4; the rail holds filters or section links and carries the vertical hairline; the gutter stays empty. A 645px reading column (70ch) sits inside the content span for articles.

Spacing scale

Fluid steps that grow a little with the viewport. Bar height shows the step; use the named step, not an arbitrary pixel value.

Pearl Cream face, 1px Charcoal border, square, padding 16px. Switzer 500, 14px, upper case, with the red Link after the label. Hover (200 ms): the button fills Indian VCs Red, the text turns Pearl Cream and the Link wipes to cream from the left. There is one button style; it is the same on dark sections. Full width on phones. In Webflow, use the CTA component or the classes cta, cta_line, cta_line_abs.

Links are underlined and turn Indian VCs Red on hover (300 ms); external links (ext-link) sit in Dark Cocoa and do the same. Eyebrows are 12px Switzer 500 upper case tracked 0.14em in red, with an index number.

The Link (thicker-divider), then the heading, then one line of context. On a dark surface the same block in Pearl Cream.

Sector and stage tags on fund pages: Soft Pink background, Indian VCs Red text, Switzer 600 14px upper case, 4px by 8px padding, square. This is the only place Soft Pink appears. Class tag-wrap.

Rows, not cards. Serif title, sans description, metadata right-aligned in Clay Red, a 0.5px rule under each row. The whole row is the link. Hover (500 ms): the row fills Dark Cocoa, text turns Pearl Cream and any image scales up 10%. Class theme_card.

Groups of links with a red numbered label on a fixed-width rail and a 0.25px rule beneath. Footer links turn red on hover; in the menu panel each link fills Dark Cocoa and slides right (300 ms).

The contact section and footer sit on Dark Cocoa with Pearl Cream text. The Link stays red and the button is the same CTA, unchanged.

Photography

Greyscale, contrast +12%, no grain or vignette. People in plain solid clothes on minimal backdrops; portraits on solid dark backgrounds. Crop city images to 1600 × 739 (about 2.2 : 1). Never place a logo on a photo unless the area behind it is calm and dark, in which case use the white logo.

Fund and partner logos

Third-party logos sit in square white tiles with no padding so their own clear space shows. Flatten white-on-transparent logos onto Dark Cocoa before uploading, or they vanish.

Sketchnotes

Visual summaries for posts and decks are hand-drawn: 1200 × 627, a hand-written face (Chalkboard SE on Mac), rough panels, a brand bar at the foot, red used for one emphasis per sheet. Never a slide template.

Charts

Cream background, Charcoal axes at 0.5px, no gridlines heavier than Hairline, series in the red ramp, darkest first. Donuts for share-of, bars for comparison, lines for time. Label directly; avoid legends. Numbers in Arapey when they are the point of the chart.

Icons

We barely use icons. When one is needed, a 1px Charcoal line icon at 16 or 24px, square ends, no fills. Never emoji, never coloured icon sets.

• Hover is a fill: buttons fill red with a cream wipe across the Link (200 ms); rows and menu links fill Dark Cocoa (300 to 500 ms); text links turn red.
• Focus is a 2px Charcoal outline offset 3px, always visible for keyboard users.
• Respect prefers-reduced-motion: keep colour changes, drop movement.

• Bounces, springs, overshoot
• Parallax, scroll-jacking, auto-playing carousels
• Skeleton shimmers or loading spinners in red
• Anything that moves without the user asking

• Say the thing. Short sentences, active voice, the number in the sentence. “27 fintech funds” beats “a curated selection of fintech investors”.
• Sentence case for headings and buttons’ labels in copy; upper case only where the component demands it (CTA, eyebrow, index labels).
• Be useful first. We give first; copy explains what the reader gets before what we want.
• Name things plainly. VC, LP, GP after the first full mention. Cheque sizes in USD on the site; INR only when the source is INR.
• No fluff words: leverage, ecosystem-first, seamless, world-class, curated, unlock, empower.
• Numbers as digits, thousands separated, ranges with an en dash: 300+ firms, $500K – $5M, 2024 – 26.

Tone check: would a partner at a fund read it twice? If yes, cut it. Would a first-time founder understand it? If no, rewrite it.

Order of authority when documents disagree: this page, then the media kit, then the brand guide PDF, then anything in Notion or older decks.

The Indian VCs team owns this system. Propose a change by emailing [email protected] with what you want to add, where it would be used and a screenshot. Additions that reuse existing tokens and components are usually approved the same week; new colours, faces or components need a reason the current set cannot serve.

Identity design: Everything Design, 2025. System documentation: Indian VCs, 2026.