# 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*