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

###Noteweave case-study palette

Noteweave follows the shared restrained case-study palette:

• Neutral gray surfaces structure ordinary cards, constraints, quotes, and supporting information.
• Blue marks process, navigation, selected states, and the primary strategic takeaway.
• Do not introduce purple, coral, yellow, or alternating decorative card colors.
• Keep body copy in the core text colors. Use accent color only on bounded callouts, diagrams, and confirmed outcomes.
• The Scientific Loop follows the premise heading and copy in a single-column section. Present its five stages as one full-width horizontal sequence with forward arrows between adjacent stages and no return arrow beneath them. Its borderless container uses one flat soft-blue surface, while its borderless stage cards remain neutral and pair every stage with a meaningful icon. Preserve the horizontal sequence with contained scrolling on narrow screens.
• Keep the Noteweave premise focused on one introductory paragraph beside the Scientific Loop. Do not add separate insight or design-problem callouts beneath the premise copy.
• The Noteweave autonomy section uses two visually connected columns: a compact risk map on the left and a concise three-column agent summary on the right. Keep copy to one short sentence per artifact. Plot Problem defining, Literature review, Hypothesis generation, Experimentation, and Drafting as solid circular dots with short labels instead of descriptive boxes. Use Execute, Explore, and Scope as the summary columns; beneath each, state the control level and the stages that agent handles. Repeat matching dots beside the agent headings. Use very soft pastel pink for Execute/researcher approval, pastel purple for Explore/researcher review, and pastel blue for Scope/AI action. Do not use enclosing card strokes or table dividers; retain only the chart axes, grid, and connector line. Stack the columns below 900px.

###ResXiv case-study palette

• ResXiv uses the same neutral and blue palette as every other case study.
• The Research Goals banner uses one soft-blue surface, never a multicolor gradient.
• The ResXiv Insights section uses one horizontal row of five uniform transparent, thin-outlined cards on desktop. Stack each card vertically with a compact white rounded icon tile above a small title and one concise supporting insight. Keep both the icon tile and card flat, with no shadow, fill on the card, or decorative rotation. Stack the cards on narrow screens. The accompanying researcher quotes use the same transparent, thin-outlined treatment.
• The User Journey may use a horizontally scrollable research map with neutral row labels, one blue selected-stage treatment, compact cells, and clearly named emotions.
• The ResXiv opportunity statement may use a minimal editorial callout with a soft-blue surface and one blue accent.
• The ResXiv four-tool workflow row uses transparent cards with thin neutral outlines and no fill.
• The ResXiv feature-prioritization section may begin with a compact soft-blue design-challenge callout that separates a small sentence-case heading from Body copy. Follow it with one compact neutral prototype-feedback panel before the supporting media. Structure the feedback panel as a short title followed by three divider-led, icon-supported rows for the wireframing approach, feedback partners, and communication channels. Keep both panels flat and use Body typography for supporting details.
• The ResXiv academic-research brief uses a compact two-card context-and-problem layout. Keep both statements in normal body typography rather than display-heading type, and stack the cards below 768px.
• Present the ResXiv problem-space context as a single-column section followed by the full-width soft-blue research-defense reflection, using a small sentence-case title and Body typography for its supporting paragraphs. Place Research Goal in its own section immediately afterward, using the established compact blue research-goal card with a compact internal “Research Goal” heading and no visible section heading.
• ResXiv qualitative-research sections use an equal-height two-column layout with the research summary and a compact two-column facts stack on the left, and one captioned interview artifact on the right. Supporting context inside a soft-blue box uses the same Body typography and muted text color as the adjacent research summary. Let the image fill its media frame without distortion and stack it after the research details below 900px.
• ResXiv quantitative-research sections may pair the survey summary on the left with one captioned survey-response artifact on the right, using the same responsive two-column media treatment.
• The ResXiv Feedback Funnel may introduce its email artifact with the same compact neutral, icon-supported panel used for prototype feedback. Use three divider-led rows to explain the communication-channel decision, how feedback threads opened, and why early concept feedback took priority over detailed analytics.
• After the ResXiv Feedback Funnel, present the complete design walkthrough as a user-controlled video. It starts paused and muted, and exposes native play/pause and volume controls.
• The ResXiv success and pricing section should begin with one concise pricing premise, then use two equal-width transparent, thin-outlined cards for pricing structure and observed workflow usage. End with one compact soft-blue reflection box that distinguishes metrics still to be defined. Do not fabricate KPI cards or present acquisition alone as proof of product value.
• The ResXiv competitive analysis may use an editorial analysis board with a competitor count, text-based wordmarks, strengths, gaps, workflow clusters, and a clearly stated opportunity. Do not fabricate competitor logos or screenshots.
• Keep long-form copy in the core text colors and preserve WCAG AA contrast.

