#Portfolio Design System

This document defines the visual and interaction language for Paridhi Mundra's portfolio. Use it for every new page, section, and component. Preserve the portfolio's current personality: calm, tactile, editorial, playful, and personal—not corporate or template-like.

The implemented CSS tokens in src/styles/tokens.css are the runtime source of truth. If this document and the code disagree, inspect the existing interface before changing either one.

##Brand Direction

• Present Paridhi as a thoughtful product builder with range across design, technology, research, and creative practice.
• Combine an orderly editorial grid with a few expressive, physical details: rotated media, desk objects, handwritten marks, collage cards, and subtle surprises.
• Keep the interface quiet enough for project imagery and writing to lead.
• Favor warmth, curiosity, and craft over polished SaaS aesthetics.
• Use sentence case or intentionally lowercase UI copy. Avoid title case in navigation and captions.

##Color

###Core palette

###Home page contrast override

The home page may locally darken the core text tokens to improve readability while preserving the warm canvas and quiet editorial mood:

###Color rules

• Maintain low contrast between backgrounds, surfaces, and borders while keeping text readable.
• Use white primarily for contained media cards, not as the whole-page canvas.
• Let photography and project artwork supply saturated color. Do not introduce an arbitrary bright UI accent.
• Reserve semantic colors for actual status. The existing warning palette is amber (#8a5a00 text with a pale amber background).
• Avoid gradients in ordinary components. The existing blue-gray gradient is a special atmospheric treatment, not a default surface.

##Typography

###Families

• Primary sans: Schibsted Grotesk, weights 500 and 600. Use for navigation, body copy, headings, buttons, and captions.
• Display serif: Reckless Standard S Medium. Use sparingly for editorial or expressive headings where an existing page establishes it.
• Monospace: Geist Mono. Use for compact uppercase labels, tags, technical metadata, and nerd-mode UI.
• Handwriting: Sedgwick Ave. Use only for personal annotations or handmade accents.
• Signature: Momo Signature. Use only for Paridhi's signature treatment.

###Scale

###Typography rules

• Keep the type scale compact and the hierarchy clear through spacing, placement, and tone—not excessive size variation.
• Use display text for one primary statement per section.
• Keep body copy around a 560px maximum measure where practical.
• Labels are uppercase monospace; card captions and navigation may be lowercase.
• Use weight 600 for emphasis. Avoid very bold weights and synthetic font styles.
• Do not use generic Inter, system-serif, or decorative fonts in place of the supplied families.

##Spacing and Layout

• Use an 8px-based spacing rhythm: 8, 12, 16, 24, 32, 48, 64px.
• Page gutter: clamp(24px, 5vw, 56px); use 24px at widths up to 768px.
• Maximum page width: 1600px.
• Standard content column: approximately 560px.
• Home sections breathe generously: clamp(140px, 18vw, 240px) vertical separation.
• Keep desktop compositions asymmetrical when media benefits from an offset or bleed. Restore a simple single-column flow on small screens.
• Use clamp() for fluid dimensions instead of many narrow breakpoints.
• Primary breakpoints are 480px, 768px, 900px, and 960px.

##Shape, Borders, and Elevation

• Small control radius: 10–12px.
• Standard surface radius: 14px.
• Media/card shell radius: 16px; inner media radius: 10px.
• Pills and chips use 9999px radius.
• Default card treatment: white background, 1px solid #eaeaea, 16px outer radius, and 10px padding.
• Most project cards are flat. Use shadows only where physical layering is meaningful, such as the overlapping end-of-page collage or a modal.
• Avoid glassmorphism as a general style. A light backdrop blur is acceptable for the fixed header pills and modal backdrops.

##Core Components

###Header and navigation

• Keep the header fixed, transparent, and horizontally balanced.
• Desktop layout uses a three-column grid: left navigation pill, centered Paridhi wordmark, and a right-aligned group containing the design.md pill and location/status pill.
• Pills are 32px tall in the hero, softly translucent, and fully rounded.
• The design.md pill uses a 16px regular-weight document icon before its label, a 7px icon-to-label gap, and otherwise exactly matches the location/status pill's type, color, background, height, blur, and radius.
• Navigation copy is compact and mostly lowercase. Indicate the current page with weight rather than a loud color.
• On screens below 900px, show the wordmark on the left and a 44px circular menu button on the right. Open navigation as a clear full-width mobile panel.
• The header may hide while scrolling; use a smooth translate-and-fade transition.

###Buttons and links

• Default buttons are compact pills with 7px 12px padding, a 1px border, and medium-weight body text.
• Primary buttons use the soft gray fill #e6e6e1 with blue-gray foreground.
• Secondary buttons use a translucent white fill.
• Hover states should be quiet: a small opacity or surface change. Active states may use a very small scale change only when already established.
• Text links should remain typographic. Underline them on hover/focus with a comfortable offset.
• Always provide a visible :focus-visible state; do not rely only on color or hover.

###Tags and badges

• Use uppercase Geist Mono at 12px.
• Minimum height is 28px; padding is approximately 4px 10px.
• Use a subtle border and near-canvas fill with a full pill radius.
• Keep labels short and factual. Do not over-tag a project.

###Project and media cards

• Frame project visuals as tactile editorial artifacts rather than dashboard tiles.
• Standard shell: white, 1px border, 16px radius, 10px padding.
• Inner frame: photo-gray placeholder, 1px border, 10px radius, clipped overflow.
• Prefer 16:10 for grid cards, 21:9 for wide case-study frames, 3:2 for featured media, and square for collage memories.
• Use object-fit: cover unless the artifact needs to be shown in full.
• Captions are small, muted, and lowercase.
• Featured work may bleed beyond the text column on desktop, but must return to full container width below 900px.

###Hero

• The hero occupies at least one dynamic viewport height and centers the primary story.
• Combine concise text with a small number of positioned personal objects or media fragments.
• Objects may rotate slightly and overlap, but must never obstruct essential content.
• Treat handwritten/signature details as accents, not body typography.
• On mobile, reorganize floating objects into a controlled composition rather than shrinking the desktop arrangement wholesale.

###Footer and personal collage

• End with generous whitespace followed by a simple three-column footer: closing statement, personal tagline, and social links.
• Collapse the footer to a left-aligned single column below 900px.
• The collage may use rotated, overlapping, shadowed cards because it represents physical memories and personality.
• Collage hover can lift and straighten the active card. Mobile should use a swipeable/deck-like treatment instead of dense overlap.

###Modals and overlays

• Use a dark translucent backdrop with approximately 6px blur.
• Center the media with a restrained 12px radius and a strong but soft shadow.
• Provide an obvious circular close control, Escape-key behavior, focus management, and scroll locking.

##Imagery and Iconography

• Prioritize authentic product screens, prototypes, event photographs, videos, and personal artifacts.
• Preserve image quality and natural aspect ratios. Avoid generic stock photography.
• Use Phosphor icons with regular weight unless a filled icon has semantic meaning (for example, the footer heart).
• Keep icons between 15px and 20px in text controls; menu and standalone controls may be larger.
• Decorative objects must be marked appropriately for assistive technology and should not create layout shift.

##Motion

• Motion should feel soft, crafted, and purposeful.
• Hero entrances may combine opacity, a 8–14px vertical shift, subtle blur, and staggered timing around 860–980ms with cubic-bezier(0.22, 1, 0.36, 1).
• Standard interactive transitions should be roughly 180–420ms and limited to opacity, transform, or shadow.
• Small rotations and lifts are welcome for tactile media. Avoid bouncy UI, constant ambient animation, or large parallax effects.
• Honor prefers-reduced-motion: remove nonessential animation and transforms without hiding content.

##Responsive Behavior

• Design desktop and mobile compositions intentionally; do not treat mobile as a scaled-down desktop.
• At 900px, collapse complex grids, navigation, footer rows, and featured bleeds.
• At 768px, use a 24px page gutter and simplify floating hero content.
• Ensure interactive targets are at least 44×44px on touch screens, even when the visible pill is smaller.
• Never introduce horizontal page scrolling. Allow deliberate card bleeds only when they remain contained.
• Test long titles, wrapping labels, portrait and landscape media, and viewport heights affected by mobile browser chrome.

##Accessibility and Content Quality

• Meet WCAG AA contrast for functional text and controls; muted colors are for secondary copy, not critical information.
• Use semantic landmarks, heading order, descriptive links, useful alt text, and keyboard-operable interactions.
• Never encode meaning through color alone.
• Keep visible focus states stylistically quiet but unmistakable.
• Avoid autoplay audio. Video should be controllable and respect reduced-motion/data preferences where practical.
• Write concise, direct copy in Paridhi's voice. Favor specific outcomes and human observations over buzzwords.

##Do / Do Not

###Do

• Use warm negative space, restrained blue-gray type, real project media, and tactile card treatments.
• Reuse the CSS variables and shared primitives before creating new values.
• Allow one playful visual idea to lead a section.
• Keep project storytelling scannable while retaining personal detail.
• Check every change at desktop, tablet, and narrow mobile widths.

###Do not

• Add neon accents, generic purple gradients, heavy drop shadows, or glass cards.
• Turn the portfolio into a SaaS dashboard or uniform bento grid.
• Add excessive rounded containers around plain text.
• Use large bold type everywhere or introduce unrelated typefaces.
• Animate every element, sacrifice readability for overlap, or make decorative interactions mandatory.
• duplicate near-identical colors, radii, spacing values, or button styles when a token already exists.

##Implementation Checklist

Before shipping new UI, verify that it:

1. Uses tokens from src/styles/tokens.css or adds a justified reusable token there.
2. Uses the established font families and compact type scale.
3. Follows the 24px minimum page gutter and generous section rhythm.
4. Reuses existing button, tag, card, and header patterns where appropriate.
5. Has responsive behavior at 900px and 768px where relevant.
6. Includes hover, keyboard focus, loading/empty, and reduced-motion states.
7. Uses authentic portfolio imagery and preserves the calm editorial hierarchy.
8. Has been checked for overflow, contrast, readable line length, and touch target size.