Shouri Chakraborty Portfolio

Overview

Shouri Chakraborty's portfolio embodies a "Dark Minimalist-Technical" aesthetic, where a pure black canvas (#000000) serves as the foundation for a sophisticated interplay of warm neutrals and precision-engineered interactive elements. The brand targets AI engineers, full-stack developers, and technical recruiters seeking evidence of expertise in generative AI, coding agents, and modern web systems. The visual language evokes clarity through contrast: crisp white typography (rgb(255, 255, 255)) against deep blacks, punctuated by warm accent colors (#dedbc8 for primary actions, #ffd700 for highlights, #ff9900 for tertiary emphasis). The UI employs liquid-glass morphism—a refined evolution of glassmorphism—using backdrop-filter: blur(4px) with rgba(255, 255, 255, 0.01) backgrounds and inset borders at rgba(255, 255, 255, 0.1) to create crystalline, floating surfaces that feel both ethereal and grounded.

The brand voice is direct, technically precise, and unapologetically ambitious. Vocabulary leans toward engineering terminology ("agentic systems," "multi-window architecture," "tool-based workflows") without sacrificing accessibility. The tone avoids hype; instead, it demonstrates capability through concrete project descriptions and architectural clarity. Example sentence in brand voice: "Late-Meet transcribes meetings in real-time using local-first LLMs—no cloud dependency, no latency, full privacy."

Colors

The color system operates on a principle of extreme contrast and intentional accent placement. The surface stack anchors the design in pure black (#000000 for surface, #0a0a0a for surface-dim, #151515 for surface-container), creating a near-monochromatic foundation that maximizes legibility and focuses attention on interactive elements. On-surface text is set to #dedbc8 (a warm, off-white beige with slight desaturation), which reads at high contrast (WCAG AAA) against the black background while avoiding the harshness of pure white. Primary color (#dedbc8) is used exclusively for call-to-action buttons, primary links, and focus states—it is the brand's signature accent, appearing on the "Resume" button and interactive hero elements. Secondary color (#ffd700, a warm gold) highlights achievem

Typography

The type system pairs Almarai (a geometric sans-serif optimized for screen legibility) for all body, label, and headline text with Instrument Serif (an italic serif) reserved for display-level hero statements and decorative contexts. The hierarchy spans eight levels: display (72px, 800 weight, -0.03em tracking) for hero headlines; headline-lg (48px, 700 weight) for major section breaks; headline-md (32px, 600 weight) for subsections; title-lg (24px, 600 weight) for card titles; body-lg (18px, 400 weight, 28px line-height) for long-form content; body-md (16px, 400 weight, 24px line-height) for standard paragraph text; label-md (14px, 600 weight, 0.02em tracking) for interactive labels and button text; and label-sm (12px, 700 weight, 0.05em tracking) for badges and micro-text. The serif-disp

Layout

The layout operates on a 12-column grid with a max-width of 1280px, centered on the viewport with symmetric gutters of 24px on desktop and 16px on mobile. The spacing scale uses semantic tokens: unit (8px) as the base increment, xs (4px) for micro-spacing within components, sm (12px) for internal padding in inputs and small cards, md (24px) for standard section padding and card spacing, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The hero section spans full viewport height with a dark background image (the organic, nature-inspired backdrop visible in the screenshot) overlaid with a semi-transparent dark gradient (rgba(0, 0, 0, 0.5)) to ensure text legibility. Content sections below the fold use lg spacing (40px) between major blocks, with md spaci

Elevation & Depth

Depth is conveyed through a restrained shadow system and the liquid-glass layering technique rather than dramatic drop shadows. Level 1 (Base/Surface) uses no shadow, relying on the pure black background (#000000) as the foundation. Level 2 (Standard Cards/Inputs) applies a subtle inset shadow (inset 0 1px 1px rgba(255, 255, 255, 0.1)) combined with a 1px border at rgba(255, 255, 255, 0.1) to create a frosted-glass appearance; the backdrop-filter: blur(4px) softens the background behind the element, enhancing the crystalline effect. Level 3 (Elevated Cards/Modals) increases the blur to backdro

Shapes

The shape philosophy is "Soft-Technical Precision," balancing approachability with engineering rigor. Buttons use a full rounded style (border-radius: 9999px) to signal primary actions and create a friendly, inviting CTA aesthetic—the "Resume" button and secondary CTAs all employ this radius. Cards and containers use lg (1rem / 16px) for a subtle, modern softness that avoids sharp corners without appearing overly rounded. Input fields use md (0.75rem / 12px) to sit between buttons and cards, signaling their interactive but secondary role. Modals and elevated surfaces use xl (1.5rem / 24px) for

Components

Action Elements Buttons are the primary interactive currency. The button-primary component uses backgroundColor: {colors.primary} (#dedbc8), textColor: {colors.on-primary} (#000000), rounded: {rounded.full} (9999px), padding: 8px 24px, and height: 44px. The typography is label-md (14px, 600 weight). On hover, button-primary-hover shifts to backgroundColor: {colors.primary-fixed-dim} (#c9c7b3) and applies a box-shadow: 0 4px 12px rgba(222, 219, 200, 0.2) to lift the button. On active, button-primary-active applies transform: scale(0.98) for tactile feedback. The button-secondary component uses a transparent background with a 1px border at rgba(255, 255, 255, 0.1), textColor: {colors.primary}, rounded: {rounded.full}, padding: 8px 16px, and height: 40px. On hover, it shifts to background

Do's and Don'ts

**Do**

• Do use the primary color (#dedbc8) exclusively on call-to-action buttons and primary interactive elements—it is the brand's signature and should never appear as body text or background.
• Do apply the liquid-glass effect (backdrop-filter: blur(4px) + rgba(255, 255, 255, 0.01) background + inset border) to elevated cards and modals to maintain visual cohesion and the ethereal-yet-grounded aesthetic.
• Do maintain high contrast between text and background—use {colors.on-surface} (#dedbc8) on {colors.surface} (#000000) for all body text to ensure WCAG AAA compliance and readability.
• Do use the full rounded radius (9999px) exclusively on buttons to create a visual anchor and signal primary actions; reserve lg (16px) for cards and md (12px) for inputs.
• Do pair Almarai for all functional text (body, labels, headlines) and reserve Instrument Serif italic for hero-level display statements and decorative accents.
• Do use the spacing scale semantically: lg (40px) for major section breaks, md (24px) for card padding and standard spacing, and sm (12px) for internal component spacing.

**Don't**

• Don't use pure white (#ffffff) for body text or backgrounds—the warm off-white (#dedbc8) is the brand standard and prevents visual harshness against the black canvas.
• Don't apply drop shadows (0 20px 60px patterns) to create depth; instead, use the inset shadow + blur + border technique to maintain the liquid-glass aesthetic and avoid a heavy, dated appearance.
• Don't mix Almarai and Instrument Serif at the same hierarchy level—Instrument Serif is reserved for display-level hero text and decorative accents, never for body or label text.
• Don't use the secondary (#ffd700) or tertiary (#ff9900) colors as primary CTAs—they are supporting accents for badges, highlights, and secondary actions; the primary color (#dedbc8) is the only CTA color.
• Don't round corners below md (12px) on interactive elements—use the graduated radius scale (full for buttons, lg for cards, md for inputs) to maintain visual hierarchy and clarity.
• Don't apply transitions longer than 0.3s ease on interactive elements—the brand favors responsive, snappy feedback; longer durations feel sluggish and undermine the technical aesthetic.