###Shared case-study editorial system

All case studies use one calm editorial framework so readers can understand the story before noticing the interface treatment.

• Use the warm canvas as the dominant background. Reserve white and pale gray for media frames, research artifacts, and comparison surfaces.
• Case studies use at most two interface colours outside text and imagery: neutral gray surfaces and one blue accent. Outcomes, checks, and selected states also use blue or neutral gray.
• The shared case-study blue is the subdued portfolio blue-gray, not a saturated royal blue. Keep soft-blue surfaces low-saturation and close to the neutral palette.
• Use neutral gray surfaces for ordinary cards, constraints, quotes, old flows, and supporting information. Do not use purple, coral, yellow, or alternating decorative card colors.
• Success callouts use one soft-blue or neutral surface with no stroke.
• Use flat fills only. Do not use gradients, rotated cards, decorative canvases, or shadows in case-study content.
• Snap one full-bleed project cover to the top of the page. It fills the viewport width and uses object-fit: cover. Keep its height compact: 320px to 560px on desktop and 240px to 360px on mobile. Use a compact 32px transition below the cover, then show tags, the project title, a one-sentence outcome, and metadata inside the editorial column.
• Project metadata uses a border-led row rather than separate floating boxes. Labels are uppercase monospace and values use readable body text.
• Case-study hero category tags use a quiet neutral fill with no stroke and an 8px corner radius instead of the shared fully rounded tag treatment.
• The Long story short section begins with an uppercase monospace label, then a large summary statement, supporting copy, project metadata, and any proof or testimonial.
• Noteweave omits the Long story short section because its hero already carries the summary. Its testimonial appears after the learning cards in the Learnings section.
• ResXiv omits the Long story short section because its hero already carries the project summary.
• Each article section uses a controlled 72px vertical rhythm, a compact uppercase kicker, and one clear editorial heading.
• Structure the story as context, evidence, insight, decision, and outcome. Do not give every artifact its own narrative weight.
• Section headings state the UX conclusion, tradeoff, or design decision. Avoid headings that only name a deliverable such as “Research,” “Iteration,” or “Information architecture.”
• Use simple language with precise UX terms only where they clarify the decision: cognitive load, information architecture, progressive disclosure, mental model, feedback loop, activation, and usability.
• Prefer one short paragraph followed by one strong evidence block. Avoid stacking several callouts, cards, and tables to repeat the same point.
• Keep paragraphs to a readable measure. Let product images, diagrams, research artifacts, tables, and before-and-after comparisons use the full content width.
• Use light neutral summary cards without visible strokes. Reserve thin borders for media shells, tables, and controls. Color should clarify meaning, not create a decorative patchwork.
• HMW questions and strategic opportunities may use one prominent pale blue statement panel with larger type.
• Image groups should read like documented evidence. Use consistent compact frames, aligned captions, and even spacing.
• Every case-study testimonial uses the shared testimonial component: a neutral card, blue left accent, blue quote mark, primary-color quote text, compact 16px padding, Subheading quote type, and Supporting stacked attribution. Testimonial rows use equal-height cards. Never create a case-specific testimonial treatment or let testimonials become oversized display panels.
• Research-goal callouts use a compact maximum width, 16 to 20px padding, a thin accent edge, and restrained 1.125rem to 1.375rem statement text.
• Competitive-analysis boards use a compact official-logo strip, paired strengths and gaps, and one minimal divider-led opportunity row without a colored panel. Structure the opportunity as a compact label, a concise lead-in, and one statement with selective emphasis. Give logos clear visual priority with larger transparent wordmarks and keep the accompanying product-name labels compact. Keep supporting copy at 0.8125rem to 0.875rem; do not repeat the analysis in a separate product-landscape block.
• On desktop, use horizontal layouts for related feature cards, learnings, metrics, outcomes, quotes, image pairs, comparisons, and short research summaries. Equalize card heights within each row. Preserve vertical layouts for long-form prose and stack horizontal groups below 768px.
• Noteweave interaction sections use one consistent two-column comparison table labeled Old flow and New flow. Place relevant before-and-after evidence inside those cells, and leave a comparison cell text-only when no accurate artifact exists. Keep both columns visible without horizontal scrolling, using fills and rounded corners without cell outlines. Give the Old flow column a slight pastel-blue fill. Interaction 1 is the exception: stack Old flow above New flow in the left column and show only the New flow image in the right column. Interaction 2 keeps both comparison cells text-only and places one full-width supporting image directly below the table. Interactions 3, 5, 6, 7, and 8 preserve the complete natural dimensions of their screenshots without cropping. Interaction 6 stacks its two recovery-state screenshots in the New flow cell. Interaction 7 focuses on the chat input and its visible research controls.
• Noteweave’s interaction stories begin with the heading “I used rapid prototyping and implemented a feedback funnel to make the hardest interactions.” Do not add an introductory paragraph or divider beneath it; the first interaction begins directly below so the heading clearly groups the full sequence.
• Label each Noteweave interaction with its compact sequential counter (for example, “1 of 10”) rather than a descriptive kicker.
• Start each Noteweave interaction directly with its Old flow/New flow comparison; do not add a separate problem statement or problem callout above it.
• Present Noteweave learnings as a three-column grid of equal-format insight cards: a small blue line icon, short title, and one-line supporting detail on a soft blue-neutral surface with no border. Stack the cards below the standard mobile breakpoint.
• Noteweave technical constraints use three stacked editorial evidence rows instead of a dense comparison table. Each row shows one concise constraint title, one sentence combining the design response, result, and principle, one authentic product image, and an “n of 3” counter pinned to the bottom of the copy column. Do not repeat a Constraints label inside each row. Vertically center the title and description against the image while keeping the counter bottom-aligned, let images fill the frame width edge-to-edge at their natural aspect ratio, make each frame hug its image height, and stack evidence below the copy under 900px.
• Success frameworks use one compact north-star row, four equal KPI cards on desktop, and a small inline milestone strip. Avoid large standalone metric panels.
• Retrospective and learning summaries use compact equal-height icon cards with one concise takeaway per box. Learning cards share one soft surface style across case studies and have no stroke. Prefer three cards in a desktop row and stack them on mobile.
• Iteration stories use a consistent 2×2 desktop grid for the problem, design decision, result, and supporting media. Stack the four cells on mobile.
• ResXiv iterations omit the result card. On desktop, use equal Problem and Design decision cards with transparent backgrounds and thin neutral outlines above full-width supporting media; stack the three cells on mobile. Use the shared ResXiv iteration video across all five iterations, preserve its natural aspect ratio at full media width, and loop each design's exact segment: Design 1 from 1:05 to 1:32, Design 2 from 0:10 to 0:19, Design 3 from 1:33 to 1:39, Design 4 from 0:20 to 0:30, and Design 5 from 0:33 to 1:05.
• ResXiv Design 1 may follow its supporting media with one compact neutral, icon-supported tradeoff panel. Structure it as a concise advocacy-and-tradeoffs title followed by three divider-led rows for the scope change, the first-iteration decision, and the shipped outcome.
• On desktop, use a narrow 132px case-study navigation to the left of a separately constrained editorial reading column. Make the navigation sidebar itself sticky at the top-left after the cover scrolls away, so it remains persistent while the article scrolls. Keep the complete navigation-and-article shell within a 1160px maximum width, with 32px outer padding and 32px internal article padding. Animate the active indicator and label subtly as sections change. Hide the sidebar below 1100px so the mobile story remains a single column with a 24px outer gutter.
• On mobile, collapse grids to one column, keep section titles readable, and avoid horizontal page scrolling. Purposeful internal scrolling remains acceptable for dense research tables and journey maps.

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

