Nidhi

Overview

Nidhi is a portfolio for a developer and curious builder who explores software, AI, Web3, and follows interesting ideas down rabbit holes. The design aesthetic is 'Minimalist Monochromatic with Illustrative Accents'—a refined, print-inspired approach that prioritizes clarity and intellectual curiosity over visual noise. The UI evokes a sense of organized chaos: a clean, light canvas (oklch(0.975 0.003 85) background) paired with precise black typography (oklch(0.13 0.005 70)) and hand-drawn line illustrations that suggest the complexity of thought. The emotional response is one of approachability and depth—the portfolio feels like a conversation with someone thoughtful, not a corporate showcase.

The brand voice is conversational, self-aware, and playful without being flippant. Vocabulary patterns include phrases like 'rabbit holes,' 'jack of all trades,' and 'curious builder'—language that signals intellectual exploration and humility. The tone avoids jargon while celebrating technical depth. Example sentence in brand voice: 'I tinker with a lot of stuff—what a cool way to say I fall down rabbit holes.'

Colors

The color system is deliberately monochromatic, using a single dark neutral (#0b0b0d) as the primary accent and interaction color, paired with a near-white background (#f5f5f5) and a carefully calibrated grayscale for secondary surfaces and text hierarchy. Primary (#0b0b0d) is used exclusively for CTAs ('let's talk', 'view work'), active navigation states, and primary text. The on-primary color (#ffffff) ensures maximum contrast on dark backgrounds (WCAG AAA compliant at 21:1 ratio). Secondary surfaces use a mid-gray (#505050) for supporting text and disabled states, while the surface stack progresses from #f9f9f9 (surface-container-lowest) through #e9ecef (surface-container) to #d0d0d0 (surface-container-highest) to create subtle depth without color. The outline-variant (#cccccc) is used

Typography

The type system uses three distinct typefaces to create visual rhythm and hierarchy: DM Sans (geometric, modern sans-serif) for body and UI labels, Newsreader (serif, editorial) for large headlines and display text, and Patrick Hand (handwritten, decorative) for accent moments. Display text (60px, 700 weight, -0.04em tracking) uses DM Sans for maximum legibility at large scale. Headline-lg (48px, 500 weight, Newsreader italic) creates an editorial, thoughtful tone—the serif and italic treatment signals 'this is important and worth reading.' Body text (16px, 400 weight, 24px line-height) uses DM Sans with generous line-height to ensure readability on light backgrounds. Labels (14px, 500 weight, 0.01em tracking) use DM Sans with subtle positive tracking to add crispness to UI elements. All t

Layout

The page uses a fluid, scroll-driven layout with a 12-column grid and a max-width of 1300px, centered on the viewport. The hero section spans the full viewport height with a sticky, parallax-scrolling illustration (the 'mind map' SVG) that animates as the user scrolls, creating a sense of depth and movement. Spacing follows a 4px base unit: xs (4px), sm (8px), md (16px), lg (24px), xl (32px). Section separation uses lg spacing (24px) for breathing room between major content blocks. The gutter (32px) is applied to left/right padding on the container, creating a comfortable margin from the viewport edge on desktop and tablet. On mobile, the gutter reduces to 20px to accommodate smaller screens. Cards and content blocks use md (16px) internal padding with lg (24px) margin-bottom for vertical

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than color shifts. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for interactive elements like buttons and input fields, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements and overlays. All interactive elements (buttons, inputs, cards) have a 1px solid border in the outline-variant color (#cccccc), which creates a crisp, technical appearance and reduces reliance on shadows. Hover states on buttons apply a -2px vertical transform

Shapes

The shape philosophy is 'Technical Minimalism'—sharp corners are the default, with subtle rounding applied only where it serves function. Buttons use rounded-DEFAULT (4px) for a clean, modern appearance that feels technical without being cold. Input fields also use 4px rounding. Cards and larger containers use rounded-lg (12px) to create a slightly softer appearance while maintaining precision. The custom select dropdown uses rounded-DEFAULT (4px) with a 1px solid border (#d0d0d0) and a box-shadow of 0 3px 8px rgba(0, 0, 0, 0.15) to create subtle depth. Dividers and borders are always 1px soli

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use a solid background in the primary color (#0b0b0d) with white text, 1px border in the same color, 8px 16px padding, and 40px height. On hover, the background shifts to primary-container (#2a2a2d) and the button translates up 2px (transform: translateY(-2px)) over 200ms ease-out. Secondary buttons use a transparent background with a 1px border in primary (#0b0b0d) and primary text, with the same hover behavior. All buttons use label-md typography (14px, 500 weight, 0.01em tracking) and apply focus-visible:ring-2 focus-visible:ring-ring for keyboard navigation.

Containers & Surfaces Cards use a white background (#ffffff) with a 1px solid border in outline-variant (#cccccc) and rounded-lg (12px). Internal

Do's and Don'ts

**Do**

• Do use DM Sans for all body text and UI labels—it's geometric, modern, and pairs well with Newsreader headlines.
• Do apply the primary color (#0b0b0d) exclusively to CTAs and active states; it's the only accent in the system.
• Do maintain the 1px solid border on all interactive elements (buttons, inputs, cards) for a crisp, technical appearance.
• Do use the lg spacing (24px) for section separation and breathing room between major content blocks.
• Do apply the -2px vertical transform on button hover with 200ms ease-out timing for subtle, responsive feedback.
• Do use Newsreader italic for large headlines (48px+) to create an editorial, thoughtful tone.

**Don't**

• Don't use color to create hierarchy—use weight, size, and spacing instead. The system is intentionally monochromatic.
• Don't apply shadows to text; rely on weight and color contrast for legibility.
• Don't round corners beyond rounded-lg (12px) except for full-circle badges and decorative elements.
• Don't use the secondary or tertiary colors for primary interactions; reserve them for supporting UI only.
• Don't apply multiple shadows or blur effects; keep elevation subtle (max 0 8px 24px rgba(0, 0, 0, 0.12)).
• Don't mix typefaces within a single text block—use DM Sans for body, Newsreader for headlines, Patrick Hand for accents only.