# harshitbeni.com — Design System ## 1. Visual Theme & Atmosphere Harshit Beniwal's portfolio is a Framer-built showcase that treats color as its primary storytelling device. The base is a cool light gray (`rgb(243, 244, 246)`) — a near-invisible neutral that stays out of the way. Against this quiet backdrop, a collection of vivid, pure-hue color blocks announce each project: purple, gold, orange, green, sky blue, red. The effect is a bento-grid of energy, each tile radiating its own personality. There is no attempt at a monochromatic or tonal palette. The design philosophy is additive — bring in the colors, let each one claim space, trust the layout to give them order. The overall impression is playful confidence: a designer who knows how to handle color without letting it become chaos. The typography is minimal to the point of being anonymous — Inter at small sizes, system sans-serif as fallback — which is intentional. The type steps aside so the color work and project visuals can dominate. The UI chrome is nearly invisible. --- ## 2. Color Palette & Roles **Base** - Light gray `rgb(243, 244, 246)` — page background, header background (at 80% opacity for blur/frosted effect) - Slightly darker gray `rgb(229, 231, 235)` — subtle surface variant - Medium gray `rgb(209, 213, 219)` — borders and dividers **Project Color Blocks** (the visual identity) - Electric purple `rgb(93, 64, 245)` — bold, primary project card - Gold/amber `rgb(234, 174, 8)` — warm accent project - Burnt orange `rgb(223, 128, 63)` — earthy warm project - Mint green `rgb(85, 177, 134)` — calm, natural project - Sky blue `rgb(73, 169, 248)` — light, airy project - Coral red `rgb(219, 84, 78)` — energetic, urgent project **Interactive** - Electric blue `rgb(16, 98, 255)` — primary CTA link (`.framer-NgNdV`) - Browser-default link blue `rgb(0, 0, 238)` — link color for standard anchor elements (unoverridden) **Buttons** - Dark translucent `rgba(0, 0, 0, 0.86)` — showreel/play button - White `rgb(255, 255, 255)` — resume/secondary button **Surfaces** - `rgba(255, 255, 255, 0.6)` — frosted white overlay (for layered panels) - `rgba(0, 0, 0, 0.16)` — dark overlay for modal-like contexts --- ## 3. Typography Rules Typography is intentionally understated — the design was built in Framer where visual components dominate, and text serves a purely functional role. **Inter** — primary display font (where specified) - Paragraphs/labels: `12px` / `600` / `16px` line-height — tight, small, badge-like **System sans-serif** — fallback for most elements - Body: `12px` / `400` / `normal` — extremely compact; the site operates at a small type scale - Links, buttons, navigation: all at `12px` / `400` What's absent: no display serif, no large-scale headline treatment, no monospace. The site does not use type as a brand statement — the color blocks carry that responsibility. There are no text transforms, no tracked letter-spacing, no typographic hierarchy beyond bold/regular. **Note:** The 12px base size is notably small for body text. It works in the context of a visually-dense bento layout where labels are secondary to image/color content. --- ## 4. Component Stylings **Navigation / Header** - Sticky header: `rgba(243, 244, 246, 0.8)` — frosted glass against the light gray page - Padding: `24px 16px` — comfortable mobile-first spacing - Nav links: browser-default blue with translucent hover fill (`rgba(236, 237, 240, 0.53)`) **Project Color Tiles** - Full-bleed color fills with no border, no shadow on the tile itself - Large border radii: `32px`, `36px`, `40px` — very rounded, almost squircle-shaped - Avatar/circle elements at `50%` radius **Buttons** - Showreel button: dark near-black `rgba(0,0,0,0.86)` with subtle shadow `rgba(0,0,0,0.2) 0 1px 2px` - Resume button: white with minimal shadow `rgba(0,0,0,0.03) 0 1px 2px` - Both use the small `4px` or `6px` radius - No hover states defined — Framer handles hover via its own motion system **Cards / Bento Items** - Shadows: `rgba(0,0,0,0.2) 0 1px 2px, rgba(0,0,0,0.12) 0 1px 2px -1px` — subtle, ground-level lift - Secondary card shadow: `rgba(0,0,0,0.03) 0 1px 2px-1px, rgba(0,0,0,0.05) 0 1px 2px` — barely perceptible **Footer** - `120px` top padding — dramatic separation from content --- ## 5. Layout Principles Built with Framer's native layout engine, the site uses a bento-grid aesthetic: irregular tile sizes, each with its own color, assembled into a cohesive page. The main content has `0px` gap, meaning items sit flush or Framer's layout system manages spacing internally. Sections have `60px 16px 80px` padding — generous vertical breathing room, mobile-friendly horizontal gutters. The 16px side padding is intentionally narrow, letting content reach close to the viewport edge for a more immersive feel on small screens. The layout is not a standard responsive grid — it's a designed composition where each tile's size and position is defined visually in Framer, then rendered as fixed coordinates at each breakpoint. --- ## 6. Depth & Elevation Depth is minimal by design — the color contrast between tiles provides inherent separation without relying on shadows. - **Tile shadows**: `rgba(0,0,0,0.2) 0 1px 2px` — just enough to separate tiles from the background - **Glass headers**: frosted opacity (`0.8`) provides perceived depth through transparency - **Overlay surfaces**: `rgba(255,255,255,0.6)` for layered panels — suggests content floating over the color tiles No dramatic elevated shadows, no blur-heavy glass. The design is flat by default, with color doing the work that shadow would otherwise do. --- ## 7. Do's and Don'ts **Do:** - Use the light gray `rgb(243, 244, 246)` as the neutral base — it's warm enough to not feel clinical - Let project tiles define their own bold color identity — no enforcing a unified palette on content - Apply very large border radii (32–40px) to color tiles for the Framer-portfolio squircle feel - Keep typography minimal and small — type is functional, color is expressive - Use frosted glass (`rgba(243, 244, 246, 0.8)`) for sticky navigation headers **Don't:** - Don't bring the browser-default link blue into custom components — override with `rgb(16, 98, 255)` at minimum - Don't add heavy drop shadows — the color tiles create their own visual weight - Don't use the project colors (`purple, gold, orange`) as text or background outside their designated tiles - Don't scale type up aggressively — the small type is a stylistic choice, not a limitation - Don't replicate the 12px system size in a text-heavy product — this scale works for a visual portfolio only --- ## 8. Responsive Behavior Framer handles responsive layout at six breakpoints (`719.98, 720, 809, 810, 1199, 1199.98px`) — notably pairs of values just above/below thresholds, suggesting pixel-perfect breakpoint control. At mobile, the bento grid likely reflows to a single-column stack. Section padding `60px 16px 80px` is already mobile-friendly. The header's `24px 16px` padding scales naturally. The big color tiles with `32–40px` radii maintain their character even at narrow widths — if anything, they become more impactful as full-width blocks on mobile. --- ## 9. Agent Prompt Guide Use this block when prompting an AI to generate UI in the style of harshitbeni.com: ``` Design a visual portfolio in the Framer bento-grid style. Base background is light cool gray (#F3F4F6). Each project gets its own bold color tile: choose from electric purple (#5D40F5), gold (#EAA608), burnt orange (#DF803F), mint green (#55B186), sky blue (#49A9F8), or coral red (#DB544E). Tiles use very large border radii (32–40px). Typography is small and functional — Inter at 12px/600 for labels, system sans-serif for navigation. Navigation header uses frosted glass (background-color at 80% opacity of the page color). Shadows are minimal: 0 1px 2px with very low opacity. No gradients, no dark mode. Framer Motion animates tile reveals on scroll. CTAs use near-black (#000000CC) or white fills with subtle shadows. ``` --- *Generated by Sparkbites — extracted from live CSS analysis*