###Case-study typography system

Case studies use a dedicated, compact type system. It applies to every case study and every shared case-study component, including the hero, metadata, Long story short, article sections, cards, callouts, tables, testimonials, metrics, and next-project links.

• Use Schibsted Grotesk for all case-study text. Do not use Reckless, Geist Mono, handwriting, or another family inside a case study.
• This restriction is local to case studies. It does not remove Reckless or other established type treatments elsewhere in the portfolio.
• No case-study text, including decorative quote marks and metric values, may exceed 40px.
• Use weights 500 and 600 only. Use 600 for hierarchy and emphasis, not as a default body weight.
• Use sentence case for headings. Labels may use uppercase with restrained tracking.
• Shared case-study components must use only the five roles below, from the case-study hero through the “Ready for next?” section. Do not introduce another text size. Legacy token names may remain as implementation aliases, but they must resolve to one of these five roles.

The hierarchy is intentionally narrow. Labels may use uppercase and restrained tracking, but remain the Supporting size. Create emphasis with spacing, color roles, borders, and placement, never by adding another text style.

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

###Case-study spacing system

All case studies use one compact spacing system. Shared components must use these tokens instead of local one-off values or fluid spacing clamps.

Apply the scale consistently:

• Standard article sections use 72px vertical padding. On screens below 900px, sections use 32px.
• Section headings sit 16px above their content. Kickers and labels sit 8px above the heading they identify.
• Default content stacks use a 16px gap. Related cards and media groups use a 12px gap.
• Standard cards, callouts, table groups, testimonials, and comparison panels use 16px internal padding.
• Compact summary cards use 12px padding with an 8px internal gap.
• Media shells use 8px padding. Captions and related evidence use a 12px gap.
• Metadata uses 16px vertical padding and 16px between columns. The hero ends with 32px of separation.
• Do not introduce 18px, 20px, 28px, 36px, 40px, 56px, or 64px spacing inside shared case-study components. Choose the nearest case-study token instead.
• Preserve 44px minimum touch targets without using that value as visual spacing.

