Samit Kapoor — Design Language

1. Visual Theme & Atmosphere

Samit Kapoor’s portfolio is a clean, modern developer portfolio built on a white-and-near-black foundation with a delightful hidden detail: CSS custom properties define a gradient from lime green (#6aeb71) to bright yellow (#f5f812) that suggests animated or highlighted moments. The use of Geist as the sole typeface connects the site to the Vercel/Next.js ecosystem visually, while the minimal palette lets project work lead.

2. Color Palette & Roles

• Background — #fff (white): clean canvas
• Primary text — #171717 (near-black): strong ink-like reading text
• Muted background — #f1f5f9 (blue-tinted light grey): secondary surfaces, cards, hover states
• Muted text — #64748b (slate-blue grey): descriptions, metadata
• Primary / dark — #0f172a (deep navy-black): emphasis, active states
• Border — #e2e8f0 (light grey): consistent structural dividers
• Gradient from — #6aeb71 (lime green): highlight gradient start
• Gradient to — #f5f812 (bright yellow): highlight gradient end
• Button overlay — oklab(0.204625... / 0.1) (10% near-black): subtle button press effect

3. Typography Rules

• Geist (weight 400 and 600): the single typeface for everything
• Size range: 14–16px — compact UI-focused scale
• Weight 600 for emphasis elements (headings, CTAs)
• No text transforms, no letter-spacing adjustments
• The Geist ecosystem creates a coherent Vercel-adjacent technical identity

4. Component Stylings

• 6px radius: smaller UI elements — inputs, tags, compact cards
• 12px radius: larger panels and modal-style containers
• Fully rounded (3.35544e+07px): pill buttons
• No shadows — flat component rendering
• 10% opacity overlay for button interaction states — subtle affordance
• 24px horizontal padding maintained consistently across all section-level elements

5. Layout Principles

• 24px side padding maintained across all sections, header, and footer
• Standard single-column reading layout with clear section boundaries
• Header and footer share the same 24px horizontal padding as content
• Clean separation: header / main / footer each zero-gapped

6. Depth & Elevation

• Flat — no shadows
• Muted background (#f1f5f9) serves as the elevation surface for cards
• Border (#e2e8f0) defines structural edges without dimensional illusion

7. Do’s and Don’ts

Do: Use the lime-to-yellow gradient (#6aeb71 to #f5f812) for highlighted or animated text moments. Do: Maintain 24px horizontal padding across all section-level containers. Do: Use slate-blue muted text (#64748b) for all secondary/descriptive copy. Don’t: Introduce shadows or depth — the flat system is coherent. Don’t: Change the typeface — Geist alone defines the technical identity. Don’t: Use the gradient as a background fill — it works as text gradient or accent line only.

8. Responsive Behavior

• 24px side padding maintained or reduced slightly on mobile
• Single-column layout already optimised for mobile reading
• Pill buttons and card radii maintain consistency at all viewports
• Font sizes remain at 14–16px — no significant scaling required

9. Agent Prompt Guide

Design like Samit Kapoor’s portfolio: white background (#fff), near-black text (#171717), slate muted tone (#64748b). Geist font only, weights 400 and 600. 6px/12px/pill radius system. No shadows. Lime-to-yellow gradient (#6aeb71 to #f5f812) for highlight moments. 24px consistent side padding. Clean, Vercel-ecosystem developer portfolio aesthetic.

Generated by Sparkbites — extracted from live CSS analysis