##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.
• Product introductions may use a compact two-column body with copy on the left and one authentic product image in a slightly wider right column when its native ratio helps balance the column heights. Keep the image at its natural aspect ratio without stretching or letterboxing. Use the standard media-card shell and caption treatment, align both columns at the top, and stack the image after the copy below 900px. Keep supporting rationale such as “Why IDE?” in normal editorial text without a box. The image caption may state one concise adoption or outcome takeaway.
• The Noteweave discovery introduction uses one concise body paragraph with no diagram, cards, emojis, or prototype image. Place the supporting workflow matrix full-width below the copy. On wide screens, style it as a conventional editorial table: one continuous warm-neutral rounded header band across all five stages, left-aligned functional line icons stacked above left-aligned stage names, plain body rows, and subtle full-width horizontal separators. Align header and body content to the same column inset. Synchronize each information row across all five columns so matching rows have equal height. The matrix must never scroll horizontally: use five columns on wide screens, then separate each stage into a compact two-column or one-column responsive group below 1100px and 560px.
• The Noteweave Outcome section uses the shared equal-height two-column media layout: outcome copy on the left and a bottom-aligned 2:1 crop of the team photograph filling the right column, stacking the photograph below the copy under 900px. Use the caption “Team presenting noteweave at Google.”

###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.
• Never use em dashes (Unicode U+2014) in user-facing copy. Replace them with a colon, comma, period, parentheses, or a standard hyphen, depending on the sentence.
• Before shipping content, search the user-facing source and rendered output for U+2014, —, —, and —.

##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.
9. Contains no em dashes or HTML em-dash entities in user-facing content.